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