From fa0471337b9a79da35c38fdc4665e7ff5808fb02 Mon Sep 17 00:00:00 2001 From: Joe Walker Date: Wed, 16 Aug 2017 16:40:17 +0100 Subject: [PATCH] Add a basic Mozilla theme --- _layouts/default.html | 14 +++++ assets/css/style.scss | 125 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 139 insertions(+) create mode 100644 _layouts/default.html create mode 100644 assets/css/style.scss diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..e05b831 --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,14 @@ + + + + + + + + +
+ {{ content }} +
+ + + diff --git a/assets/css/style.scss b/assets/css/style.scss new file mode 100644 index 0000000..094418a --- /dev/null +++ b/assets/css/style.scss @@ -0,0 +1,125 @@ +--- +--- + +@import "{{ site.theme }}"; +@import url('https://fonts.googleapis.com/css?family=Zilla+Slab|Zilla+Slab+Highlight'); + +// Convert pixel units to rems, assuming a 16px base size +// Usage: remify(24px) +@function remify($pixels) { + $rems: $pixels / 16px; + @return #{$rems}rem; +} + +@mixin font-size($size) { + // When unit is pixels, pass it through and convert to rem + @if (unit($size) == 'px') { + font-size: $size; + font-size: remify($size); + } + + // When unit is not pixels, show an error + @else { + @error 'This mixin only accepts sizes in pixels. You declared `font-size(#{$size})`.'; + } +} + +@mixin font-size-huge { // For especially huge titles + @include font-size(50px); + + @media screen and (min-width: 760px) { + @include font-size(90px); + } +} + +@mixin font-size-level1 { + @include font-size(28px); + + @media screen and (min-width: 760px) { + @include font-size(50px); + } +} + +@mixin font-size-level2 { + @include font-size(21px); + + @media screen and (min-width: 760px) { + @include font-size(38px); + } +} + +@mixin font-size-level3 { + @include font-size(18px); + + @media screen and (min-width: 760px) { + @include font-size(28px); + } +} + +@mixin font-size-level4 { + @include font-size(16px); + + @media screen and (min-width: 760px) { + @include font-size(21px); + } +} + +body { + background: #fff; + font-size: 20px; + font-family: "Zilla Slab", "Open Sans", X-LocaleSpecific, sans-serif; + line-height: 1.5; +} + +h1, h2, h3, h4, h5, h6, legend { + color: #000; + font-weight: bold; + line-height: 1.1; + margin: 0 0 .25em; +} + +h1 { + @include font-size-level1; +} + +h2 { + @include font-size-level2; +} + +h3 { + @include font-size-level3; +} + +h4 { + @include font-size-level4; +} + +h5, h6 { + @include font-size(16px); +} + +p, +ul, +ol, +dl, +table { + margin-bottom: 1.25em; +} + +a { + color: #006688; +} + +a:hover, a:focus, a:active, a:visited:hover, a:visited:focus, a:visited:active { + color: #0088aa; + font-weight: normal; +} + +a:visited { + color: #004455; +} + +.wrapper > section { + float: none; + width: 100%; +}