make address section a nice box, improve rich text link hover

This commit is contained in:
elise
2024-08-06 14:16:48 +02:00
parent a1a2050f27
commit b1d767ae17
4 changed files with 17 additions and 7 deletions

View File

@ -1,3 +1,4 @@
import Icon from "../general/Icon";
import styles from "./neufAddressSectionBlock.module.scss";
export const NeufAddressSectionBlock = () => {
@ -14,7 +15,8 @@ export const NeufAddressSectionBlock = () => {
<br />
<br />
<a href="https://maps.app.goo.gl/QFw4Cu7eVsnZ42or7" target="_blank">
Vis i Google Maps
Vis i Google Maps&nbsp;
<Icon type="externalLink" />
</a>
</div>
</div>

View File

@ -2,14 +2,18 @@
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: var(--spacing-gap-column);
row-gap: var(--spacing-gap-row);
align-items: flex-start;
container-type: inline-size;
margin-bottom: var(--spacing-gap-row);
margin-bottom: var(--spacing-section-bottom);
}
.text {
grid-column: 2 / span 4;
grid-column: 1 / span 5;
background: var(--color-background-secondary);
margin-right: calc(var(--spacing-gap-column)*-1);
padding: var(--spacing-gap-column);
display: flex;
flex-direction: column;
justify-content: center;
h2 {
margin: 0 0 var(--spacing-s);
@ -23,18 +27,19 @@
transition: text-decoration-color var(--transition-easing);
&:hover {
opacity: 1;
text-decoration-color: currentColor;
}
}
}
.map {
grid-column: 6 / span 6;
grid-column: 6 / span 7;
iframe {
border: none;
width: 100%;
height: auto;
height: 100%;
min-height: 16rem;
}
}
@ -55,5 +60,6 @@
.text,
.map {
grid-column: 1 / -1;
margin-right: 0;
}
}

View File

@ -99,6 +99,7 @@
transition: text-decoration-color var(--transition-easing);
&:hover {
opacity: 1;
text-decoration-color: currentColor;
}
}

View File

@ -2,6 +2,7 @@
box-sizing: border-box;
padding: 0;
margin: 0;
scroll-behavior: smooth;
}
html {