Add left-right arrows
[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 .desc-container {
72     display: flex;
73     flex-direction: column;
74     justify-content: space-around;
75     position: absolute;
76     left: 4.75em;
77     top: 6.75em;
78     bottom: 6.75em;
79     right: 4.75em;
80 }
81
82 .right-desc-container {
83     @extend .desc-container;
84     top: 10em;
85 }
86
87 .card-container {
88     display: block;
89     position: relative;
90     font-size: 4vw;
91     clear: both;
92
93     width: 100%;
94     @media screen and (min-width: 45em) {
95         font-size: 2vw;
96         width: 50%;
97         display: inline-block;
98     }
99
100     .card-dummy {
101         padding-top: 148.39%;
102     }
103 }
104
105
106
107 .three-container {
108     @extend .card-container;
109     font-size: 4vw;
110
111     @media screen and (min-width: 45em) {
112         font-size: 1.3333vw;
113         width: 33.33%;
114         display: inline-block;
115     }
116 }
117
118
119
120 .list-card {
121     @extend .card;
122     font-size: 1.5em;
123     padding: 1em;
124
125     display: flex;
126     flex-direction: column;
127     justify-content: space-around;
128
129     ul {
130         column-count: 2;
131         -moz-column-count: 2;
132         -webkit-column-count: 2;
133         column-gap: 1.5em;
134         -moz-column-gap: 1.5em;;
135         -webkit-column-gap: 1.5em;;
136
137         list-style: none;
138         padding: 0;
139         margin: 0;
140         line-height: 1em;
141
142         li {
143             margin-bottom: .6em
144         }
145     }
146 }
147
148
149 .card {
150     position: absolute;
151     top: 0;
152     bottom: 0;
153     left: 0;
154     right: 0;
155
156     h1 {
157         font-size: 1.5em;
158         margin-top: 1.5em;
159         width: 14.9em;
160         text-align: right;
161         text-transform: uppercase;
162
163         line-height: 1.3em;
164
165         .next {
166             display: block;
167             margin-right: 2em;
168         }
169     }
170
171     a {
172         color: #ccc;
173         text-decoration: none;
174         &:hover {
175             text-decoration: underline;
176         }
177     }
178
179     %body {
180         
181         p {
182             font-size: .85em;
183             margin: .5em 0;
184         }
185     }
186     .examples {
187         @extend %body;
188         text-transform: uppercase;
189         text-align: center;
190
191         p {
192             font-size: 1em;
193             line-height: 1.2em;
194         }
195     }
196     .usage {
197         @extend %body;
198         hyphens: auto;
199         -moz-hyphens: auto;
200     }
201     .recommendations {
202         @extend %body;
203         hyphens: auto;
204         -moz-hyphens: auto;
205     }
206
207     .inside-card {
208         margin: 0 5em;
209     }
210 }
211
212 .chaotic {
213     background-image: url(/static/img/bg/chaotic.png);
214     background-size: 100%;
215 }
216 .neutral {
217     background-image: url(/static/img/bg/neutral.png);
218     background-size: 100%;
219
220     color: #555;
221     a { color: #555; }
222 }
223 .lawful {
224     background-image: url(/static/img/bg/lawful.png);
225     background-size: 100%;
226 }
227 .info {
228     background-image: url(/static/img/bg/info.png);
229     background-size: 100%;
230
231     color: #656263;
232     a {color: #656263;}
233 }
234 .empty {
235     background-color: #222;
236 }
237
238
239
240 $g11: #85db81;
241 $g12: darken(#3db814, 10%);
242 $g21: lighten($g11, 10%);
243 $g22: lighten($g12, 10%);
244 .btn {
245     background: #fac878;
246     background-image: -webkit-linear-gradient(top, $g11, $g12);
247     background-image: -moz-linear-gradient(top, $g11, $g12);
248     background-image: -ms-linear-gradient(top, $g11, $g12);
249     background-image: -o-linear-gradient(top, $g11, $g12);
250     background-image: linear-gradient(to bottom, $g11, $g12);
251     -webkit-border-radius: 100%;
252     -moz-border-radius: 100%;
253     border-radius: 100%;
254     border: 1em double white;
255     color: #ffffff;
256     padding: 2em;
257     text-decoration: none;
258     cursor: pointer;
259
260     font-size: 3.75vw;
261     @media screen and (min-width: 45em) {
262         font-size: 1.25vw;
263     }
264 }
265
266 .btn:hover {
267     background: #fcba58;
268     background-image: -webkit-linear-gradient(top, $g21, $g22);
269     background-image: -moz-linear-gradient(top, $g21, $g22);
270     background-image: -ms-linear-gradient(top, $g21, $g22);
271     background-image: -o-linear-gradient(top, $g21, $g22);
272     background-image: linear-gradient(to bottom, $g21, $g22);
273     text-decoration: none;
274 }
275
276
277 .text-page-wrapper {
278     background: #ddd;
279     color: black;
280
281     .text-page {
282         max-width: 40em;
283         margin: auto;
284         padding: 3em;
285         
286     }
287 }
288
289
290 footer {
291     margin: 3em 1em;
292     font-size: .8em;
293
294     a {
295         color: white;
296         text-decoration: none;
297
298         &:hover {
299             text-decoration: underline;
300         }
301     }
302 }
303
304
305 %prevnext {
306     display: block;
307     position: absolute;
308     top: 0;
309     bottom: 0;
310     background: rgba(64,64,64,.5);
311     z-index:100;
312     opacity: 0;
313     text-align: center;
314
315     span {
316         position: absolute;
317         top: 50%;
318         margin-top: -.5em;
319         left: 0;
320         width: 100%;
321         color: #000;
322     }
323
324     &:hover, &.active {
325         opacity: 1;
326     }
327
328     font-size: 8vw;
329     width: 16vw;
330     @media screen and (min-width: 45em) {
331         width: 8vw;
332         font-size: 4vw;
333     }
334 }
335
336 #previous-card {
337     @extend %prevnext;
338     left: 0;
339 }
340 #next-card {
341     @extend %prevnext;
342     right: 0;
343 }