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