| 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 | 
|---|