diff options
| -rw-r--r-- | favicon.ico | bin | 0 -> 60582 bytes | |||
| -rw-r--r-- | front.scss | 79 | ||||
| -rw-r--r-- | partials/_base-h5bp.scss | 5 | ||||
| -rw-r--r-- | partials/_base.scss | 31 | ||||
| l--------- | partials/_leaflet.scss | 1 | ||||
| -rw-r--r-- | style.scss | 543 |
6 files changed, 659 insertions, 0 deletions
diff --git a/favicon.ico b/favicon.ico Binary files differnew file mode 100644 index 0000000..189aa5c --- /dev/null +++ b/favicon.ico diff --git a/front.scss b/front.scss new file mode 100644 index 0000000..dede5f2 --- /dev/null +++ b/front.scss @@ -0,0 +1,79 @@ +@import 'h5bp/helpers'; +@import 'compass/css3'; +@import "partials/base"; + +#content { + width: 96%; + max-width: none; +} + +.inlinepage { + position: relative; +//set to make inline header position work + border: 0; + padding: 0; + margin: 0 0 1em 0; + background-color: transparent; + height: 15em; + overflow: hidden; +} + +//set to annull style.css +.inlinecontent { + margin-top: 0; +} + +.inlineheader { + display: block; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + a { + font-weight: normal; + color: white; + background-color: #6699cc; + display: block; + padding: 0.5em; + opacity: 0.8; + } +} + +.inlinecontent p { + margin-bottom: 0; + margin-top: 0; +} + +.inlinefooter, +.inlineheader .author, +.sidebar, +.farbar { + @include h5bp-hidden; +} + +//Responsive design +@media screen and (max-width: 480px) { + #content { + width: 100%; + margin: 0; + padding: 0; + } + .columns { + @include column-count(1); + } + .inlinepage { + margin: 0; + } +} + +@media screen and (min-width: 480px) and (max-width: 700px) { + .columns { + @include column-count(2); + } +} + +@media screen and (min-width: 701px) { + .columns { + @include column-count(3); + } +} diff --git a/partials/_base-h5bp.scss b/partials/_base-h5bp.scss new file mode 100644 index 0000000..c9ab66b --- /dev/null +++ b/partials/_base-h5bp.scss @@ -0,0 +1,5 @@ +// Compass integration +// +// No styleguide reference. +$font-size: $baseFontSize; +$line-height: $baseLineHeight; diff --git a/partials/_base.scss b/partials/_base.scss new file mode 100644 index 0000000..e2bbd9c --- /dev/null +++ b/partials/_base.scss @@ -0,0 +1,31 @@ +// Typography +// +// No styleguide reference. +$baseFontSize: 12px; +$baseLineHeight: ($baseFontSize * 2); + +// Framework integrations +// +// No styleguide reference. +@import "base-h5bp"; + +// Structure +// +// Layout Gala: https://web.archive.org/web/20071025014516/http://blog.html.it/layoutgala/LayoutGala01.html +$blockLeft-width: 16%; +$blockLeft-marginLeft: 2%; +$blockLeft-marginRight: 0%; +$blockLeft-marginBoth: ($blockLeft-marginLeft + $blockLeft-marginRight); +$blockLeft-paddingAny: 1%; +$blockLeft-paddingBoth: (2 * $blockLeft-paddingAny); +$blockLeft-fullwidth: ($blockLeft-width + $blockLeft-marginBoth + $blockLeft-paddingBoth); // 20% +$blockMid-marginLeft: 2%; +$blockMid-marginRight: 2%; +$blockMid-marginBoth: ($blockMid-marginLeft + $blockMid-marginRight); +$blockRight-width: 16%; +$blockRight-marginLeft: 0%; +$blockRight-marginRight: 2%; +$blockRight-marginBoth: ($blockRight-marginLeft + $blockRight-marginRight); +$blockRight-paddingAny: 1%; +$blockRight-paddingBoth: (2 * $blockRight-paddingAny); +$blockRight-fullwidth: ($blockRight-width + $blockRight-marginBoth + $blockRight-paddingBoth); // 20% diff --git a/partials/_leaflet.scss b/partials/_leaflet.scss new file mode 120000 index 0000000..40a1f03 --- /dev/null +++ b/partials/_leaflet.scss @@ -0,0 +1 @@ +/usr/share/javascript/leaflet/leaflet.css
\ No newline at end of file diff --git a/style.scss b/style.scss new file mode 100644 index 0000000..224fdf1 --- /dev/null +++ b/style.scss @@ -0,0 +1,543 @@ +@import "partials/base"; +@import "h5bp"; +@import "compass"; +@import "../shared/themes/default/ikiwiki"; + +// site defaults +@include h5bp-normalize; +@include h5bp-main; +@include ikiwiki-images; +@include ikiwiki-pre; +// generic styles +@include ikiwiki-lists; +@include ikiwiki-feedbutton; +@include ikiwiki-forms; +@include ikiwiki-alignment; +@include ikiwiki-debug; +@include ikiwiki-plugin-highlight; +@include ikiwiki-plugin-color; +// based on ikiwiki-plugin-img +// - img.img styling +// + left-aligned +// + vertical margin +// + line-height +.img caption { + margin: -1em 0 1.5em; + line-height: 175%; + font-size: 80%; + caption-side: bottom; + text-align: left; +} +// shell +// layout +@include ikiwiki-site; +@include ikiwiki-site-print; +// modulars +@include ikiwiki-infobox; +@include ikiwiki-notebook; +@include ikiwiki-popup; +@include ikiwiki-plugin-calendar; +@include ikiwiki-plugin-progress; +@include ikiwiki-plugin-map; +@include ikiwiki-plugin-poll; +@include ikiwiki-plugin-pagestats; +@include ikiwiki-plugin-flattr; +@include ikiwiki-blogform; +// section/page specific +@include ikiwiki-archivepage; +@include ikiwiki-plugin-recentchanges; +@include ikiwiki-plugin-editpage; +@include ikiwiki-plugin-attachment; +@include ikiwiki-plugin-openid; + +h1 { + font-weight: normal; + color: DarkRed; + margin-bottom: 0.1em; + line-height: 1.4em; +} + + +h4, +h5, +h6 { + text-decoration: blink; +} + +h2 { + font-weight: normal; + font-size: 1.5em; +} + +h3 { + font-size: 1.25em; + font-weight: bold; +} + +h2, +h3 { + margin-top: 0; + margin-bottom: 0.1em; +} + +a { + @include hover-link; + color: darkblue; + font-weight: normal; +} + +p { + margin-top: 0.2em; + margin-bottom: 1.2em; +} + +i { + @include h5bp-hidden; +} + + +ul { + margin-bottom: 1.2em; +} + +blockquote { + font-style: italic; + margin: 1em; +} + +body { + margin: 0; + background-color: white; + font-family: sans-serif; +} + +.pageheader .title { + @include h5bp-hidden; +} + +.parentlinks { + @include h5bp-hidden; +} + +#searchform { + margin: 20px; +} + +.pageheader .actions { + position: absolute; + top: 0; + right: 2em; + background-color: transparent; + ul { + @include inline-block-list; + height: 2em; // TODO: figure out if this can be eliminated + } + a { + color: transparent; + &:hover { + color: lightblue; + text-decoration: none; + } + } +} + +.author { + font-size: 1em; + line-height: 1.8em; +} + +.archivepage { + margin-left: 0.5em; + margin-bottom: 0.5em; + a { + color: black; + &:hover { + color: DarkBlue; + } + } +} + +.archivepagedate { + @include h5bp-hidden; +} + +.topbar { + height: 13em; + margin: 0; + padding: 0; + background-color: #336699; + text-transform: uppercase; + letter-spacing: 1px; +// position: absolute; + top: 0; +// right: 0; +} + + +//styling of background image.// +/* + Example use (in topbar.mdwn file!): + + <div class="imgframe" style="background-image:url('../tjeneren.jpg')"></div> +*/ +.topbar .imgframe { + @extend .topbar; + top: 0; + width: 100%; + background-position: center; +} + +.topbar p { + margin-top: 0; + margin-bottom: 0; +} + +// main menu +.topbar ul { + @include inline-block-list; + position: absolute; + top: 6.25em; + height: 4em; + width: 100%; + font-size: 1.25em; + line-height: 2em; + text-align: center; + li { + a, + .selflink { + @include inline-block; + width: 8em; + padding: 1em .5em; + background-color: #6699cc; + color: white; + font-weight: bold; + &:hover { + background-color: lightblue; + color: #336699; + text-decoration: none; + } + } + } + @media screen and (max-width: 480px) { + top: 9em; + font-size: inherit; + } + @media screen and (min-width: 701px) { + right: 6em; + width: auto; + li { + padding-left: .2em; + padding-right: .2em; + text-align: center; + a, + .selflink { + width: 10em; + padding: 1em; + } + } + } +} + +.topbar img { + margin: 1.5em 20px; + background-color: transparent; +} + +#wrapper, +#pagebody { + float: left; + width: 100%; +} + +#content { + min-height: 480px; +// width: (100% - $blockMid-marginBoth - $blockLeft-fullwidth - $blockRight-fullwidth); + width: 68%; + max-width: 72em; +// margin: 2% ($blockMid-marginRight + $blockRight-fullwidth) 2% ($blockMid-marginLeft + $blockLeft-fullwidth); + margin: 0; + padding: 2em 2%; + text-align: left; + background-color: none; +} + +.notebox { + float: none; + display: block; +//Overwrite ikiwiki default width: + width: inherit; + max-width: 48em; + margin-right: 2em; +// + color: gray !important; + background-color: none; + margin-left: 0; + text-align: center; +} + +img { + float: left; + vertical-align: top; + margin: 0 1em 1em 0; + padding: 0; + max-width: 100%; + height: auto; +} + +#content img.deco { + display: block; + clear: both; + float: right; + width: 30%; + max-width: 200px; + margin: 0; + padding: 0 0 1em 4%; + background-color: none; +} + +#content img.flex { + max-height: 80px; + width: auto; + display: block; + float: none; +} + +#content img.solo { + float: none; + display: block; + padding: 0; +} +#content img.x2470x3783 { + height:3783px; + width: 2470px; + max-width: 2470px; +} +#content img.x1000x750 { + height: 750px; + width: 1000px; + max-width: 1000px; +} +#content img.x108x132 { + height: 132px; + width: 108px; + max-width: 108px; +} + +td, +th { + padding: 0 1em 0 0; +} + +.inlinepage { + border: 0; + padding: 1em 5%; + margin: 0; + background-color: lightyellow; +} + +.inlineheader a { + font-weight: normal; + color: DarkRed; + line-height: 1.5em; +} + +.inlinefooter { + @include h5bp-hidden; +} + +.inlineheader .author { + @include h5bp-hidden; +} + +.sidebar { +//temporarily hidden + @include h5bp-hidden; +// float: left; +// min-height: 480px; +// width: $blockLeft-width; +// padding: $blockLeft-paddingAny; +// margin-top: 2%; +// margin-left: -(100% - $blockLeft-marginLeft); +// margin-bottom: 2%; +// border: none; +// background-color: LightBlue; +// text-align: left; +} + +.sidebar ul { + padding-left: 0.5em; + p { + margin: 1em 0; + } +} + +.sidebar ul li { + @include no-bullets; + padding: 0; +} + +.sidebar ul li, +.sidebar ul li p { + line-height: 1.5em; +} + +.sidebar ul li a { + font-weight: normal; +} + +.sidebar p { + color: DarkBlue; +} +.sidebar ul li .selflink { + font-weight: bold; +} + +.farbar { + float: left; + min-height: 480px; +// width: $blockRight-width; + width: 23%; + margin-top: 0; +// margin-left: -($blockRight-fullwidth - $blockRight-marginLeft); + margin-left: -27%; + margin-bottom: 0; +// padding: $blockRight-paddingAny; + padding: 2em 2%; + background-color: LightBlue; + text-align: left; + img { + height: auto; + width: 100%; + } + #mc_embed_signup { + background-color: inherit; + font: inherit; + } +} + +@media screen and (max-width: 480px) { + #content { + width: 96%; + margin: 0; + padding: 0 2%; + } + .columns { + @include column-count(1); + } + .inlinepage { + margin: 0; + } + .farbar { + width: 96%; + margin-left: 0; + } + .sidebar { + float: none; + width: 96%; + margin-left: 0; + } +} + +.farbar p i { + font-size: 0.8em; + line-height: 1em; +} + +.farbar .inlinepage img { + @include h5bp-hidden; +} + +.farbar h3 a { + color: black; + font-weight: bold; +} + +.tags { + @include h5bp-hidden; +} + +#backlinks { + @include h5bp-hidden; +} + +#footer { + clear: left; + width: 100%; + margin: 2% 0 0; + ul { + @include no-bullets; + padding: 0; + } +// to secure readability with current colors. + img { + height: auto; + float: none; + display: block; + padding: 0; + } + #mc_embed_signup { + background-color: inherit; + font: inherit; + input { + color: Black; + } + .button { + color: DarkBlue; + background-color: LightBlue; + } + } +} + +#footer #mc_embed_signup form { + padding: 0; +} + +#footer #mc_embed_signup label { + font-size: inherit; +} + +#pageinfo { + margin: 0; + border-top: 0; + padding:1em 1em 1em 20px; + background-color: #336699; + color: LightBlue; + a { + color: LightBlue; + &:hover { + color: white; + } + } +} + +.pagedate { + margin-top: 0; +} + +.pagecopyright, +.pagecopyright P { + margin-top: 0; + margin-bottom: 0; +} + +//Responsive design +@media screen and (max-width: 480px) { + .columns { + @include column-count(1); + } + .inlinepage { + margin: 0; + } +} + +@media screen and (min-width: 480px) and (max-width: 700px) { + .columns { + @include column-count(2); + } +} + +@media screen and (min-width: 701px) { + .columns { + @include column-count(3); + } +} |