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