ruben/folderweb
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Activity Actions

Update default styles and templates

Browse source 
Remove hero section styles
Add CSS reset and variables
Improve typography and layout
Update base template with CSS versioning
Restructure list templates with semantic HTML
Add proper container classes
Improve code organization and readability
This commit is contained in:
Ruben 2026-02-10 22:25:44 +01:00
parent ca6d87b885
commit fde5cc4d0e
7 changed files with 171 additions and 345 deletions
Download patch file Download diff file Expand all files Collapse all files

112
app/default/content/styles.css
View file

@ -1,112 +0,0 @@
/* Hero section for frontpage */
.hero {
background: linear-gradient(135deg, oklch(95% 0.05 250) 0%, oklch(98% 0.02 250) 100%);
border-radius: 0.75rem;
padding: var(--space-m);
margin-block: var(--space-s);
text-align: center;
& .hero-title {
font-size: clamp(2rem, 5vw, 2.5rem);
margin-block: 0 var(--space-xs);
background: linear-gradient(135deg, oklch(40% 0.15 250), oklch(30% 0.2 280));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900;
}
& .hero-subtitle {
font-size: clamp(1rem, 2vw, 1.125rem);
color: var(--color-muted);
margin-block-end: var(--space-m);
max-width: 32rem;
margin-inline: auto;
}
& .cta-button {
display: inline-block;
background: var(--color-accent);
color: white;
padding: var(--space-xs) var(--space-m);
border-radius: 0.5rem;
text-decoration: none;
font-weight: 600;
margin-block-start: var(--space-xs);
&:hover {
background: oklch(45% 0.15 250);
color: white;
}
}
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
gap: var(--space-s);
margin-block: var(--space-m);
& .feature-card {
background: var(--color-background);
padding: var(--space-s);
border-radius: 0.5rem;
border: 1px solid var(--color-border);
text-align: center;
transition: transform 0.2s, box-shadow 0.2s;
text-decoration: none;
color: inherit;
display: block;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px oklch(0% 0 0 / 0.1);
border-color: var(--color-accent);
}
& .feature-icon {
font-size: 2rem;
display: block;
margin-block-end: var(--space-xs);
}
& .feature-title {
font-weight: bold;
margin-block: var(--space-xs);
color: var(--color-text);
font-size: 0.9rem;
}
& .feature-description {
font-size: 0.85rem;
color: var(--color-muted);
margin: 0;
}
}
}
.stats {
display: flex;
justify-content: center;
gap: var(--space-m);
flex-wrap: wrap;
margin-block-start: var(--space-m);
padding-block-start: var(--space-s);
border-block-start: 1px solid var(--color-border);
& .stat {
text-align: center;
& .stat-value {
display: block;
font-size: 1.25rem;
font-weight: bold;
color: var(--color-accent);
}
& .stat-label {
font-size: 0.8rem;
color: var(--color-muted);
}
}
}