diff options
| -rw-r--r-- | blog/_sass/_common.scss | 5 | ||||
| -rw-r--r-- | blog/_sass/_config.scss | 12 | ||||
| -rw-r--r-- | blog/assets/images/background.jpg | bin | 0 -> 134714 bytes | |||
| -rw-r--r-- | blog/assets/images/header.png | bin | 0 -> 14844 bytes | |||
| -rw-r--r-- | blog/css/main.scss | 153 |
5 files changed, 170 insertions, 0 deletions
diff --git a/blog/_sass/_common.scss b/blog/_sass/_common.scss new file mode 100644 index 0000000..a392022 --- /dev/null +++ b/blog/_sass/_common.scss @@ -0,0 +1,5 @@ +@mixin round-corners { + border: { + radius: 5px; + } +} diff --git a/blog/_sass/_config.scss b/blog/_sass/_config.scss new file mode 100644 index 0000000..4054059 --- /dev/null +++ b/blog/_sass/_config.scss @@ -0,0 +1,12 @@ +$body-bg: black; +$text-color: #aaa; +$link-color: #666; +$side-bar-background: rgba(20, 20, 20, 0.7); +$menu-bar-background: $side-bar-background; + + +$nav-link-padding: 5px 10px; +$nav-link-hover-bg: rgba(40, 70, 80, 0.7); +$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/images/background.jpg b/blog/assets/images/background.jpg Binary files differnew file mode 100644 index 0000000..c650208 --- /dev/null +++ b/blog/assets/images/background.jpg diff --git a/blog/assets/images/header.png b/blog/assets/images/header.png Binary files differnew file mode 100644 index 0000000..649999a --- /dev/null +++ b/blog/assets/images/header.png diff --git a/blog/css/main.scss b/blog/css/main.scss new file mode 100644 index 0000000..8180956 --- /dev/null +++ b/blog/css/main.scss @@ -0,0 +1,153 @@ +--- +# Only the main Sass file needs front matter (the dashes are enough) +--- +@import "config"; +@import "common"; + +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: #686; + &:hover { + color: lighten(#686, 5%); + } +} + +#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%; + } + } +} + +#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; +} |
