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.

54
src/routes/+page.svelte
View File

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