diff options
| -rw-r--r-- | blog/_includes/header.html | 2 | ||||
| -rw-r--r-- | blog/_includes/menubar.html | 3 | ||||
| -rw-r--r-- | blog/_sass/_config.scss | 7 | ||||
| -rw-r--r-- | blog/_sass/_header.scss | 20 | ||||
| -rw-r--r-- | blog/_sass/_navbar.scss | 31 | ||||
| -rw-r--r-- | blog/css/main.scss | 43 |
6 files changed, 62 insertions, 44 deletions
diff --git a/blog/_includes/header.html b/blog/_includes/header.html index a5eab3d..c873fb1 100644 --- a/blog/_includes/header.html +++ b/blog/_includes/header.html @@ -1,7 +1,7 @@ <header id="header"> <div id="logo"> <img src="{{ '/assets/images/header.png' | prepend: site.baseurl_root }}" alt="Norsk Urskog"> - Norwegian Underground Metal Sampler + <p>Norwegian Underground Metal Sampler</p> </div> <div id="banner-pos-1"> <a href="http://infernofestival.net"> diff --git a/blog/_includes/menubar.html b/blog/_includes/menubar.html index 1242ca8..04b6834 100644 --- a/blog/_includes/menubar.html +++ b/blog/_includes/menubar.html @@ -1,7 +1,8 @@ <nav class="site-nav"> + <a class="page-link" href="{{ site.baseurl }}">{% t titles.home %}</a> {% for page in site.pages %} {% if page.title and page.hidden != true %} - <a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a> + <a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{% t {{ page.title }} %}</a> {% endif %} {% endfor %} </nav> diff --git a/blog/_sass/_config.scss b/blog/_sass/_config.scss index 4054059..68fb2b6 100644 --- a/blog/_sass/_config.scss +++ b/blog/_sass/_config.scss @@ -1,12 +1,13 @@ $body-bg: black; $text-color: #aaa; -$link-color: #666; +$link-color: #686; +$link-hover-color: lighten(#686, 5%); $side-bar-background: rgba(20, 20, 20, 0.7); -$menu-bar-background: $side-bar-background; +$menu-bar-background: rgba(128, 256, 128, 0.15); $nav-link-padding: 5px 10px; -$nav-link-hover-bg: rgba(40, 70, 80, 0.7); +$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/_sass/_header.scss b/blog/_sass/_header.scss new file mode 100644 index 0000000..7998bb5 --- /dev/null +++ b/blog/_sass/_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/_sass/_navbar.scss b/blog/_sass/_navbar.scss new file mode 100644 index 0000000..f5c46f5 --- /dev/null +++ b/blog/_sass/_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/css/main.scss b/blog/css/main.scss index 8180956..a6abce1 100644 --- a/blog/css/main.scss +++ b/blog/css/main.scss @@ -3,6 +3,8 @@ --- @import "config"; @import "common"; +@import "header"; +@import "navbar"; body { background-color: black; @@ -18,9 +20,9 @@ body { } a { - color: #686; + color: $link-color; &:hover { - color: lighten(#686, 5%); + color: $link-hover-color; } } @@ -114,40 +116,3 @@ a { } } } - -#logo { - position: relative; - font-size: 110%; - font-weight: 600; - width: 479px; - text-align: center; -} - -#menu-bar, #next_prev_article { - margin-bottom: 1em; - background: { - color: $menu-bar-background; - } - font-size: 110%; - font-weight: 600; - @include round-corners; - ul { - li { - a { - color: $link-color; - } - } - .selected { - background-color: $nav-pills-active-link-hover-bg; - } - &.menu-flags { - float: right; - } - } -} - -#banner-pos-1 { - position: absolute; - top: 1.5em; - right: 0; -} |