src/wolnelektury/static/scss/main/base.scss

   1 /* Basic layout */
   2 html, body {
   3   margin: 0;
   4   padding: 0;
   5 }
   6
   7 .clearboth {
   8   clear: both;
   9 }
  10
  11 .hide {
  12   display: none !important;
  13 }
  14
  15 /* Basic colors and fonts */
  16 body {
  17   font-family: Georgia, serif;
  18   background: #f7f7f7;
  19   color: black;
  20
  21   @include size(font-size, 15px);
  22 }
  23
  24 a {
  25   color: #0d7e85;
  26   text-decoration: none;
  27
  28   img {
  29     border: 0;
  30   }
  31 }
  32
  33 h1 {
  34   @include size(font-size, 35px);
  35   font-weight: normal;
  36   @include size(margin-top, 14px);
  37
  38   a {
  39     color: inherit;
  40   }
  41 }
  42
  43 h2 {
  44   @include size(font-size, 23px);
  45   font-weight: normal;
  46 }
  47
  48 h3 {
  49   @include size(font-size, 17px);
  50   font-weight: normal;
  51 }
  52
  53 .normal-text {
  54   line-height: 1.3em;
  55   @include size(margin, 0 5px);
  56
  57   @media screen and (min-width: 62.5em) {
  58     margin: 0;
  59   }
  60 }
  61
  62 .white-box {
  63   @include size(padding, 10px);
  64   @include white-box;
  65 }
  66
  67 ul.plain {
  68   list-style: none;
  69   margin: 0;
  70   padding: 0;
  71 }
  72
  73 .theme-list-link {
  74   @include mono;
  75   @include size(font-size, 11px);
  76
  77   &:after {
  78     @include size(padding-left, 11px);
  79     content: url("/static/img/arrow-teal.png");
  80     vertical-align: middle;
  81   }
  82 }
  83
  84 .left-column, .right-column {
  85   @include size(max-width, 600px);
  86   @include size(padding-left, 1em);
  87   @include size(padding-right, 1em);
  88 }
  89
  90 @media screen and (min-width: 62.5em) {
  91   .left-column, .right-column {
  92     @include size(width, 470px);
  93     padding-left: 0;
  94     padding-right: 0;
  95   }
  96
  97   .left-column {
  98     float: left;
  99   }
 100   .right-column {
 101     float: right;
 102   }
 103 }
 104
 105 .pagination {
 106   display: block;
 107   @include size(font-size, 12px);
 108   @include size(padding, 6px);
 109   text-align: center;
 110 }
 111
 112 .simple-hidden-initially {
 113   display: none;
 114 }
 115
 116 .plain-list-container {
 117   margin: 2em 0;
 118   .plain-list {
 119     column-count: 2;
 120     -moz-column-count: 2;
 121     -webkit-column-count: 2;
 122
 123     @media screen and (min-width: 768px) {
 124       column-count: 4;
 125       -moz-column-count: 4;
 126       -webkit-column-count: 4;
 127     }
 128     @media screen and (min-width: 1024px) {
 129       column-count: 5;
 130       -moz-column-count: 5;
 131       -webkit-column-count: 5;
 132     }
 133
 134     p {
 135       margin-top: 0;
 136
 137       &.header {
 138         -webkit-column-break-after: avoid;
 139         break-after: avoid;
 140       }
 141     }
 142
 143     .initial-block {
 144       display: inline-block;
 145       width: 100%;
 146     }
 147   }
 148
 149   .pager-center {
 150     //width: 100%;
 151     text-align: center;
 152   }
 153
 154   .pager {
 155     display: inline-block;
 156     padding-left: 0;
 157     margin: 20px 0;
 158     border-radius: 4px;
 159     > li {
 160       display: inline;
 161
 162       > a, > span {
 163         position: relative;
 164         float: left;
 165         padding: 6px 12px;
 166         margin-left: -1px;
 167         line-height: 1.42857143;
 168         color: #337ab7;
 169         text-decoration: none;
 170         background-color: #fff;
 171         border: 1px solid #ddd;
 172         &:hover, &:focus {
 173           color: #23527c;
 174           background-color: #eee;
 175           border-color: #ddd;
 176         }
 177       }
 178       &:first-child > a,
 179       &:first-child > span {
 180         margin-left: 0;
 181         border-top-left-radius: 4px;
 182         border-bottom-left-radius: 4px;
 183       }
 184       &:last-child > a,
 185       &:last-child > span {
 186         border-top-right-radius: 4px;
 187         border-bottom-right-radius: 4px;
 188       }
 189     }
 190     .current {
 191       &, &:hover, &:focus {
 192         z-index: 2;
 193         color: #fff;
 194         cursor: default;
 195         background-color: #337ab7;
 196         border-color: #337ab7;
 197       }
 198     }
 199     .disabled {
 200       > a, span {
 201         &, &:hover, &:focus {
 202           color: #777;
 203           cursor: not-allowed;
 204           background-color: #fff;
 205           border-color: #ddd;
 206         }
 207       }
 208     }
 209   }
 210 }
 211
 212 .tag-box {
 213   display: block;
 214
 215   @media screen and (min-width: 768px) {
 216     display: inline-block;
 217     vertical-align: top;
 218     width: 48%;
 219     margin-right: 1%;
 220     @include size(margin-bottom, 10px);
 221   }
 222 }
 223
 224 @media screen and (max-width: 62.5em) {
 225   .mobile-margins {margin-left: 1em; margin-right: 1em;}
 226 }