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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/blocks/NeufAddressSectionBlock.tsx
View File

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

18
web/src/components/blocks/neufAddressSectionBlock.module.scss
View File

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

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

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

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

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