Remove trailing whitespace from CSS properties
This commit is contained in:
Ruben
parent
789d40da91
commit
c91971968e
1 changed files with 41 additions and 117 deletions
|
|
@ -1,5 +1,5 @@
|
||||||
/* MINIMAL CSS RESET */
|
/* MINIMAL CSS RESET */
|
||||||
* { margin-bottom: 0; }
|
* { margin-bottom: 0 }
|
||||||
|
|
||||||
/* VARIABLES */
|
/* VARIABLES */
|
||||||
:root {
|
:root {
|
||||||
|
|
@ -12,24 +12,23 @@
|
||||||
--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;
|
||||||
|
|
@ -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,15 +67,10 @@ 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;
|
||||||
|
|
@ -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,65 +130,26 @@ 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
&: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 {
|
|
||||||
font-size: 1.2em;
|
|
||||||
/*padding: calc(0.35rem * 1.2) calc(1rem * 1.2);*/
|
|
||||||
border-radius: calc(1rem * 1.2);
|
|
||||||
}
|
|
||||||
&.centered {
|
|
||||||
justify-self: center;
|
|
||||||
}
|
}
|
||||||
|
&.bigger { font-size: 1.2em; border-radius: calc(1rem * 1.2) }
|
||||||
|
&.centered { justify-self: center }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* FOOTER */
|
/* FOOTER */
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
color: var(--color-green-light);
|
color: var(--color-green-light);
|
||||||
a {
|
a {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue