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