tweak css

app/assets/stylesheets/common/responsive.css.scss

@@ -1,36 +1,38 @@
-/* Content */
+@import "000_vars.css.scss";
 
-/* i. e. the images in posts */
+#responsive-tag-list {
-img#image {
+  display: none;
-  /* Images in posts are called in such form:
-       @post.presenter.image_html(self)
-     I have no idea what that 'presenter' method means
-     This gives them fixed width
-     It causes window to overextend on smaller screens
-   */
-  max-width: 95%;
-  height: auto;
-  margin: auto;
 }
 
 @media screen and (max-width: 660px) {
+  #responsive-tag-list {
+    display: block;
+
+    input[type=text] {
+      width: 75%;
+    }
+  }
+
+  #saved-searches-nav {
+    display: none;
+  }
 
   #maintoggle {
     display: inline;
-    background-color: #70599A;
+    background-color: lighten($link_color, 13%);
-    padding: 0.5em 1em 0.7em 1em;
+    padding: 0.8em 1.2em 0.8em 1.2em;
     border-radius: 20% 20% 0 0;
     font-weight: bold;
     color: #fff;
-  }
 
-  #maintoggle.toggler-active {
+    &.toggler-active {
-    background-color: #D3CBE0;
+      background-color: lighten($link_color, 25%);
       color: #000;    
     }
+  }
 
   h1 {
-    font-size: 1.2em;
+    display: none;
   }
 
   input[type=text], input[type=submit] {
@@ -38,18 +40,18 @@ img#image {
   }
  
   div#page section#content {
-    margin-left: 0em;
+    margin: 0;
+    padding: 0;
   }
 
-
+  #comments h2 {
-  
+    display: none;
-/* Sidebar */
+  }
 
   #sidebar {
     display: none;
   }
 
-/* paginator */
   div.paginator {
     font-size: 16pt;
     font-weight: bold;
@@ -71,7 +73,6 @@ div.paginator {
     }
   }
 
-/* posts/index */
   article.post-preview {
     margin: 15px 0;
     width: 150px;
@@ -88,7 +89,6 @@ article.post-preview {
     }
   }
 
-/* posts/show */
   img#image {
     margin-top: 5px;
   }
@@ -112,8 +112,6 @@ div#tags {
     }
   }
 
-/* tag list */
-
   section#responsive-tag-list {
     display: block;
     h1 {
@@ -121,22 +119,13 @@ section#responsive-tag-list {
     }
   }
 
-/* comments */
-
-//Comments themselves
-
   div#page {
     div.comments-for-post div.list-of-comments article.comment div.content {
       clear: both;
-    margin-left: 0;
+      margin: 0;
-    margin: 0 0 0 0;
     }
   }
 
-  /**********************************
-  HEADER
-  ***********************************/
-
   nav {
     background: none;
     float: right;
@@ -149,29 +138,26 @@ div#page {
   }
   
   header#top menu.main {
-    background-color: #d3cbe0;
+    background-color: lighten($link_color, 25%);
-  
   }
   
   header#top menu {
     width: 100%;
   }
   
-  #logo {
-    /* There is logo? */
-  }
-  
   h1 {
+    display: block;
     font-size: 2em;
+    margin: 1em 0 0 0;
   }
   
   h2 {
     font-size: 0.825em;
-    margin-bottom: 20px;
+    margin: 1em 0 0 0;
   }
   
   header {
-    border-bottom: 5px solid #70599a;
+    border-bottom: 2px solid lighten($link_color, 13%);
     text-align: center;
     line-height: 2em;
     h1 {
@@ -179,24 +165,20 @@ div#page {
     }
   }
   
-  /* Body */
-  
   div#page {
-    margin: 0 3%;
+    margin: 0;
   }
-  
-  #posts {
-    img {
-      width: 100%;
-    }
-    article.post-preview a {
-      width: 100%;
-    }
-  }
-
 }
 
 @media screen and (max-width: 440px) {
+  #responsive-tag-list {
+    display: block;
+  }
+
+  #image {
+    max-width: 400px;
+  }
+
   body {
     width: 100%;
   }
@@ -206,48 +188,9 @@ div#page {
   }
   
   div article.post-preview {
-    max-width: 45%;
-    width: 100%;
-    height: 100%;
     overflow: visible;
   }
-  
-  input {
-    max-width: 100%;
 }
-}
-  
-/* Dashboard */
-  
-div#page {
-  div#c-moderator-dashboards {
-    div#col1 {
-      width: 100%;
-    }
-    div#col2 {
-      width: 100%;
-      clear: both;
-    }
-  }
-}
-
-/* Artist search */
-
-table.search {
-  clear: both;
-}
-
-input#search-name {
-  max-width: 100%;
-}
-
-/* Site map */
-
-div#c-static div#a-site-map section {
-  clear: both;
-}
-
-/* Warnings & notices */
 
 #tos-notice {
   display: none;