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

improve date list style

Browse Source
This commit is contained in:
elisejakob
2024-05-13 01:31:58 +02:00
parent 87e897147d
commit c040e30add
4 changed files with 52 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -67,7 +67,7 @@
font-weight: 500; font-weight: 500;
color: var(--color-chateauBlue); color: var(--color-chateauBlue);
border-radius: 1em; border-radius: 1em;
background: var(--color-placeholder); background: var(--color-neufPink);
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
text-align: center; text-align: center;

29
web/src/components/events/DateList.tsx
View File

@ -3,33 +3,42 @@ import styles from "./dateList.module.scss";
export const DateList = () => { export const DateList = () => {
return ( return (
<div className={styles.dateWrapper}> <div className={styles.dateWrapper}>
<h2>Kommende datoer</h2> <h2 className="suphead">Kommende datoer</h2>
<ul className={styles.dateList}> <ul className={styles.dateList}>
<li className={styles.date}> <li className={styles.date}>
<div className={styles.time}> <div className={styles.time}>
<span>27. mai 2024</span> <span>27/05/2024</span>&nbsp;
<span>18.00</span> <span>18.00</span>
</div> </div>
<div className={styles.venue}> <div className={styles.venue}>
<span>Lokale</span> <span>Storsalen</span>
</div> </div>
</li> </li>
<li className={styles.date}> <li className={styles.date}>
<div className={styles.time}> <div className={styles.time}>
<span>27. mai 2024</span> <span>Mandag 27. mai 2024</span>&nbsp;
<span>18.00</span> <span>kl. 18.00</span>
</div>
<div className={styles.venue}> <div className={styles.venue}>
<span>Lokale</span> <span>i Storsalen</span>
</div>
</div> </div>
</li> </li>
<li className={styles.date}> <li className={styles.date}>
<div className={styles.time}> <div className={styles.time}>
<span>27. mai 2024</span> <span>27. mai 2024</span>&nbsp;
<span>18.00</span> <span>kl. 18.00</span>
</div> </div>
<div className={styles.venue}> <div className={styles.venue}>
<span>Lokale</span> <span>Storsalen</span>
</div>
</li>
<li className={styles.date}>
<div className={styles.venue}>
<span>Storsalen</span>
</div>
<div className={styles.time}>
<span>27.05.2024</span>&nbsp;
<span>18.00</span>
</div> </div>
</li> </li>
</ul> </ul>

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

@ -1,8 +1,36 @@
.dateList { .dateList {
list-style: none; list-style: none;
margin-bottom: var(--spacing-sitepadding); margin: 1rem 0 var(--spacing-sitepadding);
display: flex;
gap: var(--spacing-gap-column);
} }
.date { .date {
font-family: var(--font-serif);
font-size: var(--font-size-lead);
margin-bottom: 1rem;
padding-left: 4rem;
position: relative;
min-height: 3.2rem;
line-height: 1.2;
&:before {
content: "";
display: block;
width: 3.2rem;
height: 3.2rem;
border-radius: 100%;
background: var(--color-goldenBeige); background: var(--color-goldenBeige);
position: absolute;
left: 0;
top: 0;
}
}
.time {
width: 100%;
}
.venue {
font-style: italic;
} }

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

@ -23,6 +23,7 @@
.details { .details {
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: var(--font-size-lead);
} }
.pig { .pig {