cima-squad/cima-progetti
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor[ frontend / components ]: aggiornamento UI globale, ottimizzazione header e gestione errori

Browse Source 
Header: Rifatto il componente con menu mobile ed effetti di background.

Cleanup: Rimossi i componenti Hero e Services non più necessari.

Layout: Migliorata la struttura e lo stile della pagina Contacts.

Core: Implementata la gestione globale degli errori in main.js.

Styles: Aggiornati gli stili globali e le media queries per una migliore responsività.
This commit is contained in:
Stefano Manca
2026-05-06 23:05:17 +02:00
parent 575e2b4779
commit e3098d3004
25 changed files with 1426 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+64 -15
View File
@@ -5,7 +5,14 @@
--muted-color: #6b7280;
--surface: #ffffff;
--background: rgba(246, 249, 255, 0.5);
--background-opaque: rgba(0, 0, 0, 0.2);
--background-opaque: #00000033;
--background-header: rgba(249, 249, 249, 0.5);
--lateral-margin: 12rem;
}
/* Fix mobile overscroll area color (rubber-band / bounce effect) */
html {
background-color: #f6f9ff;
}
/* Dark theme overrides (toggle by setting attribute on <html>) */
@@ -16,6 +23,15 @@
--surface: #000;
--background: rgba(0, 0, 0, 0.8);
--background-opaque: rgba(255, 255, 255, 0.2);
--background-header: rgba(51, 51, 51, 0.5);
background-color: #000;
}
@media (max-width: 900px) {
:root {
--navbar-height: 110px;
--lateral-margin: 1.5rem;
}
}
* {
@@ -29,7 +45,7 @@ body {
font-family: Helvetica, 'Segoe UI';
color: var(--text-color);
background-color: var(--surface);
background-image: url('/images/background/paper.png');
background-image: linear-gradient(var(--background), var(--background)), url('/images/background/paper.png');
background-repeat: repeat;
position: relative;
}
@@ -37,19 +53,15 @@ body {
html,
body,
#app {
height: 100%;
position: relative;
z-index: 1;
}
/* Background overlay layer that follows theme color */
body::before {
content: "";
position: fixed;
inset: 0;
background-color: var(--background);
pointer-events: none;
z-index: 0;
main {
min-height: 100vh;
min-height: 100dvh;
display: flow-root;
}
/* Reusable theme asset helpers:
@@ -84,6 +96,8 @@ html[data-theme='dark'] {
}
h1 {
margin: 0;
font-size: 3rem;
font-family: 'IBM Plex Mono', monospace;
}
@@ -107,7 +121,42 @@ p, a {
transition: background-color 0.2s ease;
}
/* Usage: add data attribute with SVG path
Example: <div class="svg-mask" style="--mask-url: url('/path/to/icon.svg'); width: 40px; height: 40px;"></div>
Then use inline style: -webkit-mask-image: var(--mask-url); mask-image: var(--mask-url);
OR use a specific class that sets the mask-image */
.divider {
display: block;
position: relative;
width: 50%;
height: 5px;
background-color: var(--primary-color);
margin-top: 8px;
}
/* ============================================================
MEDIA QUERIES
============================================================ */
@media (max-width: 1280px) {
:root {
--lateral-margin: 8rem;
}
}
@media (max-width: 1024px) {
:root {
--lateral-margin: 5rem;
}
}
@media (max-width: 900px) {
:root {
--lateral-margin: 1.5rem;
}
}
@media (max-width: 480px) {
}
@media (max-width: 360px) {
}