src/wolnelektury/static/scss/main/base.scss

   1 /* Basic layout */
   2 html, body {
   3     margin: 0;
   4     padding: 0;
   5 }
   6
   7
   8 .clearboth {
   9     clear: both;
  10 }
  11
  12
  13
  14 /* Basic colors and fonts */
  15 body {
  16     font-family: Georgia;
  17     background: #f7f7f7;
  18     color: black;
  19
  20     @include size(font-size, 13px);
  21 }
  22
  23 a {
  24     color: #0d7e85;
  25     text-decoration: none;
  26
  27     img {
  28         border: 0;
  29     }
  30 }
  31
  32 h1 {
  33     @include size(font-size, 35px);
  34     font-weight: normal;
  35     @include size(margin-top, 14px);
  36
  37     a {
  38         color: inherit;
  39     }
  40 }
  41
  42 h2 {
  43     @include size(font-size, 20px);
  44     font-weight: normal;
  45 }
  46
  47 h3 {
  48     @include size(font-size, 15px);
  49     font-weight: normal;
  50 }
  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
  68 ul.plain {
  69     list-style:none;
  70     margin: 0;
  71     padding: 0;
  72 }
  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
  87 .left-column, .right-column {
  88     @include size(max-width, 600px);
  89 }
  90 @media screen and (min-width: 62.5em) {
  91     .left-column {
  92         @include size(width, 470px);
  93         float: left;
  94     }
  95     .right-column {
  96         @include size(width, 470px);
  97         float:right;
  98     }
  99 }
 100
 101 .pagination {
 102     display: block;
 103     @include size(font-size, 12px);
 104     @include size(padding, 6px);
 105     text-align:center;
 106 }
 107
 108 .simple-hidden-initially {
 109     display: none;
 110 }
 111
 112
 113 .plain-list-container {
 114     margin: 2em 0;
 115     .plain-list {
 116         column-count: 2;
 117         -moz-column-count: 2;
 118         -webkit-column-count: 2;
 119
 120         @media screen and (min-width: 768px) {
 121             column-count: 4;
 122             -moz-column-count: 4;
 123             -webkit-column-count: 4;
 124         }
 125         @media screen and (min-width: 1024px) {
 126             column-count: 5;
 127             -moz-column-count: 5;
 128             -webkit-column-count: 5;
 129         }
 130
 131         p {
 132             margin-top: 0;
 133
 134             &.header {
 135                 -webkit-column-break-after: avoid;
 136                 break-after: avoid;
 137             }
 138         }
 139
 140         .initial-block {
 141             display: inline-block;
 142         }
 143     }
 144
 145     .pager {
 146         font-size: 18px;
 147         margin-top: .5em;
 148         text-align: center;
 149
 150         .current {
 151             font-weight: bold;
 152             color: black;
 153         }
 154     }
 155 }
 156
 157
 158 .tag-box {
 159     display: block;
 160
 161     @media screen and (min-width: 768px) {
 162         display: inline-block;
 163         vertical-align: top;
 164         width: 48%;
 165         margin-right: 1%;
 166         @include size(margin-bottom, 10px);
 167     }
 168 }