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