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