bisco/azionelab
1
0
Fork 0
generated from bisco/codex-bootstrap
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refine frontend typography and branding

Browse Source
This commit is contained in:
bisco
2026-05-05 12:28:19 +02:00
parent d55d2b14ba
commit 00d09ceb8b
4 changed files with 44 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/src/app/app.component.ts
View File

@@ -22,12 +22,8 @@ import { MatButtonModule } from '@angular/material/button';
<header class="site-header"> <header class="site-header">
<div class="header-inner"> <div class="header-inner">
<a class="brand" routerLink="/"> <a class="brand" routerLink="/" aria-label="AzioneLab">
<img class="brand-logo" src="assets/azionelab-logo.png" alt="AzioneLab" /> <img class="brand-logo" src="assets/azione-lab.jpg" alt="AzioneLab" />
<span class="brand-text">
<strong>AzioneLab</strong>
<small>Laboratori teatrali & produzioni audio/visive</small>
</span>
</a> </a>
<nav class="main-nav" aria-label="Primary navigation"> <nav class="main-nav" aria-label="Primary navigation">
@@ -102,42 +98,27 @@ import { MatButtonModule } from '@angular/material/button';
display: grid; display: grid;
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
align-items: center; align-items: center;
gap: 18px; gap: 24px;
min-height: 82px; min-height: 92px;
padding: 0 20px; padding: 0 20px;
} }
.brand { .brand {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 14px; justify-content: flex-start;
flex: 0 0 auto;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
.brand-logo { .brand-logo {
width: 58px; width: 88px;
height: 58px; height: 88px;
display: block; display: block;
object-fit: contain; object-fit: cover;
filter: drop-shadow(0 14px 30px rgba(111, 40, 33, 0.16)); border-radius: 14px;
} box-shadow: 0 16px 32px rgba(111, 40, 33, 0.12);
.brand-text {
display: flex;
flex-direction: column;
line-height: 1.05;
}
.brand-text strong {
font-family: var(--azionelab-serif);
font-size: 1.4rem;
font-weight: 700;
}
.brand-text small {
color: var(--azionelab-muted);
font-size: 0.78rem;
} }
.main-nav { .main-nav {
@@ -205,17 +186,29 @@ import { MatButtonModule } from '@angular/material/button';
@media (max-width: 800px) { @media (max-width: 800px) {
.header-inner { .header-inner {
grid-template-columns: 1fr; grid-template-columns: 1fr;
align-items: flex-start; align-items: center;
padding: 16px; padding: 16px;
gap: 14px;
} }
.main-nav { .main-nav {
width: 100%; width: 100%;
justify-content: flex-start; justify-content: center;
} }
.header-actions { .header-actions {
width: 100%; width: 100%;
justify-content: center;
}
.brand {
width: 100%;
justify-content: center;
}
.brand-logo {
width: 76px;
height: 76px;
} }
.footer-inner { .footer-inner {

16
frontend/src/app/pages/home-page.component.ts
View File

@@ -11,7 +11,6 @@ import { API_BASE_URL } from '../services/api-config.token';
template: ` template: `
<section class="hero page"> <section class="hero page">
<div class="hero-copy"> <div class="hero-copy">
<img class="hero-logo" src="assets/azionelab-logo.png" alt="AzioneLab" />
<p class="eyebrow">AzioneLab</p> <p class="eyebrow">AzioneLab</p>
<h1>Un luogo dove il teatro prende forma, voce e relazione.</h1> <h1>Un luogo dove il teatro prende forma, voce e relazione.</h1>
<p class="supporting"> <p class="supporting">
@@ -98,17 +97,10 @@ import { API_BASE_URL } from '../services/api-config.token';
padding: 34px 0 20px; padding: 34px 0 20px;
} }
.hero-logo {
width: min(220px, 52vw);
height: auto;
display: block;
margin-bottom: 18px;
}
h1 { h1 {
margin: 0; margin: 0;
max-width: 11ch; max-width: 10.5ch;
font-size: 3.85rem; font-size: 3.6rem;
} }
.supporting { .supporting {
@@ -287,13 +279,13 @@ import { API_BASE_URL } from '../services/api-config.token';
} }
h1 { h1 {
font-size: 2.9rem; font-size: 2.8rem;
} }
} }
@media (max-width: 640px) { @media (max-width: 640px) {
h1 { h1 {
font-size: 2.25rem; font-size: 2.2rem;
} }
.hero-stage { .hero-stage {

2
frontend/src/index.html
View File

@@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="it">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>AzioneLab</title> <title>AzioneLab</title>

26
frontend/src/styles.css
View File

@@ -21,8 +21,8 @@
--azionelab-shell-width: 1180px; --azionelab-shell-width: 1180px;
--azionelab-copy-width: 64ch; --azionelab-copy-width: 64ch;
--azionelab-section-gap: 28px; --azionelab-section-gap: 28px;
--azionelab-sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif; --azionelab-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
--azionelab-serif: Georgia, "Times New Roman", serif; --azionelab-serif: "Fraunces", Georgia, "Times New Roman", serif;
--azionelab-success-bg: #edf7ef; --azionelab-success-bg: #edf7ef;
--azionelab-success-ink: #1f5f2b; --azionelab-success-ink: #1f5f2b;
--azionelab-success-border: rgba(46, 125, 50, 0.18); --azionelab-success-border: rgba(46, 125, 50, 0.18);
@@ -39,6 +39,7 @@ html, body {
margin: 0; margin: 0;
min-height: 100%; min-height: 100%;
font-family: var(--azionelab-sans); font-family: var(--azionelab-sans);
font-weight: 500;
color: var(--azionelab-ink); color: var(--azionelab-ink);
background: background:
linear-gradient(180deg, rgba(143, 51, 45, 0.06), transparent 140px), linear-gradient(180deg, rgba(143, 51, 45, 0.06), transparent 140px),
@@ -51,24 +52,24 @@ body {
h1, h2, h3 { h1, h2, h3 {
font-family: var(--azionelab-serif); font-family: var(--azionelab-serif);
font-weight: 700; font-weight: 600;
letter-spacing: 0; letter-spacing: 0;
color: var(--azionelab-ink); color: var(--azionelab-ink);
} }
h1 { h1 {
font-size: 2.5rem; font-size: 2.65rem;
line-height: 1.02; line-height: 1.04;
} }
h2 { h2 {
font-size: 1.65rem; font-size: 1.7rem;
line-height: 1.12; line-height: 1.16;
} }
h3 { h3 {
font-size: 1.15rem; font-size: 1.2rem;
line-height: 1.2; line-height: 1.24;
} }
button, input, textarea { button, input, textarea {
@@ -96,14 +97,15 @@ code {
margin: 0 0 12px; margin: 0 0 12px;
color: var(--azionelab-accent); color: var(--azionelab-accent);
text-transform: uppercase; text-transform: uppercase;
font-size: 0.78rem; font-size: 0.76rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.08em; letter-spacing: 0.12em;
} }
.supporting { .supporting {
color: var(--azionelab-muted); color: var(--azionelab-muted);
line-height: 1.65; font-size: 1.02rem;
line-height: 1.72;
max-width: var(--azionelab-copy-width); max-width: var(--azionelab-copy-width);
} }