OLD | NEW |
| (Empty) |
1 /*! | |
2 * This file is part of website-defaults | |
3 * Copyright (C) 2016-2017 eyeo GmbH | |
4 * | |
5 * website-defaults is free software: you can redistribute it and/or | |
6 * modify it under the terms of the GNU General Public License as published by | |
7 * the Free Software Foundation, either version 3 of the License, or | |
8 * (at your option) any later version. | |
9 * | |
10 * website-defaults is distributed in the hope that it will be useful, | |
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of | |
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | |
13 * GNU General Public License for more details. | |
14 * | |
15 * You should have received a copy of the GNU General Public License | |
16 * along with website-defaults. If not, see <http://www.gnu.org/licenses/>. | |
17 */ | |
18 | |
19 /* The following styles are for demonstration purposes **only** */ | |
20 | |
21 body | |
22 { | |
23 margin: 3em 0; | |
24 } | |
25 | |
26 /** | |
27 * Highlight text with inverse colors and padding | |
28 */ | |
29 .inverse-text | |
30 { | |
31 padding: 0.5em 1em; | |
32 color: #fff; | |
33 background-color: #000; | |
34 } | |
35 | |
36 /** | |
37 * Tablet width container | |
38 */ | |
39 .tablet | |
40 { | |
41 width: 720px; | |
42 } | |
43 | |
44 /** | |
45 * Mobile width container | |
46 */ | |
47 .mobile | |
48 { | |
49 width: 540px; | |
50 } | |
51 | |
52 /* Collapse mobile & tablet container widths to 100% on small screens */ | |
53 | |
54 .mobile, | |
55 .tablet | |
56 { | |
57 max-width: 100%; | |
58 } | |
59 | |
60 .mobile .column, | |
61 .tablet .column | |
62 { | |
63 width: 100%; | |
64 } | |
65 | |
66 @media(min-width: 768px) | |
67 { | |
68 /* Collapse one fourth columns to one half columns inside tablet containers */ | |
69 .tablet .column.one-fourth | |
70 { | |
71 width: 50%; | |
72 } | |
73 } | |
OLD | NEW |