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 0;
  26     max-width: 48rem;
  27     margin: 0 .5rem;
  28     @media screen and (min-width: 49em) {
  29         margin: 0 auto;
  30     }
  31
  32
  33     h1 {
  34         padding: 1em 0 0 0;
  35         margin: 0;
  36
  37         @media screen and (min-width: 30em) {
  38             text-align: right;
  39             padding: 0;
  40         }
  41         .author {
  42             font-size: 1rem;
  43             font-weight: normal;
  44         }
  45     }
  46     img {
  47         margin: auto;
  48         @media screen and (min-width: 30em) {
  49             float: left;
  50         }
  51     }
  52 }
  53
  54 section#lead {
  55     margin-left: 40%;
  56     margin-top: 3rem;
  57     text-align: right;
  58 }
  59
  60 section.intro, section.outro {
  61     font-size: 1.3rem;
  62     background: #edede6;
  63     margin-top: 1em;
  64
  65     a {
  66         display: block;
  67         padding: .7em 0;
  68         color: black;
  69         div {
  70             max-width: 48rem;
  71             margin: 0 .5rem;
  72             @media screen and (min-width: 49em) {
  73                 margin: 0 auto;
  74             }
  75         }
  76         &:hover {
  77             background: white;
  78             text-decoration: none;
  79         }
  80         .author {
  81             display: block;
  82             font-size: 1rem;
  83         }
  84     }
  85 }
  86
  87 section.main {
  88     padding: 0 0;
  89     max-width: 48rem;
  90     margin: 0 .5rem;
  91     @media screen and (min-width: 49em) {
  92         margin: 0 auto;
  93     }
  94
  95     div.roza {
  96         position: relative;
  97
  98         a {
  99             position: absolute;
 100             color: black;
 101             &#roza-1 {
 102                 top: 0;
 103                 left: 33%;
 104                 right: 33%;
 105                 bottom: 55%;
 106                 &:hover {
 107                     background: url({{ media_url('images/roza-select-1.png') }});
 108                     background-size: 294%;
 109                     background-position: 50% 0;
 110                 }
 111             }
 112             &#roza-2 {
 113                 top: 33%;
 114                 left: 55%;
 115                 right: 0;
 116                 bottom: 33%;
 117                 &:hover {
 118                     background: url({{ media_url('images/roza-select-2.png') }});
 119                     background-size: 222%;
 120                     background-position: 100% 50%;
 121                 }
 122             }
 123             &#roza-3 {
 124                 top: 55%;
 125                 left: 33%;
 126                 right: 33%;
 127                 bottom: 0;
 128
 129                 &:hover {
 130                     background: url({{ media_url('images/roza-select-3.png') }});
 131                     background-size: 294%;
 132                     background-position: 50% 100%;
 133                 }
 134             }
 135             &#roza-4 {
 136                 top: 33%;
 137                 left: 0;
 138                 right: 55%;
 139                 bottom: 33%;
 140
 141                 &:hover {
 142                     background: url({{ media_url('images/roza-select-4.png') }});
 143                     background-size: 222%;
 144                     background-position: 0 50%;
 145                 }
 146             }
 147         }
 148     }
 149 }
 150
 151 a.download {
 152     padding: 0 0;
 153 }
 154
 155
 156 footer {
 157     border-top: 1px solid #edede6;
 158     padding: 1rem 0;
 159     font-size: .75rem;
 160     max-width: 48rem;
 161     margin: 3rem auto 0;
 162
 163     .footer-item {
 164         padding: .5rem;
 165
 166         @media screen and (min-width: 24em) {
 167             display: inline-block;
 168             vertical-align: top;
 169             width: 15rem;
 170         }
 171     }
 172 }
 173
 174
 175 }
 176
 177 blockquote {
 178     margin: 0;
 179     padding: 0;
 180     font-style: italic;
 181 }
 182
 183 .twocol {
 184     -moz-column-count: 2;
 185     -webkit-column-count: 2;
 186     -o-column-count: 2;
 187     -ms-column-count: 2;
 188     column-count: 2;
 189
 190     p {
 191         margin: 0 0 1em;
 192         -webkit-column-break-inside: avoid;
 193         -o-column-break-inside: avoid;
 194         -ms-column-break-inside: avoid;
 195         column-break-inside: avoid;
 196         break-inside: avoid-column;
 197         page-break-inside:avoid;
 198     }
 199 }
 200
 201 .pozycja {
 202     .ocena {
 203         display: inline-block;
 204         width: 8em;
 205         img {
 206             vertical-align: middle;
 207         }
 208     }
 209     .label {
 210         display: inline-block;
 211     }
 212 }
 213 .przypisy {
 214     font-size: .9em;
 215 }
 216
 217 #b-author, #b-user, #b-inter {
 218     display: inline-block;
 219     width: 10em;
 220     padding: 1em 2em;
 221     margin: .5em;
 222     cursor: pointer;
 223     background: #edede6;
 224     border: .5em solid #edede6;
 225     border-radius: 1em;
 226     text-align: center;
 227     color: black;
 228     span {
 229         display: block;
 230         font-size: 2em;
 231         font-size
 232     }
 233     &.active {
 234         border-color: #ea5b0b;
 235     }
 236     &:hover {
 237         text-decoration: none;
 238         background: white;
 239     }
 240 }
 241 .p-author, .p-user, .p-inter {
 242     display: none;
 243     position: absolute;
 244     margin: auto;
 245     img {
 246         width: 1em;
 247         @media screen and (min-width: 24em) {
 248             width: 2em;
 249         }
 250     }
 251 }
 252 #roza-1 .p-author, #roza-1 .p-user, #roza-1 .p-inter {
 253     top: 40%;
 254     left: 30%;
 255 }#roza-2 .p-author, #roza-2 .p-user, #roza-2 .p-inter {
 256     top: 40%;
 257     left: 40%;
 258 }#roza-3 .p-author, #roza-3 .p-user, #roza-3 .p-inter {
 259     bottom: 40%;
 260     left: 30%;
 261 }#roza-4 .p-author, #roza-4 .p-user, #roza-4 .p-inter {
 262     top: 40%;
 263     left: 30%;
 264 }