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