style

themes/waterspill-en/static/css/style.css

@@ -1,13 +1,10 @@
-* { margin: 0; padding: 0; }
 dd { margin-left: 23px }
 
 /* *** General Styles *** */
-
 body  {
-	background: url(../images/background.jpg);
+	background: url(../images/concrete.webp);
 	color: #293331;
 	font: 16px Georgia, "Times New Roman", Times, serif;
-	text-align: center;
 }
 
 pre { font-size:12px }
@@ -51,10 +48,27 @@ ol {
 	line-height: 1.6em;
 }
 
-/* *** Layout *** */
+#sidebar ul {
+  line-height: 1.8em;
+  list-style: none;
+}
 
+#topmenu ul li {
+  list-style: none;
+}
+
+div.figure img {
+  max-width: 90%;
+}
+  
+  
+@media screen and (min-width: 900px) {
+  * { margin: 0; padding: 0; }
+  body {
+    text-align: center;
+  }
+  /* *** Layout *** */
   #container { 
-	background: url(../images/spill.gif) no-repeat top right;
   	margin: 0 auto;
   	text-align: left;
   	width: 780px;
@@ -113,7 +127,6 @@ ol {
   #topMenu ul {
   	font-size: 26px;
   	line-height: 1em;
-	list-style: none;
   	padding: 14px 30px 0 0;
   	text-align: right;
   }
@@ -214,12 +227,50 @@ ol {
       line-height: 0px;
   }
   
-div.figure img {
-  max-width: 100%;
-}
-
   
   #site-notes {
     margin-top: 3rem;
   
   }
+  #sidebar-mobile {
+    display:none;
+  }
+}
+
+
+@media screen and (max-width: 900px) {
+  body {
+    padding:1rem;
+  }
+
+  h2 {
+  	background: url(../images/hr.gif) top center no-repeat;
+    padding-top: 1rem;
+  }
+
+  #sidebar {
+    display:none;
+  }
+
+  #mainContent dl {
+  }
+
+  #mainContent dt {
+    font-size: 75%;
+  }
+
+  #sidebar-mobile {
+  	background: url(../images/hr.gif) top center no-repeat;
+    padding-top: 1rem;
+  }
+
+  #sidebar-mobile ul {
+    line-height: 1.8em;
+    list-style: none;
+  }
+  
+  #sidebar-mobile ul li {
+    display:inline;
+  }
+}
+

themes/waterspill-en/templates/base.html

@@ -31,17 +31,13 @@
   </div><!-- end #header -->
   
   <div id="topMenu">
-  
     <ul>
         {% for item in BEFORE_MENU %}
           <li><a href="{{ item.url }}">{{ item.name }}</li>
-          <li>&ndash;</li>
         {% endfor %}
     	<li><a href="{{ SITEURL }}/index.html">Home</a></li>
-        <li>&ndash;</li>
         <li><a href="{{ SITEURL }}/archives.html">Archives</a></li>
         {% for item in AFTER_MENU %}
-          <li>&ndash;</li>
           <li><a href="{{ item.url }}">{{ item.name }}</li>
         {% endfor %}
         
@@ -124,6 +120,69 @@
     <p>Proudly powered by <a href="http://getpelican.com">pelican</a>, which takes great advantages of <a href="http://python.org">python</a>.
   </div><!-- end #footer -->
 
+ <div id="sidebar-mobile">
+    <ul>
+  	{% if DISPLAY_PAGES_ON_MENU %}
+	<li>
+	    <h3>Pages</h3>
+	    <ul>
+            {% for page in pages %}
+                <li><a href="{{ SITEURL }}/{{ page.url }}">{{ page.title }}</a></li>
+            {% endfor %}
+	    </ul>
+	</li>
+        {% endif %}
+        {% if LINKS %}
+	<li>
+		<h3>External Links</h3>
+		<ul>
+		{% for name, link in LINKS %}
+      <li><a href="{{ link }}">{{ name }}</a></li>
+    {% endfor %}
+		</ul>
+	</li>
+	{% endif %}
+  	{% if not SUPPRESS_CATEGORIES_ON_MENU %}
+	<li>
+            <h3>Categories</h3>
+            <ul>
+	        {% for cat, null in categories %}
+		     <li {% if cat == category %}class="active"{% endif %}><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
+	        {% endfor %}
+	    </ul>
+	</li>
+        {% endif %}
+	{% if SOCIAL %}
+        <li>
+                <h3>Social</h3>
+                <ul>
+                    {% if FEED_ATOM %}
+                    <li><a href="{{ SITEURL }}/{{ FEED_ATOM }}" rel="alternate">Atom feed</a></li>
+                    {% endif %}
+                    {% if FEED_RSS %}
+                    <li><a href="{{ SITEURL }}/{{ FEED_RSS }}" rel="alternate">Flux Rss</a></li>
+                    {% endif %}
+                {% for name, link in SOCIAL %}
+                    <li><a href="{{ link }}">{{ name }}</a></li>
+                {% endfor %}
+                </ul>
+        </li><!-- /.social -->
+        {% endif %}
+  	{% if tags %}
+        <li>
+            <h3>Tags</h3>
+            <ul>
+            {% for tag, articles in tags %}
+                    <li><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a></li>
+            {% endfor %}
+            </ul>
+        </li>
+        {% endif %}
+    </ul>
+  </div><!-- end #sidebar -->
+
+
+
 </div><!-- end #container -->
 {% include 'analytics.html' %}
 </body>