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, 13px);
  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, 20px);
  45   font-weight: normal;
  46 }
  47
  48 h3 {
  49   @include size(font-size, 15px);
  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 }
  87
  88 @media screen and (min-width: 62.5em) {
  89   .left-column {
  90     @include size(width, 470px);
  91     float: left;
  92   }
  93   .right-column {
  94     @include size(width, 470px);
  95     float: right;
  96   }
  97 }
  98
  99 .pagination {
 100   display: block;
 101   @include size(font-size, 12px);
 102   @include size(padding, 6px);
 103   text-align: center;
 104 }
 105
 106 .simple-hidden-initially {
 107   display: none;
 108 }
 109
 110 .plain-list-container {
 111   margin: 2em 0;
 112   .plain-list {
 113     column-count: 2;
 114     -moz-column-count: 2;
 115     -webkit-column-count: 2;
 116
 117     @media screen and (min-width: 768px) {
 118       column-count: 4;
 119       -moz-column-count: 4;
 120       -webkit-column-count: 4;
 121     }
 122     @media screen and (min-width: 1024px) {
 123       column-count: 5;
 124       -moz-column-count: 5;
 125       -webkit-column-count: 5;
 126     }
 127
 128     p {
 129       margin-top: 0;
 130
 131       &.header {
 132         -webkit-column-break-after: avoid;
 133         break-after: avoid;
 134       }
 135     }
 136
 137     .initial-block {
 138       display: inline-block;
 139       width: 100%;
 140     }
 141   }
 142
 143   .pager-center {
 144     //width: 100%;
 145     text-align: center;
 146   }
 147
 148   .pager {
 149     display: inline-block;
 150     padding-left: 0;
 151     margin: 20px 0;
 152     border-radius: 4px;
 153     > li {
 154       display: inline;
 155
 156       > a, > span {
 157         position: relative;
 158         float: left;
 159         padding: 6px 12px;
 160         margin-left: -1px;
 161         line-height: 1.42857143;
 162         color: #337ab7;
 163         text-decoration: none;
 164         background-color: #fff;
 165         border: 1px solid #ddd;
 166         &:hover, &:focus {
 167           color: #23527c;
 168           background-color: #eee;
 169           border-color: #ddd;
 170         }
 171       }
 172       &:first-child > a,
 173       &:first-child > span {
 174         margin-left: 0;
 175         border-top-left-radius: 4px;
 176         border-bottom-left-radius: 4px;
 177       }
 178       &:last-child > a,
 179       &:last-child > span {
 180         border-top-right-radius: 4px;
 181         border-bottom-right-radius: 4px;
 182       }
 183     }
 184     .current {
 185       &, &:hover, &:focus {
 186         z-index: 2;
 187         color: #fff;
 188         cursor: default;
 189         background-color: #337ab7;
 190         border-color: #337ab7;
 191       }
 192     }
 193     .disabled {
 194       > a, span {
 195         &, &:hover, &:focus {
 196           color: #777;
 197           cursor: not-allowed;
 198           background-color: #fff;
 199           border-color: #ddd;
 200         }
 201       }
 202     }
 203   }
 204 }
 205
 206 .tag-box {
 207   display: block;
 208
 209   @media screen and (min-width: 768px) {
 210     display: inline-block;
 211     vertical-align: top;
 212     width: 48%;
 213     margin-right: 1%;
 214     @include size(margin-bottom, 10px);
 215   }
 216 }