Update containers, pull in latest from Poole

poole · Dec 30, 2013 · f2def9f · f2def9f
1 parent f4b755a
commit f2def9f
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 67 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -10,17 +10,18 @@
     <!-- Wrap is the content to shift when toggling the sidebar. We wrap the
          content to avoid any CSS collisions with our real content. -->
     <div class="wrap">
-
-      <div class="container content">
-        <div class="masthead">
+      <div class="masthead">
+        <div class="container">
           <label for="sidebar-checkbox" class="sidebar-toggle"></label>
 
           <h3 class="masthead-title">
             <a href="/" title="Home">{{ site.title }}</a>
             <small>{{ site.tagline }}</small>
           </h3>
         </div>
+      </div>
 
+      <div class="container content">
         {{ content }}
       </div>
     </div>

diff --git a/public/css/lanyon.css b/public/css/lanyon.css
@@ -78,17 +78,37 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 
+/*
+ * Container
+ *
+ * Center the page content.
+ */
+
+.container {
+  max-width: 28rem;
+}
+@media (min-width: 38rem) {
+  .container {
+    max-width: 32rem;
+  }
+}
+@media (min-width: 56rem) {
+  .container {
+    max-width: 38rem;
+  }
+}
+
+
 /*
  * Masthead
  *
  * Super small header above the content for site name and short description.
  */
 
-@media (max-width: 30rem) {
-  .masthead {
-    margin-left: -1rem;
-    margin-right: -1rem;
-  }
+.masthead {
+  border-bottom: 1px solid #eee;
+}
+@media (max-width: 48rem) {
   .masthead-title {
     text-align: center;
   }
@@ -125,7 +145,6 @@ h1, h2, h3, h4, h5, h6 {
   font-size: .875rem; /* 15px */
   color: rgba(255,255,255,.6);
   background-color: #202020;
-
   -webkit-transform: translate3d(-14rem, 0, 0);
      -moz-transform: translate3d(-14rem, 0, 0);
       -ms-transform: translate3d(-14rem, 0, 0);
@@ -222,14 +241,6 @@ a.sidebar-nav-item:focus {
   background-color: #505050;
 }
 
-/* Janky fix for iOS which screws up the height of the toggle's bars, but *only*
- * at 480px. We correct the excess padding as we scale it up above 480px. */
-@media (min-width: 30rem) {
-  .sidebar-toggle:before {
-    padding-bottom: .2rem;
-  }
-}
-
 @media (min-width: 30.1rem) {
   .sidebar-toggle {
     position: fixed;
@@ -372,36 +383,23 @@ a.pagination-item:hover {
  * on the right side.
  */
 
-.layout-reverse .sidebar-toggle {
+.layout-reverse .sidebar {
   left: auto;
   right: 0;
+  -webkit-transform: translate3d(14rem, 0, 0);
+     -moz-transform: translate3d(14rem, 0, 0);
+      -ms-transform: translate3d(14rem, 0, 0);
+          transform: translate3d(14rem, 0, 0);
 }
-
-@media (min-width: 48rem) {
-  .layout-reverse .sidebar {
-    left: auto;
-    right: -14rem;
-    transition-property: right;
-  }
-  .layout-reverse .sidebar-toggle {
-    left: auto;
-    right: 1rem;
-  }
-  .layout-reverse .wrap {
-    transition-property: right;
-  }
-  .layout-reverse #sidebar-checkbox:checked + .sidebar {
-    left: auto;
-    right: 0;
-  }
-  .layout-reverse #sidebar-checkbox:checked ~ .wrap {
-    left: auto;
-    right: 14rem;
-  }
-  .layout-reverse #sidebar-checkbox:checked ~ .wrap .sidebar-toggle {
-    left: auto;
-    right: 15rem;
-  }
+.layout-reverse .sidebar-toggle {
+  left: auto;
+  right: 1rem;
+}
+.layout-reverse #sidebar-checkbox:checked ~ .wrap {
+  -webkit-transform: translate3d(-14rem, 0, 0);
+     -moz-transform: translate3d(-14rem, 0, 0);
+      -ms-transform: translate3d(-14rem, 0, 0);
+          transform: translate3d(-14rem, 0, 0);
 }
 
 

diff --git a/public/css/poole.css b/public/css/poole.css
@@ -105,16 +105,31 @@ h4, h5, h6 {
   font-size: 1rem;
 }
 
+/* Body text */
 p {
   margin-top: 0;
   margin-bottom: 1rem;
 }
 
-ul, ol {
+strong {
+  color: #303030;
+}
+
+
+/* Lists */
+ul, ol, dl {
   margin-top: 0;
   margin-bottom: 1rem;
 }
 
+dt {
+  font-weight: bold;
+}
+dd {
+  margin-bottom: .5rem;
+}
+
+/* Misc */
 hr {
   position: relative;
   margin: 1.5rem 0;
@@ -123,22 +138,18 @@ hr {
   border-bottom: 1px solid #fff;
 }
 
-strong {
-  color: #303030;
-}
-
 abbr {
-  background-color: #eee;
-  display: inline-block;
-  padding: .25em;
   font-size: 85%;
   font-weight: bold;
   color: #555;
-  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
   text-transform: uppercase;
-  border-radius: 3px;
+}
+abbr[title] {
+  cursor: help;
+  border-bottom: 1px dotted #e5e5e5;
 }
 
+/* Code */
 code,
 pre {
   font-family: Menlo, Monaco, "Courier New", monospace;
@@ -182,7 +193,7 @@ blockquote {
   padding: .5rem 1rem;
   margin: .8rem 0;
   color: #7a7a7a;
-  border-left: .25rem solid #eee;
+  border-left: .25rem solid #e5e5e5;
 }
 blockquote p:last-child {
   margin-bottom: 0;
@@ -200,6 +211,23 @@ img {
   border-radius: 5px;
 }
 
+/* Tables */
+table {
+  margin-bottom: 1rem;
+  width: 100%;
+  border: 1px solid #e5e5e5;
+  border-collapse: collapse;
+}
+td,
+th {
+  padding: .25rem .5rem;
+  border: 1px solid #e5e5e5;
+}
+tbody tr:nth-child(odd) td,
+tbody tr:nth-child(odd) th {
+  background-color: #f9f9f9;
+}
+
 
 /*
  * Custom type
@@ -235,22 +263,12 @@ img {
  */
 
 .container {
-  max-width: 28rem;
+  max-width: 38rem;
   padding-left:  1rem;
   padding-right: 1rem;
   margin-left:  auto;
   margin-right: auto;
 }
-@media (min-width: 38rem) {
-  .container {
-    max-width: 32rem;
-  }
-}
-@media (min-width: 48rem) {
-  .container {
-    max-width: 38rem;
-  }
-}
 
 
 /*
@@ -263,7 +281,6 @@ img {
   padding-top:    1rem;
   padding-bottom: 1rem;
   margin-bottom: 3rem;
-  border-bottom: 1px solid #eee;
 }
 .masthead-title {
   margin-top: 0;