Commits

Vlad Riscutia committed 716bfde

Style tweaks. Adjust sidebar height on window resize

  • Participants
  • Parent commits bb53710
  • Branches html5

Comments (0)

Files changed (2)

tinkerer/themes/modern5/layout.html

 
     {# Adjusts document height if sidebar is taller #}
     <script type="text/javascript">
-        $(document).ready(function() {
+        function adjust() {
             var content = document.getElementsByClassName("content")[0];
             var sidebar = document.getElementsByClassName("sidebar")[0];
 
             {
                 sidebar.style.minHeight = content.offsetHeight + "px";
             }
-        });
+        }
+        
+        $(document).ready(adjust);
+        $(window).resize(adjust);
     </script>
 {% endblock %}

tinkerer/themes/modern5/static/modern5.css_t

 article.document h3 { font-size: 1.2em; }
 article.document p { line-height: 1.5; }
 
-div.related { font-size: 0.8em; }
-div.postmeta { font-size: 0.9em; }
-
 aside.sidebar h1 { font-family: {{ serif_font }}; font-size: 1.2em; }
 aside.sidebar { font-size: 0.9em; }
 
 nav { padding: 10px 0; }
 
 div.documentwrapper { padding: 0 40px 20px; }
-div.related { padding: 20px 0 0; }
-article.document { padding: 20px 0; }
+div.related { padding: 40px 0 0; }
+article.document { padding: 40px 0 20px 0; }
 article.document h1, h2, h3 { margin-top: 0; }
 
 div.post_separator { margin: 20px 0; }
 
 aside.sidebar h1 { margin-top: 0; }
-aside.sidebar div.widget { padding: 20px 40px; }
+aside.sidebar div.widget { margin: 40px 0; padding: 0 20px 0 40px; }
+
+div.archive_link { padding-top: 20px; text-align: center; }
 
 footer { padding: 10px 40px; }
 
 @media only screen and (min-width: 480px) {
     nav ul { padding: 0; }
-    ul.main-navigation { margin-right: 333px; }
-    nav li { margin: 40px 0; padding: 0 40px; }
-    nav div.quicklinks li { padding-left: 10px; padding-right: 0; }
+    nav li { margin: 40px 0; }
+    nav a { padding: 0 40px; }
+    nav ul.quicklinks a { padding: 0; }
+    nav ul.quicklinks { margin-right: 40px; }
+    nav ul.quicklinks li { padding-left: 10px; padding-right: 0; }
+}
+
+@media only screen and (min-width: 768px) {
+    ul.main-navigation { margin-right: 160px; }
+
+    footer { margin-bottom: 20px; }
 }
 
 /* Palette */
 {%- set theme_color = "#074e78" -%}
-{%- set theme_color_light = "#b5cad6" -%}
+{%- set theme_color_light = "#93a4ad" -%}
 {%- set theme_color_dark = "#021724" -%}
 
 {%- set paper_color = "#f8fafb" -%}
 {%- set sidebar_color = "#e6edf2" -%}
 
-{%- set header_color = "#fdf1e9" -%}
+{%- set header_color = "#f8f8f8" -%}
 {%- set text_color = "#0c0501" -%}
 {%- set link_color = "#0b7dc0" -%}
 
 a:hover { color: {{ link_color }}; text-decoration: underline; }
 div.section a { color: {{ text_color }}; text-decoration: none; }
 
-div.content { background-color: {{ paper_color }}; color: {{ text_color }}; }
+div.postmeta { color: {{ theme_color_light }}; }
+div.post_separator { border-bottom: 1px dotted {{ theme_color_light }}; }
+
+div.content { background: {{ paper_color }} url('paper.png') repeat; color: {{ text_color }}; }
 aside.sidebar { background-color: {{ sidebar_color }}; }
 
 /* Effects */
 @media only screen and (min-width: 480px) {
     header { background-image: url('header.png'); background-repeat: repeat; }
 
-    div.content { background-image: url('paper.png'); background-repeat: repeat; }
-
     nav, footer {
         background: -moz-linear-gradient(top, #354550 0%, #021520 50%, #02121d 51%, #011019 100%);
         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#354550), color-stop(50%,#021520), color-stop(51%,#02121d), color-stop(100%,#011019));
         background: linear-gradient(top, #354550 0%,#021520 50%,#02121d 51%,#011019 100%);
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#354550', endColorstr='#011019',GradientType=0 );
     }
+
+    nav li { text-shadow: 0 2px 3px {{ theme_color_dark }}; }
 }
 
 @media only screen and (min-width: 768px) {
+    div#container {
+        -moz-box-shadow:    5px 5px 10px 0 #011019;
+        -webkit-box-shadow: 5px 5px 10px 0 #011019;
+        box-shadow:         5px 5px 10px 0 #011019; 
+    }
+
+    nav li + li > a { border-left: 1px solid {{ theme_color_dark }}; }
+
+    nav li + li { border-left: 1px solid {{ theme_color_light }}; }
+
     div.documentwrapper { border-left: 1px solid #cfd5da; }
     aside.sidebar { border-left: 1px solid #cfd5da; border-right: 1px solid #cfd5da; }
-
-    footer { margin-bottom: 20px; }
-
-    footer {
-        -moz-border-radius-bottomleft: 10px;
-        -moz-border-radius-bottomright: 10px;
-        -webkit-border-bottom-left-radius: 10px;
-        -webkit-border-bottom-right-radius: 10px;
-        -o-border-bottom-left-radius: 10px;
-        -o-border-bottom-right-radius: 10px;
-        -ms-border-bottom-left-radius: 10px;
-        -ms-border-bottom-right-radius: 10px;
-        border-bottom-left-radius: 10px;
-        border-bottom-right-radius: 10px; 
-    }
 }
-
-div.post_separator { border-bottom: 1px dashed black; }