MaticIvesic
/
intelidomWebsite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Home: uppercase section titles, center contact (email/tel over map) 

- Uppercase the section titles (Galerija/Novice/Kontakt)
- Restructure the contact card into a centered column: email + phone side by
  side on top, map below, address under the map

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Matic Ivešić 2026-08-04 17:45:12 +02:00
parent 8a8f19133f
commit ae17112fc7
3 changed files with 35 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/lib/assets/gallery_icon.afdesign Normal file
View File

Binary file not shown.

BIN
src/lib/assets/intelidom_admin_banner.afdesign
View File

Binary file not shown.

84
src/routes/+page.svelte
View File

@ -79,32 +79,28 @@
<section class="contact" id="kontakt">
<h2 class="section-title">Kontakt</h2>
<div class="contact-card">
<div class="contact-grid">
<div class="contact-info">
{#if data.contact.address}
<p class="address">{data.contact.address}</p>
{/if}
<div class="contact-methods">
{#if data.contact.email}
<div class="contact-line">
<SvgImage image_src="/mail.svg" icon_color="#42af38" width="1.4em" height="1.4em" />
<a href="mailto:{data.contact.email}">{data.contact.email}</a>
</div>
{/if}
{#if data.contact.phone}
<div class="contact-line">
<SvgImage image_src="/phone.svg" icon_color="#42af38" width="1.4em" height="1.4em" />
<a href="tel:{data.contact.phone.replace(/\s+/g, '')}">{data.contact.phone}</a>
</div>
{/if}
<div class="contact-methods">
{#if data.contact.email}
<div class="contact-line">
<SvgImage image_src="/mail.svg" icon_color="#42af38" width="1.4em" height="1.4em" />
<a href="mailto:{data.contact.email}">{data.contact.email}</a>
</div>
</div>
{#if data.contact.showMap && data.contact.address}
<div class="map">
<iframe title="Zemljevid" src={mapSrc(data.contact.address)} loading="lazy"></iframe>
{/if}
{#if data.contact.phone}
<div class="contact-line">
<SvgImage image_src="/phone.svg" icon_color="#42af38" width="1.4em" height="1.4em" />
<a href="tel:{data.contact.phone.replace(/\s+/g, '')}">{data.contact.phone}</a>
</div>
{/if}
</div>
{#if data.contact.showMap && data.contact.address}
<div class="map">
<iframe title="Zemljevid" src={mapSrc(data.contact.address)} loading="lazy"></iframe>
</div>
{/if}
{#if data.contact.address}
<p class="address">{data.contact.address}</p>
{/if}
</div>
</section>
</div>
@ -186,6 +182,7 @@
text-align: center;
margin: 0 0 1em;
font-size: clamp(2em, 5vw, 2.8em);
text-transform: uppercase;
}
.gallery-link {
@ -286,33 +283,19 @@
background: #11161a;
border-radius: 1.5em;
padding: clamp(1.5em, 4vw, 2.5em);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5em;
}
.contact-info {
font-size: 1.1em;
line-height: 1.6;
display: flex;
flex-direction: column;
gap: 0.8em;
justify-content: center;
}
.address {
white-space: pre-line;
color: #c7c9cf;
margin: 0;
align-items: center;
gap: 1.5em;
text-align: center;
font-size: 1.1em;
}
.contact-methods {
display: flex;
flex-wrap: wrap;
gap: 1.5em;
gap: 2em;
justify-content: center;
}
.contact-line {
@ -321,17 +304,25 @@
gap: 0.7em;
}
.contact-info a {
.contact-card a {
color: #e5e4ea;
text-decoration: none;
}
.contact-info a:hover {
.contact-card a:hover {
color: #42af38;
}
.address {
white-space: pre-line;
color: #9aa0a6;
margin: 0;
font-size: 0.95em;
}
.map {
width: 100%;
max-width: 640px;
aspect-ratio: 16 / 9;
border-radius: 12px;
overflow: hidden;
@ -357,10 +348,5 @@
width: 50%;
flex-shrink: 0;
}
.contact-grid {
grid-template-columns: 1fr 1fr;
align-items: start;
}
}
</style>