122 lines
3.1 KiB
CSS
122 lines
3.1 KiB
CSS
html {
|
|
/* The html tag wraps the entire page. */
|
|
/* Change this value to any color you want */
|
|
--hilite: #8D3FC5;
|
|
}
|
|
|
|
/* == DEFAULT SITE ==
|
|
* Below represents basically a single-column stacked website.
|
|
* It will load on any device that supports CSS. It uses a grid layout, of a
|
|
* single column stack. This is essentially the mobile version of the site,
|
|
* hiding the navigation menu into a "hamburger" menu. It will display until the
|
|
* screen is a specific width, at which point the values will be over-written by
|
|
* rules further down the page.
|
|
*/
|
|
|
|
body {
|
|
/* Websites have a head and a body.
|
|
* The head is full of metadata. The body has the visible website data.
|
|
*/
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
grid-template-rows: auto;
|
|
grid-template-areas:
|
|
"head"
|
|
"main"
|
|
"foot";
|
|
}
|
|
|
|
header {
|
|
/* Header
|
|
* Top of the visible website
|
|
*
|
|
* Generally has a logo, contact information, and a navigation menu.
|
|
*/
|
|
grid-area: head;
|
|
background-color: blue;
|
|
border: 2px solid blue;
|
|
}
|
|
|
|
footer {
|
|
/* Footer
|
|
* Bottom of the visible website
|
|
*
|
|
* Generally has contact info, a site-map, and some maker links.
|
|
*/
|
|
grid-area: foot;
|
|
background-color: green;
|
|
border: 2px solid green;
|
|
}
|
|
|
|
main {
|
|
/* Main
|
|
* The main content of the visible website.
|
|
*/
|
|
grid-area: main;
|
|
background-color: red;
|
|
border: 2px solid red;
|
|
}
|
|
|
|
nav {
|
|
/* Nav
|
|
* The navigation menu
|
|
*
|
|
* Generally included near the header, and often heavily styled for responsivness.
|
|
*/
|
|
}
|
|
|
|
/* == Tablet Landscape ==
|
|
* This media query will apply on viewports of at least 1024px wide. This
|
|
* applies generally to tablets in landscape orientation, and screens larger
|
|
* than it. This is essentially the desktop version of the site.
|
|
*/
|
|
@media only screen and (min-width: 1024px) {
|
|
.grid{
|
|
display: grid;
|
|
grid-template-columns: repeat(9, minmax(0,1fr));
|
|
grid-template-rows: auto;
|
|
grid-template-areas:
|
|
"head head head head head head head head head"
|
|
"main main main main main main main main main"
|
|
"foot foot foot foot foot foot foot foot foot"
|
|
}
|
|
|
|
header {}
|
|
footer {}
|
|
nav {}
|
|
main {}
|
|
}
|
|
|
|
/* == Ultrawide ==
|
|
* This media query is for ultrawide monitors and displays. It is optional,
|
|
* though can be used to add gutters or modify content sizing to make reading
|
|
* easier.
|
|
*/
|
|
@media only screen and (min-width: 2048px) {
|
|
.grid{
|
|
display: grid;
|
|
grid-template-columns: repeat(9, minmax(0,1fr));
|
|
grid-template-rows: auto;
|
|
grid-template-areas:
|
|
"head head head head head head head head head"
|
|
"main main main main main main main main main"
|
|
"foot foot foot foot foot foot foot foot foot"
|
|
}
|
|
|
|
header {
|
|
background-color: lightblue;
|
|
border-color: lightblue;
|
|
}
|
|
footer {
|
|
background-color: lightgreen;
|
|
border-color: lightgreen;
|
|
}
|
|
nav {}
|
|
main {
|
|
background-color: orange;
|
|
border-color: orange;
|
|
}
|
|
}
|