emels/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             width: 44*$px;
  99             height: 34*$px;
 100             text-align: center;
 101             margin: auto auto .8em;
 102         }
 103         .menu-news:before { background: url(../img/menu/news.png) no-repeat 0 0; background-size: 100%;}
 104         .menu-about:before { background: url(../img/menu/about.png) no-repeat 0 0; background-size: 100%;}
 105         .menu-partners:before { background: url(../img/menu/partners.png) no-repeat 0 0; background-size: 100%;}
 106         .menu-publications:before { background: url(../img/menu/publications.png) no-repeat 0 0; background-size: 100%;}
 107         .menu-contact:before { background: url(../img/menu/contact.png) no-repeat 0 0; background-size: 100%;}
 108         .menu-news:hover:before { background: url(../img/menu/news-active.png) no-repeat 0 0; background-size: 100%;}
 109         .menu-about:hover:before { background: url(../img/menu/about-active.png) no-repeat 0 0; background-size: 100%;}
 110         .menu-partners:hover:before { background: url(../img/menu/partners-active.png) no-repeat 0 0; background-size: 100%;}
 111         .menu-publications:hover:before { background: url(../img/menu/publications-active.png) no-repeat 0 0; background-size: 100%;}
 112         .menu-contact:hover:before { background: url(../img/menu/contact-active.png) no-repeat 0 0; background-size: 100%;}
 113
 114     }
 115
 116     #tagline {
 117         clear: both;
 118         float: left;
 119         background-color: white;
 120         /* Extend padded background .*/
 121         padding: 0 10*$px;
 122         margin-left: -10*$px;
 123         font-size: .9em;
 124         color: $ciemny;
 125     }
 126     #search {
 127         float: right;
 128         background-color: white;
 129         /* Extend padded background .*/
 130         padding: 2px 10*$px 0;
 131         margin-right: -10*$px;
 132     }
 133 }
 134
 135
 136 #content {
 137     width: 940 * $px;
 138     padding: 0 10 * $px;
 139     margin: auto;
 140     position: relative;
 141 }
 142
 143
 144 footer.main {
 145     clear: both;
 146     border-top: 1px solid #c9ccce;
 147     width: 940 * $px;
 148     padding: .2em 10 * $px;
 149     margin: 40*$px auto 1em auto;
 150     color: #9a9c9e;
 151
 152     p {
 153         font-size: .75em;
 154     }
 155     .footer-item {
 156         float: left;
 157         margin-right: 20 * $px;
 158         width: 220 * $px;
 159     }
 160     .sponsors-page {
 161         float: left;
 162         margin-right: 6em;
 163     }
 164     .sponsors-column {
 165         float: left;
 166         margin-left: 20 * $px;
 167         width: 100 * $px;
 168         p {
 169             font-size: .75em;
 170         }
 171     }
 172 }
 173
 174
 175 #search {
 176     font-size: .8em;
 177
 178     input, button {
 179         font-family: Dosis;
 180         font-size: .9em;
 181         vertical-align:bottom;
 182         border: 1px solid #c9ccce;
 183         padding: 0;
 184         margin: 0;
 185         line-height: .9em;
 186     }
 187     input {
 188         border-right-width: 0;
 189         height: 16px;
 190         width: 16em;
 191         padding-left: 1.3em;
 192     }
 193     button {
 194         height: 18px;
 195         width: 1.8em;
 196         span {
 197             position:relative;
 198             top: -1px;
 199         }
 200     }
 201
 202     input::-webkit-input-placeholder {
 203         text-transform: uppercase;
 204     }
 205     input:-moz-placeholder {
 206         text-transform: uppercase;
 207     }
 208     input::-moz-placeholder {
 209         text-transform: uppercase;
 210     }
 211     input::-ms-placeholder {
 212         text-transform: uppercase;
 213     }
 214
 215 }
 216
 217
 218 .link-list {
 219     list-style: none;
 220     padding: 0;
 221
 222     li {
 223         margin-bottom: .5em;
 224     }
 225
 226     a:before {
 227         content: "→";
 228         margin-right: .5em;
 229     }
 230     a {
 231         color: $ciemny;
 232     }
 233     a:hover {
 234         color: $oranji;
 235     }
 236 }
 237 .link-list-colored {
 238     a {
 239         color: $oranji;
 240     }
 241 }
 242
 243
 244 .plain {
 245     margin: 0;
 246     padding: 0;
 247     list-style: none;
 248     li {
 249         margin: 1em 0;
 250     }
 251 }
 252
 253 .flatpage {
 254     img {
 255         border: 5*$px solid #eee;
 256         margin: 1.3em;
 257     }
 258 }