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     }
 136   }
 137
 138   .pager-center {
 139     //width: 100%;
 140     text-align: center;
 141   }
 142
 143   .pager {
 144     display: inline-block;
 145     padding-left: 0;
 146     margin: 20px 0;
 147     border-radius: 4px;
 148     > li {
 149       display: inline;
 150
 151       > a, > span {
 152         position: relative;
 153         float: left;
 154         padding: 6px 12px;
 155         margin-left: -1px;
 156         line-height: 1.42857143;
 157         color: #337ab7;
 158         text-decoration: none;
 159         background-color: #fff;
 160         border: 1px solid #ddd;
 161         &:hover, &:focus {
 162           color: #23527c;
 163           background-color: #eee;
 164           border-color: #ddd;
 165         }
 166       }
 167       &:first-child > a,
 168       &:first-child > span {
 169         margin-left: 0;
 170         border-top-left-radius: 4px;
 171         border-bottom-left-radius: 4px;
 172       }
 173       &:last-child > a,
 174       &:last-child > span {
 175         border-top-right-radius: 4px;
 176         border-bottom-right-radius: 4px;
 177       }
 178     }
 179     .active {
 180       > a, span {
 181         &, &:hover, &:focus {
 182           z-index: 2;
 183           color: #fff;
 184           cursor: default;
 185           background-color: #337ab7;
 186           border-color: #337ab7;
 187         }
 188       }
 189     }
 190     .disabled {
 191       > a, span {
 192         &, &:hover, &:focus {
 193           color: #777;
 194           cursor: not-allowed;
 195           background-color: #fff;
 196           border-color: #ddd;
 197         }
 198       }
 199     }
 200   }
 201 }
 202
 203 .tag-box {
 204   display: block;
 205
 206   @media screen and (min-width: 768px) {
 207     display: inline-block;
 208     vertical-align: top;
 209     width: 48%;
 210     margin-right: 1%;
 211     @include size(margin-bottom, 10px);
 212   }
 213 }