added responsive conditional

agusmakmun · Jun 10, 2016 · 79291a2 · 79291a2
1 parent b5306e0
commit 79291a2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -105,6 +105,7 @@
     <body>
         <div class="container">
             <div class="col-sm-3">
+              <div class="fixed-condition">
                 <a href="/"><img id="about" src="/static/img/avatar.jpg" height="75px" width="75px" /></a>
                 <h1 class="author-name">{{ site.author }}</h1>
                 {% if site.about %}
@@ -132,6 +133,7 @@ <h1 class="author-name">{{ site.author }}</h1>
                 {% for i in site.urls %}
                     &nbsp;&raquo; <a class="about" href="{{ i.url }}">{{ i.text }}</a><br />
                 {% endfor %}
+              </div><!-- end /.fixed-condition -->
             </div>
 
             <div class="col-sm-8 col-offset-1">

diff --git a/static/css/main.css b/static/css/main.css
@@ -1,7 +1,5 @@
 /**
- * //////////////
  * Master styling
- * //////////////
  */
 body {
     font-family: "Roboto Condensed", Arial, sans-serif;
@@ -18,18 +16,9 @@ hr {
     border-top: 1px solid #F7F1F1;
     border-bottom: 1px solid #fff;
 }
-/*
-@media (min-width: 768px) {
-  .container {
-    max-width: 780px;
-  }
-}
-*/
 
 /**
- * //////////////////////////
  * Font and link declarations
- * //////////////////////////
  */
 span.time, span.categories {
     color: #ADADAD;
@@ -145,9 +134,7 @@ div.right .post ul {
 }
 
 /**
- * ///////////////////////////////////
  * Left column aka nav bar formatting
- * ///////////////////////////////////
  */
 div.col-sm-3 {
         margin-top: 100px;
@@ -216,4 +203,17 @@ div.col-sm-3 img#about {
     border-top: 1px solid #f0f0f0;
     border-bottom: 1px solid #f0f0f0;
 }
-.post-content img, .content img {max-width: 100%}
+.post-content img, .content img {max-width: 100%}
+
+/* Responsive Conditional */
+@media (min-width: 1024px) {
+    .fixed-condition {
+        position: fixed;
+        max-width: 255px;
+    }
+}
+@media (max-width: 768px) {
+    div.col-sm-3 {
+        margin-top: 30px;
+    }
+}