content/media/css/base.scss

   1 @charset "UTF-8";
   2 @import url(//fonts.googleapis.com/css?family=Dosis:400,700&subset=latin,latin-ext);
   3
   4 html {
   5     margin: 0;
   6     padding: 0;
   7 }
   8
   9 body {
  10     margin: 0;
  11     padding: 0;
  12     font-family: Dosis;
  13
  14     color: #363a3b;
  15     background-color: #e8e8e8;
  16     background-repeat:no-repeat;
  17     background-position: 100% 120px;
  18 }
  19
  20 #body {
  21     max-width: 48em;
  22     margin: 0 auto;
  23     spadding: 0 .5rem;
  24 }
  25
  26 a {
  27     text-decoration: none;
  28     color: black;
  29     &:hover {
  30         text-decoration: underline;
  31     }
  32 }
  33
  34 #home-link {
  35     padding: .5em;
  36     display: block;
  37     float:left;
  38
  39     &:hover {
  40         text-decoration: none;
  41         background: rgba(255,255,255,.9);
  42     }
  43 }
  44
  45 #top-logo {
  46     float: right;
  47     margin: 0 1rem 0 1rem;
  48 }
  49
  50 header {
  51     background-image: url("{{ media_url('images/okladka.jpg') }}");
  52     background-position: 50% 76%;
  53     background-size: auto 100%;
  54
  55     @media screen and (min-width: 20em) {
  56         padding-top: 8rem;
  57     }
  58
  59     @media screen and (min-width: 24em) {
  60         background-size: 100% auto;
  61     }
  62
  63     h1 {
  64         margin: 0;
  65         padding: 2em .5em 1em;
  66         background: rgba(255,255,255,.7);
  67         clear: both;
  68
  69         @media screen and (min-width: 20em) {
  70             padding: 1em;
  71             float: right;
  72             text-align: right;
  73         }
  74
  75         .author {
  76             font-size: 1rem;
  77             font-weight: normal;
  78         }
  79     }
  80
  81     nav {
  82         margin-top: 0;
  83     }
  84 }
  85
  86 section#lead {
  87     margin-left: 40%;
  88     text-align: right;
  89 }
  90
  91 section.home-section {
  92     font-size: 1.3rem;
  93
  94     h2 {
  95         padding: 1rem;
  96         margin: 0;
  97     }
  98
  99     a {
 100         display: block;
 101         padding: .25em .5em .25em .5em;
 102         color: black;
 103         position:relative;
 104         font-size: 1.2rem;
 105
 106         @media screen and (min-width: 20em) {
 107             padding-left: 2.7rem;
 108             font-size: 1.3rem;
 109
 110             &:before {
 111                 content: '\bb';
 112                 position: absolute;
 113                 left: 1rem;
 114             }
 115         }
 116
 117         &:hover {
 118             background: #f4f4f4;
 119             text-decoration: none;
 120         }
 121         .author {
 122             display: block;
 123             font-size: 1rem;
 124         }
 125     }
 126 }
 127 #tools {
 128     background: #eee;
 129     padding-bottom: 1em;
 130
 131     @media screen and (min-width: 36em) {
 132         float: right;
 133         z-index: 1000;
 134         margin: 0 0 1em 1em;
 135         width: 14em;
 136         position: relative;
 137         border-color: #ddd;
 138         border-style: solid;
 139         border-width: 0 0 1px 1px;
 140     }
 141 }
 142
 143
 144 footer {
 145     border-top: 1px solid #fff;
 146     padding: 1em 0;
 147     margin-top: 3em;
 148 }
 149
 150 nav {
 151     clear: both;
 152     margin-top: 3em;
 153
 154     a:hover {
 155         text-decoration: none;
 156         background: rgba(255,255,255,.9);
 157     }
 158
 159     .link-prev {
 160         float: left;
 161         padding: 1em;
 162         &:before {
 163             content: '\25c4';
 164             margin-right: .4em;
 165         }
 166     }
 167     .link-next {
 168         float: right;
 169         text-align:right;
 170         padding: 1em;
 171         &:after {
 172             content: '\25ba';
 173             margin-left: .4em;
 174         }
 175     }
 176 }
 177
 178
 179 #logos {
 180     margin: 0;
 181     padding: 1.5rem 0 1rem;
 182     section {
 183         display: inline-block;
 184         h1 {
 185             font-size: .8rem;
 186             font-weight: normal;
 187             margin: 0 0 .7rem 1.25rem;
 188         }
 189         a {
 190             display: inline-block;
 191             margin-left: 1.23rem;
 192             margin-bottom: 1rem;
 193         }
 194         img {
 195             width: 8.125rem;
 196             vertical-align: middle;
 197         }
 198     }
 199 }
 200
 201
 202 body#index {
 203     #body {
 204         display: -webkit-box;
 205         display: -moz-box;
 206         display: box;
 207         -webkit-box-orient: vertical;
 208         -moz-box-orient: vertical;
 209         box-orient: vertical;
 210
 211         @media screen and (min-width: 36em) {
 212             display: block;
 213         }
 214
 215
 216         header {
 217             -webkit-box-ordinal-group: 1;
 218             -moz-box-ordinal-group: 1;
 219             box-ordinal-group: 1;
 220         }
 221         #logos {
 222             -webkit-box-ordinal-group: 4;
 223             -moz-box-ordinal-group: 4;
 224             box-ordinal-group: 4;
 225         }
 226         .home-section {
 227             -webkit-box-ordinal-group: 3;
 228             -moz-box-ordinal-group: 3;
 229             box-ordinal-group: 3;
 230         }
 231         footer {
 232             -webkit-box-ordinal-group: 100;
 233             -moz-box-ordinal-group: 100;
 234             box-ordinal-group: 100;
 235         }
 236     }
 237 }