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