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/events/dateList.module.scss
View File

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

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

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

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

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

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

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

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

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

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

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