Nicer structure on main.

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

diff --git a/content/media/css/base.scss b/content/media/css/base.scss
index c2b0f06..4d30ad2 100644 (file)
--- a/content/media/css/base.scss
+++ b/content/media/css/base.scss
@@ -71,11 +71,6 @@ header {
             float: right;
             text-align: right;
         }
-
-        .author {
-            font-size: 1rem;
-            font-weight: normal;
-        }
     }
 
     nav {
@@ -98,29 +93,38 @@ section.home-section {
 
     a {
         display: block;
-        padding: .25em .5em .25em .5em;
-        color: black;
-        position:relative;
-        font-size: 1.2rem;
-
-        @media screen and (min-width: 20em) {
-            padding-left: 2.7rem;
-            font-size: 1.3rem;
-
-            &:before {
-                content: '\bb';
-                position: absolute;
-                left: 1rem;
-            }
-        }
 
         &:hover {
             background: #f4f4f4;
             text-decoration: none;
         }
-        .author {
-            display: block;
-            font-size: 1rem;
+    }
+
+    .link-list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        li {
+            margin: 0;
+            padding: 0;
+
+            a {
+                padding: .25em .5em .25em .5em;
+                position:relative;
+                font-size: 1.2rem;
+
+                @media screen and (min-width: 20em) {
+                    padding-left: 2.7rem;
+                    font-size: 1.3rem;
+
+                    &:before {
+                        content: '\bb';
+                        position: absolute;
+                        left: 1rem;
+                    }
+                }
+            }
         }
     }
 }
@@ -143,8 +147,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 +193,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