Initial work on a new web design.

2017-05-28 15:34:07 -04:00
parent 2e2c654ec9
commit 3c3f88d820
42 changed files with 784 additions and 0 deletions
--- a/public/site/2015-05/_sass/_layout.scss
+++ b/public/site/2015-05/_sass/_layout.scss
@@ -0,0 +1,138 @@
+@import url('https://fonts.googleapis.com/css?family=Rubik:300,400|Rubik+Mono+One');
+
+html, body {
+    width:                  100%;
+    height:                 100%;
+
+    font-family:            'Rubik', sans-serif;
+    font-weight:            300;
+    text-align:             justify;
+}
+body * {
+    /*outline: 1px solid rgba(255, 0, 0, 0.5);/**/
+}
+h1 {
+    margin:                 0;
+
+    font-family:            'Rubik Mono One', sans-serif;
+    font-size:              4em;
+    text-align:             center;
+}
+h2 {
+    margin:                 3em 0 2em;
+
+    font-size:              2em;
+    font-weight:            400;
+    text-align:             center;
+
+    img {
+        display:            block;
+        height:             4em;
+        margin:             auto;
+    }
+}
+h3 {
+    margin:                 2em 0 1em;
+
+    font-size:              1.5em;
+    font-weight:            400;
+}
+hr {
+    margin:                 2em -2em 1em;
+}
+a, a:link, a:visited, a:hover {
+    color:                  inherit;
+}
+q {
+    font-style:             italic;
+}
+nav {
+    display:                flex;
+
+    font-size:              1.8em;
+    font-weight:            400;
+    text-align:             center;
+
+    &>* {
+        flex:               1;
+        border:             0 solid transparent;
+        border-width:       0 0.5ex;
+
+        .popup {
+            display:        none;
+        }
+    }
+}
+header, section {
+    width:                  100%;
+    min-height:             90%;
+}
+
+header {
+    display:                flex;
+    overflow:               hidden;
+
+    background:             url('../img/shot-laptop-just-iphone.jpg') center top;
+    background-size:        cover;
+
+    flex-direction:         column;
+    justify-content:        stretch;
+    align-items:            stretch;
+
+    h1 {
+        height:             1em;
+
+        color:              white;
+        text-align:         center;
+    }
+    nav:first-child {
+        margin:             0 2em;
+
+        color:              white;
+
+        &>*:first-child {
+            text-align:     left;
+            font-variant:   small-caps;
+            font-weight:    300;
+        }
+        &>*:last-child {
+            text-align:     right;
+            font-variant:   small-caps;
+            font-weight:    300;
+        }
+    }
+    nav:last-child {
+        align-content:      space-evenly;
+
+        color:              white;
+        background: rgba(255, 255, 255, 0.1);
+
+        &>*.active, &>*:hover, &:hover>*:hover {
+            background:     rgba(255, 255, 255, 0.1);
+            border-bottom:  3px solid;
+        }
+        &>*, &:hover>* {
+            transition:     all 0.3s;
+            background:     rgba(255, 255, 255, 0.0);
+            border-bottom:  3px solid transparent;
+            border-radius:  6px 6px 0 0;
+        }
+    }
+}
+section {
+    box-sizing:             border-box;
+    padding:                3em 100px;
+
+    font-size:              1.2em;
+}
+.flex-auto {
+    flex:                   auto;
+}
+.item_toggler {
+    .toggle_item {
+        display:            none;
+    }
+    input:checked ~ .toggle_item {
+        display:            block;
+    }
+}