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