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 body {
   9     margin: 0;
  10     padding: 0;
  11     font-family: Dosis;
  12     color: #363a3b;
  13     background-color: white;
  14 }
  15
  16 a {
  17     text-decoration: none;
  18     color: #ea5b0b;
  19     &:hover {
  20         text-decoration: underline;
  21     }
  22 }
  23
  24 header {
  25     padding: 2rem 20%;
  26     text-align: right;
  27
  28     h1 {
  29         margin: 0;
  30         padding: 0;
  31         padding-left: 84px;
  32         .author {
  33             font-size: 1rem;
  34             font-weight: normal;
  35         }
  36     }
  37     img {
  38         float: left;
  39         width: 74px;
  40         height: 74px;
  41     }
  42 }
  43
  44 section#lead {
  45     margin-left: 40%;
  46     text-align: right;
  47 }
  48
  49 section.intro, section.outro {
  50     font-size: 1.3rem;
  51     background: #edede6;
  52
  53     a {
  54         display: block;
  55         padding: .7em 20%;
  56         color: black;
  57         &:hover {
  58             background: white;
  59             text-decoration: none;
  60         }
  61         .author {
  62             display: block;
  63             font-size: 1rem;
  64         }
  65     }
  66 }
  67
  68 section.main {
  69     padding: 0 20%;
  70
  71     div.roza {
  72         position: relative;
  73
  74         a {
  75             position: absolute;
  76             &#roza-1 {
  77                 top: 0;
  78                 left: 33%;
  79                 right: 33%;
  80                 bottom: 55%;
  81                 &:hover {
  82                     background: url({{ media_url('images/roza-select-1.png') }});
  83                     background-size: 294%;
  84                     background-position: 50% 0;
  85                 }
  86             }
  87             &#roza-2 {
  88                 top: 33%;
  89                 left: 55%;
  90                 right: 0;
  91                 bottom: 33%;
  92                 &:hover {
  93                     background: url({{ media_url('images/roza-select-2.png') }});
  94                     background-size: 222%;
  95                     background-position: 100% 50%;
  96                 }
  97             }
  98             &#roza-3 {
  99                 top: 55%;
 100                 left: 33%;
 101                 right: 33%;
 102                 bottom: 0;
 103
 104                 &:hover {
 105                     background: url({{ media_url('images/roza-select-3.png') }});
 106                     background-size: 294%;
 107                     background-position: 50% 100%;
 108                 }
 109             }
 110             &#roza-4 {
 111                 top: 33%;
 112                 left: 0;
 113                 right: 55%;
 114                 bottom: 33%;
 115
 116                 &:hover {
 117                     background: url({{ media_url('images/roza-select-4.png') }});
 118                     background-size: 222%;
 119                     background-position: 0 50%;
 120                 }
 121             }
 122         }
 123     }
 124 }
 125
 126 a.download {
 127     padding: 0 20%;
 128 }
 129
 130
 131 footer {
 132     border-top: 1px solid #edede6;
 133     padding: 1em 20%;
 134     margin-top: 3em;
 135 }
 136
 137 .ocena img {
 138     vertical-align: middle;
 139 }
 140
 141 blockquote {
 142     margin: 0;
 143     padding: 0;
 144     font-style: italic;
 145 }
 146
 147 .twocol {
 148     -moz-column-count: 2;
 149     -webkit-column-count: 2;
 150     -o-column-count: 2;
 151     -ms-column-count: 2;
 152     column-count: 2;
 153     -moz-column-break-inside: avoid;
 154     -webkit-column-break-inside: avoid;
 155     -o-column-break-inside: avoid;
 156     -ms-column-break-inside: avoid;
 157     column-break-inside: avoid;
 158
 159     p {
 160         margin: 0 0 1em;
 161     }
 162 }