Simplify transitional files a bit.
[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: 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 }