From 7bc8ea07e5116fa2e60a2b7e4aeebcbbaa1280c8 Mon Sep 17 00:00:00 2001 From: Ben Burwell Date: Sat, 19 Dec 2015 20:34:17 -0500 Subject: Major UI update to monokai style --- 404.html | 2 +- _includes/site.scss | 311 +++++++-------------- _layouts/blog.html | 13 +- _layouts/post.html | 8 +- ...ends-pgp-encrypted-email-notifications.markdown | 2 +- _sass/fonts.scss | 20 -- _sass/icons.scss | 56 ---- assets/fonts/fontello.eot | Bin 6084 -> 0 bytes assets/fonts/fontello.svg | 17 -- assets/fonts/fontello.ttf | Bin 5916 -> 0 bytes assets/fonts/fontello.woff | Bin 3560 -> 0 bytes assets/fonts/merriweather-lightitalic-webfont.eot | Bin 29170 -> 0 bytes assets/fonts/merriweather-lightitalic-webfont.ttf | Bin 60484 -> 0 bytes assets/fonts/merriweather-lightitalic-webfont.woff | Bin 33320 -> 0 bytes assets/fonts/merriweather_light-webfont.eot | Bin 28224 -> 0 bytes assets/fonts/merriweather_light-webfont.ttf | Bin 57452 -> 0 bytes assets/fonts/merriweather_light-webfont.woff | Bin 31620 -> 0 bytes index.html | 21 +- posts/index.html | 8 +- projects/index.html | 18 +- theatre/index.html | 4 +- 21 files changed, 141 insertions(+), 339 deletions(-) delete mode 100644 _sass/fonts.scss delete mode 100644 _sass/icons.scss delete mode 100644 assets/fonts/fontello.eot delete mode 100644 assets/fonts/fontello.svg delete mode 100644 assets/fonts/fontello.ttf delete mode 100644 assets/fonts/fontello.woff delete mode 100644 assets/fonts/merriweather-lightitalic-webfont.eot delete mode 100644 assets/fonts/merriweather-lightitalic-webfont.ttf delete mode 100644 assets/fonts/merriweather-lightitalic-webfont.woff delete mode 100644 assets/fonts/merriweather_light-webfont.eot delete mode 100644 assets/fonts/merriweather_light-webfont.ttf delete mode 100644 assets/fonts/merriweather_light-webfont.woff diff --git a/404.html b/404.html index 73be2cd..cca3b86 100644 --- a/404.html +++ b/404.html @@ -4,7 +4,7 @@ description: Page not found — that’s a 404 :( layout: blog --- -

404 - Not Found

+

HTTP 404 - Not Found

Perhaps you'd be interested in one of the following?

diff --git a/_includes/site.scss b/_includes/site.scss index c2a29db..eec856c 100644 --- a/_includes/site.scss +++ b/_includes/site.scss @@ -1,81 +1,81 @@ -$brand-color: #00819B; -$muted-color: lighten(desaturate($brand-color, 100%), 15%); -$base-color: #222; - -$base-font-size: 20px; -$line-height: $base-font-size * 1.5; -$serif: merriweather_light, serif; +$monokai-royal-blue: #204a87; +$monokai-dark-blue: #243955; +$monokai-gray-0: #272822; +$monokai-gray-1: #31322c; +$monokai-gray-2: #3c3d37; +$monokai-forest: #46830c; +$monokai-gray-3: #49483e; +$monokai-gray-4: #64645e; +$monokai-blue: #66d9ef; +$monokai-tan: #75715e; +$monokai-red: #8b0807; +$monokai-gray-5: #90908a; +$monokai-lime: #a6e22e; +$monokai-violet: #ae81ff; +$monokai-yellow: #e6db74; +$monokai-light: #f8f8f0; +$monokai-magenta: #f92672; +$monokai-orange: #fd971f; + +$base-font-size: 22px; $monospace: Consolas, "Liberation Mono", Menlo, Courier, monospace !default; -$sans: "Helvetica Neue", "Helvetica", "Arial", "Liberation Sans", sans-serif; - -$container-width: 900px; +$container-width: 1200px; -@import "fonts"; -@import "icons"; - -* { - margin: 0; - padding: 0; - color: $base-color; - background-color: transparent; - text-decoration: none; - border: none; - font-weight: normal; - font-size: $base-font-size; +@mixin container { + max-width: $container-width; + padding: 0 1rem; + margin-left: auto; + margin-right: auto; } -html { - font-family: $serif; +.muted { + color: $monokai-gray-5; } body { - padding: $base-font-size; - background-color: #fcfcfc; -} - -main { - max-width: $container-width; - margin-left: auto; - margin-right: auto; + font-family: $monospace; + background-color: $monokai-gray-0; + color: $monokai-light; + font-size: $base-font-size; + padding: 5rem 0 0 0; + margin: 0; } header { + position: fixed; + top: 0; + left: 0; width: 100%; - min-height: $base-font-size * 3; - font-family: $monospace; - - a { - padding: $base-font-size * 0.5; - } + height: 5rem; + padding: 0; + margin: 0; + text-align: center; + background-color: $monokai-gray-0; + box-shadow: 0 1rem 1rem $monokai-gray-0; } footer { - margin-top: $base-font-size * 2; -} - -footer, footer * { + @extend .muted; + padding: 2rem; text-align: center; - font-size: $base-font-size * 0.8; - color: $muted-color; - font-family: $sans; } section { - margin-bottom: $base-font-size * 4; + padding-left: 5rem; } -h1, h1 * { - margin-top: $base-font-size; - font-size: $base-font-size * 2; +h1 { + @include container; + color: $monokai-orange; + font-size: 2rem; font-weight: bold; - font-family: $sans; } -h2, h2 * { - margin-top: $base-font-size; - font-size: $base-font-size * 1.5; +h2 { + @include container; + color: $monokai-orange; + font-size: 1.5rem; font-weight: bold; - font-family: $sans; } table { @@ -83,92 +83,85 @@ table { } td { - padding: $base-font-size * 0.5; + padding: 0.5rem; } p { - margin-top: $base-font-size; - line-height: $line-height; + @include container; + line-height: 2rem; } ol, ul { - margin: $base-font-size 0; + @include container; } li { - margin-left: $base-font-size * 2; - margin-right: $base-font-size * 2; - padding: $base-font-size * 0.25; + margin-left: 2rem; + margin-right: 2rem; + padding: 1rem; } pre { - margin: $base-font-size 0; + margin: 1rem 0; } -code { - font-family: $monospace; - font-size: 0.8em; - color: $muted-color; +kbd { + color: $monokai-lime; } -kbd { - font-family: $monospace; - font-size: $base-font-size * 0.7; - color: $muted-color; - border: 1px solid $muted-color; - padding: 2px 4px; - border-radius: 3px; +code { + color: $monokai-gray-5; + background-color: $monokai-gray-1; } hr { - border-top: 1px dotted $muted-color; + border: none; margin-top: $base-font-size; margin-bottom: $base-font-size; -} - -a, a * { - color: $brand-color !important; - &:hover { - color: darken($brand-color, 10%) !important; + text-align: center; + &:after { + @extend .muted; + content: '~ ~ ~'; } } -time { - color: $muted-color; -} - -.column { - display: inline-block; -} - -.left, .right { +.d3container { text-align: center; - display: block; } -@media (min-width: $container-width) { -.left { - text-align: left; - float: left; +blockquote { + font-style: italic; + p { + box-sizing: border-box; + border-left: 1rem solid $monokai-gray-1; + padding: 0 1rem; + } } -.right { - text-align: right; - float: right; -} +a { + color: $monokai-blue; + text-decoration: none; + &:hover { + color: $monokai-magenta; + } } -.muted, .muted * { - color: $muted-color; +time { + @extend .muted; } -.sans, .sans * { - font-family: $sans; +aside { + @extend .muted; } .text-center { text-align: center; - margin: $base-font-size 0; +} + +.flex-justify { + display: flex; + flex-wrap: wrap; + justify-content: space-between; } .home { @@ -177,121 +170,25 @@ time { left: 0; width: 100%; height: 100%; - background: linear-gradient(0deg, darken($brand-color, 5%), darken($brand-color, 15%)); text-align: center; - pre { margin-top: 2em; - font-size: 18px; display: inline-block; - color: #fff; text-align: left; - line-height: 28px; - - a { - color: #fff !important; - border-bottom: 1px solid #ccc; - &:hover { - text-shadow: 0 0 2px #fff !important; - } - } + line-height: 2rem; } } -svg text { - font-family: $sans; +.highlight { + margin: 0; + padding: 1rem; + background-color: $monokai-gray-1; } -$monokai-blue-light: #89BDFF; -$monokai-gray: #595959; -$monokai-gray-darker: #383830; -$monokai-gray-darkest: #141411; -$monokai-gray-lightest: #595959; -$monokai-gray-light: #E6E6E6; -$monokai-green: #A6E22A; -$monokai-green-light: #A6E22E; -$monokai-grey-dark: #272822; -$monokai-magenta: #F92672; -$monokai-purple: #AE81FF; -$monokai-purple-light: #FD5FF1; -$monokai-yellow: #E6DB74; -$monokai-yellow-dark: #75715E; -$monokai-yellow-light: #F8F8F2; - .highlight pre { - background-color: $monokai-gray-darker; - padding: $base-font-size * 0.5; - overflow-x: scroll; - code { - color: #fff; - } + @include container; } -.highlight * { - font-size: $base-font-size * 0.8; +.hl.string { + color: $monokai-yellow; } - -.highlight pre code .hll { background-color: #49483e } -.highlight pre code .c { color: #75715e } /* Comment */ -.highlight pre code .err { color: #960050; background-color: #1e0010 } /* Error */ -.highlight pre code .k { color: #66d9ef } /* Keyword */ -.highlight pre code .l { color: #ae81ff } /* Literal */ -.highlight pre code .n { color: #f8f8f2 } /* Name */ -.highlight pre code .o { color: #f92672 } /* Operator */ -.highlight pre code .p { color: #f8f8f2 } /* Punctuation */ -.highlight pre code .cm { color: #75715e } /* Comment.Multiline */ -.highlight pre code .cp { color: #75715e } /* Comment.Preproc */ -.highlight pre code .c1 { color: #75715e } /* Comment.Single */ -.highlight pre code .cs { color: #75715e } /* Comment.Special */ -.highlight pre code .ge { font-style: italic } /* Generic.Emph */ -.highlight pre code .gs { font-weight: bold } /* Generic.Strong */ -.highlight pre code .kc { color: #66d9ef } /* Keyword.Constant */ -.highlight pre code .kd { color: #66d9ef } /* Keyword.Declaration */ -.highlight pre code .kn { color: #f92672 } /* Keyword.Namespace */ -.highlight pre code .kp { color: #66d9ef } /* Keyword.Pseudo */ -.highlight pre code .kr { color: #66d9ef } /* Keyword.Reserved */ -.highlight pre code .kt { color: #66d9ef } /* Keyword.Type */ -.highlight pre code .ld { color: #e6db74 } /* Literal.Date */ -.highlight pre code .m { color: #ae81ff } /* Literal.Number */ -.highlight pre code .s { color: #e6db74 } /* Literal.String */ -.highlight pre code .na { color: #a6e22e } /* Name.Attribute */ -.highlight pre code .nb { color: #f8f8f2 } /* Name.Builtin */ -.highlight pre code .nc { color: #a6e22e } /* Name.Class */ -.highlight pre code .no { color: #66d9ef } /* Name.Constant */ -.highlight pre code .nd { color: #a6e22e } /* Name.Decorator */ -.highlight pre code .ni { color: #f8f8f2 } /* Name.Entity */ -.highlight pre code .ne { color: #a6e22e } /* Name.Exception */ -.highlight pre code .nf { color: #a6e22e } /* Name.Function */ -.highlight pre code .nl { color: #f8f8f2 } /* Name.Label */ -.highlight pre code .nn { color: #f8f8f2 } /* Name.Namespace */ -.highlight pre code .nx { color: #a6e22e } /* Name.Other */ -.highlight pre code .py { color: #f8f8f2 } /* Name.Property */ -.highlight pre code .nt { color: #f92672 } /* Name.Tag */ -.highlight pre code .nv { color: #f8f8f2 } /* Name.Variable */ -.highlight pre code .ow { color: #f92672 } /* Operator.Word */ -.highlight pre code .w { color: #f8f8f2 } /* Text.Whitespace */ -.highlight pre code .mf { color: #ae81ff } /* Literal.Number.Float */ -.highlight pre code .mh { color: #ae81ff } /* Literal.Number.Hex */ -.highlight pre code .mi { color: #ae81ff } /* Literal.Number.Integer */ -.highlight pre code .mo { color: #ae81ff } /* Literal.Number.Oct */ -.highlight pre code .sb { color: #e6db74 } /* Literal.String.Backtick */ -.highlight pre code .sc { color: #e6db74 } /* Literal.String.Char */ -.highlight pre code .sd { color: #e6db74 } /* Literal.String.Doc */ -.highlight pre code .s2 { color: #e6db74 } /* Literal.String.Double */ -.highlight pre code .se { color: #ae81ff } /* Literal.String.Escape */ -.highlight pre code .sh { color: #e6db74 } /* Literal.String.Heredoc */ -.highlight pre code .si { color: #e6db74 } /* Literal.String.Interpol */ -.highlight pre code .sx { color: #e6db74 } /* Literal.String.Other */ -.highlight pre code .sr { color: #e6db74 } /* Literal.String.Regex */ -.highlight pre code .s1 { color: #e6db74 } /* Literal.String.Single */ -.highlight pre code .ss { color: #e6db74 } /* Literal.String.Symbol */ -.highlight pre code .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */ -.highlight pre code .vc { color: #f8f8f2 } /* Name.Variable.Class */ -.highlight pre code .vg { color: #f8f8f2 } /* Name.Variable.Global */ -.highlight pre code .vi { color: #f8f8f2 } /* Name.Variable.Instance */ -.highlight pre code .il { color: #ae81ff } /* Literal.Number.Integer.Long */ - -.highlight pre code .gh { } /* Generic Heading & Diff Header */ -.highlight pre code .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */ -.highlight pre code .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */ -.highlight pre code .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */ diff --git a/_layouts/blog.html b/_layouts/blog.html index feda43c..9f15d01 100644 --- a/_layouts/blog.html +++ b/_layouts/blog.html @@ -2,19 +2,12 @@ layout: master ---
-
- benburwell.com - posts - projects -
-
- - -
+

../

{{ content }}
diff --git a/_layouts/post.html b/_layouts/post.html index 5df27d2..c77a65c 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -14,15 +14,21 @@ layout: blog