X-Git-Url: https://git.mdrn.pl/edumed.git/blobdiff_plain/c3955dfd70abab4db001b0d0ad3298747e168be8..d0f0e1412cc42d366b234e798dfb68feed05d751:/edumed/static/css/base.scss diff --git a/edumed/static/css/base.scss b/edumed/static/css/base.scss index 4b3a53d..b87a3e8 100644 --- a/edumed/static/css/base.scss +++ b/edumed/static/css/base.scss @@ -1,9 +1,7 @@ -@import url(http://fonts.googleapis.com/css?family=Dosis:400,700&subset=latin,latin-ext); +@import url(//fonts.googleapis.com/css?family=Dosis:400,700&subset=latin,latin-ext); -$px: .0625em; -$oranji: #ed7831; -$ciemny: #363a3e; -$zielony: #16a487; +@import "vars"; +@import "mixins"; a { @@ -16,14 +14,28 @@ a { } body { - font-family: Dosis; + @include base-font; margin: 0; - background: white; - color: $ciemny; } .clr { clear: both; } + +#banners { + margin: 0 auto; + width: 58.75em; + + > a { + display: block; + width: 100%; + } + + img { + display: block; + margin: 0 auto; + width: 100%; + } +} #header-wrapper { background-image: url(../img/header-bar.png); background-repeat: repeat-x; @@ -46,7 +58,12 @@ header.main { } #organizer { float: right; - margin-top: 1.3em; + font-size: .75em; + color: #777; + + img { + margin-top: .5em; + } } @@ -66,35 +83,57 @@ header.main { /*position:relative;*/ } a { - color: $oranji; + color: $ciemny; display: block; vertical-align: bottom; font-size: .85em; - } a:hover { - color: $ciemny; + color: $oranji; } + a:before { + content: " "; display: block; margin-bottom: .8em; + width: 44*$px; + height: 34*$px; + text-align:center; + margin: auto; + margin-bottom: .8em; } - .menu-lekcje:before { content: url(../img/menu/lekcje.png);} - .menu-kompetencje:before { content: url(../img/menu/katalog.png); } - .menu-wspolpraca:before { content: url(../img/menu/wspolpraca.png);} - .menu-szkolenia:before { content: url(../img/menu/szkolenia.png); } - .menu-wesprzyj:before { content: url(../img/menu/wesprzyj.png);} - .menu-o-nas:before { content: url(../img/menu/o-nas.png); } - .menu-kontakt:before { content: url(../img/menu/kontakt.png); } - .menu-lekcje:hover:before { content: url(../img/menu/lekcje_active.png);} - .menu-kompetencje:hover:before { content: url(../img/menu/katalog_active.png); } - .menu-wspolpraca:hover:before { content: url(../img/menu/wspolpraca_active.png);} - .menu-szkolenia:hover:before { content: url(../img/menu/szkolenia_active.png); } - .menu-wesprzyj:hover:before { content: url(../img/menu/wesprzyj_active.png);} - .menu-o-nas:hover:before { content: url(../img/menu/o-nas_active.png); } - .menu-kontakt:hover:before { content: url(../img/menu/kontakt_active.png); } + .menu-lekcje:before { background: url(../img/menu/lekcje.png) no-repeat 0 0; background-size: 100%;} + .menu-kompetencje:before { background: url(../img/menu/kompetencje.png) no-repeat 0 0; background-size: 100%;} + .menu-olimpiada:before { background: url(../img/menu/olimpiada.png) no-repeat 0 0; background-size: 100%;} + .menu-trener:before { background: url(../img/menu/dla-trenera.png) no-repeat 0 0; background-size: 100%;} + .menu-kurs:before { background: url(../img/menu/dla-ucznia.png) no-repeat 0 0; background-size: 100%;} + .menu-o-nas:before { background: url(../img/menu/o-nas.png) no-repeat 0 0; background-size: 100%;} + .menu-lekcje:hover:before { background: url(../img/menu/lekcje_active.png) no-repeat 0 0; background-size: 100%;} + .menu-kompetencje:hover:before { background: url(../img/menu/kompetencje_active.png) no-repeat 0 0; background-size: 100%;} + .menu-olimpiada:hover:before { background: url(../img/menu/olimpiada_active.png) no-repeat 0 0; background-size: 100%;} + .menu-trener:hover:before { background: url(../img/menu/dla-trenera_active.png) no-repeat 0 0; background-size: 100%;} + .menu-kurs:hover:before { background: url(../img/menu/dla-ucznia_active.png) no-repeat 0 0; background-size: 100%;} + .menu-o-nas:hover:before { background: url(../img/menu/o-nas_active.png) no-repeat 0 0; background-size: 100%;} + .menu-oc-program:before { background: url(../img/menu/olimpiada/program.png) no-repeat 0 0; background-size: 100%;} + .menu-oc-harmonogram:before { background: url(../img/menu/olimpiada/harmonogram.png) no-repeat 0 0; background-size: 100%;} + .menu-oc-regulamin:before { background: url(../img/menu/olimpiada/regulamin.png) no-repeat 0 0; background-size: 100%;} + .menu-oc-literatura:before { background: url(../img/menu/olimpiada/literatura.png) no-repeat 0 0; background-size: 100%;} + .menu-oc-komitet:before { background: url(../img/menu/olimpiada/komitet.png) no-repeat 0 0; background-size: 100%;} + .menu-oc-kontakt:before { background: url(../img/menu/olimpiada/kontakt.png) no-repeat 0 0; background-size: 100%;} + .menu-oc-program:hover:before { + background: url(../img/menu/olimpiada/program_active.png) no-repeat 0 0; background-size: 100%;} + .menu-oc-harmonogram:hover:before { + background: url(../img/menu/olimpiada/harmonogram_active.png) no-repeat 0 0; background-size: 100%;} + .menu-oc-regulamin:hover:before { + background: url(../img/menu/olimpiada/regulamin_active.png) no-repeat 0 0; background-size: 100%;} + .menu-oc-literatura:hover:before { + background: url(../img/menu/olimpiada/literatura_active.png) no-repeat 0 0; background-size: 100%;} + .menu-oc-komitet:hover:before { + background: url(../img/menu/olimpiada/komitet_active.png) no-repeat 0 0; background-size: 100%;} + .menu-oc-kontakt:hover:before { + background: url(../img/menu/olimpiada/kontakt_active.png) no-repeat 0 0; background-size: 100%;} } #tagline { @@ -130,25 +169,28 @@ footer.main { border-top: 1px solid #c9ccce; width: 940 * $px; padding: .2em 10 * $px; - margin: 40*$px auto 0 auto; + margin: 40*$px auto 1em auto; color: #9a9c9e; + p { + font-size: .75em; + } .footer-item { float: left; margin-right: 20 * $px; width: 220 * $px; - p { - font-size: .75em; - } } - .footer-item-half { + .sponsors-column { float: left; - margin-right: 20 * $px; + margin-left: 20 * $px; width: 100 * $px; p { font-size: .75em; } } + .footer-extra p { + margin-top: 0; + } } @@ -192,4 +234,47 @@ footer.main { text-transform: uppercase; } -} \ No newline at end of file +} + + +.link-list { + list-style: none; + padding: 0; + + li { + margin-bottom: .5em; + } + + a:before { + content: "→"; + margin-right: .5em; + } + a { + color: $ciemny; + } + a:hover { + color: $oranji; + } +} +.link-list-colored { + a { + color: $oranji; + } +} + + +.plain { + margin: 0; + padding: 0; + list-style: none; + li { + margin: 1em 0; + } +} + +.flatpage { + img { + border: 5*$px solid #eee; + margin: 1.3em; + } +}