X-Git-Url: https://git.mdrn.pl/edumed.git/blobdiff_plain/d0f0e1412cc42d366b234e798dfb68feed05d751..d555d988764995ea1f9f5ece46f453a66f09b334:/src/edumed/static/css/base.scss

diff --git a/src/edumed/static/css/base.scss b/src/edumed/static/css/base.scss
new file mode 100644
index 0000000..b87a3e8
--- /dev/null
+++ b/src/edumed/static/css/base.scss
@@ -0,0 +1,280 @@
+@import url(//fonts.googleapis.com/css?family=Dosis:400,700&subset=latin,latin-ext);
+
+@import "vars";
+@import "mixins";
+
+
+a {
+    text-decoration: none;
+    color: $oranji;
+    img {
+        border: 0;
+        padding: 0;
+    }
+}
+
+body {
+    @include base-font;
+    margin: 0;
+}
+.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;
+    background-position: 0 100%;
+}
+header.main {
+    margin: 0 auto 23*$px;
+    width: 940*$px;
+    padding: 29*$px 10*$px 0;
+
+    #header-top {
+    }
+
+    #logo {
+        float: left;
+        margin-bottom: 20*$px;
+        img {
+            vertical-align: middle;
+        }
+    }
+    #organizer {
+        float: right;
+        font-size: .75em;
+        color: #777;
+        
+        img {
+            margin-top: .5em;
+        }
+    }
+
+
+
+    nav {
+        ul {
+            padding: 0;
+            position: absolute;
+            left: 15em;
+        }
+        li {
+            list-style: none;
+            display: inline-block;
+            text-transform: uppercase;
+            margin: 0 .5em;
+            text-align: center;
+            /*position:relative;*/
+        }
+        a {
+            color: $ciemny;
+            display: block;
+            vertical-align: bottom;
+            font-size: .85em;
+        }
+        a:hover {
+            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 { 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 {
+        clear: both;
+        float: left;
+        background-color: white;
+        /* Extend padded background .*/
+        padding: 0 10*$px;
+        margin-left: -10*$px;
+        font-size: .9em;
+        color: $ciemny;
+    }
+    #search {
+        float: right;
+        background-color: white;
+        /* Extend padded background .*/
+        padding: 2px 10*$px 0;
+        margin-right: -10*$px;
+    }
+}
+
+
+#content {
+    width: 940 * $px;
+    padding: 0 10 * $px;
+    margin: auto;
+    position: relative;
+}
+
+
+footer.main {
+    clear: both;
+    border-top: 1px solid #c9ccce;
+    width: 940 * $px;
+    padding: .2em 10 * $px;
+    margin: 40*$px auto 1em auto;
+    color: #9a9c9e;
+
+    p {
+        font-size: .75em;
+    }
+    .footer-item {
+        float: left;
+        margin-right: 20 * $px;
+        width: 220 * $px;
+    }
+    .sponsors-column {
+        float: left;
+        margin-left: 20 * $px;
+        width: 100 * $px;
+        p {
+            font-size: .75em;
+        }
+    }
+    .footer-extra p {
+        margin-top: 0;
+    }
+}
+
+
+#search {
+    font-size: .8em;
+
+    input, button {
+        font-family: Dosis;
+        font-size: .9em;
+        vertical-align:bottom;
+        border: 1px solid #c9ccce;
+        padding: 0;
+        margin: 0;
+        line-height: .9em;
+    }
+    input {
+        border-right-width: 0;
+        height: 16px;
+        width: 16em;
+        padding-left: 1.3em;
+    }
+    button {
+        height: 18px;
+        width: 1.8em;
+        span {
+            position:relative;
+            top: -1px;
+        }
+    }
+
+    input::-webkit-input-placeholder {
+        text-transform: uppercase;
+    }
+    input:-moz-placeholder {
+        text-transform: uppercase;
+    }
+    input::-moz-placeholder {
+        text-transform: uppercase;
+    }
+    input::-ms-placeholder {
+        text-transform: uppercase;
+    }
+
+}
+
+
+.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;
+    }
+}