Nicer CSS for main page.

[static.git] / content / media / css / base.scss

diff --git a/content/media/css/base.scss b/content/media/css/base.scss
index c2b0f06..8bac975 100644 (file)
--- a/content/media/css/base.scss
+++ b/content/media/css/base.scss
@@ -98,8 +98,15 @@ section.home-section {
 
     a {
         display: block;
+
+        &:hover {
+            background: #f4f4f4;
+            text-decoration: none;
+        }
+    }
+
+    a.list-item {
         padding: .25em .5em .25em .5em;
-        color: black;
         position:relative;
         font-size: 1.2rem;
 
@@ -114,10 +121,6 @@ section.home-section {
             }
         }
 
-        &:hover {
-            background: #f4f4f4;
-            text-decoration: none;
-        }
         .author {
             display: block;
             font-size: 1rem;
@@ -143,8 +146,19 @@ section.home-section {
 
 footer {
     border-top: 1px solid #fff;
-    padding: 1em 0;
-    margin-top: 3em;
+    padding: 1rem 0;
+    margin-top: 0;
+    font-size: .75rem;
+
+    .footer-item {
+        padding: .5rem;
+
+        @media screen and (min-width: 24em) {
+            display: inline-block;
+            vertical-align: top;
+            width: 15rem;
+        }
+    }
 }
 
 nav {
@@ -178,60 +192,91 @@ nav {
 
 #logos {
     margin: 0;
-    padding: 1.5rem 0 1rem;
+    padding: .5rem 0 .5rem;
+    text-align: left;
     section {
         display: inline-block;
         h1 {
+            text-align: left;
             font-size: .8rem;
             font-weight: normal;
-            margin: 0 0 .7rem 1.25rem;
+            margin: 0 0 .5rem 1rem;
+
+            @media screen and (min-width: 42em) {
+                margin-left: 2rem;
+            }
+            @media screen and (min-width: 48em) {
+                margin-left: 3rem;
+            }
         }
         a {
             display: inline-block;
-            margin-left: 1.23rem;
-            margin-bottom: 1rem;
+            margin-left: 1rem;
+            margin-bottom: .5rem;
+
+            @media screen and (min-width: 42em) {
+                margin-left: 2rem;
+            }
+            @media screen and (min-width: 48em) {
+                margin-left: 3rem;
+            }
         }
         img {
-            width: 8.125rem;
+            width: 6rem;
             vertical-align: middle;
         }
     }
 }
 
+#toc {
+    margin-bottom: 3rem;
+}
 
 body#index {
     #body {
-        display: -webkit-box;
-        display: -moz-box;
-        display: box;
-        -webkit-box-orient: vertical;
-        -moz-box-orient: vertical;
-        box-orient: vertical;
-
         @media screen and (min-width: 36em) {
-            display: block;
-        }
-
-
-        header {
-            -webkit-box-ordinal-group: 1;
-            -moz-box-ordinal-group: 1;
-            box-ordinal-group: 1;
-        }
-        #logos {
-            -webkit-box-ordinal-group: 4;
-            -moz-box-ordinal-group: 4;
-            box-ordinal-group: 4;
-        }
-        .home-section {
-            -webkit-box-ordinal-group: 3;
-            -moz-box-ordinal-group: 3;
-            box-ordinal-group: 3;
-        }
-        footer {
-            -webkit-box-ordinal-group: 100;
-            -moz-box-ordinal-group: 100;
-            box-ordinal-group: 100;
+            display: -webkit-box;
+            display: -moz-box;
+            display: -ms-flexbox;
+            display: -webkit-flex;
+            display: flex;
+
+            -webkit-box-orient: vertical;
+            -moz-box-orient: vertical;
+            -webkit-box-direction: normal;
+            -moz-box-direction: normal;
+            -webkit-flex-direction: column;
+            -ms-flex-direction: column;
+            flex-direction: column;
+
+            #logos {
+                -webkit-box-ordinal-group: 1;
+                -moz-box-ordinal-group: 1;
+                -ms-flex-order: 1;
+                -webkit-order: 1;
+                order: 1;
+            }
+            header {
+                -webkit-box-ordinal-group: 2;
+                -moz-box-ordinal-group: 2;
+                -ms-flex-order: 2;
+                -webkit-order: 2;
+                order: 2;
+            }
+            #toc {
+                -webkit-box-ordinal-group: 3;
+                -moz-box-ordinal-group: 3;
+                -ms-flex-order: 3;
+                -webkit-order: 3;
+                order: 3;
+            }
+            footer {
+                -webkit-box-ordinal-group: 100;
+                -moz-box-ordinal-group: 100;
+                -ms-flex-order: 100;
+                -webkit-order: 100;
+                order: 100;
+            }
         }
     }
 }
\ No newline at end of file