edumed/static/css/base.scss

   1 @import url(//fonts.googleapis.com/css?family=Dosis:400,700&subset=latin,latin-ext);
   2
   3 @import "vars";
   4 @import "mixins";
   5
   6
   7 a {
   8     text-decoration: none;
   9     color: $oranji;
  10     img {
  11         border: 0;
  12         padding: 0;
  13     }
  14 }
  15
  16 body {
  17     @include base-font;
  18     margin: 0;
  19 }
  20 .clr {
  21     clear: both;
  22 }
  23 #header-wrapper {
  24     background-image: url(../img/header-bar.png);
  25     background-repeat: repeat-x;
  26     background-position: 0 100%;
  27 }
  28 header.main {
  29     margin: 0 auto 23*$px;
  30     width: 940*$px;
  31     padding: 29*$px 10*$px 0;
  32
  33     #header-top {
  34     }
  35
  36     #logo {
  37         float: left;
  38         margin-bottom: 20*$px;
  39         img {
  40             vertical-align: middle;
  41         }
  42     }
  43     #organizer {
  44         float: right;
  45         font-size: .75em;
  46         color: #777;
  47
  48         img {
  49             margin-top: .5em;
  50         }
  51     }
  52
  53
  54
  55     nav {
  56         ul {
  57             padding: 0;
  58             position: absolute;
  59             left: 15em;
  60         }
  61         li {
  62             list-style: none;
  63             display: inline-block;
  64             text-transform: uppercase;
  65             margin: 0 .5em;
  66             text-align: center;
  67             /*position:relative;*/
  68         }
  69         a {
  70             color: $ciemny;
  71             display: block;
  72             vertical-align: bottom;
  73             font-size: .85em;
  74         }
  75         a:hover {
  76             color: $oranji;
  77         }
  78
  79         a:before {
  80             content: " ";
  81             display: block;
  82             margin-bottom: .8em;
  83             width: 44*$px;
  84             height: 34*$px;
  85             text-align:center;
  86             margin: auto;
  87             margin-bottom: .8em;
  88         }
  89         .menu-lekcje:before { background: url(../img/menu/lekcje.png) no-repeat 0 0; background-size: 100%;}
  90         .menu-kompetencje:before { background: url(../img/menu/katalog.png) no-repeat 0 0; background-size: 100%;}
  91         .menu-wspolpraca:before { background: url(../img/menu/wspolpraca.png) no-repeat 0 0; background-size: 100%;}
  92         .menu-szkolenia:before { background: url(../img/menu/szkolenia.png) no-repeat 0 0; background-size: 100%;}
  93         .menu-wesprzyj:before { background: url(../img/menu/wesprzyj.png) no-repeat 0 0; background-size: 100%;}
  94         .menu-o-nas:before { background: url(../img/menu/o-nas.png) no-repeat 0 0; background-size: 100%;}
  95         .menu-kontakt:before { background: url(../img/menu/kontakt.png) no-repeat 0 0; background-size: 100%;}
  96         .menu-lekcje:hover:before { background: url(../img/menu/lekcje_active.png) no-repeat 0 0; background-size: 100%;}
  97         .menu-kompetencje:hover:before { background: url(../img/menu/katalog_active.png) no-repeat 0 0; background-size: 100%;}
  98         .menu-wspolpraca:hover:before { background: url(../img/menu/wspolpraca_active.png) no-repeat 0 0; background-size: 100%;}
  99         .menu-szkolenia:hover:before { background: url(../img/menu/szkolenia_active.png) no-repeat 0 0; background-size: 100%;}
 100         .menu-wesprzyj:hover:before { background: url(../img/menu/wesprzyj_active.png) no-repeat 0 0; background-size: 100%;}
 101         .menu-o-nas:hover:before { background: url(../img/menu/o-nas_active.png) no-repeat 0 0; background-size: 100%;}
 102         .menu-kontakt:hover:before { background: url(../img/menu/kontakt_active.png) no-repeat 0 0; background-size: 100%;}
 103
 104     }
 105
 106     #tagline {
 107         clear: both;
 108         float: left;
 109         background-color: white;
 110         /* Extend padded background .*/
 111         padding: 0 10*$px;
 112         margin-left: -10*$px;
 113         font-size: .9em;
 114         color: $ciemny;
 115     }
 116     #search {
 117         float: right;
 118         background-color: white;
 119         /* Extend padded background .*/
 120         padding: 2px 10*$px 0;
 121         margin-right: -10*$px;
 122     }
 123 }
 124
 125
 126 #content {
 127     width: 940 * $px;
 128     padding: 0 10 * $px;
 129     margin: auto;
 130     position: relative;
 131 }
 132
 133
 134 footer.main {
 135     clear: both;
 136     border-top: 1px solid #c9ccce;
 137     width: 940 * $px;
 138     padding: .2em 10 * $px;
 139     margin: 40*$px auto 1em auto;
 140     color: #9a9c9e;
 141
 142     p {
 143         font-size: .75em;
 144     }
 145     .footer-item {
 146         float: left;
 147         margin-right: 20 * $px;
 148         width: 220 * $px;
 149     }
 150     .sponsors-column {
 151         float: left;
 152         margin-left: 20 * $px;
 153         width: 100 * $px;
 154         p {
 155             font-size: .75em;
 156         }
 157     }
 158     .footer-extra p {
 159         margin-top: 0;
 160     }
 161 }
 162
 163
 164 #search {
 165     font-size: .8em;
 166
 167     input, button {
 168         font-family: Dosis;
 169         font-size: .9em;
 170         vertical-align:bottom;
 171         border: 1px solid #c9ccce;
 172         padding: 0;
 173         margin: 0;
 174         line-height: .9em;
 175     }
 176     input {
 177         border-right-width: 0;
 178         height: 16px;
 179         width: 16em;
 180         padding-left: 1.3em;
 181     }
 182     button {
 183         height: 18px;
 184         width: 1.8em;
 185         span {
 186             position:relative;
 187             top: -1px;
 188         }
 189     }
 190
 191     input::-webkit-input-placeholder {
 192         text-transform: uppercase;
 193     }
 194     input:-moz-placeholder {
 195         text-transform: uppercase;
 196     }
 197     input::-moz-placeholder {
 198         text-transform: uppercase;
 199     }
 200     input::-ms-placeholder {
 201         text-transform: uppercase;
 202     }
 203
 204 }
 205
 206
 207 .link-list {
 208     list-style: none;
 209     padding: 0;
 210
 211     li {
 212         margin-bottom: .5em;
 213     }
 214
 215     a:before {
 216         content: "→";
 217         margin-right: .5em;
 218     }
 219     a {
 220         color: $ciemny;
 221     }
 222     a:hover {
 223         color: $oranji;
 224     }
 225 }
 226 .link-list-colored {
 227     a {
 228         color: $oranji;
 229     }
 230 }
 231
 232
 233 .plain {
 234     margin: 0;
 235     padding: 0;
 236     list-style: none;
 237     li {
 238         margin: 1em 0;
 239     }
 240 }
 241
 242 .flatpage {
 243     img {
 244         border: 5*$px solid #eee;
 245         margin: 1.3em;
 246     }
 247 }