From ac581fe31d5f6d72d45bdfa2e21df451015f22f5 Mon Sep 17 00:00:00 2001 From: Harald Eilertsen Date: Tue, 25 Aug 2015 14:41:04 +0200 Subject: Install jekyll-assets for better asset pipeline support. --- blog/_assets/stylesheets/.gitkeep | 0 blog/_assets/stylesheets/_common.scss | 5 ++ blog/_assets/stylesheets/_config.scss | 13 ++++ blog/_assets/stylesheets/_header.scss | 20 ++++++ blog/_assets/stylesheets/_navbar.scss | 31 +++++++++ blog/_assets/stylesheets/main.scss | 118 ++++++++++++++++++++++++++++++++++ 6 files changed, 187 insertions(+) create mode 100644 blog/_assets/stylesheets/.gitkeep create mode 100644 blog/_assets/stylesheets/_common.scss create mode 100644 blog/_assets/stylesheets/_config.scss create mode 100644 blog/_assets/stylesheets/_header.scss create mode 100644 blog/_assets/stylesheets/_navbar.scss create mode 100644 blog/_assets/stylesheets/main.scss (limited to 'blog/_assets/stylesheets') diff --git a/blog/_assets/stylesheets/.gitkeep b/blog/_assets/stylesheets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/blog/_assets/stylesheets/_common.scss b/blog/_assets/stylesheets/_common.scss new file mode 100644 index 0000000..a392022 --- /dev/null +++ b/blog/_assets/stylesheets/_common.scss @@ -0,0 +1,5 @@ +@mixin round-corners { + border: { + radius: 5px; + } +} diff --git a/blog/_assets/stylesheets/_config.scss b/blog/_assets/stylesheets/_config.scss new file mode 100644 index 0000000..68fb2b6 --- /dev/null +++ b/blog/_assets/stylesheets/_config.scss @@ -0,0 +1,13 @@ +$body-bg: black; +$text-color: #aaa; +$link-color: #686; +$link-hover-color: lighten(#686, 5%); +$side-bar-background: rgba(20, 20, 20, 0.7); +$menu-bar-background: rgba(128, 256, 128, 0.15); + + +$nav-link-padding: 5px 10px; +$nav-link-hover-bg: rgba(128, 256, 128, 0.2); +$nav-link-hover-color: #ccf; +$nav-pills-active-link-hover-bg: $nav-link-hover-bg; +$nav-pills-active-link-hover-color: $nav-link-hover-color; diff --git a/blog/_assets/stylesheets/_header.scss b/blog/_assets/stylesheets/_header.scss new file mode 100644 index 0000000..7998bb5 --- /dev/null +++ b/blog/_assets/stylesheets/_header.scss @@ -0,0 +1,20 @@ +#header { + width: 100%; + font-size: 110%; + font-weight: 600; + + #logo { + position: relative; + width: 479px; + text-align: center; + p { + margin-top: 0; + } + } + + #banner-pos-1 { + position: absolute; + top: 1.5em; + right: 0; + } +} diff --git a/blog/_assets/stylesheets/_navbar.scss b/blog/_assets/stylesheets/_navbar.scss new file mode 100644 index 0000000..f5c46f5 --- /dev/null +++ b/blog/_assets/stylesheets/_navbar.scss @@ -0,0 +1,31 @@ +#header { + .site-nav { + background: { + color: $menu-bar-background; + } + @include round-corners; + width: 100%; + border: { + bottom: 1px solid darkgray; + top: 1px solid darkgray; + } + + a { + text-decoration: none; + color: $link-color; + padding: { + top: 1.5mm; + bottom: 1.5mm; + left: 2mm; + right: 2mm; + } + &:hover { + background-color: $nav-link-hover-bg; + color: $nav-link-hover-color; + } + } + &.menu-flags { + float: right; + } + } +} diff --git a/blog/_assets/stylesheets/main.scss b/blog/_assets/stylesheets/main.scss new file mode 100644 index 0000000..a6abce1 --- /dev/null +++ b/blog/_assets/stylesheets/main.scss @@ -0,0 +1,118 @@ +--- +# Only the main Sass file needs front matter (the dashes are enough) +--- +@import "config"; +@import "common"; +@import "header"; +@import "navbar"; + +body { + background-color: black; + color: $text-color; + line-height: 135%; + + background: { + image: url({{ "/assets/images/background.jpg" | prepend: site.baseurl_root }}); + repeat: no-repeat; + position: center top; + color: black; + } +} + +a { + color: $link-color; + &:hover { + color: $link-hover-color; + } +} + +#page-container { + position: relative; + width: 28cm; + margin: { + top: 10mm; + left: auto; + right: auto; + } + footer { + clear: both; + } +} + +#body-content { + position: relative; + min-height: 700px; + + padding: 1em; + @include round-corners; + + #body { + padding-right: 20em; + } + + #side_body { + position: absolute; + width: 244px; + bottom: 1em; + right: 1em; + top: 1em; + overflow: auto; + .inner { + padding: 10px; + } + background: { + color: $side-bar-background + } + @include round-corners; + + h1 { + font: { + size: 20px; + weight: bold; + } + } + + h2 { + font: { + size: 16px; + weight: bold; + } + } + + h3 { + font: { + size: 12px; + weight: bold; + } + } + } + + #news, #links { + width: 8.55cm; + float: left; + margin-right: 5mm; + + header { + date { + font-size: 10pt; + } + h1 { + font: { + size: 13pt; + weight: bold; + } + margin: { + bottom: 5mm; + top: 0; + } + a { + text-decoration: none; + } + } + } + + &.wide { + width: 100%; + } + } +} -- cgit v1.2.3