rework frontend for book abstracts
[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, 13px);
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, 20px);
45   font-weight: normal;
46 }
47
48 h3 {
49   @include size(font-size, 15px);
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 }
87
88 @media screen and (min-width: 62.5em) {
89   .left-column {
90     @include size(width, 470px);
91     float: left;
92   }
93   .right-column {
94     @include size(width, 470px);
95     float: right;
96   }
97 }
98
99 .pagination {
100   display: block;
101   @include size(font-size, 12px);
102   @include size(padding, 6px);
103   text-align: center;
104 }
105
106 .simple-hidden-initially {
107   display: none;
108 }
109
110 .plain-list-container {
111   margin: 2em 0;
112   .plain-list {
113     column-count: 2;
114     -moz-column-count: 2;
115     -webkit-column-count: 2;
116
117     @media screen and (min-width: 768px) {
118       column-count: 4;
119       -moz-column-count: 4;
120       -webkit-column-count: 4;
121     }
122     @media screen and (min-width: 1024px) {
123       column-count: 5;
124       -moz-column-count: 5;
125       -webkit-column-count: 5;
126     }
127
128     p {
129       margin-top: 0;
130
131       &.header {
132         -webkit-column-break-after: avoid;
133         break-after: avoid;
134       }
135     }
136
137     .initial-block {
138       display: inline-block;
139       width: 100%;
140     }
141   }
142
143   .pager-center {
144     //width: 100%;
145     text-align: center;
146   }
147
148   .pager {
149     display: inline-block;
150     padding-left: 0;
151     margin: 20px 0;
152     border-radius: 4px;
153     > li {
154       display: inline;
155
156       > a, > span {
157         position: relative;
158         float: left;
159         padding: 6px 12px;
160         margin-left: -1px;
161         line-height: 1.42857143;
162         color: #337ab7;
163         text-decoration: none;
164         background-color: #fff;
165         border: 1px solid #ddd;
166         &:hover, &:focus {
167           color: #23527c;
168           background-color: #eee;
169           border-color: #ddd;
170         }
171       }
172       &:first-child > a,
173       &:first-child > span {
174         margin-left: 0;
175         border-top-left-radius: 4px;
176         border-bottom-left-radius: 4px;
177       }
178       &:last-child > a,
179       &:last-child > span {
180         border-top-right-radius: 4px;
181         border-bottom-right-radius: 4px;
182       }
183     }
184     .current {
185       &, &:hover, &:focus {
186         z-index: 2;
187         color: #fff;
188         cursor: default;
189         background-color: #337ab7;
190         border-color: #337ab7;
191       }
192     }
193     .disabled {
194       > a, span {
195         &, &:hover, &:focus {
196           color: #777;
197           cursor: not-allowed;
198           background-color: #fff;
199           border-color: #ddd;
200         }
201       }
202     }
203   }
204 }
205
206 .tag-box {
207   display: block;
208
209   @media screen and (min-width: 768px) {
210     display: inline-block;
211     vertical-align: top;
212     width: 48%;
213     margin-right: 1%;
214     @include size(margin-bottom, 10px);
215   }
216 }