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 {

6
web/src/css/button.scss
View File

@ -2,13 +2,13 @@ button,
.button {
display: inline-flex;
align-items: center;
gap: 1rem;
gap: var(--spacing-s);
border-radius: 10rem;
background: var(--color-cta-background);
color: var(--color-cta-text);
border: none;
padding: .5rem 1rem;
margin: 0 0 .5rem;
padding: var(--spacing-xs) var(--spacing-s);
margin: 0 0 var(--spacing-xs);
font-family: var(--font-main);
font-size: var(--font-size-body);
font-weight: 500;

26
web/src/css/variables.scss
View File

@ -44,9 +44,13 @@
--color-menu-background: var(--color-goldenBeige);
// spacing
--spacing-sitepadding: 2rem;
--spacing-gap-column: 2rem;
--spacing-gap-row: 1.5rem;
--spacing-sitepadding-block: 2rem;
--spacing-sitepadding-inline: 2rem;
--spacing-gap-column: var(--spacing-sitepadding-block);
--spacing-gap-row: calc(var(--spacing-gap-column)*-.25);
--spacing-xs: .5rem;
--spacing-s: 1rem;
--spacing-m: 2rem;
--spacing-l: 3rem;
--spacing-xl: 6rem;
--spacing-section-bottom: var(--spacing-l);
@ -54,10 +58,26 @@
// sizes
--size-width-p: 36rem;
--size-icon: 1em;
--size-icon-circle: 3rem;
--size-icon-large: 3.4rem;
// animations
--transition-easing: .3s ease;
--border: 1px solid var(--color-neufPink);
--border-s: 1px solid var(--color-chateauBlue-05);
}
@media (min-width: 1400px) {
:root {
--spacing-sitepadding-block: 2.5rem;
--spacing-sitepadding-inline: 6rem;
}
}
@media (min-width: 1920px) {
:root {
--spacing-sitepadding-block: 3rem;
--spacing-sitepadding-inline: 10rem;
}
}