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
  76     nav {
  77         margin-top: 0;
  78     }
  79 }
  80
  81 section#lead {
  82     margin-left: 40%;
  83     text-align: right;
  84 }
  85
  86 section.home-section {
  87     font-size: 1.3rem;
  88
  89     h2 {
  90         padding: 1rem;
  91         margin: 0;
  92     }
  93
  94     a {
  95         display: block;
  96
  97         &:hover {
  98             background: #f4f4f4;
  99             text-decoration: none;
 100         }
 101     }
 102
 103     .link-list {
 104         list-style: none;
 105         margin: 0;
 106         padding: 0;
 107
 108         li {
 109             margin: 0;
 110             padding: 0;
 111
 112             a {
 113                 padding: .25em .5em .25em .5em;
 114                 position:relative;
 115                 font-size: 1.2rem;
 116
 117                 @media screen and (min-width: 20em) {
 118                     padding-left: 2.7rem;
 119                     font-size: 1.3rem;
 120
 121                     &:before {
 122                         content: '\bb';
 123                         position: absolute;
 124                         left: 1rem;
 125                     }
 126                 }
 127             }
 128         }
 129     }
 130 }
 131 #tools {
 132     background: #eee;
 133     padding-bottom: 1em;
 134
 135     @media screen and (min-width: 36em) {
 136         float: right;
 137         z-index: 1000;
 138         margin: 0 0 1em 1em;
 139         width: 14em;
 140         position: relative;
 141         border-color: #ddd;
 142         border-style: solid;
 143         border-width: 0 0 1px 1px;
 144     }
 145 }
 146
 147
 148 footer {
 149     border-top: 1px solid #fff;
 150     padding: 1rem 0;
 151     margin-top: 0;
 152     font-size: .75rem;
 153
 154     .footer-item {
 155         padding: .5rem;
 156
 157         @media screen and (min-width: 24em) {
 158             display: inline-block;
 159             vertical-align: top;
 160             width: 15rem;
 161         }
 162     }
 163 }
 164
 165 nav {
 166     clear: both;
 167     margin-top: 3em;
 168
 169     a:hover {
 170         text-decoration: none;
 171         background: rgba(255,255,255,.9);
 172     }
 173
 174     .link-prev {
 175         float: left;
 176         padding: 1em;
 177         &:before {
 178             content: '\25c4';
 179             margin-right: .4em;
 180         }
 181     }
 182     .link-next {
 183         float: right;
 184         text-align:right;
 185         padding: 1em;
 186         &:after {
 187             content: '\25ba';
 188             margin-left: .4em;
 189         }
 190     }
 191 }
 192
 193
 194 #logos {
 195     margin: 0;
 196     padding: .5rem 0 .5rem;
 197     text-align: left;
 198     section {
 199         display: inline-block;
 200         h1 {
 201             text-align: left;
 202             font-size: .8rem;
 203             font-weight: normal;
 204             margin: 0 0 .5rem 1rem;
 205
 206             @media screen and (min-width: 42em) {
 207                 margin-left: 2rem;
 208             }
 209             @media screen and (min-width: 48em) {
 210                 margin-left: 3rem;
 211             }
 212         }
 213         a {
 214             display: inline-block;
 215             margin-left: 1rem;
 216             margin-bottom: .5rem;
 217
 218             @media screen and (min-width: 42em) {
 219                 margin-left: 2rem;
 220             }
 221             @media screen and (min-width: 48em) {
 222                 margin-left: 3rem;
 223             }
 224         }
 225         img {
 226             width: 6rem;
 227             vertical-align: middle;
 228         }
 229     }
 230 }
 231
 232 #toc {
 233     margin-bottom: 3rem;
 234 }
 235
 236 body#index {
 237     #body {
 238         @media screen and (min-width: 36em) {
 239             display: -webkit-box;
 240             display: -moz-box;
 241             display: -ms-flexbox;
 242             display: -webkit-flex;
 243             display: flex;
 244
 245             -webkit-box-orient: vertical;
 246             -moz-box-orient: vertical;
 247             -webkit-box-direction: normal;
 248             -moz-box-direction: normal;
 249             -webkit-flex-direction: column;
 250             -ms-flex-direction: column;
 251             flex-direction: column;
 252
 253             #logos {
 254                 -webkit-box-ordinal-group: 1;
 255                 -moz-box-ordinal-group: 1;
 256                 -ms-flex-order: 1;
 257                 -webkit-order: 1;
 258                 order: 1;
 259             }
 260             header {
 261                 -webkit-box-ordinal-group: 2;
 262                 -moz-box-ordinal-group: 2;
 263                 -ms-flex-order: 2;
 264                 -webkit-order: 2;
 265                 order: 2;
 266             }
 267             #toc {
 268                 -webkit-box-ordinal-group: 3;
 269                 -moz-box-ordinal-group: 3;
 270                 -ms-flex-order: 3;
 271                 -webkit-order: 3;
 272                 order: 3;
 273             }
 274             footer {
 275                 -webkit-box-ordinal-group: 100;
 276                 -moz-box-ordinal-group: 100;
 277                 -ms-flex-order: 100;
 278                 -webkit-order: 100;
 279                 order: 100;
 280             }
 281         }
 282     }
 283 }