Responsive tweaks to mixu-book

mixu · Sep 25, 2015 · 7787bf0 · 7787bf0
1 parent bb183d5
commit 7787bf0
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 31 deletions.
diff --git a/layouts/mixu-book/assets/style.css b/layouts/mixu-book/assets/style.css
@@ -109,28 +109,12 @@ div.clear hr {
 #content {
   font-size: 16px;
   line-height: 26px;
-  /* max-width: 540px; Optimal formula = 30 * font size in px. */
 
-  /* text-align: justify; */
   margin-bottom: 0;
   padding-bottom: 20px;
   overflow: visible;
 }
 
-/* Date widget */
-#content small{
-  font-size: 10px;
-  color: #CCC;
-  padding: 10px 20px 5px 0px;
-  float: left;
-  text-transform: uppercase;
-}
-#content span.date {
-  font-size: 32px;
-  line-height: 0.8;
-  color: #C00;
-}
-
 /* Post titles */
 
 .post h1 {
@@ -154,11 +138,11 @@ div.clear hr {
 .post p,
 .post ul,
 .post ol {
-  max-width: 580px;
+  max-width: 36em;
 }
 
 .post ul {
-list-style-type: disc;
+  list-style-type: disc;
 }
 
 .post ul, .post ol {
@@ -179,10 +163,10 @@ list-style-type: disc;
   background: #F8F8F8;
   border: 1px solid #E8E8E8;
   border-width: 1px 1px 1px 6px;
-  margin: -0.5em 0 1.1em;
+  margin: -1em 0 1em 0;
 }
 
-.post pre, .post table {
+.post table {
   margin: -1em 0 1em 0;
   padding: .5em 1em;
   background: #F6F6F6 repeat 0 0;
@@ -206,9 +190,11 @@ list-style-type: disc;
   margin-bottom: 1.25em;
 }
 
-.post p tt, .post p code {
-  background: ghostWhite;
-  border: 1px solid #DEDEDE;
+.post p tt,
+.post p code,
+.post ul code,
+.post ol code {
+  background: #eee;
   padding: 0 0.2em;
 }
 
@@ -231,7 +217,20 @@ list-style-type: disc;
 table { width: 100%; border-collapse: collapse; border-spacing: 0; }
 table caption { text-align: center; }
 table th { font-weight: bold; }
-table th, table td { padding: 0.3em; vertical-align: top; border: solid 0.1em; }
+table th, table td {
+  padding: 0.3em;
+  vertical-align: top;
+  border-top: 1px solid #ddd;
+}
+
+table>thead:first-child>tr:first-child>td,
+table>thead:first-child>tr:first-child>th {
+  border-top: 0;
+}
+
+.post table>tbody>tr:nth-of-type(odd) {
+  background-color: #f9f9f9;
+}
 
 div.summary {
   border-top: 3px solid #EEE;

diff --git a/layouts/mixu-book/page.html b/layouts/mixu-book/page.html
@@ -4,6 +4,7 @@
     <title>{{title}}</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <link href='http://fonts.googleapis.com/css?family=Andika|Droid+Sans+Mono|Cantarell:400,700,400italic' rel='stylesheet' type='text/css' />
     <script src="{{asset 'jquery-1.6.1.min.js'}}"></script>
     <link type="text/css" rel="stylesheet" href="{{asset 'style.css'}}"/>
@@ -24,18 +25,14 @@
       <hr>
     </div>
 
-     <!-- Main -->
-
     <div id="main">
       <div id="container">
         <div id="content" class="post">
+         {{~> content}}
 
-        {{~> content}}
-
-        <div id="bottom_navi">
+         <div id="bottom_navi">
           <a href="{{prev}}.html"> &lt; &lt; Previous Chapter</a> | <a href="{{next}}.html">Next Chapter &gt; &gt;</a>
-        </div>
-
+         </div>
         </div>
       </div>
     </div>