1aa4d6a83b
Implement responsive grid layout Add CSS variables for consistent theming Create button component with states Improve header and footer structure Add page load time measurement Enhance list template with styling Update template structure with semantic HTML Implement dynamic CSS file loading Add favicon support Improve navigation with active state Add page and section class names to body Implement conditional date display in list items
191 lines
3.8 KiB
CSS
191 lines
3.8 KiB
CSS
/* MINIMAL CSS RESET*/
|
|
* { margin-bottom: 0; }
|
|
|
|
/* VARIABLES */
|
|
:root {
|
|
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--font-heading: Georgia, "Times New Roman", serif;
|
|
--color-primary: #4a90e2;
|
|
--color-primary: oklch(0.65 0.15 250);
|
|
--color-secondary: #2c5aa0;
|
|
--color-secondary: oklch(0.50 0.12 250);
|
|
--color-light: #f0f4f8;
|
|
--color-light: oklch(0.97 0.01 250);
|
|
--color-grey: #404040;
|
|
--color-grey: oklch(0.37 0 0);
|
|
}
|
|
|
|
/* GLOBAL */
|
|
html { font-family: var(--font-body); font-size: clamp(16px, 2.3vw, 20px); scroll-behavior: smooth; }
|
|
body { margin: 0; color: var(--color-grey) }
|
|
p, ul, ol, aside { line-height: 1.5em; hyphens: auto }
|
|
img { max-width: 100%; height: auto; }
|
|
h1 { color: var(--color-primary); font-size: 2.3rem }
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-heading);
|
|
font-weight: 400;
|
|
line-height: 1.3em;
|
|
margin-top: 1.3em;
|
|
text-wrap: pretty;
|
|
}
|
|
a {
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
&:hover { color: var(--color-secondary) }
|
|
}
|
|
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas: "header" "main" "footer";
|
|
height: 100%;
|
|
width: 100%;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.contain, :where(main>article, main>aside, main>section) {
|
|
display: grid;
|
|
grid-template-columns: minmax(.4rem, 1fr) minmax(0, 42rem) minmax(.3rem, 1fr);
|
|
> * {
|
|
grid-column: 2;
|
|
}
|
|
}
|
|
|
|
.escape {
|
|
grid-column: 1 / -1 !important;
|
|
}
|
|
|
|
/* HEADER */
|
|
header {
|
|
border-bottom: 3px #00000022 solid;
|
|
grid-area: header;
|
|
> div {
|
|
padding-bottom: .2rem;
|
|
display: flex;
|
|
.logo {
|
|
margin-right: .3rem;
|
|
svg {
|
|
width: 7rem;
|
|
height: 100%;
|
|
color: var(--color-primary);
|
|
}
|
|
}
|
|
|
|
nav {
|
|
display:flex;
|
|
align-items: center;
|
|
justify-content:flex-end;
|
|
flex: 1;
|
|
ul {
|
|
display: flex;
|
|
list-style: none;
|
|
flex-wrap: wrap;
|
|
margin-top: .4rem;
|
|
padding: 0;
|
|
justify-content: flex-end;
|
|
a {
|
|
margin-left:0.4rem;
|
|
margin-top:0.4rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* MAIN */
|
|
main {
|
|
grid-area: main;
|
|
background-color: var(--color-light);
|
|
padding-bottom: 2rem;
|
|
|
|
aside { margin-top: 1.3em }
|
|
article {
|
|
.intro {
|
|
font-size: 1.2rem;
|
|
line-height: 1.35em;
|
|
}
|
|
}
|
|
.button {
|
|
margin-top: 1.3rem;
|
|
justify-self: start;
|
|
}
|
|
}
|
|
|
|
/* BUTTONS */
|
|
.button {
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
border-radius: 2rem;
|
|
padding: 0.35rem 1rem;
|
|
background-color: transparent;
|
|
color: var(--color-grey);
|
|
outline: 0.08rem var(--color-grey) solid;
|
|
|
|
&:hover {
|
|
background-color: var(--color-grey);
|
|
color: white;
|
|
outline: none;
|
|
}
|
|
|
|
&:active, &.active {
|
|
background-color: var(--color-primary);
|
|
color: white;
|
|
outline: none;
|
|
}
|
|
|
|
&:focus {
|
|
background-color: var(--color-primary);
|
|
color: white;
|
|
outline: none;
|
|
}
|
|
|
|
&.inverted {
|
|
background-color: transparent;
|
|
color: white;
|
|
outline: 0.08rem white solid;
|
|
|
|
&:hover {
|
|
background-color: white;
|
|
color: var(--color-primary);
|
|
outline: none;
|
|
}
|
|
|
|
&:active, &.active {
|
|
background-color: var(--color-light);
|
|
color: var(--color-primary);
|
|
outline: none;
|
|
}
|
|
|
|
&:focus {
|
|
color: white;
|
|
background-color: var(--color-grey);
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
&.bigger {
|
|
font-size: 1.2em;
|
|
padding: calc(0.35rem * 1.2) calc(1rem * 1.2);
|
|
border-radius: calc(1rem * 1.2);
|
|
}
|
|
}
|
|
|
|
/* FOOTER */
|
|
|
|
footer {
|
|
color: var(--color-light);
|
|
a {
|
|
color: var(--color-light);
|
|
&:hover { color: white; text-decoration: underline }
|
|
}
|
|
background-color: var(--color-secondary);
|
|
grid-area: footer;
|
|
> div {
|
|
margin: 1rem 0;
|
|
text-align: center;
|
|
.generated { font-size: .6rem }
|
|
}
|
|
}
|