From bced1c6cf8dc6a7554aeb8ea8ed64fc695c3609c Mon Sep 17 00:00:00 2001 From: Tristan Sweeney Date: Sun, 10 Dec 2017 15:11:17 -0500 Subject: [PATCH] Modifed sass files to parametrize colors in style sheet. First step to allowing users to inject colors for styling --- _sass/_default_colors.scss | 15 ++++ _sass/jekyll-theme-hacker.scss | 21 +++-- _sass/rouge-base16-dark.scss | 156 +++++++++++++++++---------------- 3 files changed, 110 insertions(+), 82 deletions(-) create mode 100644 _sass/_default_colors.scss diff --git a/_sass/_default_colors.scss b/_sass/_default_colors.scss new file mode 100644 index 0000000..dee878d --- /dev/null +++ b/_sass/_default_colors.scss @@ -0,0 +1,15 @@ +$apple-blossom: #ac4142; +$alto: #d0d0d0; +$bouquet: #aa759f; +$chelsea-cucumber: #90a959; +$cod-grey: #151515; +$conifer: #b5e853; +$dove-grey: #666; +$gallery: #eaeaea; +$grey: #888; +$gulf-stream: #75b5aa; +$hippie-blue: #6a9fb5; +$potters-clay: #8f5536; +$rajah: #f4bf75; +$raw-sienna: #d28445; +$silver-chalice: #aaa; diff --git a/_sass/jekyll-theme-hacker.scss b/_sass/jekyll-theme-hacker.scss index 779d8fb..bca8aa1 100644 --- a/_sass/jekyll-theme-hacker.scss +++ b/_sass/jekyll-theme-hacker.scss @@ -1,10 +1,17 @@ @import "rouge-base16-dark"; +@import "default_colors"; + +$body-background: $cod-grey !default; +$body-foreground: $gallery !default; +$header: $conifer !default; +$blockquote-color: $silver-chalice !default; +$blockquote-border: $dove-grey !default; body { margin: 0; padding: 0; - background: #151515 url("../images/bkg.png") 0 0; - color: #eaeaea; + background: $body-background url("../images/bkg.png") 0 0; + color: $body-foreground; font-size: 16px; line-height: 1.5; font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace; @@ -40,7 +47,7 @@ li { header { background: rgba(0, 0, 0, 0.1); width: 100%; - border-bottom: 1px dashed #b5e853; + border-bottom: 1px dashed $conifer; //header; padding: 20px 0; margin: 0 0 40px 0; } @@ -51,7 +58,7 @@ header h1 { margin: 0 0 0 -40px; font-weight: bold; font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace; - color: #b5e853; + color: $conifer;//$header; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(181, 232, 83, 0.1), 0 0 10px rgba(181, 232, 83, 0.1); @@ -90,7 +97,7 @@ section img { h1, h2, h3, h4, h5, h6 { font-weight: normal; font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace; - color: #b5e853; + color: $header; letter-spacing: -0.03em; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(181, 232, 83, 0.1), @@ -136,9 +143,9 @@ ul li { } blockquote { - color: #aaa; + color: $blockquote-color; padding-left: 10px; - border-left: 1px dotted #666; + border-left: 1px dotted $blockquote-border; } pre { diff --git a/_sass/rouge-base16-dark.scss b/_sass/rouge-base16-dark.scss index c303bd5..7f839e9 100644 --- a/_sass/rouge-base16-dark.scss +++ b/_sass/rouge-base16-dark.scss @@ -3,79 +3,85 @@ original base16 by Chris Kempson (https://github.com/chriskempson/base16) */ -.highlight table td { padding: 5px; } -.highlight table pre { margin: 0; } -.highlight, .highlight .w { - color: #d0d0d0; -} -.highlight .err { - color: #151515; - background-color: #ac4142; -} -.highlight .c, .highlight .cd, .highlight .cm, .highlight .c1, .highlight .cs { - color: #888; -} -.highlight .cp { - color: #f4bf75; -} -.highlight .nt { - color: #f4bf75; -} -.highlight .o, .highlight .ow { - color: #d0d0d0; -} -.highlight .p, .highlight .pi { - color: #d0d0d0; -} -.highlight .gi { - color: #90a959; -} -.highlight .gd { - color: #ac4142; -} -.highlight .gh { - color: #6a9fb5; - font-weight: bold; -} -.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv { - color: #aa759f; -} -.highlight .kc { - color: #d28445; -} -.highlight .kt { - color: #d28445; -} -.highlight .kd { - color: #d28445; -} -.highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 { - color: #90a959; -} -.highlight .sr { - color: #75b5aa; -} -.highlight .si { - color: #8f5536; -} -.highlight .se { - color: #8f5536; -} -.highlight .nn { - color: #f4bf75; -} -.highlight .nc { - color: #f4bf75; -} -.highlight .no { - color: #f4bf75; -} -.highlight .na { - color: #6a9fb5; -} -.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mb, .highlight .mx { - color: #90a959; -} -.highlight .ss { - color: #90a959; +@import "default_colors"; + +.highlight { + + $plaintext: $alto !default; + $string: $chelsea-cucumber !default; + $literal: $chelsea-cucumber !default; + $keyword: $bouquet !default; + $error-foreground: $cod-grey !default; + $error-background: $apple-blossom !default; + $comment: $grey !default; + $preprocessor: $rajah !default; + $name-space: $rajah !default; + $name-attribute: $hippie-blue !default; + $operator: $rajah !default; + $keyword-type: $raw-sienna !default; + $regex: $gulf-stream !default; + $string-escape: $potters-clay !default; + $deleted: $apple-blossom !default; + $header: $hippie-blue !default; + + color: $plaintext; + + table td { padding: 5px; } + table pre { margin: 0; } + .w { + color: $plaintext; + } + .err { + color: $error-foreground; + background-color: $error-background; + } + .c, .cd, .cm, .c1, .cs { + color: $comment; + } + .cp { + color: $preprocessor; + } + .o, .ow { + color: $operator; + } + .p, .pi { + color: $plaintext; + } + .gi { + color: $string; + } + .gd { + color: $deleted; + } + .gh { + color: $header; + font-weight: bold; + } + .k, .kn, .kp, .kr, .kv { + color: $keyword; + } + .kc, .kt, .kd { + color: $keyword-type; + } + .s, .sb, .sc, .sd, .s2, .sh, .sx, .s1 { + color: $string; + } + .sr { + color: $regex; + } + .si, .se { + color: $string-escape; + } + .nt, .nn, .nc, .no{ + color: $name-space; + } + .na { + color: $name-attribute; + } + .m, .mf, .mh, .mi, .il, .mo, .mb, .mx { + color: $literal; + } + .ss { + color: $string; + } }