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