personal-site/styles/styles.css

95 lines
1.9 KiB
CSS
Raw Normal View History

/*
Common styles across all pages, primarily content size and color and basic page layout styling
*/
/* Custom colors, which can be easily changed here */
:root {
--main-bg-color: white;
--main-text-color: black;
--accent-bg-color: black;
--accent-text-color: #AAAAFF;
}
/* Set default font and font weight */
* {
font-family: 'FreeMono', monospace;
font-weight: 600;
}
/* Set font size for common content items h1, h2, h3, p (aim for larger text) */
h1 {
text-align: center;
font-size: 4rem;
}
h2 {
text-align: center;
font-size: 2rem;
}
h3 {
text-align: center;
font-size: 1.5rem;
}
p {
font-size: 1.25rem;
}
/*
Styles to set the generic page layout, use a grid layout for body to ensure the footer stays in the bottom
Also make the header sticky, because users mgiht want navigation in the middle of the page
*/
body {
margin: 0px;
background-color: var(--main-bg-color);
color: var(--main-text-color);
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
header {
position: sticky;
top: 0;
z-index: 1;
}
header, footer {
padding: 10px;
background-color: var(--accent-bg-color);
color: var(--accent-text-color);
}
main {
padding: 10px;
height: 100%;
}
/* TODO: add responsiveness, temporarily use flex-wrap */
nav {
display: flex;
flex-wrap: wrap;
gap: 2ch;
justify-content: center;
}
nav a {
font-size: x-large;
color: var(--accent-text-color);
text-decoration: underline 0.1em var(--accent-bg-color);
transition: text-decoration-color 500ms;
}
nav a:hover {
text-decoration: underline 0.1em var(--accent-text-color);
}
/* Desktop - restrict content to around 1080px, which should be plenty of space*/
@media screen and (min-width: 1120px) {
main {
margin: auto;
width: 1080px;
}
}
/* Tablet or phone - use all of the avaliable space*/
@media screen and (max-width:1120px) {
}
/* footer styles */
footer {
text-align: center;
}