From 0b75044deef23118de94207a56a6b861dc4c8486 Mon Sep 17 00:00:00 2001
From: Nishanth Shanmugham <nishanth.gerrard@gmail.com>
Date: Sat, 5 Sep 2015 08:51:48 -0500
Subject: [PATCH] Add img css

* Create util file
* Add screen size helpers
---
 main.less           | 16 +++++-----------
 static/css/main.css | 16 ++++++++++++++++
 util.less           | 24 ++++++++++++++++++++++++
 3 files changed, 45 insertions(+), 11 deletions(-)
 create mode 100644 util.less

diff --git a/main.less b/main.less
index 7ee2611..172c735 100644
--- a/main.less
+++ b/main.less
@@ -64,17 +64,7 @@
 
 // Slap-on utils
 
-.dark {
-    color: @black !important;
-}
-
-.light {
-    color: @gray !important;
-}
-
-.accent {
-    color: @accent !important;
-}
+@import 'util'
 
 // General styles
 
@@ -503,4 +493,8 @@ a {
     color: @accent;
 }
 
+img {
+    width: 100%;
+}
+
 @import 'markdown';
diff --git a/static/css/main.css b/static/css/main.css
index ff7d511..553e003 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -11,6 +11,19 @@
 .accent {
   color: #2eaf5e !important;
 }
+@media (min-width: 550px) {
+  .small-screens-only {
+    display: none;
+  }
+}
+.large-screens-only {
+  display: none;
+}
+@media (min-width: 550px) {
+  .large-screens-only {
+    display: initial;
+  }
+}
 *,
 *:before,
 *:after {
@@ -462,6 +475,9 @@ body {
 a {
   color: #2eaf5e;
 }
+img {
+  width: 100%;
+}
 .section.main .content .markdown h1,
 .section.main .content .markdown h2,
 .section.main .content .markdown h3,
diff --git a/util.less b/util.less
new file mode 100644
index 0000000..667c03e
--- /dev/null
+++ b/util.less
@@ -0,0 +1,24 @@
+.dark {
+    color: @black !important;
+}
+
+.light {
+    color: @gray !important;
+}
+
+.accent {
+    color: @accent !important;
+}
+
+.small-screens-only {
+    @media (min-width: 550px) {
+        display: none;
+    }
+}
+
+.large-screens-only {
+    display: none;
+    @media (min-width: 550px) {
+        display: initial;
+    }
+}