LEFT | RIGHT |
(no file at all) | |
1 /*! | 1 /*! |
2 * This file is part of website-defaults | 2 * This file is part of website-defaults |
3 * Copyright (C) 2016 Eyeo GmbH | 3 * Copyright (C) 2016 Eyeo GmbH |
4 * | 4 * |
5 * website-defaults is free software: you can redistribute it and/or | 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 | 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 | 7 * the Free Software Foundation, either version 3 of the License, or |
8 * (at your option) any later version. | 8 * (at your option) any later version. |
9 * | 9 * |
10 * website-defaults is distributed in the hope that it will be useful, | 10 * website-defaults is distributed in the hope that it will be useful, |
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of | 11 * but WITHOUT ANY WARRANTY; without even the implied warranty of |
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | 12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
13 * GNU General Public License for more details. | 13 * GNU General Public License for more details. |
14 * | 14 * |
15 * You should have received a copy of the GNU General Public License | 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/>. | 16 * along with website-defaults. If not, see <http://www.gnu.org/licenses/>. |
17 */ | 17 */ |
18 | 18 |
19 /* The following styles are for demonstration purposes **only** */ | 19 /* The following styles are for demonstration purposes **only** */ |
20 | 20 |
21 body | 21 body |
22 { | 22 { |
23 margin: 3em 0; | 23 margin: 3em 0; |
24 } | 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 } |
LEFT | RIGHT |