css fix
[copyspeak.git] / src / copyspeak / static / css / base.scss
1 @import url(http://fonts.googleapis.com/css?family=Lato);
2
3 html, body {
4     margin: 0;
5     padding: 0;
6     height: 100%;
7     background: black;
8     color: #ccc;
9     font-family: Lato;
10 }
11
12 header {
13     font-size: 16px;
14
15     a {
16         text-decoration: none;
17         color: #ddd;
18         display: block;
19         padding: .5em;
20         float: left;
21
22         &:before {
23             content: url(/static/img/brackets.png);
24             margin-right: .5em;
25             vertical-align:middle;
26         }
27
28         &:hover {
29             color: white;
30             text-decoration: underline;
31         }
32     }
33
34     #buy {
35         padding: 4px 10px 0 10px;
36         float: right;
37     }
38 }
39
40 .fnp-logo {
41     text-align:right;
42     margin-top: 4em;
43     text-align: center;
44
45     img {
46         height: 4em;
47     }
48 }
49
50 h1.main {
51     margin-left: 1em;
52     font-size: 5vw;
53     @media screen and (min-width: 45em) {
54         font-size: 2vw;
55     }
56
57     a {
58         color: #ccc;
59         text-decoration: none;
60         &:hover {
61             color: white;
62             text-decoration: underline;
63         }
64     }
65 }
66
67 #intro {
68     background-color: #222;
69 }
70
71
72 .card-container {
73     display: block;
74     position: relative;
75     font-size: 4vw;
76     clear: both;
77
78     width: 100%;
79     @media screen and (min-width: 45em) {
80         font-size: 2vw;
81         width: 50%;
82         display: inline-block;
83     }
84
85     .card-dummy {
86         padding-top: 148.39%;
87     }
88 }
89
90
91
92 .three-container {
93     @extend .card-container;
94     font-size: 4vw;
95
96     @media screen and (min-width: 45em) {
97         font-size: 1.3333vw;
98         width: 33.33%;
99         display: inline-block;
100     }
101 }
102
103
104
105 .list-card {
106     @extend .card;
107     font-size: 1.5em;
108     padding: 1em;
109
110     display: flex;
111     flex-direction: column;
112     justify-content: space-around;
113
114     ul {
115         column-count: 2;
116         -moz-column-count: 2;
117         -webkit-column-count: 2;
118         column-gap: 1.5em;
119         -moz-column-gap: 1.5em;;
120         -webkit-column-gap: 1.5em;;
121
122         list-style: none;
123         padding: 0;
124         margin: 0;
125         line-height: 1em;
126
127         li {
128             margin-bottom: .6em
129         }
130     }
131 }
132
133
134 .card {
135     position: absolute;
136     top: 0;
137     bottom: 0;
138     left: 0;
139     right: 0;
140
141     h1 {
142         font-size: 1.5em;
143         margin-top: 1.5em;
144         width: 14.9em;
145         text-align: right;
146         text-transform: uppercase;
147
148         line-height: 1.3em;
149
150         .next {
151             display: block;
152             margin-right: 2em;
153         }
154     }
155
156     a {
157         color: #ccc;
158         text-decoration: none;
159         &:hover {
160             text-decoration: underline;
161         }
162     }
163
164     %body {
165         
166         p {
167             font-size: .85em;
168             margin: .5em 0;
169         }
170     }
171     .examples {
172         @extend %body;
173         text-transform: uppercase;
174         text-align: center;
175
176         p {
177             font-size: 1em;
178             line-height: 1.2em;
179         }
180     }
181     .usage {
182         @extend %body;
183         hyphens: auto;
184         -moz-hyphens: auto;
185     }
186     .recommendations {
187         @extend %body;
188         hyphens: auto;
189         -moz-hyphens: auto;
190     }
191
192     .inside-card {
193         margin: 0 5em;
194     }
195
196     .desc-container {
197         display: flex;
198         flex-direction: column;
199         justify-content: space-around;
200         position: absolute;
201         left: 4.75em;
202         top: 6.75em;
203         bottom: 6.75em;
204         right: 4.75em;
205
206         a {
207             color: #ccc;
208             border-bottom-width: 1px;
209             border-bottom-color: #ccc;
210             border-bottom-style: dotted;
211
212             &:hover {
213                 color: white;
214                 border-bottom-color: white;
215                 text-decoration: none;
216             }
217         }
218         a[href^="http://"] {
219             border-bottom-style: dashed;
220         }
221     }
222
223     .right-desc-container {
224         @extend .desc-container;
225         top: 10em;
226     }
227 }
228
229 .chaotic {
230     background-image: url(/static/img/bg/chaotic.png);
231     background-size: 100%;
232 }
233 .neutral {
234     background-image: url(/static/img/bg/neutral.png);
235     background-size: 100%;
236
237     color: #555;
238     a { color: #555; }
239
240     .desc-container {
241         a {
242             color: #555;
243             border-bottom-color: #555;
244             &:hover {
245                 color: black;
246                 border-bottom-color: black;
247             }
248         }
249     }
250 }
251 .lawful {
252     background-image: url(/static/img/bg/lawful.png);
253     background-size: 100%;
254 }
255 .info {
256     background-image: url(/static/img/bg/info.png);
257     background-size: 100%;
258
259     color: #656263;
260     a {color: #656263;}
261 }
262 .empty {
263     background-color: #222;
264 }
265
266
267
268 $g11: #85db81;
269 $g12: darken(#3db814, 10%);
270 $g21: lighten($g11, 10%);
271 $g22: lighten($g12, 10%);
272 .btn {
273     background: #fac878;
274     background-image: -webkit-linear-gradient(top, $g11, $g12);
275     background-image: -moz-linear-gradient(top, $g11, $g12);
276     background-image: -ms-linear-gradient(top, $g11, $g12);
277     background-image: -o-linear-gradient(top, $g11, $g12);
278     background-image: linear-gradient(to bottom, $g11, $g12);
279     -webkit-border-radius: 100%;
280     -moz-border-radius: 100%;
281     border-radius: 100%;
282     border: 1em double white;
283     color: #ffffff;
284     padding: 2em;
285     text-decoration: none;
286     cursor: pointer;
287
288     font-size: 3.75vw;
289     @media screen and (min-width: 45em) {
290         font-size: 1.25vw;
291     }
292 }
293
294 .btn:hover {
295     background: #fcba58;
296     background-image: -webkit-linear-gradient(top, $g21, $g22);
297     background-image: -moz-linear-gradient(top, $g21, $g22);
298     background-image: -ms-linear-gradient(top, $g21, $g22);
299     background-image: -o-linear-gradient(top, $g21, $g22);
300     background-image: linear-gradient(to bottom, $g21, $g22);
301     text-decoration: none;
302 }
303
304
305 .text-page-wrapper {
306     background: #ddd;
307     color: black;
308
309     .text-page {
310         max-width: 40em;
311         margin: auto;
312         padding: 3em;
313         
314     }
315 }
316
317
318 footer {
319     margin: 3em 1em 0;
320     font-size: .8em;
321
322     a {
323         color: white;
324         text-decoration: none;
325
326         &:hover {
327             text-decoration: underline;
328         }
329     }
330 }
331
332
333 %prevnext {
334     display: block;
335     position: absolute;
336     top: 0;
337     bottom: 0;
338     background: rgba(64,64,64,.5);
339     z-index:100;
340     opacity: 0;
341     text-align: center;
342
343     span {
344         position: absolute;
345         top: 50%;
346         margin-top: -.5em;
347         left: 0;
348         width: 100%;
349         color: #000;
350     }
351
352     &:hover, &.active {
353         opacity: 1;
354     }
355
356     font-size: 8vw;
357     width: 16vw;
358     @media screen and (min-width: 45em) {
359         width: 8vw;
360         font-size: 4vw;
361     }
362 }
363
364 #previous-card {
365     @extend %prevnext;
366     left: 0;
367 }
368 #next-card {
369     @extend %prevnext;
370     right: 0;
371 }
372