maybe a rename will fix it

2019-05-04 21:30:18 -07:00
parent a887860f0a
commit a6e986a960
2 changed files with 2 additions and 4 deletions
--- a/css/site.scss
+++ b/css/site.scss
@ -0,0 +1,296 @@
+---
+---
+@import 'util';
+@import 'colors';
+@import 'fonts';
+$mobile-header-height: 70px;
+$mobile-width: {{ site.mobile-width }};
+
+.blue {
+    fill: $blue;
+    background-color: $blue;
+}
+
+.orange {
+    fill: $orange;
+    background-color: $orange;
+}
+
+.green {
+    fill: $green;
+    background-color: $green;
+}
+
+.magenta {
+    fill: $magenta;
+    background-color: $magenta;
+}
+
+.dark-blue {
+    fill: $dark-blue;
+    background-color: $dark-blue;
+}
+
+.dark-orange {
+    fill: $dark-orange;
+    background-color: $dark-orange;
+}
+
+.dark-green {
+    fill: $dark-green;
+    background-color: $dark-green;
+}
+
+.dark-magenta {
+    fill: $dark-magenta;
+    background-color: $dark-magenta;
+}
+
+::selection {
+    color: white;
+    background: $orange;
+    /* WebKit/Blink Browsers */
+}
+
+::-moz-selection {
+    color: white;
+    background: $orange;
+    /* Mozilla Browsers */
+}
+
+// base page format
+html {
+    margin: 0;
+    background-color: $margin;
+}
+
+body {
+    background-color: $background;
+    font-size: $body-size;
+    font-family: $body-font;
+    color: $body-text;
+
+    max-width: 1000px;
+    
+    z-index: 0;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0;
+    height: 100%;
+    @media screen and (min-width: $mobile-width) {
+        box-shadow: 0 0 4px 5px $shadow;
+        -moz-box-shadow: 0 0 4px 5px $shadow;
+        -webkit-box-shadow: 0 0 4px 5px $shadow;
+    }
+}
+
+// HEADER
+header {
+    margin: 0;
+    padding: 10px;
+    font-family: $title-font;
+    color: $title-text;
+    font-weight: normal;
+    font-size: 28px;
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+    a:hover {
+        color: inherit;
+        text-decoration: underline;
+    }
+    .slash {
+        display: inline-block;
+        vertical-align: -10%;
+        font: {
+            size: 36px;
+        }
+    }
+}
+
+
+#box {
+    display: flex;
+}
+
+#content {
+    padding: {
+        right: 20px;
+        left: 20px;
+    }
+    flex-grow: 1;
+}
+
+hr {
+    border-width: 0;
+    height: 1px;
+    background-color: $body-text;
+}
+
+a {
+    color: $body-text;
+}
+a:hover {
+    color: $body-text-subtle;
+}
+
+p {
+    margin: {
+        top: 0;
+        bottom: 15px;
+    }
+}
+
+h1,h2,h3 {
+    clear: both;
+    margin: {
+        top: 0px;
+        bottom: 10px;
+    }
+    a {
+        text-decoration: none;
+    }
+}
+
+h1 {
+    font-size: 2em;
+}
+
+small {
+    font-size: 0.8em;
+}
+
+.figure-gallery {
+    clear: both;
+
+    .gallery-grid {
+        margin-left: -60px;
+        margin-right: -60px;
+        line-height: 0;
+
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+
+        img {
+            width: auto;
+            margin: 3px;
+            height: 220px;
+
+        }
+
+        @media screen and (max-width: 500px) {
+
+            img {
+                height: 160px
+            }
+        }
+    }
+
+    .gallery-solo {
+        margin: 0;
+        line-height: 0;
+
+        padding: {
+            left: 10%;
+            right: 10%;
+        }
+
+        img {
+            height: auto;
+            width: 100%;
+            margin: 3px auto;
+        }
+    }
+}
+
+.figure-image {
+    width: 100%;
+    margin: 0;
+    margin-bottom: 20px;
+
+    img {
+        width: 100%;
+        height: auto;
+    }
+}
+
+.figure-video {
+    width: 100%;
+    margin: 0;
+    margin-bottom: 20px;
+
+    video {
+        max-width: 100%;
+        max-height: 240px;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+.figure-float {
+    width: 33%;
+    margin: 10px;
+    clear: both;
+
+    img {
+        width: 100%;
+        height: auto;
+    }
+}
+
+@media screen and (max-width: 500px) {
+
+    .figure-float {
+        width: 50%;
+    }
+}
+
+
+figcaption {
+    text-align: center;
+
+}
+
+
+
+// narrow screens override
+@media screen and (max-width: $mobile-width) {
+    header {
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 1;
+        background-color: darken($background, 5%);
+        border-bottom: 1px solid $subtle;
+        padding: {
+            top: 0;
+            bottom: 0;
+        }
+        #title {
+            font-size: $mobile-header-height * 0.5;
+            text-align: center;
+            padding: {
+                top: 0;
+                bottom: 5px;
+            }
+            #path {
+                display: none;
+            }
+            #page {
+                display: block;
+            }
+        }
+    }
+
+    #box {
+        flex-direction: column;
+    }
+}
+
+footer {
+    font-size: 1em;
+    text-align: center;
+}