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