Chaospott/site
43
1
Fork 1
Code Issues Pull Requests Releases Activity

Refactoring, navbar color, shadow

Browse Source
This commit is contained in:
Fronbasal 2017-06-13 01:21:31 +02:00
parent 1947219801
commit 58fc4a5a2f
3 changed files with 301 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
_sass/_base.scss
View File

@ -1,18 +1,31 @@
/** /**
* Reset some basic elements * Reset some basic elements
*/ */
body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, body,
dl, dd, ol, ul, figure { h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
dl,
dd,
ol,
ul,
figure {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
/** /**
* Basic styling * Basic styling
*/ */
body { body {
font-family: $base-font-family; font-family: $base-font-family;
font-size: $base-font-size; font-size: $base-font-size;
@ -24,33 +37,43 @@ body {
} }
/** /**
* Set `margin-bottom` to maintain vertical rhythm * Set `margin-bottom` to maintain vertical rhythm
*/ */
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, h1,
ul, ol, dl, figure, h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
ul,
ol,
dl,
figure,
%vertical-rhythm { %vertical-rhythm {
margin-bottom: $spacing-unit / 2; margin-bottom: $spacing-unit / 2;
} }
/** /**
* Images * Images
*/ */
img { img {
max-width: 100%; max-width: 100%;
vertical-align: middle; vertical-align: middle;
} }
/** /**
* Figures * Figures
*/ */
figure > img {
figure>img {
display: block; display: block;
} }
@ -59,43 +82,47 @@ figcaption {
} }
/** /**
* Lists * Lists
*/ */
ul, ol {
ul,
ol {
margin-left: $spacing-unit; margin-left: $spacing-unit;
} }
li { li {
> ul, >ul,
> ol { >ol {
margin-bottom: 0; margin-bottom: 0;
} }
} }
/** /**
* Headings * Headings
*/ */
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 300; font-weight: 300;
} }
/** /**
* Links * Links
*/ */
a { a {
color: $brand-color; color: $brand-color;
text-decoration: none; text-decoration: none;
&:visited { &:visited {
color: darken($brand-color, 15%); color: darken($brand-color, 15%);
} }
&:hover { &:hover {
color: $text-color; color: $text-color;
text-decoration: underline; text-decoration: underline;
@ -103,10 +130,10 @@ a {
} }
/** /**
* Blockquotes * Blockquotes
*/ */
blockquote { blockquote {
color: $grey-color; color: $grey-color;
border-left: 4px solid $grey-color-light; border-left: 4px solid $grey-color-light;
@ -114,17 +141,16 @@ blockquote {
font-size: 18px; font-size: 18px;
letter-spacing: -1px; letter-spacing: -1px;
font-style: italic; font-style: italic;
> :last-child { > :last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
/** /**
* Code formatting * Code formatting
*/ */
pre, pre,
code { code {
font-size: 15px; font-size: 15px;
@ -140,8 +166,7 @@ code {
pre { pre {
padding: 8px 12px; padding: 8px 12px;
overflow-x: scroll; overflow-x: scroll;
>code {
> code {
border: 0; border: 0;
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
@ -149,34 +174,32 @@ pre {
} }
/** /**
* Wrapper * Wrapper
*/ */
.wrapper { .wrapper {
max-width: -webkit-calc(800px - (#{$spacing-unit} * 2)); 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-right: auto;
margin-left: auto; margin-left: auto;
padding-right: $spacing-unit; padding-right: $spacing-unit;
padding-left: $spacing-unit; padding-left: $spacing-unit;
@extend %clearfix; @extend %clearfix;
@include media-query($on-laptop) { @include media-query($on-laptop) {
max-width: -webkit-calc(800px - (#{$spacing-unit})); 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-right: $spacing-unit / 2;
padding-left: $spacing-unit / 2; padding-left: $spacing-unit / 2;
} }
} }
/** /**
* Clearfix * Clearfix
*/ */
%clearfix {
%clearfix {
&:after { &:after {
content: ""; content: "";
display: table; display: table;
@ -185,18 +208,16 @@ pre {
} }
/** /**
* Icons * Icons
*/ */
.icon {
> svg { .icon {
>svg {
display: inline-block; display: inline-block;
width: 16px; width: 16px;
height: 16px; height: 16px;
vertical-align: middle; vertical-align: middle;
path { path {
fill: $grey-color; fill: $grey-color;
} }

101
_sass/_chaospott.scss
View File

@ -6,39 +6,38 @@
} }
* { * {
background-color:transparent; background-color: transparent;
font-family: $base-font-family; font-family: $base-font-family;
} }
body, .jumbotron { body,
background-color:$background-color; .jumbotron {
background-color: $background-color;
} }
body { body {
padding-top:52px; padding-top: 52px;
} }
.jumbotron { .jumbotron {
margin:0; margin: 0;
padding:0; padding: 0;
.post-title { .post-title {
font-size:26px; font-size: 26px;
font-weight:bold; font-weight: bold;
} }
&>hr { &>hr {
background-color:#333; background-color: #333;
height:1px; height: 1px;
border: 3px #333 solid; border: 3px #333 solid;
width:300px; width: 300px;
} }
} }
.navbar { .navbar {
background-color:$background-color; background-color: #bdbfa8;
border:none; border: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
.divider-vertical { .divider-vertical {
height: 20px; height: 20px;
margin: 14px 9px; margin: 14px 9px;
@ -48,27 +47,24 @@ body {
} }
ul.navbar-nav li a { ul.navbar-nav li a {
color:$nav-link-color !important; color: $nav-link-color !important;
} }
.btn-default { .btn-default {
border:0; border: 0;
background-color:transparent; background-color: transparent;
color: $nav-link-color; color: $nav-link-color;
} }
a { a {
color:$nav-link-color; color: $nav-link-color;
&:visited { &:visited {
color:$nav-link-color; color: $nav-link-color;
} }
} }
.row { .row {
padding:50px 0; padding: 50px 0;
&-centered { &-centered {
text-align: center; text-align: center;
margin: 0; margin: 0;
@ -76,55 +72,54 @@ a {
} }
#large-header { #large-header {
background:#222 url('/images/logowall.svg') center top; background: #222 url('/images/logowall.svg') center top;
background-size: 450px; background-size: 450px;
height:300px; height: 300px;
margin:0 0 100px 0; margin: 0 0 100px 0;
padding:0; padding: 0;
img { img {
position:relative; position: relative;
top:30px; top: 30px;
width: 300px; width: 300px;
} }
} }
.col-centered { .col-centered {
display:inline-block; display: inline-block;
float:none; float: none;
text-align:left; text-align: left;
margin-right:-4px; margin-right: -4px;
} }
ul.nav>li>a { ul.nav>li>a {
color:$nav-link-color; color: $nav-link-color;
} }
.post-content img { .post-content img {
display: block; display: block;
margin:auto; margin: auto;
} }
#status_open, #status_closed { #status_open,
display:none; #status_closed {
border:0; display: none;
border: 0;
} }
#status_open a { #status_open a {
color:#5CB85C !important; color: #5CB85C !important;
} }
#status_closed a { #status_closed a {
color:#D9534F !important; color: #D9534F !important;
} }
#status_bar { #status_bar {
margin:0; margin: 0;
border-width:2px 0; border-width: 2px 0;
border-color:transparent; border-color: transparent;
} }
.navbar-inverse .divider-vertical { .navbar-inverse .divider-vertical {
border-right-color: #222222; border-right-color: #222222;
border-left-color: #111111; border-left-color: #111111;
@ -134,16 +129,13 @@ ul.nav>li>a {
#large-header { #large-header {
display: none; display: none;
} }
.navbar-header { .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 { .navbar-brand {
display: block; display: block;
} }
.navbar-collapse .nav>.divider-vertical {
.navbar-collapse .nav > .divider-vertical {
display: none; display: none;
} }
} }
@ -156,14 +148,13 @@ ul.nav>li>a {
rect.bordered { rect.bordered {
stroke: $background-color; stroke: $background-color;
stroke-width:1px; stroke-width: 1px;
} }
#posts { #posts {
div div p img { div div p img {
max-width: 123px; max-width: 123px;
float:left; float: left;
margin-right: 5px; margin-right: 5px;
} }
} }

253
_sass/_syntax-highlighting.scss
View File

@ -1,67 +1,200 @@
/** /**
* Syntax highlighting styles * Syntax highlighting styles
*/ */
.highlight { .highlight {
background: #fff; background: #fff;
@extend %vertical-rhythm; @extend %vertical-rhythm;
.c {
.c { color: #998; font-style: italic } // Comment color: #998;
.err { color: #a61717; background-color: #e3d2d2 } // Error font-style: italic
.k { font-weight: bold } // Keyword } // Comment
.o { font-weight: bold } // Operator .err {
.cm { color: #998; font-style: italic } // Comment.Multiline color: #a61717;
.cp { color: #999; font-weight: bold } // Comment.Preproc background-color: #e3d2d2
.c1 { color: #998; font-style: italic } // Comment.Single } // Error
.cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special .k {
.gd { color: #000; background-color: #fdd } // Generic.Deleted font-weight: bold
.gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific } // Keyword
.ge { font-style: italic } // Generic.Emph .o {
.gr { color: #a00 } // Generic.Error font-weight: bold
.gh { color: #999 } // Generic.Heading } // Operator
.gi { color: #000; background-color: #dfd } // Generic.Inserted .cm {
.gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific color: #998;
.go { color: #888 } // Generic.Output font-style: italic
.gp { color: #555 } // Generic.Prompt } // Comment.Multiline
.gs { font-weight: bold } // Generic.Strong .cp {
.gu { color: #aaa } // Generic.Subheading color: #999;
.gt { color: #a00 } // Generic.Traceback font-weight: bold
.kc { font-weight: bold } // Keyword.Constant } // Comment.Preproc
.kd { font-weight: bold } // Keyword.Declaration .c1 {
.kp { font-weight: bold } // Keyword.Pseudo color: #998;
.kr { font-weight: bold } // Keyword.Reserved font-style: italic
.kt { color: #458; font-weight: bold } // Keyword.Type } // Comment.Single
.m { color: #099 } // Literal.Number .cs {
.s { color: #d14 } // Literal.String color: #999;
.na { color: #008080 } // Name.Attribute font-weight: bold;
.nb { color: #0086B3 } // Name.Builtin font-style: italic
.nc { color: #458; font-weight: bold } // Name.Class } // Comment.Special
.no { color: #008080 } // Name.Constant .gd {
.ni { color: #800080 } // Name.Entity color: #000;
.ne { color: #900; font-weight: bold } // Name.Exception background-color: #fdd
.nf { color: #900; font-weight: bold } // Name.Function } // Generic.Deleted
.nn { color: #555 } // Name.Namespace .gd .x {
.nt { color: #000080 } // Name.Tag color: #000;
.nv { color: #008080 } // Name.Variable background-color: #faa
.ow { font-weight: bold } // Operator.Word } // Generic.Deleted.Specific
.w { color: #bbb } // Text.Whitespace .ge {
.mf { color: #099 } // Literal.Number.Float font-style: italic
.mh { color: #099 } // Literal.Number.Hex } // Generic.Emph
.mi { color: #099 } // Literal.Number.Integer .gr {
.mo { color: #099 } // Literal.Number.Oct color: #a00
.sb { color: #d14 } // Literal.String.Backtick } // Generic.Error
.sc { color: #d14 } // Literal.String.Char .gh {
.sd { color: #d14 } // Literal.String.Doc color: #999
.s2 { color: #d14 } // Literal.String.Double } // Generic.Heading
.se { color: #d14 } // Literal.String.Escape .gi {
.sh { color: #d14 } // Literal.String.Heredoc color: #000;
.si { color: #d14 } // Literal.String.Interpol background-color: #dfd
.sx { color: #d14 } // Literal.String.Other } // Generic.Inserted
.sr { color: #009926 } // Literal.String.Regex .gi .x {
.s1 { color: #d14 } // Literal.String.Single color: #000;
.ss { color: #990073 } // Literal.String.Symbol background-color: #afa
.bp { color: #999 } // Name.Builtin.Pseudo } // Generic.Inserted.Specific
.vc { color: #008080 } // Name.Variable.Class .go {
.vg { color: #008080 } // Name.Variable.Global color: #888
.vi { color: #008080 } // Name.Variable.Instance } // Generic.Output
.il { color: #099 } // Literal.Number.Integer.Long .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
} }