|
|
| Line 1: |
Line 1: |
| /* CSS placed here will be applied to all skins */
| |
|
| |
|
| /* Grid layout for front page */
| |
| /* grid container (large screen) */
| |
| .grid-container {
| |
| display: grid;
| |
| grid-template-areas:
| |
| 'header header header header header header'
| |
| 'middle middle middle middle middle right'
| |
| 'middle2 middle2 middle2 middle2 middle2 right'
| |
| 'middle3 middle3 middle3 middle3 middle3 right'
| |
| 'bottom bottom bottom bottom bottom right';
| |
| }
| |
|
| |
| /* grid container (medium screen) */
| |
| @media only screen and (max-width: 80rem) {
| |
| .grid-container {
| |
| grid-template-areas:
| |
| 'header header header header header header'
| |
| 'middle middle middle middle right right'
| |
| 'middle2 middle2 middle2 middle2 right right '
| |
| 'middle3 middle3 middle3 middle3 middle3 middle3'
| |
| 'bottom bottom bottom bottom bottom bottom';
| |
| }
| |
| }
| |
|
| |
| /* grid container (small screen) */
| |
| @media only screen and (max-width: 64rem) {
| |
| .grid-container {
| |
| grid-template-areas:
| |
| 'header header header header header header'
| |
| 'middle middle middle middle middle middle'
| |
| 'middle2 middle2 middle2 middle2 middle2 middle2'
| |
| 'middle3 middle3 middle3 middle3 middle3 middle3'
| |
| 'right right right right right right'
| |
| 'bottom bottom bottom bottom bottom bottom';
| |
| }
| |
| }
| |
|
| |
| /* grid area location classes */
| |
| .header { grid-area: header; }
| |
| .bottom { grid-area: bottom; }
| |
| .left { grid-area: left; }
| |
| .right { grid-area: right; }
| |
| .middle { grid-area: middle; }
| |
| .middle2 { grid-area: middle2; }
| |
| .middle3 { grid-area: middle3; }
| |