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

Remove trailing whitespace from CSS properties

Browse source
This commit is contained in:
Ruben 2025-12-13 16:38:47 +01:00
parent 789d40da91
commit c91971968e
1 changed files with 41 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

158
custom/styles/base.css
View file

@ -1,5 +1,5 @@
/* MINIMAL CSS RESET*/ /* MINIMAL CSS RESET */
* { margin-bottom: 0; } * { margin-bottom: 0 }
/* VARIABLES */ /* VARIABLES */
:root { :root {
@ -12,28 +12,27 @@
--color-green-light: #f2fbf8; --color-green-light: #f2fbf8;
--color-green-light: oklch(0.9811 0.01 173.93); --color-green-light: oklch(0.9811 0.01 173.93);
--color-grey: #404040; --color-grey: #404040;
--color-grey: oklch(0.3715 0 0); --color-grey: oklch(0.3715 0 0)
} }
/* GLOBAL */ /* GLOBAL */
html { font-family: var(--font-body); font-size: clamp(16px, 2.3vw, 20px); scroll-behavior: smooth; } html { font-family: var(--font-body); font-size: clamp(16px, 2.3vw, 20px); scroll-behavior: smooth }
body { margin: 0; color: var(--color-grey) } body { margin: 0; color: var(--color-grey) }
p, ul, ol, aside { line-height: 1.5em; hyphens: auto } p, ul, ol, aside { line-height: 1.5em; hyphens: auto }
img { max-width: 100%; height: auto; } img { max-width: 100%; height: auto }
h1 { color: var(--color-green); font-size: 2.3rem } h1 { color: var(--color-green); font-size: 2.3rem }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading); font-family: var(--font-heading);
font-weight: 400; font-weight: 400;
line-height: 1.3em; line-height: 1.3em;
margin-top: 1.3em; margin-top: 1.3em;
text-wrap: pretty; text-wrap: pretty
} }
h4 { font-weight: 700} h4 { font-weight: 700 }
a { a {
color: var(--color-green); color: var(--color-green);
text-decoration: none; text-decoration: none;
&:hover { color: var(--color-blue) } &:hover { color: var(--color-blue) }
} }
.grid-container { .grid-container {
@ -45,20 +44,16 @@ a {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
min-height: 100vh; min-height: 100vh;
align-items: stretch; align-items: stretch
} }
.contain, :where(main>article, main>aside, main>section) { .contain, :where(main>article, main>aside, main>section) {
display: grid; display: grid;
grid-template-columns: minmax(.8rem, 1fr) minmax(0, 42rem) minmax(.3rem, 1fr); grid-template-columns: minmax(.8rem, 1fr) minmax(0, 42rem) minmax(.3rem, 1fr);
> * { > * { grid-column: 2 }
grid-column: 2;
}
} }
.escape { .escape { grid-column: 1 / -1 !important }
grid-column: 1 / -1 !important;
}
/* HEADER */ /* HEADER */
header { header {
@ -72,19 +67,14 @@ header {
svg { svg {
width: 7rem; width: 7rem;
height: 100%; height: 100%;
#symbol { #symbol { fill: var(--color-blue) }
fill: var(--color-blue); #tekst { fill: var(--color-green) }
}
#tekst {
fill: var(--color-green);
}
} }
} }
nav { nav {
display:flex; display: flex;
align-items: center; align-items: center;
justify-content:flex-end; justify-content: flex-end;
flex: 1; flex: 1;
ul { ul {
display: flex; display: flex;
@ -93,10 +83,7 @@ header {
margin-top: .4rem; margin-top: .4rem;
padding: 0; padding: 0;
justify-content: flex-end; justify-content: flex-end;
a { a { margin-left: .4rem; margin-top: .4rem }
margin-left:0.4rem;
margin-top:0.4rem;
}
} }
} }
} }
@ -107,57 +94,33 @@ main {
grid-area: main; grid-area: main;
background-color: var(--color-green-light); background-color: var(--color-green-light);
padding-bottom: 2rem; padding-bottom: 2rem;
aside { margin-top: 1.3em } aside { margin-top: 1.3em }
article { article {
.intro { .intro { font-size: 1.2rem; line-height: 1.35em }
font-size: 1.2rem;
line-height: 1.35em;
}
.footnotes { .footnotes {
margin-top:1rem; margin-top: 1rem;
hr {border: 1px var(--color-grey) dashed} hr { border: 1px var(--color-grey) dashed }
} }
} }
.button { margin-top: 1.3rem; justify-self: start }
.button {
margin-top: 1.3rem;
justify-self: start;
}
} }
table { table {
margin-top: 1.3em; margin-top: 1.3em;
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
thead { thead {
tr { tr {
background-color: var(--color-green); background-color: var(--color-green);
color: white; color: white;
th { padding: .6rem; text-align: left; font-weight: 600 }
th {
padding: 0.6rem;
text-align: left;
font-weight: 600;
}
} }
} }
tbody { tbody {
tr { tr {
&:nth-child(odd) { &:nth-child(odd) { background-color: white }
background-color: white; &:nth-child(even) { background-color: oklch(0.96 0.005 173.93) }
} td { padding: .5rem .6rem; border-bottom: 1px solid oklch(0.9 0.01 173.93) }
&:nth-child(even) {
background-color: oklch(0.96 0.005 173.93);
}
td {
padding: 0.5rem 0.6rem;
border-bottom: 1px solid oklch(0.9 0.01 173.93);
}
} }
} }
} }
@ -167,70 +130,31 @@ table {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
border-radius: 2rem; border-radius: 2rem;
padding: 0.55rem 1rem; padding: .55rem 1rem;
background-color: transparent; background-color: transparent;
color: var(--color-grey); color: var(--color-grey);
outline: 0.08rem var(--color-grey) solid; outline: .08rem var(--color-grey) solid;
&:hover { background-color: var(--color-grey); color: white; outline: none }
&:hover { &:active, &.active { background-color: var(--color-green); color: white; outline: none }
background-color: var(--color-grey); &:focus { background-color: var(--color-green); color: white; outline: none }
color: white;
outline: none;
}
&:active, &.active {
background-color: var(--color-green);
color: white;
outline: none;
}
&:focus {
background-color: var(--color-green);
color: white;
outline: none;
}
&.inverted { &.inverted {
background-color: transparent; background-color: transparent;
color: white; color: white;
outline: 0.08rem white solid; outline: .08rem white solid;
&:hover { background-color: white; color: var(--color-green); outline: none }
&:hover { &:active, &.active { background-color: var(--color-green-light); color: var(--color-green); outline: none }
background-color: white; &:focus { color: white; background-color: var(--color-grey); outline: none }
color: var(--color-green); }
outline: none; &.bigger { font-size: 1.2em; border-radius: calc(1rem * 1.2) }
} &.centered { justify-self: center }
&:active, &.active {
background-color: var(--color-green-light);
color: var(--color-green);
outline: none;
}
&:focus {
color: white;
background-color: var(--color-grey);
outline: none;
}
} }
&.bigger { /* FOOTER */
font-size: 1.2em;
/*padding: calc(0.35rem * 1.2) calc(1rem * 1.2);*/
border-radius: calc(1rem * 1.2);
}
&.centered {
justify-self: center;
}
}
/* FOOTER */
footer { footer {
color: var(--color-green-light); color: var(--color-green-light);
a { a {
color: var(--color-green-light); color: var(--color-green-light);
&:hover { color: white; text-decoration: underline } &:hover { color: white; text-decoration: underline }
} }
background-color: var(--color-green); background-color: var(--color-green);
grid-area: footer; grid-area: footer;