Update styling to address issues in cobalt-org#20

- Add some table styling - Make columns slightly wider - Reduce size of <hr> in the sidebar
gchp · Feb 13, 2018 · 1d5038b · 1d5038b
1 parent c8bef47
commit 1d5038b
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 7 deletions.
diff --git a/_layouts/docs.liquid b/_layouts/docs.liquid
@@ -18,7 +18,7 @@
               <li><a {% if page.data.route == "directory"%}class="active"{%endif%} href="/docs/directory.html">Directory Structure</a></li>
               <li><a {% if page.data.route == "config"%}class="active"{%endif%} href="/docs/config.html">Configuration</a></li>
             </ul>
-            <hr>
+            <hr align="left">
             <p>Content</p>
             <ul>
               <li><a {% if page.data.route == "pages"%}class="active"{%endif%} href="/docs/pages.html">Pages</a></li>
@@ -30,7 +30,7 @@
               <li><a {% if page.data.route == "assets"%}class="active"{%endif%} href="/docs/assets.html">Assets</a></li>
               <li><a {% if page.data.route == "data"%}class="active"{%endif%} href="/docs/data.html">Data files</a></li>
             </ul>
-            <hr>
+            <hr align="left">
             <p>Misc</p>
             <ul>
               <li><a {% if page.data.route == "rss"%}class="active"{%endif%} href="/docs/rss.html">RSS</a></li>

diff --git a/public/css/styles.css b/public/css/styles.css
@@ -31,7 +31,7 @@
 
   --font-stack: helvetica, arial, sans-serif;
 
-  --breakpoint: 41em;
+  --breakpoint: 45em;
 }
 
 html {
@@ -55,6 +55,11 @@ a {
   color: var(--orange);
 }
 
+hr {
+    color: #ccc;
+    width: 75%;
+}
+
 header {
   text-align: center;
   padding-top: 1em;
@@ -112,7 +117,7 @@ header nav .button > span {
 @media (min-width: 41em) {
   header .inner {
     display: flex;
-    justtify-content: center;
+    justify-content: center;
   }
 
   header .primary {
@@ -200,11 +205,14 @@ section.docs aside ul li a:focus {
   }
 
   section.docs aside {
-    flex: 0 1 30%;
+    order: 1;
+    flex: 1;
+    flex-basis: auto;
   }
 
   section.docs main {
-    flex: 0 1 70%;
+    order: 1;
+    flex: 5;
   }
 }
 
@@ -304,7 +312,7 @@ pre code {
   background: var(--med-grey);
 }
 
-@media (min-width: 41em) {
+@media (min-width: 45em) {
   .columns {
     display: flex;
   }
@@ -333,3 +341,22 @@ footer p {
   margin: 0;
   padding: 1em 0;
 }
+
+table {
+    border-collapse: collapse;
+}
+
+table thead {
+    background-color: var(--blue);
+    color: var(--white);
+}
+
+table thead th {
+    border: 1px solid var(--dark-blue);
+    padding: 0.5em;
+}
+
+table tbody td {
+    border: 1px solid #ccc;
+    padding: 0.5em;
+}