Use Hugo Pipes for Sass (close #44)

- Add head/css.html partial with Hugo Pipes
- Move Sass files into assets/
- Rebuild docs/
- Update README

4 files changed, 290 insertions, 0 deletions

diff --git a/assets/sass/_elements.sass b/assets/sass/_elements.sass
new file mode 100755
index 0000000..9e5497d
--- /dev/null
+++ b/assets/sass/_elements.sass
@@ -0,0 +1,135 @@
+#splash
+    margin: auto 0
+    height: 100vh
+    width: 45%
+    overflow: hidden
+    @media screen and (max-width: 736px)
+        width: 90%
+
+.big-link
+    font-family: $font
+    font-size: 3rem
+    font-weight: 300
+    margin-bottom: 2rem
+    line-height: 1.5em
+
+#title
+    margin-top: 3rem
+    font-family: $font
+    font-size: 2rem
+    line-height: 3rem
+    margin-bottom: 2rem
+
+#content
+    margin: 2rem 0
+    line-height: 2em
+    letter-spacing: 2px
+    div
+        width: 100%
+        height: 100%
+        margin-bottom: 1em
+    & h1,h2,h3
+        margin: 1em 0em
+        text-align: left
+    & p
+        margin-bottom: 1em
+        line-height: 1.8
+        letter-spacing: 1.5px
+        opacity: 0.8
+    & .highlight
+        width: 100%
+    & pre
+        line-height: 2rem
+        border-radius: 3px
+        padding: 1rem
+        overflow-x: auto
+        background-color: $code-block
+        width: 100%
+        margin-bottom: 1em
+    & pre > code
+        border: none
+    & code
+        font-size: 0.9rem
+        font-family: 'Source Code Pro', monospace
+        padding: 0.1rem
+        border-radius: 3px
+        border: 1px solid $links
+    & img
+        width: 100%
+        max-width: 100%
+        display: block
+        margin: 2rem auto
+        opacity: 1
+    & blockquote
+        background-color: $links
+        color: $dark-grey
+        padding: 2rem
+        margin: 2rem 1rem 2rem 1rem
+        border-radius: 3px
+        a
+            color: $black
+        & ul
+            margin-top: 1rem
+        & li
+            list-style: disc
+    & table
+        width: 100%
+        border-collapse: collapse
+        margin: 1rem 0
+        overflow-x: auto
+        th
+            font-size: 0.9rem
+        td, th
+            padding: 2px 5px
+            text-align: center
+            border: 1px solid $links
+    & li
+        line-height: 2
+        padding-left: 0.4rem
+        &:last-child
+            margin-bottom: 1rem
+    & ul
+        list-style: disc outside
+        padding-left: 2rem
+    & ol
+        list-style: decimal outside
+        padding-left: 2rem
+    & .gist
+        width: 100%
+        td, th
+            text-align: left
+            border: 0
+        & .gist-meta
+            background-color: transparent
+            color: $body-text
+            & a
+                color: $body-text
+
+.tag
+    padding: 0.25em 0em
+    margin-right: 0.5em
+    opacity: 0.6
+
+.grid
+    display: grid
+    grid-gap: 20px
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))
+    grid-auto-rows: 400px
+    @media screen and (max-width: 736px)
+        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr))
+
+.grid > div
+    background-color: transparent
+    overflow: hidden
+
+.grid > div > img
+    height: 100%
+    width: 100%
+    object-fit: cover
+    opacity: 1
+
+.grid > div > a > img
+    height: 100%
+    width: 100%
+    object-fit: cover
+    opacity: 1
diff --git a/assets/sass/_mixins.sass b/assets/sass/_mixins.sass
new file mode 100755
index 0000000..851eb7f
--- /dev/null
+++ b/assets/sass/_mixins.sass
@@ -0,0 +1,10 @@
+=skinny-hr
+    margin: 1rem 0
+    background-color: transparent
+    //box-shadow: 0 1px 0 rgba(219,219,219,0.3)
+    width: 50%
+    border-style: solid
+    border-width: 1px
+
+=ease($time)
+    transition: $time ease
\ No newline at end of file
diff --git a/assets/sass/_vars.sass b/assets/sass/_vars.sass
new file mode 100755
index 0000000..8c54c25
--- /dev/null
+++ b/assets/sass/_vars.sass
@@ -0,0 +1,11 @@
+$white: #fff
+$black: #111
+$dark-grey: #39424E
+$font: 'Didact Gothic','sans serif'
+$body-size: 16px
+$body-text: $white
+
+$links: darken($white, 20%)
+$links-hover: $white
+
+$code-block: #000004
diff --git a/assets/sass/style.sass b/assets/sass/style.sass
new file mode 100755
index 0000000..74a8477
--- /dev/null
+++ b/assets/sass/style.sass
@@ -0,0 +1,134 @@
+@import "vars"
+@import "mixins"
+
+*
+    margin: 0
+    padding: 0
+    -webkit-box-sizing: border-box
+    box-sizing: border-box
+
+html
+    background-color: $dark-grey
+    font-family: $font
+    font-size: 16px
+
+body
+    font-size: $body-size
+    font-family: $font
+    color: $body-text
+    line-height: 2rem
+    letter-spacing: 1.5px
+    text-shadow: none
+    display: flex
+    flex-direction: column
+    justify-content: space-between
+    align-items: center
+    opacity: 1
+
+h1,h2,h3
+    margin-bottom: 0.5em
+    text-align: center
+    font-family: 'Didact Gothic', sans-serif
+    opacity: 0.6
+
+li
+    opacity: 0.8
+    & a
+        opacity: 0.9
+
+ul
+    list-style-type: none
+
+p
+    display: inline
+    opacity: 0.8
+
+a
+    color: $links
+    text-decoration: none
+    border-bottom: 2px solid $links
+    +ease(0.5s)
+    &:hover
+        color: $links-hover
+        font-style: none
+    &:active
+        color: $links
+
+button
+    padding: 20px
+    border: 0px
+    border-radius: 5px
+    background: $white
+    &:hover
+        box-shadow: 5px 5px $black
+
+hr
+    +skinny-hr
+    opacity: 0.3
+
+.wrap
+    margin: 0 auto
+    margin-top: 6rem
+    width: 45%
+    @media screen and (max-width: 736px)
+        padding: 1rem
+        width: 100%
+
+.tag-container
+    display: flex
+    flex-direction: row
+    justify-content: flex-start
+    align-items: center
+
+.tag
+    background-color: transparent
+    position: relative
+    bottom: 0
+
+.section
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: flex-start
+
+.bottom-menu
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: center
+    padding-top: 3rem
+    text-align: center
+
+.footer
+    width: 100%
+    display: flex
+    justify-content: center
+    align-items: center
+    text-align: center
+    background-color: transparent
+    position: relative
+    bottom: 0
+    padding: 3rem 1rem
+    font-family: $font
+    font-size: 1rem
+    line-height: 1em
+    opacity: 0.8
+    a
+        border-bottom: none
+        display: contents
+
+@import "elements"
+
+// Helpers
+
+.go-left
+    justify-content: flex-start
+    align-items: flex-start
+
+.go-right
+    justify-content: flex-end
+    align-items: flex-end
+
+.go-center
+    justify-content: center
+    align-items: center