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