diff options
Diffstat (limited to '')
| -rw-r--r-- | src/scss/_mixins.scss | 12 | ||||
| -rw-r--r-- | src/scss/_variables.scss | 1 | ||||
| -rw-r--r-- | src/scss/blog.scss | 3 | ||||
| -rw-r--r-- | src/scss/bucket/_style.scss | 1 | ||||
| -rw-r--r-- | src/scss/ie/ie.scss | 17 | ||||
| -rw-r--r-- | src/scss/ie/ie6.scss | 41 | ||||
| -rw-r--r-- | src/scss/main.scss | 137 |
7 files changed, 87 insertions, 125 deletions
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index 25eb0c1..62ae802 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -1,16 +1,8 @@ -@mixin box-sizing { - * { - -moz-box-sizing: border-box; - -webkit-border-box: border-box; - box-sizing: border-box; - } -} - @mixin section { - border: $border-width solid $border-color; @include border-radius($outer-radius); + border: $border-width solid $border-color; background: $black; - margin-bottom: $outer-gap; + text-align: left; } @mixin linear-gradient($deg, $first, $values...) { diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 55627f8..9f493ff 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -23,3 +23,4 @@ $border-width: 5px; $border-color: #ccc; $page-width: 1000px; +$logo-width: 200px; diff --git a/src/scss/blog.scss b/src/scss/blog.scss index 665c5a4..dbb652f 100644 --- a/src/scss/blog.scss +++ b/src/scss/blog.scss @@ -13,14 +13,11 @@ margin-left: 0 !important; } - overflow-x: scroll; max-width: $page-width - $outer-gap * 2 - $inner-gap; } code { display: inline-block; - max-width: 100%; - overflow-x: scroll; } img { diff --git a/src/scss/bucket/_style.scss b/src/scss/bucket/_style.scss index 8d65c68..050485c 100644 --- a/src/scss/bucket/_style.scss +++ b/src/scss/bucket/_style.scss @@ -1,4 +1,3 @@ -@include box-sizing; @include font-face("Merriweather"); @include font-face("CourierNew"); diff --git a/src/scss/ie/ie.scss b/src/scss/ie/ie.scss index 0498093..6305875 100644 --- a/src/scss/ie/ie.scss +++ b/src/scss/ie/ie.scss @@ -4,7 +4,7 @@ #header { .ie-nav { - margin-left: 90px; + margin-left: 70px; } } @@ -23,12 +23,13 @@ h2.heading { background: $blue; } - } - #post, - #writeup { - .posted { - margin-top: $inner-gap; + table { + width: 99%; + } + + pre code { + width: 95%; } } @@ -45,8 +46,4 @@ } } } - - table { - behavior: url(boxsizing.htc); - } } diff --git a/src/scss/ie/ie6.scss b/src/scss/ie/ie6.scss deleted file mode 100644 index a443956..0000000 --- a/src/scss/ie/ie6.scss +++ /dev/null @@ -1,41 +0,0 @@ -/* IE 6 and 7 Only */ - -@import "../variables"; - -/** - * IE5 and below seem to look fine without boxsizing - * additions, its only the jump to IE5 where things seem - * to start breaking and thus this is needed - */ - -* { - behavior: url(boxsizing.htc); -} - -/** - * Fix homepage margin near footer, only caused - * by the boxsizing i think - */ -body { - #main { - .col { - - &div.left { - margin-bottom: $inner-gap; - } - - &div.right { - margin-top: $inner-gap; - } - - } - } - - div#contact { - margin-bottom: 0; - } - - div#footer { - margin-top: $inner-gap; - } -} diff --git a/src/scss/main.scss b/src/scss/main.scss index 925cfef..ae3ac11 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -1,7 +1,6 @@ @import "./variables"; @import "./mixins"; -@include box-sizing; @include font-face("FontStuck-Extended"); @include font-face("CourierNew"); @@ -115,36 +114,25 @@ html { body { @include background-image( - url("WEB_ROOT/public/img/background.png?ref=4"), - url("WEB_ROOT/public/img/background.webp?ref=7") type("image/webp"), - url("WEB_ROOT/public/img/background.png?ref=4") type("image/png") + url("WEB_ROOT/public/img/background.png?ref=4"), + url("WEB_ROOT/public/img/background.webp?ref=7") type("image/webp"), + url("WEB_ROOT/public/img/background.png?ref=4") type("image/png") ); background-repeat: repeat; background-size: 512px; background-color: #181818; -} - -.center { - display: block; - margin-left: auto !important; - margin-right: auto !important; + min-height: 100%; } html, body, -#container { +.container { width: 100%; margin: 0; padding: 0; -} -body { - padding: $inner-gap; - min-height: 100%; - - > .center { - display: table; - margin: 0 auto; + .section { + @include section; } } @@ -155,33 +143,41 @@ body { #header, #main, #footer, -#container { - @include border-radius($outer-radius); +.container { + display: block; width: $page-width; - text-align: left; } #header, #footer { - display: block; - @include section; + margin-bottom: $outer-gap; + + .section { + padding: $inner-gap; + } } #header { - $logo-size: 200px; - height: #{$logo-size + $inner-gap * 2 + 10px}; - padding: $inner-gap; + margin-top: $outer-gap; + + &, &.container { + height: $logo-width + $inner-gap * 2 + $border-width * 2; + + .section { + height: $logo-width; + } + } img { @include border-radius($inner-radius); float: left; - height: $logo-size; - width: $logo-size; + height: $logo-width; + width: $logo-width; } .content { padding-top: 30px; - padding-left: $logo-size; + padding-left: $logo-width; .logo-text { margin: 0; @@ -222,24 +218,26 @@ body { } } -/* once the page has been shrank to max content width */ -@media (max-width: ($page-width + $outer-gap * 2)) { - body { - width: 1px; - min-width: 100%; - - > .center { - display: block; - } - } +#header, +#main, +#footer { + display: block; + margin-left: auto !important; + margin-right: auto !important; +} - body > .center, +/* once the page has been shrank to max content width */ +@media (max-width: ($page-width + $outer-gap * 2 + $border-width * 2)) { + body, #header, #main, - #footer, - #container { + #footer { width: 100%; - max-width: 100%; + + .container { + padding: 0 $outer-gap; + width: auto; + } } } @@ -248,6 +246,14 @@ body { display: block; height: auto; + &, &.container { + height: auto; + + .section { + height: auto; + } + } + img { float: none; display: block; @@ -275,14 +281,15 @@ body { } @media (max-width: 300px) { - body { - width: 300px; + body, + #header, + #main, + #footer { + width: 300px; } } #footer { - padding: $inner-gap; - .footer-text { display: block; margin: 10px 0; @@ -318,6 +325,7 @@ body { #main .section { @include section; + margin-bottom: $outer-gap; .heading { @include linear-gradient(to bottom, $blue, $black); @@ -339,20 +347,22 @@ body { border-left: 5px solid $blue; } - pre { - background: black; - margin-right: $inner-gap; - @include border-radius($outer-radius); - padding: $inner-gap; - } - code { font-family: $font; color: $green; } - pre code { - color: $white; + pre { + @include border-radius($outer-radius); + background: black; + overflow-x: scroll; + margin-right: $inner-gap; + + code { + padding: $inner-gap; + padding-bottom: 0px; + color: $white; + } } table { @@ -399,8 +409,15 @@ body { } } } -} -#main #ad { - padding: $inner-gap; + &#post, + &#writeup { + .posted { + margin-top: $inner-gap; + } + } + + &#ad { + padding: $inner-gap; + } } |