diff --git a/_includes/footer.html b/_includes/footer.html new file mode 100644 index 0000000..0967b71 --- /dev/null +++ b/_includes/footer.html @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/_includes/main.scss b/_includes/main.scss index 7fc673e..54025df 100644 --- a/_includes/main.scss +++ b/_includes/main.scss @@ -10,6 +10,7 @@ @import "structures/event"; @import "header"; +@import "footer"; @import "layouts/home"; @@ -105,6 +106,13 @@ input[type="submit"] { } } +html, body { min-height: 100vh; } + +body > footer { + position: sticky; + top: 100vh; +} + blockquote, ol, p, diff --git a/_layouts/default.html b/_layouts/default.html index 90d42cb..ec42086 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -8,6 +8,9 @@
{{ content }}
+ + {% include footer.html %} + diff --git a/_sass/_footer.scss b/_sass/_footer.scss new file mode 100644 index 0000000..b3e69bb --- /dev/null +++ b/_sass/_footer.scss @@ -0,0 +1,49 @@ +@import 'variables'; + +// https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html +// +// grayscale ex: filter: grayscale(100%); +// sepia ex: filter: sepia(100%); +// saturate ex: filter: saturate(0%); +// hue-rotate ex: filter: hue-rotate(45deg); +// invert ex: filter: invert(100%); +// brightness ex: filter: brightness(15%); +// contrast ex: filter: contrast(200%); +// blur ex: filter: blur(2px); + +@mixin filter($filter-type,$filter-amount) { + -webkit-filter: $filter-type+unquote('(#{$filter-amount})'); + -moz-filter: $filter-type+unquote('(#{$filter-amount})'); + -ms-filter: $filter-type+unquote('(#{$filter-amount})'); + -o-filter: $filter-type+unquote('(#{$filter-amount})'); + filter: $filter-type+unquote('(#{$filter-amount})'); +} + +.footer { + border-top: 1px solid; + padding: 2em 2em; + background: #000; + color: #fff; + text-align: left; + + a { + color: #fff; + display: inline-block; + margin-left: .25em; + + &:hover { + color: #e6141b; + } + } + + &-container { + display: flex; + align-items: center; + justify-content: flex-start; + } + + .logo { + @include filter(invert, 1); + margin-right: 10px; + } +}