Refactoring, navbar color, shadow

2017-06-13 01:21:31 +02:00 · 2017-06-13 01:21:31 +02:00 · 58fc4a5a2f
commit 58fc4a5a2f
parent 1947219801
3 changed files with 301 additions and 156 deletions
--- 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,32 +37,42 @@ 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 {
    display: block;
 }
@ -59,11 +82,12 @@ figcaption {
 }


-
 /**
 * Lists
 */
-ul, ol {
+
+ul,
+ol {
    margin-left: $spacing-unit;
 }

@ -75,27 +99,30 @@ li {
 }


-
 /**
 * 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,7 +166,6 @@ code {
 pre {
    padding: 8px 12px;
    overflow-x: scroll;
-
    >code {
        border: 0;
        padding-right: 0;
@ -149,10 +174,10 @@ pre {
 }


-
 /**
 * Wrapper
 */
+
 .wrapper {
    max-width: -webkit-calc(800px - (#{$spacing-unit} * 2));
    max-width : calc(800px - (#{$spacing-unit} * 2));
@ -161,7 +186,6 @@ pre {
    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}));
@ -171,12 +195,11 @@ pre {
 }


-
 /**
 * Clearfix
 */
-%clearfix {

+%clearfix {
    &:after {
        content: "";
        display: table;
@ -185,18 +208,16 @@ pre {
 }


-
 /**
 * Icons
 */
-.icon {

+.icon {
    >svg {
        display: inline-block;
        width: 16px;
        height: 16px;
        vertical-align: middle;
-
        path {
            fill: $grey-color;
        }
--- a/_sass/_chaospott.scss
+++ b/_sass/_chaospott.scss
@ -10,7 +10,8 @@
  font-family: $base-font-family;
 }

-body, .jumbotron {
+body,
+.jumbotron {
  background-color: $background-color;
 }

@ -21,12 +22,10 @@ body {
 .jumbotron {
  margin: 0;
  padding: 0;
-
  .post-title {
    font-size: 26px;
    font-weight: bold;
  }
-
  &>hr {
    background-color: #333;
    height: 1px;
@ -36,9 +35,9 @@ body {
 }

 .navbar {
-  background-color:$background-color;
+  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;
@ -59,16 +58,13 @@ ul.navbar-nav li a {

 a {
  color: $nav-link-color;
-
  &:visited {
    color: $nav-link-color;
  }
 }

-
 .row {
  padding: 50px 0;
-
  &-centered {
    text-align: center;
    margin: 0;
@ -81,7 +77,6 @@ a {
  height: 300px;
  margin: 0 0 100px 0;
  padding: 0;
-
  img {
    position: relative;
    top: 30px;
@ -105,7 +100,8 @@ ul.nav>li>a {
  margin: auto;
 }

-#status_open, #status_closed {
+#status_open,
+#status_closed {
  display: none;
  border: 0;
 }
@ -124,7 +120,6 @@ ul.nav>li>a {
  border-color: transparent;
 }

-
 .navbar-inverse .divider-vertical {
  border-right-color: #222222;
  border-left-color: #111111;
@ -134,15 +129,12 @@ ul.nav>li>a {
  #large-header {
    display: none;
  }
-
  .navbar-header {
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
  }
-
  .navbar-brand {
    display: block;
  }
-
  .navbar-collapse .nav>.divider-vertical {
    display: none;
  }
@ -159,7 +151,6 @@ rect.bordered {
  stroke-width: 1px;
 }

-
 #posts {
  div div p img {
    max-width: 123px;
--- 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
 }