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,175 +48,229 @@ ol {
 	line-height: 1.6em;
 }
 
-/* *** Layout *** */
+#sidebar ul {
+  line-height: 1.8em;
+  list-style: none;
+}
 
-#container { 
+#topmenu ul li {
-	background: url(../images/spill.gif) no-repeat top right;
+  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 { 
   	margin: 0 auto;
   	text-align: left;
   	width: 780px;
-} 
+  } 
   
-#header { 
+  #header { 
   	background: url(../images/header.gif) no-repeat;
   	height: 109px;
   	padding: 0 10px 0 20px;
-} 
+  } 
   
-#topMenu {
+  #topMenu {
   	background: url(../images/menubar.gif) no-repeat;
   	height: 48px;
-}
+  }
   
-#sidebar {
+  #sidebar {
   	float: right;
   	padding: 20px 30px 10px 0;
   	text-align: right;
   	width: 150px; 
-}
+  }
   
-#mainContent {
+  #mainContent {
   	background: url(../images/body.gif) repeat-y;
   	padding: 20px 250px 10px 40px;
-} 
+  } 
   
-#footer { 
+  #footer { 
   	background: url(../images/bottom.gif) no-repeat;
   	font-size: 14px;
   	height: 70px;
   	padding: 0 10px 0 20px;
-} 
+  } 
   
-/* *** Header Styles *** */
+  /* *** Header Styles *** */
   
-#header h1 {
+  #header h1 {
   	font-size: 48px;
   	font-weight: normal;
   	padding: 20px 0 0 170px;
-}
+  }
   
-#header h2 {
+  #header h2 {
   	font-size: 20px;
   	font-weight: normal;
   	text-align: right;
-}
+  }
   
-#header a:hover {
+  #header a:hover {
   	background: none;
-}
+  }
 
-/* *** Top Menu Styles *** */
+  /* *** Top Menu Styles *** */
   
-#topMenu ul {
+  #topMenu ul {
   	font-size: 26px;
   	line-height: 1em;
-	list-style: none;
   	padding: 14px 30px 0 0;
   	text-align: right;
-}
+  }
   
-#topMenu li {
+  #topMenu li {
   	display: inline;
-}
+  }
   
-#topMenu a:hover {
+  #topMenu a:hover {
   	background: url(../images/hr.gif) center center no-repeat;
-}
+  }
   
-/* *** Blog Styles *** */
+  /* *** Blog Styles *** */
   
-.blogItem {
+  .blogItem {
   	padding-bottom: 20px;
-}
+  }
   
-.blogItem h2,
+  .blogItem h2,
-.blogItem h3 {
+  .blogItem h3 {
   	font-weight: normal;
-}
+  }
   
-.blogItem h2 a:hover,
+  .blogItem h2 a:hover,
-.blogItem h3 a:hover {
+  .blogItem h3 a:hover {
   	background: none;
   	text-decoration: underline;
-}
+  }
   
-.blogItem h2 {
+  .blogItem h2 {
   	font-size: 24px;
-}
+  }
   
-.blogItem h3 {
+  .blogItem h3 {
   	background: url(../images/hr.gif) bottom left no-repeat;
   	font-size: 18px;
   	padding-bottom: 6px;
-}
+  }
   
-.blogItem h3.blogMeta {
+  .blogItem h3.blogMeta {
   	background-position: top left;
   	padding: 6px 0 0 0;
   	text-align: right;
-}
+  }
   
-/* *** Sidebar Styles *** */
+  /* *** Sidebar Styles *** */
   
-#sidebar h3 {
+  #sidebar h3 {
   	font-size: 24px;
   	font-weight: normal;
-}
+  }
   
-#sidebar ul {
+  #sidebar ul {
   	line-height: 1.8em;
   	list-style: none;
   	padding-bottom: 20px;
-}
+  }
   
-#sidebar ul a {
+  #sidebar ul a {
   	text-decoration: none;
-}
+  }
   
-/* *** Comments Styles *** */
+  /* *** Comments Styles *** */
   
-#comments {
+  #comments {
   	margin: 20px 0 0 20px;
-}
+  }
   
-#comments li {
+  #comments li {
   	margin-bottom: 10px;
-}
+  }
   
-.commentSep {
+  .commentSep {
   	background: url(../images/hr.gif) bottom left no-repeat;
-}
+  }
   
-/* *** Footer Styles *** */
+  /* *** Footer Styles *** */
   
-#footer p {
+  #footer p {
   	padding: 30px 0 0 0;
   	text-align: center;
-}
+  }
   
-.floatR, .align-right {
+  .floatR, .align-right {
   	float: right;
   	margin-left: 8px;
-}
+  }
   
-.floatL, .align-left { 
+  .floatL, .align-left { 
   	float: left;
   	margin-right: 8px;
-}
+  }
   
-.clearfloat {
+  .clearfloat {
   	clear:both;
       height:0;
       font-size: 1px;
       line-height: 0px;
-}
+  }
-
-div.figure img {
-  max-width: 100%;
-}
   
   
-#site-notes {
+  #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>