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

8
web/src/components/associations/associationItem.module.scss
View File

@ -4,10 +4,11 @@
display: grid; display: grid;
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 2fr;
align-items: flex-start; align-items: flex-start;
gap: 1rem; column-gap: var(--spacing-gap-column);
row-gap: var(--spacing-gap-row);
background: var(--color-white); background: var(--color-white);
color: var(--color-black); color: var(--color-black);
padding: 1rem; padding: var(--spacing-s);
} }
.image { .image {
@ -29,8 +30,7 @@
} }
.title { .title {
font-size: 1.2rem; margin-bottom: var(--spacing-s);
margin-bottom: 1rem;
} }
.excerpt { .excerpt {

8
web/src/components/blocks/accordion.module.scss
View File

@ -1,7 +1,7 @@
.accordion { .accordion {
margin: var(--spacing-l) 0; margin: var(--spacing-l) 0;
max-width: var(--size-width-p); max-width: var(--size-width-p);
padding: 1rem 0; padding: var(--spacing-s) 0;
border-top: var(--border-s); border-top: var(--border-s);
border-bottom: var(--border-s); border-bottom: var(--border-s);
@ -39,8 +39,8 @@
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
width: 3rem; width: var(--size-icon-circle);
height: 3rem; height: var(--size-icon-circle);
background-size: 100%; background-size: 100%;
background-image: url("/assets/icons/circle-arrow-right.svg"); background-image: url("/assets/icons/circle-arrow-right.svg");
right: 0; right: 0;
@ -50,7 +50,7 @@
} }
.accordionContent { .accordionContent {
padding: 2rem 0 1rem; padding: var(--spacing-m) 0 var(--spacing-s);
display: none; display: none;
} }

6
web/src/components/blocks/featuredBlock.module.scss
View File

@ -1,7 +1,7 @@
.featuredBlock { .featuredBlock {
background: var(--color-background-secondary); background: var(--color-background-secondary);
margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1); margin: calc(var(--spacing-sitepadding-block)*2) calc(var(--spacing-sitepaddign-inline)*-1);
padding: var(--spacing-sitepadding); padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
column-gap: var(--spacing-gap-column); column-gap: var(--spacing-gap-column);
@ -22,7 +22,7 @@
} }
+.featuredBlock { +.featuredBlock {
margin-top: calc(var(--spacing-sitepadding)*-2); margin-top: calc(var(--spacing-sitepadding-block)*-2);
} }
&:last-child { &:last-child {

3
web/src/components/blocks/horizontalRuleBlock.module.scss
View File

@ -1,9 +1,8 @@
.horizontalRuleBlock { .horizontalRuleBlock {
height: 3rem; height: 3rem;
width: 100%; width: 100%;
//max-width: calc(var(--size-width-p) + (var(--spacing-sitepadding)/2));
max-width: var(--size-width-p); max-width: var(--size-width-p);
margin: 1rem auto 4rem; margin: var(--spacing-s) auto var(--spacing-section-bottom);
overflow: hidden; overflow: hidden;
position: relative; position: relative;

8
web/src/components/blocks/iconListBlock.module.scss
View File

@ -36,18 +36,18 @@
} }
.text { .text {
margin-bottom: 1rem; margin-bottom: var(--spacing-s);
h2 { h2 {
font-size: var(--font-size-lead); font-size: var(--font-size-lead);
margin: .5rem 0; margin: var(--spacing-xs) 0;
} }
} }
.icon { .icon {
flex: none; flex: none;
width: 3.4rem; width: var(--size-icon-large);
height: 3.4rem; height: var(--size-icon-large);
background: var(--color-goldenBeige); background: var(--color-goldenBeige);
border-radius: 100%; border-radius: 100%;
display: flex; display: flex;

6
web/src/components/blocks/imageSliderBlock.module.scss
View File

@ -3,7 +3,7 @@
padding-top: 56%; padding-top: 56%;
background: var(--color-black); background: var(--color-black);
color: var(--color-goldenBeige); color: var(--color-goldenBeige);
margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1); margin: calc(var(--spacing-sitepadding-block)*2) calc(var(--spacing-sitepaddign-inline)*-1);
figure { figure {
width: 100%; width: 100%;
@ -29,7 +29,7 @@
bottom: 0; bottom: 0;
max-width: var(--size-width-p); max-width: var(--size-width-p);
margin: 0 auto; margin: 0 auto;
padding: .75rem 1rem; padding: .75rem var(--spacing-s);
font-size: var(--font-size-caption); font-size: var(--font-size-caption);
line-height: 1.4; line-height: 1.4;
background: rgba(0, 0, 0, .6); background: rgba(0, 0, 0, .6);
@ -41,6 +41,6 @@
} }
&[data-hero] { &[data-hero] {
margin-top: calc(var(--spacing-sitepadding)* -2); margin-top: calc(var(--spacing-sitepadding-block)* -2);
} }
} }

6
web/src/components/blocks/imageWithTextBlock.module.scss
View File

@ -12,7 +12,7 @@
width: 100%; width: 100%;
max-width: var(--size-width-p); max-width: var(--size-width-p);
margin: 0 auto; margin: 0 auto;
padding: 1rem 0; padding: var(--spacing-s) 0;
font-size: var(--font-size-caption); font-size: var(--font-size-caption);
line-height: 1.4; line-height: 1.4;
opacity: .8; opacity: .8;
@ -20,14 +20,14 @@
&.bleed { &.bleed {
width: 100vw; width: 100vw;
margin: 2rem calc(var(--spacing-sitepadding)*-1); margin: 2rem calc(var(--spacing-sitepadding-inline)*-1);
img { img {
width: 100%; width: 100%;
} }
@media (max-width: 800px) { @media (max-width: 800px) {
padding: .5rem var(--spacing-sitepadding); padding: var(--spacing-xs) var(--spacing-sitepadding-inline);
} }
} }

2
web/src/components/blocks/richTextBlock.module.scss
View File

@ -7,7 +7,7 @@
h4, h4,
h5, h5,
h6 { h6 {
margin: 2rem auto 1rem; margin: var(--spacing-m) auto var(--spacing-s);
max-width: var(--size-width-p); max-width: var(--size-width-p);
} }

8
web/src/components/blocks/swiper.scss
View File

@ -20,7 +20,7 @@
.swiper-button-next { .swiper-button-next {
&:before { &:before {
background-image: url("/assets/icons/circle-arrow-right.svg"); background-image: url("/assets/icons/circle-arrow-right.svg");
right: var(--spacing-sitepadding); right: var(--spacing-sitepadding-inline);
} }
&:after { &:after {
@ -32,7 +32,7 @@
.swiper-button-prev { .swiper-button-prev {
&:before { &:before {
background-image: url("/assets/icons/circle-arrow-left.svg"); background-image: url("/assets/icons/circle-arrow-left.svg");
left: var(--spacing-sitepadding); left: var(--spacing-sitepadding-inline);
} }
&:after { &:after {
@ -44,8 +44,8 @@
.swiper-pagination { .swiper-pagination {
display: inline-block; display: inline-block;
width: auto; width: auto;
margin: var(--spacing-sitepadding); margin: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
padding: 0 .5rem; padding: 0 var(--spacing-xs);
border-radius: 2rem; border-radius: 2rem;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
position: absolute; position: absolute;

2
web/src/components/contact/contactInfo.module.scss
View File

@ -1,6 +1,6 @@
.contactInfo { .contactInfo {
margin: 0 calc(var(--spacing-sitepadding)*-1); margin: 0 calc(var(--spacing-sitepadding)*-1);
padding: var(--spacing-sitepadding) var(--spacing-sitepadding) var(--spacing-section-bottom); padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline) var(--spacing-section-bottom);
background: var(--color-background-secondary); background: var(--color-background-secondary);
ul { ul {

8
web/src/components/events/dateList.module.scss
View File

@ -1,9 +1,9 @@
.dateList { .dateList {
list-style: none; list-style: none;
margin: 0 calc(var(--spacing-sitepadding)*-1) calc(var(--spacing-sitepadding)*2); margin: 0 calc(var(--spacing-sitepadding-inline)*-1) calc(var(--spacing-sitepadding-block)*2);
padding: 0 var(--spacing-sitepadding); padding: 0 var(--spacing-sitepadding-inline);
display: flex; display: flex;
gap: 1rem; gap: var(--spacing-s);
} }
.date { .date {
@ -12,7 +12,7 @@
position: relative; position: relative;
line-height: 1.2; line-height: 1.2;
border-right: var(--border); border-right: var(--border);
padding-right: 1rem; padding-right: var(--spacing-s);
&:last-child { &:last-child {
border: none; border: none;

6
web/src/components/events/dateListOld.module.scss
View File

@ -1,8 +1,8 @@
.dateList { .dateList {
list-style: none; list-style: none;
background: var(--color-background-secondary); background: var(--color-background-secondary);
margin: 1rem calc(var(--spacing-sitepadding)*-1); margin: var(--spacing-s) calc(var(--spacing-sitepadding-inline)*-1);
padding: var(--spacing-sitepadding); padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
display: flex; display: flex;
gap: var(--spacing-gap-column); gap: var(--spacing-gap-column);
} }
@ -10,7 +10,7 @@
.date { .date {
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: var(--font-size-lead); font-size: var(--font-size-lead);
margin-bottom: 1rem; margin-bottom: var(--spacing-s);
padding-left: 4rem; padding-left: 4rem;
position: relative; position: relative;
min-height: 3.2rem; min-height: 3.2rem;

23
web/src/components/events/eventContainer.module.scss
View File

@ -1,9 +1,9 @@
.eventWrapper { .eventWrapper {
//margin: calc(var(--spacing-sitepadding)*-1) calc(var(--spacing-sitepadding)*-1); //margin: calc(var(--spacing-sitepadding-block)*-1) calc(var(--spacing-sitepadding-inline)*-1);
} }
.eventList { .eventList {
padding: var(--spacing-sitepadding) 0; padding: var(--spacing-sitepadding-block) 0;
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
column-gap: var(--spacing-gap-column); column-gap: var(--spacing-gap-column);
@ -13,7 +13,7 @@
.displayOptions { .displayOptions {
display: flex; display: flex;
gap: .5rem; gap: var(--spacing-xs);
align-items: center; align-items: center;
position: relative; position: relative;
z-index: 10; z-index: 10;
@ -33,11 +33,10 @@
} }
.calendarYearMonth { .calendarYearMonth {
margin-top: var(--spacing-sitepadding); margin-top: var(--spacing-sitepadding-block);
h2 { h2 {
font-size: var(--font-size-lead); font-size: var(--font-size-lead);
//padding: 1rem var(--spacing-sitepadding);
padding: calc(var(--spacing-gap-column)/2); padding: calc(var(--spacing-gap-column)/2);
background: var(--color-chateauBlue); background: var(--color-chateauBlue);
color: var(--color-betongGray); color: var(--color-betongGray);
@ -73,19 +72,11 @@
background: var(--color-background); background: var(--color-background);
} }
/*&:first-child {
padding-left: var(--spacing-sitepadding);
}
&:last-child {
padding-right: var(--spacing-sitepadding);
}*/
h3 { h3 {
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: var(--font-size-body); font-size: var(--font-size-body);
font-weight: 400; font-weight: 400;
margin-bottom: 1rem; margin-bottom: var(--spacing-s);
&:first-letter { &:first-letter {
@ -106,7 +97,7 @@
.calendarDay { .calendarDay {
min-height: 0; min-height: 0;
padding: calc(var(--spacing-gap-column)/2) var(--spacing-sitepadding); padding: calc(var(--spacing-gap-column)/2) var(--spacing-sitepadding-inline);
&.empty { &.empty {
display: none; display: none;
@ -121,7 +112,7 @@
&:first-child, &:first-child,
&:last-child { &:last-child {
padding: calc(var(--spacing-gap-column)/2) var(--spacing-sitepadding); padding: calc(var(--spacing-gap-column)/2) var(--spacing-sitepadding-inline);
} }
} }
} }

10
web/src/components/events/eventFilter.module.scss
View File

@ -2,11 +2,11 @@
display: grid; display: grid;
grid-template-rows: 0fr; grid-template-rows: 0fr;
transition: grid-template-rows .5s ease; transition: grid-template-rows .5s ease;
margin: var(--spacing-sitepadding) calc(var(--spacing-sitepadding)*-1) 0; margin: var(--spacing-sitepadding-block) calc(var(--spacing-sitepadding-inline)*-1) 0;
.filterContent { .filterContent {
background-color: var(--color-background); background-color: var(--color-background);
padding: 1rem var(--spacing-sitepadding); padding: var(--spacing-s) var(--spacing-sitepadding-inline);
min-height: 0; min-height: 0;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
@ -16,8 +16,8 @@
.filterItem { .filterItem {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: var(--spacing-s);
margin-bottom: 1rem; margin-bottom: var(--spacing-s);
} }
@ -26,7 +26,7 @@
list-style: none; list-style: none;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: .5rem; gap: var(--spacing-xs);
} }
button { button {

10
web/src/components/events/eventHeader.module.scss
View File

@ -4,7 +4,7 @@
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
column-gap: var(--spacing-gap-column); column-gap: var(--spacing-gap-column);
align-items: flex-end; align-items: flex-end;
padding: 0 0 var(--spacing-sitepadding) 0; padding: 0 0 var(--spacing-sitepadding-inline) 0;
} }
.title { .title {
@ -13,7 +13,7 @@
.image { .image {
grid-column: span 2; grid-column: span 2;
margin-top: calc(var(--spacing-sitepadding)*-2); margin-top: calc(var(--spacing-sitepadding-block)*-2);
img { img {
max-width: 100%; max-width: 100%;
@ -24,10 +24,10 @@
.details {} .details {}
.prices { .prices {
margin: 2rem 0 1rem; margin: 2rem 0 var(--spacing-s);
h2 { h2 {
font-size: 1rem; font-size: var(--spacing-s);
font-family: var(--font-main); font-family: var(--font-main);
} }
} }
@ -41,7 +41,7 @@
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: var(--font-size-caption); font-size: var(--font-size-caption);
position: relative; position: relative;
padding: 0 1.5rem 0 1rem; padding: 0 1.5rem 0 var(--spacing-s);
&:after { &:after {
content: "/"; content: "/";

4
web/src/components/events/eventItem.module.scss
View File

@ -6,7 +6,7 @@
.title, .title,
.details { .details {
font-size: 1rem; font-size: var(--font-size-body);
} }
} }
@ -20,7 +20,7 @@
.title, .title,
.details { .details {
font-size: 1rem; font-size: var(--font-size-body);
} }
.image { .image {

12
web/src/components/events/upcomingEvents.module.scss
View File

@ -1,30 +1,30 @@
.upcomingWrapper { .upcomingWrapper {
background: var(--color-deepBrick); background: var(--color-deepBrick);
color: var(--color-goldenBeige); color: var(--color-goldenBeige);
margin: 0 calc(var(--spacing-sitepadding)*-1); margin: 0 calc(var(--spacing-sitepadding-inline)*-1);
padding: 1rem var(--spacing-sitepadding); padding: var(--spacing-s) var(--spacing-sitepadding-inline);
position: relative; position: relative;
overflow-x: hidden; overflow-x: hidden;
h2 { h2 {
margin-bottom: .5rem; margin-bottom: var(--spacing-xs);
} }
} }
.eventList { .eventList {
--size-item-width: 20rem; --size-item-width: 20rem;
padding: 1rem 0; padding: var(--spacing-s) 0;
list-style: none; list-style: none;
display: flex; display: flex;
width: calc(var(--size-item-width) * 10); width: calc(var(--size-item-width) * 10);
li { li {
padding-right: 1rem; padding-right: var(--spacing-s);
} }
} }
.calendarLink { .calendarLink {
padding: 1rem var(--spacing-sitepadding); padding: var(--spacing-s) var(--spacing-sitepadding-inline);
text-align: right; text-align: right;
font-family: var(--font-serif); font-family: var(--font-serif);
font-style: italic; font-style: italic;

2
web/src/components/general/logo.module.scss
View File

@ -12,7 +12,7 @@
} }
&.main { &.main {
margin: calc(var(--spacing-sitepadding)*-.6) 0 0 calc(var(--spacing-sitepadding)*-.6); margin: calc(var(--spacing-sitepadding-block)*-.6) 0 0 calc(var(--spacing-sitepadding-inline)*-.6);
} }
} }

4
web/src/components/general/pageHeader.module.scss
View File

@ -1,9 +1,9 @@
.pageHeader { .pageHeader {
position: relative; position: relative;
padding: var(--spacing-l) 0 var(--spacing-sitepadding); padding: var(--spacing-l) 0 var(--spacing-sitepadding-block);
} }
.title { .title {
font-size: var(--font-size-h1); font-size: var(--font-size-h1);
margin-bottom: 1rem; margin-bottom: var(--spacing-s);
} }

10
web/src/components/layout/footer.module.scss
View File

@ -1,5 +1,5 @@
.footer { .footer {
padding: var(--spacing-sitepadding); padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
background: var(--color-chateauBlue); background: var(--color-chateauBlue);
color: var(--color-betongGray); color: var(--color-betongGray);
position: relative; position: relative;
@ -53,7 +53,7 @@
} }
h2 { h2 {
margin-bottom: 1rem; margin-bottom: var(--spacing-s);
grid-column: span 3; grid-column: span 3;
} }
} }
@ -62,7 +62,7 @@
ul { ul {
display: flex; display: flex;
grid-column: span 9; grid-column: span 9;
gap: 1rem; gap: var(--spacing-s);
} }
} }
@ -99,6 +99,6 @@
.toTop { .toTop {
position: absolute; position: absolute;
right: var(--spacing-sitepadding); right: var(--spacing-sitepadding-inline);
bottom: var(--spacing-sitepadding); bottom: var(--spacing-sitepadding-block);
} }

12
web/src/components/layout/header.module.scss
View File

@ -2,7 +2,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
padding: var(--spacing-sitepadding); padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
ul { ul {
list-style: none; list-style: none;
@ -21,7 +21,7 @@
.siteMenu { .siteMenu {
display: flex; display: flex;
gap: var(--spacing-sitepadding); gap: var(--spacing-gap-column);
align-items: center; align-items: center;
height: 3rem; height: 3rem;
@ -33,7 +33,7 @@
.mainMenu { .mainMenu {
list-style: none; list-style: none;
display: flex; display: flex;
gap: var(--spacing-sitepadding); gap: var(--spacing-gap-column);
animation: slideInFromRight .3s ease-out forwards; animation: slideInFromRight .3s ease-out forwards;
a { a {
@ -76,7 +76,7 @@
background: var(--color-menu-background); background: var(--color-menu-background);
color: var(--color-menu-text); color: var(--color-menu-text);
padding: var(--spacing-sitepadding); padding: var(--spacing-sitepadding-block);
transition: all var(--transition-easing); transition: all var(--transition-easing);
@ -85,7 +85,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
font-size: 1.4rem; font-size: 1.4rem;
padding: var(--spacing-sitepadding) 0; padding: var(--spacing-sitepadding-block) 0;
} }
} }
@ -113,7 +113,7 @@
.toggleMenu { .toggleMenu {
position: fixed; position: fixed;
right: var(--spacing-sitepadding); right: var(--spacing-sitepadding-inline);
} }
.menuIcon { .menuIcon {

6
web/src/components/news/newsList.module.scss
View File

@ -1,9 +1,9 @@
.newsWrapper { .newsWrapper {
margin: 0 calc(var(--spacing-sitepadding)*-1); margin: 0 calc(var(--spacing-sitepadding-inline)*-1);
padding: var(--spacing-sitepadding); padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
h2 { h2 {
margin-bottom: 1rem; margin-bottom: var(--spacing-s);
} }
} }

6
web/src/components/people/personItem.module.scss
View File

@ -3,7 +3,7 @@
list-style: none; list-style: none;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: var(--spacing-s);
} }
.image { .image {
@ -20,7 +20,7 @@
.name, .name,
.role { .role {
font-size: 1rem; font-size: var(--spacing-s);
} }
.role { .role {
@ -37,7 +37,7 @@
.icon { .icon {
display: inline-block; display: inline-block;
width: 1rem; width: var(--size-icon);
text-align: center; text-align: center;
margin-right: .4rem; margin-right: .4rem;
} }

6
web/src/components/people/personSection.module.scss
View File

@ -1,10 +1,10 @@
.personSection { .personSection {
background: var(--color-background-secondary); background: var(--color-background-secondary);
margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1); margin: calc(var(--spacing-sitepadding-block)*2) calc(var(--spacing-sitepadding-inline)*-1);
padding: var(--spacing-sitepadding); padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
+.personSection { +.personSection {
margin-top: calc(var(--spacing-sitepadding)*-2); margin-top: calc(var(--spacing-sitepadding-block)*-2);
} }
&:nth-of-type(even) { &:nth-of-type(even) {

2
web/src/components/venues/neufMap.module.scss
View File

@ -1,7 +1,7 @@
.neufMap { .neufMap {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: var(--spacing-sitepadding); gap: var(--spacing-gap-column);
width: 100%; width: 100%;
max-width: 1200px; max-width: 1200px;
margin: var(--spacing-xl) auto; margin: var(--spacing-xl) auto;

6
web/src/components/venues/venueInfo.module.scss
View File

@ -1,11 +1,11 @@
.venueInfo { .venueInfo {
max-width: var(--size-width-p); max-width: var(--size-width-p);
margin: 1rem auto 2rem; margin: var(--spacing-s) auto var(--spacing-m);
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin-bottom: 1rem; margin-bottom: var(--spacing-s);
} }
tr { tr {
@ -20,7 +20,7 @@
th, th,
td { td {
padding: .5rem 0; padding: var(--spacing-xs) 0;
} }
td { td {

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

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

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

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

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

@ -44,9 +44,13 @@
--color-menu-background: var(--color-goldenBeige); --color-menu-background: var(--color-goldenBeige);
// spacing // spacing
--spacing-sitepadding: 2rem; --spacing-sitepadding-block: 2rem;
--spacing-gap-column: 2rem; --spacing-sitepadding-inline: 2rem;
--spacing-gap-row: 1.5rem; --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-l: 3rem;
--spacing-xl: 6rem; --spacing-xl: 6rem;
--spacing-section-bottom: var(--spacing-l); --spacing-section-bottom: var(--spacing-l);
@ -54,6 +58,8 @@
// sizes // sizes
--size-width-p: 36rem; --size-width-p: 36rem;
--size-icon: 1em; --size-icon: 1em;
--size-icon-circle: 3rem;
--size-icon-large: 3.4rem;
// animations // animations
--transition-easing: .3s ease; --transition-easing: .3s ease;
@ -61,3 +67,17 @@
--border: 1px solid var(--color-neufPink); --border: 1px solid var(--color-neufPink);
--border-s: 1px solid var(--color-chateauBlue-05); --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;
}
}