edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add variables for most spacing and size values

Browse Source
This commit is contained in:
elisejakob
2024-06-21 12:21:01 +02:00
parent 8ba4fa8d04
commit 5762655653
29 changed files with 137 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
web/src/css/base.scss
View File

@ -35,7 +35,7 @@ body {
}
.site-main {
padding: var(--spacing-sitepadding) var(--spacing-sitepadding) 0;
padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline) 0;
min-height: 100vh;
animation: fadeUp .8s ease-out forwards;
@ -62,14 +62,14 @@ p {
&.lead {
font-size: var(--font-size-lead);
max-width: 34em;
margin-bottom: 2.5rem;
margin-bottom: var(--spacing-m);
}
}
div.lead p {
font-size: var(--font-size-lead);
max-width: var(--size-width-p);
margin-bottom: 2.5rem;
margin-bottom: var(--spacing-m);
}
h1,
@ -94,16 +94,16 @@ h6 {
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 1rem;
margin-bottom: var(--spacing-s);
.circle {
display: inline-block;
vertical-align: middle;
width: 1rem;
height: 1rem;
width: var(--size-icon);
height: var(--size-icon);
margin-bottom: .16rem;
margin-right: .5rem;
border-radius: 1rem;
margin-right: var(--spacing-xs);
border-radius: var(--size-icon);
background: var(--color-goldenOrange);
&:last-of-type {
@ -115,7 +115,7 @@ h6 {
.breadcrumb {
display: block;
font-weight: 500;
margin-bottom: 1rem;
margin-bottom: var(--spacing-s);
a {
text-decoration: none;
@ -138,7 +138,7 @@ input[type="text"] {
background: var(--color-white);
color: var(--color-text);
border: none;
padding: .5rem 1rem;
padding: var(--spacing-xs) var(--spacing-s);
font-family: inherit;
font-size: var(--font-size-body);
font-weight: 500;
@ -150,7 +150,7 @@ select {
background: var(--color-white);
color: var(--color-text);
border: 2px solid currentColor;
padding: .5rem 1rem;
padding: var(--spacing-xs) var(--spacing-s);
font-family: inherit;
font-size: var(--font-size-body);
font-weight: 500;
@ -204,14 +204,14 @@ select {
>span {
display: block;
margin-bottom: .5rem;
margin-bottom: var(--spacing-xs);
}
ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: .5rem;
gap: var(--spacing-xs);
}
a {
@ -223,11 +223,11 @@ select {
.pageSection {
background: var(--color-neufPink);
margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1);
padding: var(--spacing-sitepadding) var(--spacing-sitepadding) var(--spacing-section-bottom);
margin: calc(var(--spacing-sitepadding-block)*2) calc(var(--spacing-sitepadding-inline)*-1);
padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline) var(--spacing-section-bottom);
+.pageSection {
margin-top: calc(var(--spacing-sitepadding)*-2);
margin-top: calc(var(--spacing-sitepadding-block)*-2);
}
&:nth-of-type(even) {
@ -255,11 +255,11 @@ select {
}
h2 {
margin-bottom: 1rem;
margin-bottom: var(--spacing-s);
}
h3 {
margin: 1rem 0;
margin: var(--spacing-s) 0;
}
}
@ -275,7 +275,7 @@ select {
padding: .25em 0;
&:first-child {
padding-right: 1rem;
padding-right: var(--spacing-s);
}
}
}
@ -289,8 +289,8 @@ select {
.infoBlock {
background: var(--color-goldenBeige);
margin: 0 calc(var(--spacing-sitepadding)*-1);
padding: var(--spacing-sitepadding) var(--spacing-sitepadding) var(--spacing-section-bottom);
margin: 0 calc(var(--spacing-sitepadding-inline)*-1);
padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline) var(--spacing-section-bottom);
position: relative;
overflow: hidden;
@ -300,15 +300,15 @@ select {
min-height: 16rem;
h2 {
margin-bottom: 1rem;
margin-bottom: var(--spacing-s);
}
p {
margin-bottom: 2rem;
margin-bottom: var(--spacing-m);
}
.button {
margin-right: .5rem;
margin-right: var(--spacing-xs);
}
.pig {