From 58fc4a5a2f80527f29d0d965a0f081cbc32c5b49 Mon Sep 17 00:00:00 2001 From: Fronbasal Date: Tue, 13 Jun 2017 01:21:31 +0200 Subject: [PATCH] Refactoring, navbar color, shadow --- _sass/_base.scss | 95 +++++++----- _sass/_chaospott.scss | 107 ++++++-------- _sass/_syntax-highlighting.scss | 255 ++++++++++++++++++++++++-------- 3 files changed, 301 insertions(+), 156 deletions(-) diff --git a/_sass/_base.scss b/_sass/_base.scss index 272e69f..59e1cfe 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -1,18 +1,31 @@ /** * Reset some basic elements */ -body, h1, h2, h3, h4, h5, h6, -p, blockquote, pre, -dl, dd, ol, ul, figure { + +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +dl, +dd, +ol, +ul, +figure { margin: 0; padding: 0; } - /** * Basic styling */ + body { font-family: $base-font-family; font-size: $base-font-size; @@ -24,33 +37,43 @@ body { } - /** * Set `margin-bottom` to maintain vertical rhythm */ -h1, h2, h3, h4, h5, h6, -p, blockquote, pre, -ul, ol, dl, figure, + +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +ul, +ol, +dl, +figure, %vertical-rhythm { margin-bottom: $spacing-unit / 2; } - /** * Images */ + img { max-width: 100%; vertical-align: middle; } - /** * Figures */ -figure > img { + +figure>img { display: block; } @@ -59,43 +82,47 @@ figcaption { } - /** * Lists */ -ul, ol { + +ul, +ol { margin-left: $spacing-unit; } li { - > ul, - > ol { - margin-bottom: 0; + >ul, + >ol { + margin-bottom: 0; } } - /** * Headings */ -h1, h2, h3, h4, h5, h6 { + +h1, +h2, +h3, +h4, +h5, +h6 { font-weight: 300; } - /** * Links */ + a { color: $brand-color; text-decoration: none; - &:visited { color: darken($brand-color, 15%); } - &:hover { color: $text-color; text-decoration: underline; @@ -103,10 +130,10 @@ a { } - /** * Blockquotes */ + blockquote { color: $grey-color; border-left: 4px solid $grey-color-light; @@ -114,17 +141,16 @@ blockquote { font-size: 18px; letter-spacing: -1px; font-style: italic; - > :last-child { margin-bottom: 0; } } - /** * Code formatting */ + pre, code { font-size: 15px; @@ -140,8 +166,7 @@ code { pre { padding: 8px 12px; overflow-x: scroll; - - > code { + >code { border: 0; padding-right: 0; padding-left: 0; @@ -149,34 +174,32 @@ pre { } - /** * Wrapper */ + .wrapper { max-width: -webkit-calc(800px - (#{$spacing-unit} * 2)); - max-width: calc(800px - (#{$spacing-unit} * 2)); + max-width : calc(800px - (#{$spacing-unit} * 2)); margin-right: auto; margin-left: auto; padding-right: $spacing-unit; padding-left: $spacing-unit; @extend %clearfix; - @include media-query($on-laptop) { max-width: -webkit-calc(800px - (#{$spacing-unit})); - max-width: calc(800px - (#{$spacing-unit})); + max-width : calc(800px - (#{$spacing-unit})); padding-right: $spacing-unit / 2; padding-left: $spacing-unit / 2; } } - /** * Clearfix */ -%clearfix { +%clearfix { &:after { content: ""; display: table; @@ -185,20 +208,18 @@ pre { } - /** * Icons */ -.icon { - > svg { +.icon { + >svg { display: inline-block; width: 16px; height: 16px; vertical-align: middle; - path { fill: $grey-color; } } -} +} \ No newline at end of file diff --git a/_sass/_chaospott.scss b/_sass/_chaospott.scss index 769a3d5..43fe7ef 100644 --- a/_sass/_chaospott.scss +++ b/_sass/_chaospott.scss @@ -6,39 +6,38 @@ } * { - background-color:transparent; + background-color: transparent; font-family: $base-font-family; } -body, .jumbotron { - background-color:$background-color; +body, +.jumbotron { + background-color: $background-color; } body { - padding-top:52px; + padding-top: 52px; } .jumbotron { - margin:0; - padding:0; - + margin: 0; + padding: 0; .post-title { - font-size:26px; - font-weight:bold; + font-size: 26px; + font-weight: bold; } - &>hr { - background-color:#333; - height:1px; + background-color: #333; + height: 1px; border: 3px #333 solid; - width:300px; + width: 300px; } } .navbar { - background-color:$background-color; - border:none; - + background-color: #bdbfa8; + border: none; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); .divider-vertical { height: 20px; margin: 14px 9px; @@ -48,27 +47,24 @@ body { } ul.navbar-nav li a { - color:$nav-link-color !important; + color: $nav-link-color !important; } .btn-default { - border:0; - background-color:transparent; + border: 0; + background-color: transparent; color: $nav-link-color; } a { - color:$nav-link-color; - + color: $nav-link-color; &:visited { - color:$nav-link-color; + color: $nav-link-color; } } - .row { - padding:50px 0; - + padding: 50px 0; &-centered { text-align: center; margin: 0; @@ -76,55 +72,54 @@ a { } #large-header { - background:#222 url('/images/logowall.svg') center top; + background: #222 url('/images/logowall.svg') center top; background-size: 450px; - height:300px; - margin:0 0 100px 0; - padding:0; - + height: 300px; + margin: 0 0 100px 0; + padding: 0; img { - position:relative; - top:30px; + position: relative; + top: 30px; width: 300px; } } .col-centered { - display:inline-block; - float:none; - text-align:left; - margin-right:-4px; + display: inline-block; + float: none; + text-align: left; + margin-right: -4px; } ul.nav>li>a { - color:$nav-link-color; + color: $nav-link-color; } .post-content img { display: block; - margin:auto; + margin: auto; } -#status_open, #status_closed { - display:none; - border:0; +#status_open, +#status_closed { + display: none; + border: 0; } #status_open a { - color:#5CB85C !important; + color: #5CB85C !important; } #status_closed a { - color:#D9534F !important; + color: #D9534F !important; } #status_bar { - margin:0; - border-width:2px 0; - border-color:transparent; + margin: 0; + border-width: 2px 0; + border-color: transparent; } - .navbar-inverse .divider-vertical { border-right-color: #222222; border-left-color: #111111; @@ -134,16 +129,13 @@ ul.nav>li>a { #large-header { display: none; } - .navbar-header { - box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); + box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); } - .navbar-brand { display: block; } - - .navbar-collapse .nav > .divider-vertical { + .navbar-collapse .nav>.divider-vertical { display: none; } } @@ -156,21 +148,20 @@ ul.nav>li>a { rect.bordered { stroke: $background-color; - stroke-width:1px; + stroke-width: 1px; } - #posts { div div p img { max-width: 123px; - float:left; + float: left; margin-right: 5px; } } .elevator-button { - text-align: center; - margin: auto; + text-align: center; + margin: auto; cursor: pointer; color: $nav-link-color; -} +} \ No newline at end of file diff --git a/_sass/_syntax-highlighting.scss b/_sass/_syntax-highlighting.scss index e36627d..ceae321 100644 --- a/_sass/_syntax-highlighting.scss +++ b/_sass/_syntax-highlighting.scss @@ -1,67 +1,200 @@ /** * Syntax highlighting styles */ + .highlight { background: #fff; @extend %vertical-rhythm; - - .c { color: #998; font-style: italic } // Comment - .err { color: #a61717; background-color: #e3d2d2 } // Error - .k { font-weight: bold } // Keyword - .o { font-weight: bold } // Operator - .cm { color: #998; font-style: italic } // Comment.Multiline - .cp { color: #999; font-weight: bold } // Comment.Preproc - .c1 { color: #998; font-style: italic } // Comment.Single - .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special - .gd { color: #000; background-color: #fdd } // Generic.Deleted - .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific - .ge { font-style: italic } // Generic.Emph - .gr { color: #a00 } // Generic.Error - .gh { color: #999 } // Generic.Heading - .gi { color: #000; background-color: #dfd } // Generic.Inserted - .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific - .go { color: #888 } // Generic.Output - .gp { color: #555 } // Generic.Prompt - .gs { font-weight: bold } // Generic.Strong - .gu { color: #aaa } // Generic.Subheading - .gt { color: #a00 } // Generic.Traceback - .kc { font-weight: bold } // Keyword.Constant - .kd { font-weight: bold } // Keyword.Declaration - .kp { font-weight: bold } // Keyword.Pseudo - .kr { font-weight: bold } // Keyword.Reserved - .kt { color: #458; font-weight: bold } // Keyword.Type - .m { color: #099 } // Literal.Number - .s { color: #d14 } // Literal.String - .na { color: #008080 } // Name.Attribute - .nb { color: #0086B3 } // Name.Builtin - .nc { color: #458; font-weight: bold } // Name.Class - .no { color: #008080 } // Name.Constant - .ni { color: #800080 } // Name.Entity - .ne { color: #900; font-weight: bold } // Name.Exception - .nf { color: #900; font-weight: bold } // Name.Function - .nn { color: #555 } // Name.Namespace - .nt { color: #000080 } // Name.Tag - .nv { color: #008080 } // Name.Variable - .ow { font-weight: bold } // Operator.Word - .w { color: #bbb } // Text.Whitespace - .mf { color: #099 } // Literal.Number.Float - .mh { color: #099 } // Literal.Number.Hex - .mi { color: #099 } // Literal.Number.Integer - .mo { color: #099 } // Literal.Number.Oct - .sb { color: #d14 } // Literal.String.Backtick - .sc { color: #d14 } // Literal.String.Char - .sd { color: #d14 } // Literal.String.Doc - .s2 { color: #d14 } // Literal.String.Double - .se { color: #d14 } // Literal.String.Escape - .sh { color: #d14 } // Literal.String.Heredoc - .si { color: #d14 } // Literal.String.Interpol - .sx { color: #d14 } // Literal.String.Other - .sr { color: #009926 } // Literal.String.Regex - .s1 { color: #d14 } // Literal.String.Single - .ss { color: #990073 } // Literal.String.Symbol - .bp { color: #999 } // Name.Builtin.Pseudo - .vc { color: #008080 } // Name.Variable.Class - .vg { color: #008080 } // Name.Variable.Global - .vi { color: #008080 } // Name.Variable.Instance - .il { color: #099 } // Literal.Number.Integer.Long -} + .c { + color: #998; + font-style: italic + } // Comment + .err { + color: #a61717; + background-color: #e3d2d2 + } // Error + .k { + font-weight: bold + } // Keyword + .o { + font-weight: bold + } // Operator + .cm { + color: #998; + font-style: italic + } // Comment.Multiline + .cp { + color: #999; + font-weight: bold + } // Comment.Preproc + .c1 { + color: #998; + font-style: italic + } // Comment.Single + .cs { + color: #999; + font-weight: bold; + font-style: italic + } // Comment.Special + .gd { + color: #000; + background-color: #fdd + } // Generic.Deleted + .gd .x { + color: #000; + background-color: #faa + } // Generic.Deleted.Specific + .ge { + font-style: italic + } // Generic.Emph + .gr { + color: #a00 + } // Generic.Error + .gh { + color: #999 + } // Generic.Heading + .gi { + color: #000; + background-color: #dfd + } // Generic.Inserted + .gi .x { + color: #000; + background-color: #afa + } // Generic.Inserted.Specific + .go { + color: #888 + } // Generic.Output + .gp { + color: #555 + } // Generic.Prompt + .gs { + font-weight: bold + } // Generic.Strong + .gu { + color: #aaa + } // Generic.Subheading + .gt { + color: #a00 + } // Generic.Traceback + .kc { + font-weight: bold + } // Keyword.Constant + .kd { + font-weight: bold + } // Keyword.Declaration + .kp { + font-weight: bold + } // Keyword.Pseudo + .kr { + font-weight: bold + } // Keyword.Reserved + .kt { + color: #458; + font-weight: bold + } // Keyword.Type + .m { + color: #099 + } // Literal.Number + .s { + color: #d14 + } // Literal.String + .na { + color: #008080 + } // Name.Attribute + .nb { + color: #0086B3 + } // Name.Builtin + .nc { + color: #458; + font-weight: bold + } // Name.Class + .no { + color: #008080 + } // Name.Constant + .ni { + color: #800080 + } // Name.Entity + .ne { + color: #900; + font-weight: bold + } // Name.Exception + .nf { + color: #900; + font-weight: bold + } // Name.Function + .nn { + color: #555 + } // Name.Namespace + .nt { + color: #000080 + } // Name.Tag + .nv { + color: #008080 + } // Name.Variable + .ow { + font-weight: bold + } // Operator.Word + .w { + color: #bbb + } // Text.Whitespace + .mf { + color: #099 + } // Literal.Number.Float + .mh { + color: #099 + } // Literal.Number.Hex + .mi { + color: #099 + } // Literal.Number.Integer + .mo { + color: #099 + } // Literal.Number.Oct + .sb { + color: #d14 + } // Literal.String.Backtick + .sc { + color: #d14 + } // Literal.String.Char + .sd { + color: #d14 + } // Literal.String.Doc + .s2 { + color: #d14 + } // Literal.String.Double + .se { + color: #d14 + } // Literal.String.Escape + .sh { + color: #d14 + } // Literal.String.Heredoc + .si { + color: #d14 + } // Literal.String.Interpol + .sx { + color: #d14 + } // Literal.String.Other + .sr { + color: #009926 + } // Literal.String.Regex + .s1 { + color: #d14 + } // Literal.String.Single + .ss { + color: #990073 + } // Literal.String.Symbol + .bp { + color: #999 + } // Name.Builtin.Pseudo + .vc { + color: #008080 + } // Name.Variable.Class + .vg { + color: #008080 + } // Name.Variable.Global + .vi { + color: #008080 + } // Name.Variable.Instance + .il { + color: #099 + } // Literal.Number.Integer.Long +} \ No newline at end of file