Enhanced UI
This commit is contained in:
parent
8a15410985
commit
09a69fb9d7
5
.gitignore
vendored
5
.gitignore
vendored
@ -8,3 +8,8 @@ wheels/
|
|||||||
|
|
||||||
# Virtual environments
|
# Virtual environments
|
||||||
.venv
|
.venv
|
||||||
|
|
||||||
|
# Tools
|
||||||
|
.agents/
|
||||||
|
.claude/
|
||||||
|
skills-lock.json
|
||||||
@ -70,13 +70,21 @@ body {
|
|||||||
background: url('/resources/main.jpg') center center / cover no-repeat fixed;
|
background: url('/resources/main.jpg') center center / cover no-repeat fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(40, 28, 8, 0.65);
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
padding: 1.5rem 2rem 1.25rem;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0.5rem 1rem 2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 3.5rem;
|
font-size: clamp(3rem, 5.5vw, 6rem);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #fdf5e0;
|
color: #fdf5e0;
|
||||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
|
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
|
||||||
@ -84,7 +92,7 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 1.5rem;
|
font-size: clamp(1.2rem, 2.2vw, 2.4rem);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #fdf5e0;
|
color: #fdf5e0;
|
||||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
|
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
|
||||||
@ -93,10 +101,10 @@ h2 {
|
|||||||
|
|
||||||
.cards-row {
|
.cards-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8vw;
|
gap: clamp(1.5rem, 5vw, 6rem);
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: stretch;
|
||||||
padding: 0 2rem 3rem;
|
padding: 3rem 2rem 3rem;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -104,9 +112,10 @@ h2 {
|
|||||||
background: rgba(255, 248, 220, 0.92);
|
background: rgba(255, 248, 220, 0.92);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
width: 250px;
|
width: clamp(260px, 22vw, 380px);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -120,20 +129,20 @@ h2 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card-icon {
|
.card-icon {
|
||||||
height: 150px;
|
height: clamp(140px, 14vw, 220px);
|
||||||
/*background: rgba(107, 90, 42, 0.15);*/
|
/*background: rgba(107, 90, 42, 0.15);*/
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 2px rgba(107, 90, 42, 0.3);
|
border: 2px rgba(107, 90, 42, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
font-size: 1rem;
|
font-size: clamp(1rem, 1.4vw, 1.35rem);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #3b2a0e;
|
color: #3b2a0e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-text {
|
.card-text {
|
||||||
font-size: 0.875rem;
|
font-size: clamp(0.875rem, 1.1vw, 1.1rem);
|
||||||
color: #5c4a2a;
|
color: #5c4a2a;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -23,10 +23,12 @@
|
|||||||
<a class="link-btn" href="https://www.green-planet.it/" target="_blank" rel="noopener">Green planet</a>
|
<a class="link-btn" href="https://www.green-planet.it/" target="_blank" rel="noopener">Green planet</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<header>
|
<div class="banner">
|
||||||
<h1>3a</h1>
|
<header>
|
||||||
<h2>{{ t.subtitle }}</h2>
|
<h1>3a</h1>
|
||||||
</header>
|
<h2>{{ t.subtitle }}</h2>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="cards-row">
|
<div class="cards-row">
|
||||||
<div class="action-card" data-action="iframe" data-src="{{ t.card3_src }}">
|
<div class="action-card" data-action="iframe" data-src="{{ t.card3_src }}">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user