Template:MainTemplate: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<style> | |||
.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' | |||
} | |||
@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' | |||
} | |||
} | |||
@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' | |||
} | |||
} | |||
.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 | |||
} | |||
</style> | |||
<div class="grid-container"> | <div class="grid-container"> | ||
<div class="header">{{HeaderTemplate|welcome={{{welcome}}}|blurb={{{blurb}}}}}</div> | <div class="header">{{HeaderTemplate|welcome={{{welcome}}}|blurb={{{blurb}}}}}</div> | ||
Revision as of 17:05, 7 January 2021
<style> .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' } @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' } } @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' } } .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 }
</style>
{{{welcome}}}
|
{{{news_title}}}
{{{news_content}}}
{{{about_title}}}
{{{about_content}}}
{{{sections_title}}}
{{{sections_content}}}
{{{featured_title}}}
{{{featured_content}}}
