| /* |
| Spezific styling for salvattore |
| Feel free to edit it as you like |
| More info at http://salvattore.com |
| */ |
| |
| /* Base styles */ |
| .column { |
| float: left; |
| } |
| .size-1of5 { |
| width: 20%; |
| } |
| .size-1of4 { |
| width: 25%; |
| } |
| .size-1of3 { |
| width: 33.333%; |
| } |
| .size-1of2 { |
| width: 50%; |
| } |
| |
| /* Configurate salvattore with media queries */ |
| @media screen and (max-width: 450px) { |
| #grid[data-columns]::before { |
| content: '1 .column'; |
| } |
| } |
| |
| @media screen and (min-width: 451px) and (max-width: 700px) { |
| #grid[data-columns]::before { |
| content: '2 .column.size-1of2'; |
| } |
| } |
| |
| @media screen and (min-width: 701px) and (max-width: 850px) { |
| #grid[data-columns]::before { |
| content: '3 .column.size-1of3'; |
| } |
| } |
| |
| @media screen and (min-width: 851px) and (max-width: 1600px) { |
| #grid[data-columns]::before { |
| content: '4 .column.size-1of4'; |
| } |
| } |
| |
| @media screen and (min-width: 1601px) { |
| #grid[data-columns]::before { |
| content: '5 .column.size-1of5'; |
| } |
| } |