style changes
This commit is contained in:
+185
-195
@@ -186,7 +186,7 @@ const CORSI_DISPONIBILI: Corso[] = [
|
||||
{ nome: 'Ultrafiltri e metodi non-standard', anno: 'M', cfu: 6 },
|
||||
]
|
||||
|
||||
function MediaPesataApp() {
|
||||
export function MediaPesataApp() {
|
||||
// Funzioni per localStorage
|
||||
const loadFromStorage = () => {
|
||||
try {
|
||||
@@ -220,13 +220,22 @@ function MediaPesataApp() {
|
||||
}
|
||||
|
||||
// Inizializzazione con dati salvati
|
||||
const initialData = loadFromStorage()
|
||||
const [tipoStudente, setTipoStudente] = useState<TipoStudente>(initialData.tipoStudente)
|
||||
const [corsiSelezionati, setCorsiSelezionati] = useState<CorsoSelezionato[]>(initialData.corsiSelezionati)
|
||||
// const initialData = loadFromStorage()
|
||||
const [tipoStudente, setTipoStudente] = useState<TipoStudente>('triennale')
|
||||
const [corsiSelezionati, setCorsiSelezionati] = useState<CorsoSelezionato[]>([])
|
||||
const [showCustomForm, setShowCustomForm] = useState(false)
|
||||
const [customCorso, setCustomCorso] = useState<CorsoCustom>({ nome: '', cfu: 0 })
|
||||
const [sezioniAperte, setSezioniAperte] = useState<Record<string, boolean>>(initialData.sezioniAperte)
|
||||
const [mostraRisultati, setMostraRisultati] = useState(initialData.mostraRisultati)
|
||||
const [sezioniAperte, setSezioniAperte] = useState<Record<string, boolean>>({})
|
||||
const [mostraRisultati, setMostraRisultati] = useState(false)
|
||||
|
||||
// Load data from localStorage on mount
|
||||
useEffect(() => {
|
||||
const initialData = loadFromStorage()
|
||||
setTipoStudente(initialData.tipoStudente)
|
||||
setCorsiSelezionati(initialData.corsiSelezionati)
|
||||
setSezioniAperte(initialData.sezioniAperte)
|
||||
setMostraRisultati(initialData.mostraRisultati)
|
||||
}, [])
|
||||
|
||||
// Salva automaticamente quando cambiano i dati importanti
|
||||
useEffect(() => {
|
||||
@@ -482,15 +491,6 @@ function MediaPesataApp() {
|
||||
}
|
||||
|
||||
const cambiaTipoStudente = (nuovoTipo: TipoStudente) => {
|
||||
if (corsiSelezionati.length > 0 && nuovoTipo !== tipoStudente) {
|
||||
if (
|
||||
!confirm(
|
||||
'Cambiando il tipo di studente, alcune materie potrebbero non essere più disponibili. Continuare?',
|
||||
)
|
||||
) {
|
||||
return
|
||||
}
|
||||
}
|
||||
setTipoStudente(nuovoTipo)
|
||||
}
|
||||
|
||||
@@ -501,217 +501,207 @@ function MediaPesataApp() {
|
||||
const cfuError = totaleCfu > maxCfu
|
||||
|
||||
return (
|
||||
<div className="media-pesata-app">
|
||||
<div class="media-pesata-app">
|
||||
{/* Selezione tipo studente */}
|
||||
<div className="student-type-selector">
|
||||
<h2>Corso di Laurea</h2>
|
||||
<div className="radio-group">
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
value="triennale"
|
||||
checked={tipoStudente === 'triennale'}
|
||||
onChange={e => cambiaTipoStudente((e.target as HTMLInputElement).value as TipoStudente)}
|
||||
/>
|
||||
Triennale
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
value="magistrale"
|
||||
checked={tipoStudente === 'magistrale'}
|
||||
onChange={e => cambiaTipoStudente((e.target as HTMLInputElement).value as TipoStudente)}
|
||||
/>
|
||||
Magistrale
|
||||
</label>
|
||||
<div class="card student-type-switcher wide">
|
||||
<div class="grid-center">
|
||||
<h2>Corso di Laurea</h2>
|
||||
<div class="compound-button">
|
||||
<button
|
||||
class={tipoStudente === 'triennale' ? 'active' : ''}
|
||||
onClick={() => cambiaTipoStudente('triennale')}
|
||||
>
|
||||
Triennale
|
||||
</button>
|
||||
<button
|
||||
class={tipoStudente === 'magistrale' ? 'active' : ''}
|
||||
onClick={() => cambiaTipoStudente('magistrale')}
|
||||
>
|
||||
Magistrale
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Counter CFU */}
|
||||
<div className={`cfu-counter ${cfuError ? 'error' : ''}`}>
|
||||
<div class={`cfu-counter wide ${cfuError ? 'error' : ''}`}>
|
||||
<h3>
|
||||
CFU Totali: {totaleCfu}/{maxCfu}
|
||||
{tipoStudente === 'triennale' ? ' (+9 tesi)' : ' (+27 tesi)'}
|
||||
</h3>
|
||||
{cfuError && <p className="error-text">⚠️ Hai superato il limite di CFU consentiti!</p>}
|
||||
{cfuError && <p class="error-text">⚠️ Hai superato il limite di CFU consentiti!</p>}
|
||||
</div>
|
||||
|
||||
<div className="main-content">
|
||||
{/* Sezione selezione corsi */}
|
||||
<div className="course-selection">
|
||||
{/* Sezione selezione corsi */}
|
||||
<div class="card">
|
||||
<div class="title">
|
||||
<h2>Seleziona Materie</h2>
|
||||
</div>
|
||||
|
||||
{Object.entries(gruppiCorsi).map(([categoria, corsi]) => (
|
||||
<div key={categoria} className="course-category">
|
||||
<button className="category-header" onClick={() => toggleSezione(categoria)}>
|
||||
<h3>{categoria}</h3>
|
||||
<span className={`toggle-icon ${sezioniAperte[categoria] ? 'expanded' : ''}`}>▶</span>
|
||||
</button>
|
||||
{Object.entries(gruppiCorsi).map(([categoria, corsi]) => (
|
||||
<div key={categoria} class="course-category">
|
||||
<button onClick={() => toggleSezione(categoria)}>
|
||||
<div class="h-flex">
|
||||
{categoria}
|
||||
<div class="spacer"></div>
|
||||
<span class={`toggle-icon ${sezioniAperte[categoria] ? 'expanded' : ''}`}>▶</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{sezioniAperte[categoria] && (
|
||||
<div className="course-grid">
|
||||
{corsi.map((corso, index) => (
|
||||
<button
|
||||
key={index}
|
||||
className="course-button"
|
||||
onClick={() => aggiungiCorso(corso)}
|
||||
disabled={corsiSelezionati.some(c => c.nome === corso.nome)}
|
||||
>
|
||||
<span className="course-name">{corso.nome}</span>
|
||||
<span className="course-cfu">{corso.cfu} CFU</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Form per materia custom */}
|
||||
<div className="custom-course">
|
||||
<h3>Materia Personalizzata</h3>
|
||||
{!showCustomForm ? (
|
||||
<button onClick={() => setShowCustomForm(true)} className="add-custom-btn">
|
||||
+ Aggiungi Materia Personalizzata
|
||||
</button>
|
||||
) : (
|
||||
<div className="custom-form">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Nome materia"
|
||||
value={customCorso.nome}
|
||||
onChange={e =>
|
||||
setCustomCorso({ ...customCorso, nome: (e.target as HTMLInputElement).value })
|
||||
}
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="CFU"
|
||||
min="1"
|
||||
max="30"
|
||||
step="1"
|
||||
value={customCorso.cfu || ''}
|
||||
onChange={e =>
|
||||
setCustomCorso({
|
||||
...customCorso,
|
||||
cfu: parseInt((e.target as HTMLInputElement).value) || 0,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<button onClick={aggiungiCorsoCustom} className="confirm-btn">
|
||||
Aggiungi
|
||||
</button>
|
||||
<button onClick={() => setShowCustomForm(false)} className="cancel-btn">
|
||||
Annulla
|
||||
</button>
|
||||
{sezioniAperte[categoria] && (
|
||||
<div class="course-grid">
|
||||
{corsi.map((corso, index) => (
|
||||
<button
|
||||
key={index}
|
||||
class="course-button"
|
||||
onClick={() => aggiungiCorso(corso)}
|
||||
disabled={corsiSelezionati.some(c => c.nome === corso.nome)}
|
||||
>
|
||||
<span class="course-name">{corso.nome}</span>
|
||||
<span class="course-cfu">{corso.cfu} CFU</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Sezione lista corsi selezionati */}
|
||||
<div className="selected-courses">
|
||||
<div className="section-header">
|
||||
<h2>Materie Selezionate</h2>
|
||||
{corsiSelezionati.length > 0 && (
|
||||
<button onClick={resetTutto} className="reset-btn">
|
||||
🗑️ Cancella Tutto
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{corsiSelezionati.length === 0 ? (
|
||||
<p className="no-courses">Nessuna materia selezionata</p>
|
||||
{/* Form per materia custom */}
|
||||
<div class="custom-course">
|
||||
<h3>Materia Personalizzata</h3>
|
||||
{!showCustomForm ? (
|
||||
<button onClick={() => setShowCustomForm(true)}>+ Aggiungi Materia Personalizzata</button>
|
||||
) : (
|
||||
<div className="courses-list">
|
||||
{corsiSelezionati.map(corso => (
|
||||
<div key={corso.id} className="course-item">
|
||||
<div className="course-info">
|
||||
<span className="course-name">{corso.nome}</span>
|
||||
<span className="course-cfu">{corso.cfu} CFU</span>
|
||||
{corso.passFailOnly && <span className="pass-fail-badge">Pass/Fail</span>}
|
||||
</div>
|
||||
|
||||
{!corso.passFailOnly && (
|
||||
<div className="course-grade">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Voto"
|
||||
min="18"
|
||||
max="30"
|
||||
step="1"
|
||||
value={corso.voto || ''}
|
||||
onChange={e =>
|
||||
aggiornaVoto(
|
||||
corso.id,
|
||||
parseInt((e.target as HTMLInputElement).value) || null,
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
<label className={`lode-checkbox ${corso.voto !== 30 ? 'disabled' : ''}`}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={corso.lode}
|
||||
disabled={corso.voto !== 30}
|
||||
onChange={e =>
|
||||
aggiornaLode(corso.id, (e.target as HTMLInputElement).checked)
|
||||
}
|
||||
/>
|
||||
Lode
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => rimuoviCorso(corso.id)}
|
||||
className="remove-btn"
|
||||
title="Rimuovi materia"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<div class="custom-form">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Nome materia"
|
||||
value={customCorso.nome}
|
||||
onChange={e =>
|
||||
setCustomCorso({ ...customCorso, nome: (e.target as HTMLInputElement).value })
|
||||
}
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="CFU"
|
||||
min="1"
|
||||
max="30"
|
||||
step="1"
|
||||
value={customCorso.cfu || ''}
|
||||
onChange={e =>
|
||||
setCustomCorso({
|
||||
...customCorso,
|
||||
cfu: parseInt((e.target as HTMLInputElement).value) || 0,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<button onClick={aggiungiCorsoCustom}>Aggiungi</button>
|
||||
<button onClick={() => setShowCustomForm(false)}>Annulla</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sezione lista corsi selezionati */}
|
||||
<div class="card">
|
||||
<div class="h-flex">
|
||||
<div class="title">
|
||||
<h2>Materie Selezionate</h2>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
{corsiSelezionati.length > 0 && <button onClick={resetTutto}>🗑️ Cancella Tutto</button>}
|
||||
</div>
|
||||
|
||||
{corsiSelezionati.length === 0 ? (
|
||||
<p>Nessuna materia selezionata</p>
|
||||
) : (
|
||||
<div class="courses-list">
|
||||
{corsiSelezionati.map(corso => (
|
||||
<div key={corso.id} class="course-item">
|
||||
<span class="course-name">{corso.nome}</span>
|
||||
<span class="course-cfu">{corso.cfu} CFU</span>
|
||||
|
||||
{!corso.passFailOnly && (
|
||||
<div class="course-grade tall">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Voto"
|
||||
min="18"
|
||||
max="30"
|
||||
step="1"
|
||||
value={corso.voto || ''}
|
||||
onChange={e =>
|
||||
aggiornaVoto(
|
||||
corso.id,
|
||||
parseInt((e.target as HTMLInputElement).value) || null,
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
<label class={`lode-checkbox ${corso.voto !== 30 ? 'disabled' : ''}`}>
|
||||
<input
|
||||
class="star"
|
||||
type="checkbox"
|
||||
checked={corso.lode}
|
||||
disabled={corso.voto !== 30}
|
||||
onChange={e =>
|
||||
aggiornaLode(corso.id, (e.target as HTMLInputElement).checked)
|
||||
}
|
||||
/>
|
||||
Lode
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="actions tall">
|
||||
<button
|
||||
class="icon remove-btn"
|
||||
onClick={() => rimuoviCorso(corso.id)}
|
||||
title="Rimuovi materia"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pulsante Calcola */}
|
||||
{corsiSelezionati.length > 0 && (
|
||||
<div className="calculate-section">
|
||||
<button onClick={calcolaMedia} className="calculate-btn">
|
||||
🧮 Calcola Media e Voto di Laurea
|
||||
</button>
|
||||
<div class="calculate-section wide">
|
||||
<button onClick={calcolaMedia}>🧮 Calcola Media e Voto di Laurea</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Risultati */}
|
||||
{risultati && mostraRisultati && (
|
||||
<div className="results">
|
||||
<div class="results wide">
|
||||
<h2>Risultati</h2>
|
||||
{risultati.errore ? (
|
||||
<div className="error-message">
|
||||
<div class="error-message">
|
||||
<p>⚠️ {risultati.errore}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="results-grid">
|
||||
<div className="result-item">
|
||||
<span className="label">Media Pesata:</span>
|
||||
<span className="value">{risultati.mediaPesata}</span>
|
||||
<div class="results-grid">
|
||||
<div class="result-item">
|
||||
<span class="label">Media Pesata:</span>
|
||||
<span class="value">{risultati.mediaPesata}</span>
|
||||
</div>
|
||||
<div className="result-item">
|
||||
<span className="label">Bonus Lodi:</span>
|
||||
<span className="value">+{risultati.bonusLodi}</span>
|
||||
<div class="result-item">
|
||||
<span class="label">Bonus Lodi:</span>
|
||||
<span class="value">+{risultati.bonusLodi}</span>
|
||||
</div>
|
||||
<div className="result-item highlight">
|
||||
<span className="label">Voto di Ammissione:</span>
|
||||
<span className="value">{risultati.votoAmmissione}</span>
|
||||
<div class="result-item highlight">
|
||||
<span class="label">Voto di Ammissione:</span>
|
||||
<span class="value">{risultati.votoAmmissione}</span>
|
||||
</div>
|
||||
<div className="result-item highlight">
|
||||
<span className="label">Massimo Voto Di Laurea Possibile:</span>
|
||||
<span className="value">
|
||||
<div class="result-item highlight">
|
||||
<span class="label">Massimo Voto Di Laurea Possibile:</span>
|
||||
<span class="value">
|
||||
{risultati.massimoVotoLaurea}
|
||||
{risultati.conLode && <span className="lode-badge">(+lode)</span>}
|
||||
{risultati.conLode && <span class="lode-badge">(+lode)</span>}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -720,9 +710,9 @@ function MediaPesataApp() {
|
||||
)}
|
||||
|
||||
{/* Nota informativa */}
|
||||
<div className="info-section">
|
||||
<div class="card wide">
|
||||
<h3>📋 Come viene calcolata la media</h3>
|
||||
<div className="info-content">
|
||||
<div class="info-content">
|
||||
<h4>Regole di esclusione CFU:</h4>
|
||||
<ul>
|
||||
<li>
|
||||
@@ -763,11 +753,11 @@ function MediaPesataApp() {
|
||||
}
|
||||
|
||||
// Funzione per inizializzare l'app
|
||||
export function initMediaPesataApp() {
|
||||
const container = document.getElementById('media-pesata-app')
|
||||
if (container) {
|
||||
render(<MediaPesataApp />, container)
|
||||
}
|
||||
}
|
||||
// export function initMediaPesataApp() {
|
||||
// const container = document.getElementById('media-pesata-app')
|
||||
// if (container) {
|
||||
// render(<MediaPesataApp />, container)
|
||||
// }
|
||||
// }
|
||||
|
||||
export default MediaPesataApp
|
||||
// export default MediaPesataApp
|
||||
|
||||
@@ -1,42 +1,21 @@
|
||||
---
|
||||
import '@/styles/pages/media-pesata.css'
|
||||
import PageLayout from '../layouts/PageLayout.astro'
|
||||
|
||||
import { MediaPesataApp } from '@/client/MediaPesataApp'
|
||||
---
|
||||
|
||||
<PageLayout title="Voto Laurea" description="Calcola la tua media pesata e il voto di laurea seguendo le regole del dipartimento">
|
||||
<PageLayout
|
||||
title="Voto Laurea"
|
||||
description="Calcola la tua media pesata e il voto di laurea seguendo le regole del dipartimento"
|
||||
>
|
||||
<div class="media-pesata-container">
|
||||
<h1>Calcolo Media e Voto di Laurea</h1>
|
||||
<p>Calcola la tua media pesata e il voto con cui ti siederai alla discussione di laurea, seguendo le regole del dipartimento di Matematica.</p>
|
||||
<p>
|
||||
Calcola la tua media pesata e il voto con cui ti siederai alla discussione di laurea, seguendo le regole del
|
||||
dipartimento di Matematica.
|
||||
</p>
|
||||
|
||||
<div id="media-pesata-app"></div>
|
||||
<MediaPesataApp client:load />
|
||||
</div>
|
||||
</PageLayout>
|
||||
|
||||
<script>
|
||||
// Importiamo e inizializziamo l'applicazione
|
||||
import('../client/MediaPesataApp')
|
||||
.then(module => {
|
||||
const { initMediaPesataApp } = module
|
||||
initMediaPesataApp()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.media-pesata-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
</style>
|
||||
|
||||
+90
-1
@@ -75,7 +75,7 @@ Controls - for things like buttons, input, select
|
||||
input[type='text'],
|
||||
input[type='password'] {
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
min-height: 1.75rem;
|
||||
|
||||
/* @include neo-brutalist-card; */
|
||||
border: 3px solid #222;
|
||||
@@ -89,6 +89,95 @@ Controls - for things like buttons, input, select
|
||||
}
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
||||
width: calc(1.5rem + 1px);
|
||||
height: calc(1.5rem + 1px);
|
||||
|
||||
background: #fff;
|
||||
border: 3px solid #222;
|
||||
border-radius: 4px;
|
||||
box-shadow: 3px 3px 0 0 #222;
|
||||
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
transition: all 64ms linear;
|
||||
|
||||
&:hover {
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 4px 4px 0 0 #222;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translate(1px, 1px);
|
||||
box-shadow: 2px 2px 0 0 #222;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background: #1e6733;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
background: #1e6733;
|
||||
|
||||
clip-path: polygon(10% 55%, 35% 75%, 85% 25%, 90% 35%, 40% 95%, 5% 60%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #2b8b47;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #eee;
|
||||
border-color: #888;
|
||||
box-shadow: 3px 3px 0 0 #888;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
box-shadow: 3px 3px 0 0 #888;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background: #aaa;
|
||||
|
||||
&::after {
|
||||
background: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.star {
|
||||
&:checked::after {
|
||||
background: rgb(255, 197, 49);
|
||||
clip-path: polygon(
|
||||
50% 0%,
|
||||
61% 35%,
|
||||
98% 35%,
|
||||
68% 57%,
|
||||
79% 91%,
|
||||
50% 70%,
|
||||
21% 91%,
|
||||
32% 57%,
|
||||
2% 35%,
|
||||
39% 35%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
|
||||
@@ -325,6 +325,38 @@ Custom Page Styles
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.grid-center {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.h-flex {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.v-flex {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.h-flex,
|
||||
.v-flex {
|
||||
place-self: stretch;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
> .spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.mobile-only {
|
||||
display: none !important;
|
||||
|
||||
+501
-264
@@ -1,10 +1,116 @@
|
||||
@layer page {
|
||||
:root {
|
||||
--media-pesata-accent: #e4c5ff;
|
||||
--media-pesata-bg: hsl(from var(--media-pesata-accent) h s 95%);
|
||||
|
||||
--media-pesata-accent-2: #ffe4c5;
|
||||
--media-pesata-accent-3: #c5ffe4;
|
||||
|
||||
--card-base: var(--media-pesata-accent);
|
||||
}
|
||||
|
||||
main {
|
||||
justify-self: center;
|
||||
background: var(--media-pesata-bg);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
padding: 4.5rem 3rem;
|
||||
gap: 4.5rem;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
padding: 3rem 1rem;
|
||||
gap: 3rem;
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-pesata-container {
|
||||
max-width: 72rem;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.card {
|
||||
align-content: start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
|
||||
padding: 0.25rem 1rem;
|
||||
gap: 0.5rem;
|
||||
font-size: 16px;
|
||||
|
||||
border: 2px solid #222;
|
||||
border-radius: 4px;
|
||||
box-shadow: 2px 2px 0 0 #222;
|
||||
|
||||
transition: all 64ms linear;
|
||||
text-decoration: none;
|
||||
color: #222;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 3px 3px 0 0 #222;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translate(1px, 1px);
|
||||
box-shadow: 1px 1px 0 0 #222;
|
||||
}
|
||||
}
|
||||
|
||||
.media-pesata-app {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
min-height: 100vh;
|
||||
background: var(--homepage-whatsphc-bg);
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: repeat(7, auto);
|
||||
|
||||
align-items: start;
|
||||
gap: 2rem;
|
||||
|
||||
> .wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
padding: 0;
|
||||
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.media-pesata-title {
|
||||
@@ -24,70 +130,120 @@
|
||||
box-shadow: 4px 4px 0 0 var(--palette-black);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
display: grid;
|
||||
place-content: center;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--palette-black);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.student-type-selector h2 {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--palette-black);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
/* .radio-group {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.radio-group label {
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid var(--palette-black);
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 600;
|
||||
transition: all 64ms linear;
|
||||
box-shadow: 2px 2px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
label:hover {
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 3px 3px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
label:active {
|
||||
transform: translate(1px, 1px);
|
||||
box-shadow: 1px 1px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 0;
|
||||
accent-color: #007bff;
|
||||
}
|
||||
} */
|
||||
|
||||
.compound-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid var(--palette-black);
|
||||
border: 3px solid #222;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 600;
|
||||
transition: all 64ms linear;
|
||||
box-shadow: 2px 2px 0 0 var(--palette-black);
|
||||
}
|
||||
box-shadow: 4px 4px 0 0 #222;
|
||||
overflow: hidden;
|
||||
width: fit-content;
|
||||
|
||||
.radio-group label:hover {
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 3px 3px 0 0 var(--palette-black);
|
||||
}
|
||||
button {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
padding: 0.5rem;
|
||||
|
||||
.radio-group label:active {
|
||||
transform: translate(1px, 1px);
|
||||
box-shadow: 1px 1px 0 0 var(--palette-black);
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-right: 3px solid #222;
|
||||
}
|
||||
|
||||
.radio-group input[type='radio'] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 0;
|
||||
accent-color: #007bff;
|
||||
&:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: hsl(from var(--media-pesata-accent) h s 75%);
|
||||
color: #f4fef7;
|
||||
|
||||
&:hover {
|
||||
background: hsl(from var(--media-pesata-accent) h s 85%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: hsl(from var(--media-pesata-accent) h s 95%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Counter CFU */
|
||||
.cfu-counter {
|
||||
background: var(--project-card-bg);
|
||||
background: hsl(from var(--media-pesata-accent-2) h s 75%);
|
||||
border: var(--border-large);
|
||||
border-radius: 6px;
|
||||
box-shadow: 4px 4px 0 0 var(--palette-black);
|
||||
padding: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cfu-counter.error {
|
||||
background: #fee;
|
||||
border-color: #dc3545;
|
||||
&.error {
|
||||
background: #ffd8d8;
|
||||
border-color: #dc3545;
|
||||
}
|
||||
}
|
||||
|
||||
.cfu-counter h3 {
|
||||
@@ -119,14 +275,6 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Layout principale */
|
||||
.main-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main-content {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -151,75 +299,97 @@
|
||||
}
|
||||
|
||||
.course-category {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Rimozione del vecchio stile per h3 che causava il rettangolo blu */
|
||||
|
||||
.course-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.course-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0.75rem;
|
||||
border: 2px solid var(--palette-black);
|
||||
border-radius: 4px;
|
||||
background: #f8f9fa;
|
||||
cursor: pointer;
|
||||
transition: all 64ms linear;
|
||||
text-align: left;
|
||||
font-family: var(--font-secondary);
|
||||
box-shadow: 2px 2px 0 0 var(--palette-black);
|
||||
}
|
||||
> button {
|
||||
padding: 0.25rem 0.75rem 0.25rem 0.5rem;
|
||||
font-size: 20px;
|
||||
|
||||
.course-button:hover:not(:disabled) {
|
||||
background: var(--homepage-projects-bg);
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 3px 3px 0 0 var(--palette-black);
|
||||
}
|
||||
place-content: stretch;
|
||||
place-items: stretch;
|
||||
}
|
||||
|
||||
.course-button:active:not(:disabled) {
|
||||
transform: translate(1px, 1px);
|
||||
box-shadow: 1px 1px 0 0 var(--palette-black);
|
||||
}
|
||||
.course-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 0.5rem;
|
||||
|
||||
.course-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
background: #e0e0e0;
|
||||
}
|
||||
padding: 0.25rem;
|
||||
|
||||
.course-button.selected {
|
||||
background: var(--guide-base);
|
||||
transform: translate(1px, 1px);
|
||||
box-shadow: 1px 1px 0 0 var(--palette-black);
|
||||
}
|
||||
border-radius: 0.25rem;
|
||||
overflow-y: auto;
|
||||
max-height: 50vh;
|
||||
|
||||
.course-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 0.25rem;
|
||||
color: var(--palette-black);
|
||||
}
|
||||
position: relative;
|
||||
|
||||
.course-cfu {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
font-family: var(--font-mono);
|
||||
/* bottom linear gradient for scroll */
|
||||
&::after {
|
||||
content: '';
|
||||
position: sticky;
|
||||
bottom: -0.25rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1rem;
|
||||
margin-top: calc(-1rem - 0.25rem);
|
||||
|
||||
background: linear-gradient(to top, #0004, transparent);
|
||||
}
|
||||
|
||||
.course-button {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
padding: 0.5rem;
|
||||
gap: 0.25rem;
|
||||
justify-content: stretch;
|
||||
justify-items: start;
|
||||
|
||||
border: 2px solid var(--palette-black);
|
||||
border-radius: 4px;
|
||||
background: #f8f9fa;
|
||||
cursor: pointer;
|
||||
transition: all 64ms linear;
|
||||
text-align: left;
|
||||
font-family: var(--font-secondary);
|
||||
box-shadow: 2px 2px 0 0 var(--palette-black);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--homepage-projects-bg);
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 3px 3px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translate(1px, 1px);
|
||||
box-shadow: 1px 1px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
> .course-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.3;
|
||||
color: var(--palette-black);
|
||||
}
|
||||
|
||||
> .course-cfu {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
/* font-family: var(--font-mono); */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Materia personalizzata */
|
||||
.custom-course {
|
||||
margin-top: 2rem;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 3px solid var(--palette-black);
|
||||
}
|
||||
@@ -252,29 +422,31 @@
|
||||
box-shadow: 5px 5px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
.custom-form {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
input {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 14px;
|
||||
|
||||
.custom-form input {
|
||||
padding: 0.5rem;
|
||||
border: 2px solid var(--palette-black);
|
||||
border: 2px solid #222;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
box-shadow: 2px 2px 0 0 #222;
|
||||
|
||||
background: #fff;
|
||||
font-family: var(--font-primary);
|
||||
}
|
||||
|
||||
.custom-form input[type='text'] {
|
||||
flex: 2;
|
||||
min-width: 200px;
|
||||
}
|
||||
.custom-form {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.custom-form input[type='number'] {
|
||||
flex: 0 0 80px;
|
||||
input[type='text'] {
|
||||
flex: 2;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
input[type='number'] {
|
||||
flex: 0 0 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn,
|
||||
@@ -351,122 +523,150 @@
|
||||
.courses-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
/* @media screen and (max-width: 1024px) {
|
||||
gap: 0;
|
||||
|
||||
.course-item {
|
||||
&:first-child:not(:last-child) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child:not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&:not(:first-child, :last-child) {
|
||||
border-radius: 0;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
} */
|
||||
}
|
||||
|
||||
.course-item {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--guide-base);
|
||||
border: 2px solid var(--palette-black);
|
||||
border-radius: 4px;
|
||||
transition: all 64ms linear;
|
||||
}
|
||||
|
||||
.course-item:hover {
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 2px 2px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
.course-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.course-info .course-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
color: var(--palette-black);
|
||||
font-family: var(--font-secondary);
|
||||
}
|
||||
|
||||
.course-info .course-cfu {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.course-grade {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.course-grade input[type='number'] {
|
||||
width: 90px;
|
||||
padding: 0.5rem;
|
||||
border: 2px solid var(--palette-black);
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
gap: 0.5rem 1rem;
|
||||
padding: 0.5rem 1rem 0.5rem 0.5rem;
|
||||
background: #fff;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-primary);
|
||||
}
|
||||
|
||||
.lode-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-secondary);
|
||||
}
|
||||
|
||||
.lode-checkbox.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.lode-checkbox input[type='checkbox'] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
background: #d63031;
|
||||
color: white;
|
||||
border: 2px solid var(--palette-black);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
aspect-ratio: 1;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
transition: all 64ms linear;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 2px 2px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
.remove-btn:hover {
|
||||
background: #b71c1c;
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 3px 3px 0 0 var(--palette-black);
|
||||
}
|
||||
> .course-name {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 2;
|
||||
|
||||
.remove-btn:active {
|
||||
transform: translate(1px, 1px);
|
||||
box-shadow: 1px 1px 0 0 var(--palette-black);
|
||||
}
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
color: var(--palette-black);
|
||||
font-family: var(--font-secondary);
|
||||
}
|
||||
|
||||
/* Calcolo e risultati */
|
||||
.calculation-section {
|
||||
background: var(--homepage-principal-bg);
|
||||
border: var(--border-large);
|
||||
border-radius: 6px;
|
||||
box-shadow: 4px 4px 0 0 var(--palette-black);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
> .course-cfu {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 3;
|
||||
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
/* font-family: var(--font-mono); */
|
||||
}
|
||||
|
||||
> .tall {
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
||||
.course-grade {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
place-content: center;
|
||||
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
> .actions {
|
||||
grid-column: -2 / -1;
|
||||
}
|
||||
|
||||
.lode-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-secondary);
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
background: #d63031;
|
||||
color: white;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
font-size: 20px;
|
||||
padding: 0;
|
||||
|
||||
margin-top: 4px;
|
||||
|
||||
&:hover {
|
||||
background: #b71c1c;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
justify-items: start;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: auto auto;
|
||||
|
||||
padding: 0.5rem;
|
||||
|
||||
.course-name {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
.course-cfu {
|
||||
display: grid;
|
||||
justify-self: center;
|
||||
align-self: start;
|
||||
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
.course-grade {
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
|
||||
.actions {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 2 / 3;
|
||||
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calculate-button {
|
||||
@@ -482,17 +682,17 @@
|
||||
cursor: pointer;
|
||||
transition: all 64ms linear;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.calculate-button:hover {
|
||||
background: #2b8b47;
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 5px 5px 0 0 var(--palette-black);
|
||||
}
|
||||
&:hover {
|
||||
background: #2b8b47;
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 5px 5px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
.calculate-button:active {
|
||||
transform: translate(2px, 2px);
|
||||
box-shadow: 2px 2px 0 0 var(--palette-black);
|
||||
&:active {
|
||||
transform: translate(2px, 2px);
|
||||
box-shadow: 2px 2px 0 0 var(--palette-black);
|
||||
}
|
||||
}
|
||||
|
||||
.results {
|
||||
@@ -502,21 +702,25 @@
|
||||
box-shadow: 4px 4px 0 0 var(--palette-black);
|
||||
padding: 2rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.results h2 {
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--palette-black);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 1.6rem;
|
||||
text-align: center;
|
||||
}
|
||||
> h2 {
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--palette-black);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 1.6rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.results-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1rem;
|
||||
.results-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ordine degli elementi: il massimo voto di laurea al centro */
|
||||
@@ -533,7 +737,7 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: var(--guide-base);
|
||||
background: hsl(from var(--media-pesata-accent-3) h s 75%);
|
||||
border: 2px solid var(--palette-black);
|
||||
border-radius: 4px;
|
||||
font-family: var(--font-secondary);
|
||||
@@ -542,7 +746,7 @@
|
||||
}
|
||||
|
||||
.result-item.highlight {
|
||||
background: var(--homepage-projects-bg);
|
||||
background: hsl(from var(--media-pesata-accent-2) h s 75%);
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
@@ -579,11 +783,7 @@
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.media-pesata-app {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* @media (max-width: 768px) {
|
||||
.course-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -629,17 +829,16 @@
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Mantieni il massimo voto centrato anche su mobile */
|
||||
.result-item:nth-child(4) {
|
||||
order: -1;
|
||||
grid-column: 1;
|
||||
justify-self: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
/* Layout ultra-compatto per schermi molto piccoli */
|
||||
@media (max-width: 480px) {
|
||||
/* @media (max-width: 480px) {
|
||||
.course-item {
|
||||
padding: 0.5rem;
|
||||
gap: 0.25rem;
|
||||
@@ -678,7 +877,7 @@
|
||||
height: 26px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
@@ -773,8 +972,31 @@
|
||||
|
||||
/* Calculate button */
|
||||
.calculate-section {
|
||||
text-align: center;
|
||||
margin: 2rem 0;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
padding: 2rem 0 1rem;
|
||||
|
||||
button {
|
||||
font-size: 20px;
|
||||
padding: 1rem;
|
||||
|
||||
/* border 3px */
|
||||
border: 3px solid var(--palette-black);
|
||||
border-radius: 6px;
|
||||
box-shadow: 4px 4px 0 0 var(--palette-black);
|
||||
|
||||
&:hover {
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 5px 5px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translate(2px, 2px);
|
||||
box-shadow: 2px 2px 0 0 var(--palette-black);
|
||||
}
|
||||
|
||||
background: hsl(from var(--media-pesata-accent-2) h s 75%);
|
||||
}
|
||||
}
|
||||
|
||||
.calculate-btn {
|
||||
@@ -855,3 +1077,18 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@layer utility {
|
||||
@media screen and (max-width: 1024px) {
|
||||
.card {
|
||||
> .h-flex {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
|
||||
> .spacer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user