From 8856c415d16ae558609b615873826816c6718f42 Mon Sep 17 00:00:00 2001 From: Ben Burwell Date: Sat, 14 Nov 2015 14:25:23 -0500 Subject: redesign --- _includes/fontawesome.scss | 12 -- _includes/site.scss | 308 +++++++++++++++++++++++++++++++++++++++++++++ _includes/tiny.scss | 25 ---- 3 files changed, 308 insertions(+), 37 deletions(-) delete mode 100644 _includes/fontawesome.scss create mode 100644 _includes/site.scss delete mode 100644 _includes/tiny.scss (limited to '_includes') diff --git a/_includes/fontawesome.scss b/_includes/fontawesome.scss deleted file mode 100644 index a1f03cf..0000000 --- a/_includes/fontawesome.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import "font-awesome/variables"; -@import "font-awesome/mixins"; -@import "font-awesome/path"; -@import "font-awesome/core"; -@import "font-awesome/larger"; -// @import "font-awesome/fixed-width"; -// @import "font-awesome/list"; -// @import "font-awesome/bordered-pulled"; -// @import "font-awesome/animated"; -// @import "font-awesome/rotated-flipped"; -// @import "font-awesome/stacked"; -@import "font-awesome/icons"; diff --git a/_includes/site.scss b/_includes/site.scss new file mode 100644 index 0000000..4544c16 --- /dev/null +++ b/_includes/site.scss @@ -0,0 +1,308 @@ +$brand-color: #00819B; +$alternate-color: adjust-hue($brand-color, -120); +$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; +$monospace: Consolas, "Liberation Mono", Menlo, Courier, monospace !default; +$sans: "Helvetica Neue", "Helvetica", "Arial", "Liberation Sans", sans-serif; + +$container-width: 900px; +$grid-gutter: 10px; + +@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; +} + +html { + font-family: $serif; +} + +body { + padding: $base-font-size; + background-color: #fcfcfc; +} + +main { + max-width: 900px; + margin-left: auto; + margin-right: auto; +} + +header { + width: 100%; + min-height: $base-font-size * 3; + font-family: $monospace; + + a { + padding: $base-font-size * 0.5; + } +} + +footer { + margin-top: $base-font-size * 2; +} + +footer, footer * { + text-align: center; + font-size: $base-font-size * 0.8; + color: $muted-color; + font-family: $sans; +} + +section { + margin-bottom: $base-font-size * 4; +} + +h1, h1 * { + margin-top: $base-font-size; + font-size: $base-font-size * 2; + font-weight: bold; + font-family: $sans; +} + +h2, h2 * { + margin-top: $base-font-size; + font-size: $base-font-size * 1.5; + font-weight: bold; + font-family: $sans; +} + +table { + width: 100%; +} + +td { + padding: $base-font-size * 0.5; +} + +p { + margin-top: $base-font-size; + line-height: $line-height; +} + +ol, ul { + margin: $base-font-size 0; +} + +li { + margin-left: $base-font-size * 2; + margin-right: $base-font-size * 2; + padding: $base-font-size * 0.25; +} + +pre { + margin: $base-font-size 0; +} + +code { + font-family: $monospace; + font-size: 0.8em; + color: $muted-color; +} + +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; +} + +hr { + border-top: 1px dotted $muted-color; + margin-top: $base-font-size; + margin-bottom: $base-font-size; +} + +//a { +// background: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient($base-color, $base-color); +// background-size: 0.05em 1px, 0.05em 1px, 1px 1px; +// background-repeat: no-repeat, no-repeat, repeat-x; +// text-shadow: 0.03em 0 #fff, -0.03em 0 #fff, 0 0.03em #fff, 0 -0.03em #fff; +// background-position: 0% 93%, 100% 93%, 0% 93%; +//} + +a, a * { + color: $brand-color !important; + &:hover { +// text-shadow: 0 0 2px $brand-color; + color: darken($brand-color, 10%) !important; + } +} + +time { + color: $muted-color; +} + +.column { + display: inline-block; +} + +.left, .right { + text-align: center; + display: block; +} + +@media (min-width: 900px) { +.left { + text-align: left; + float: left; +} + +.right { + text-align: right; + float: right; +} +} + +.muted, .muted * { + color: $muted-color; +} + +.sans, .sans * { + font-family: $sans; +} + +.text-center { + text-align: center; + margin: $base-font-size 0; +} + +.home { + position: absolute; + top: 0; + 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; + } + } + } +} + +svg text { + font-family: $sans; +} + +$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; + } +} + +.highlight * { + font-size: $base-font-size * 0.8; +} + +.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/_includes/tiny.scss b/_includes/tiny.scss deleted file mode 100644 index 5487cc4..0000000 --- a/_includes/tiny.scss +++ /dev/null @@ -1,25 +0,0 @@ -// Include fonts first so we can get them loading immediately -@import "tiny/fonts"; - -// These contain variables and mixins used throughout Tiny -@import "tiny/variables"; -@import "tiny/mixins"; - -// Normalize, of course -@import "tiny/normalize"; - -// General styles -@import "tiny/base"; -@import "tiny/layout"; -@import "tiny/type"; -// @import "tiny/syntax"; - -// Utility classes -@import "tiny/utility"; - -// Font Awesome time! -@import "font-awesome/variables"; -@import "font-awesome/mixins"; -@import "font-awesome/path"; -@import "font-awesome/core"; -@import "font-awesome/larger"; -- cgit v1.2.3 From 0a3d2194dad6fc1e90275511b0477e3349b9b7bd Mon Sep 17 00:00:00 2001 From: Ben Burwell Date: Sat, 14 Nov 2015 14:30:36 -0500 Subject: Get rid of old Sass vars, use more of the new ones --- _includes/site.scss | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) (limited to '_includes') diff --git a/_includes/site.scss b/_includes/site.scss index 4544c16..8ee86ad 100644 --- a/_includes/site.scss +++ b/_includes/site.scss @@ -1,16 +1,14 @@ $brand-color: #00819B; -$alternate-color: adjust-hue($brand-color, -120); $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: merriweather_light, serif; $monospace: Consolas, "Liberation Mono", Menlo, Courier, monospace !default; $sans: "Helvetica Neue", "Helvetica", "Arial", "Liberation Sans", sans-serif; $container-width: 900px; -$grid-gutter: 10px; @import "fonts"; @import "icons"; @@ -36,7 +34,7 @@ body { } main { - max-width: 900px; + max-width: $container-width; margin-left: auto; margin-right: auto; } @@ -157,7 +155,7 @@ time { display: block; } -@media (min-width: 900px) { +@media (min-width: $container-width) { .left { text-align: left; float: left; -- cgit v1.2.3 From fefd49ff9db9e133c70bbeef33601628a3e6c88d Mon Sep 17 00:00:00 2001 From: Ben Burwell Date: Sat, 14 Nov 2015 14:32:00 -0500 Subject: Remove cruft that had been commented out --- _includes/site.scss | 9 --------- 1 file changed, 9 deletions(-) (limited to '_includes') diff --git a/_includes/site.scss b/_includes/site.scss index 8ee86ad..c2a29db 100644 --- a/_includes/site.scss +++ b/_includes/site.scss @@ -126,18 +126,9 @@ hr { margin-bottom: $base-font-size; } -//a { -// background: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient($base-color, $base-color); -// background-size: 0.05em 1px, 0.05em 1px, 1px 1px; -// background-repeat: no-repeat, no-repeat, repeat-x; -// text-shadow: 0.03em 0 #fff, -0.03em 0 #fff, 0 0.03em #fff, 0 -0.03em #fff; -// background-position: 0% 93%, 100% 93%, 0% 93%; -//} - a, a * { color: $brand-color !important; &:hover { -// text-shadow: 0 0 2px $brand-color; color: darken($brand-color, 10%) !important; } } -- cgit v1.2.3