stopplidelsen/innhold
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add FAQ page template and improve button styling

Browse source 
Update frontpage content and styling Add metadata for new FAQ pages
Implement consistent button styling across templates
This commit is contained in:
Ruben 2025-10-15 20:51:38 +02:00
parent f906c5b444
commit 89c4ce89b6
9 changed files with 184 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

40
custom/styles/base.css
View file

@ -18,7 +18,7 @@
/* 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 { line-height: 1.5em; hyphens: auto }
p, ul, ol, aside { line-height: 1.5em; hyphens: auto }
img { max-width: 100%; height: auto; }
h1 { color: var(--color-green); font-size: 2.3rem }
h1, h2, h3, h4, h5, h6 {
@ -119,35 +119,51 @@ main {
.button {
display: inline-block;
text-decoration: none;
border-radius: 1rem;
border-radius: 2rem;
padding: 0.35rem 1rem;
background-color: var(--color-grey);
color: white;
background-color: transparent;
color: var(--color-grey);
outline: 0.08rem var(--color-grey) solid;
&:hover, &.active {
&:hover {
background-color: var(--color-grey);
color: white;
outline: none;
}
&:active, &.active {
background-color: var(--color-green);
color: white;
outline: none;
}
&:focus {
outline: 0.1rem var(--color-green) solid;
color: var(--color-grey);
background-color: white;
background-color: var(--color-green);
color: white;
outline: none;
}
&.inverted {
background-color: white;
color: var(--color-grey);
background-color: transparent;
color: white;
outline: 0.08rem white solid;
&:hover, &.active {
&:hover {
background-color: white;
color: var(--color-green);
outline: none;
}
&:active, &.active {
background-color: var(--color-green-light);
color: var(--color-green);
outline: none;
}
&:focus {
outline: 0.1rem white solid;
color: white;
background-color: var(--color-grey);
outline: none;
}
}