Matthew Kaminski
4c32a99266
All checks were successful
Build Crate / build (push) Successful in 5m11s
49 lines
1.6 KiB
CSS
49 lines
1.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* This removes the margins inserted by default around pages */
|
|
* {
|
|
margin: 0;
|
|
}
|
|
|
|
/* This makes all the elements that wrap our code take up the whole page, so that we can put things at the bottom.
|
|
* Without this, the footer would be just beneath the content if the content doesn't fill the whole page (try disabling this).
|
|
*/
|
|
html, body, #root {
|
|
height: 100%;
|
|
}
|
|
/* This makes the `<div>` that wraps our whole app use CSS Grid to display three sections: the header, content, and footer. */
|
|
#root {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
/* The header will be automatically sized, the footer will be as small as possible, and the content will take up the rest of the space in the middle */
|
|
grid-template-rows: auto 1fr min-content;
|
|
grid-template-areas:
|
|
'header'
|
|
'main'
|
|
'footer';
|
|
}
|
|
header {
|
|
/* Put this in the right place in the grid */
|
|
grid-area: header;
|
|
/* Make this float over the content so it persists as we scroll */
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 99;
|
|
/* Make this span the whole page */
|
|
width: 100%;
|
|
}
|
|
main {
|
|
/* Put this in the right place in the grid */
|
|
grid-area: main;
|
|
/* The header is positioned 'floating' over the content, so we have to make sure this doesn't go behind the header, or it would be invisible.
|
|
* You may need to adjust this based on screen size, depending on how the header expands.
|
|
*/
|
|
margin-top: 5rem;
|
|
}
|
|
footer {
|
|
/* Put this in the right place in the grid */
|
|
grid-area: footer;
|
|
}
|