From 58fc4a5a2f80527f29d0d965a0f081cbc32c5b49 Mon Sep 17 00:00:00 2001
From: Fronbasal <mail@fronbasal.de>
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