diff --git a/static/style.css b/static/style.css index a5412bc..0b71559 100644 --- a/static/style.css +++ b/static/style.css @@ -350,6 +350,7 @@ p { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-bottom: 4rem; + align-items: stretch; } .distro-card { @@ -361,6 +362,9 @@ p { border: 2px solid transparent; position: relative; overflow: hidden; + display: flex; + flex-direction: column; + min-height: 400px; } .distro-card::before { @@ -381,22 +385,27 @@ p { .distro-header { display: flex; - align-items: center; + align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; - flex-wrap: wrap; + flex-shrink: 0; } .distro-logo { font-size: 2.5rem; min-width: 3rem; + flex-shrink: 0; +} + +.distro-header-content { + flex: 1; + min-width: 0; } .distro-header h3 { color: #047857; - margin: 0; - flex: 1; - min-width: 120px; + margin: 0 0 0.5rem 0; + line-height: 1.2; } .distro-tag { @@ -407,12 +416,14 @@ p { font-size: 0.8rem; font-weight: 500; white-space: nowrap; + display: inline-block; } .distro-description { color: #4b5563; margin-bottom: 1.5rem; line-height: 1.6; + flex-grow: 1; } .distro-features { @@ -420,6 +431,7 @@ p { flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; + flex-shrink: 0; } .feature { @@ -440,6 +452,8 @@ p { margin: 0; color: #0c4a6e; font-size: 0.9rem; + margin-top: auto; + flex-shrink: 0; } .distro-ideal strong { diff --git a/templates/index.html b/templates/index.html index 672ad3a..8e08ee4 100644 --- a/templates/index.html +++ b/templates/index.html @@ -130,8 +130,10 @@
Perfect voor beginners die van Windows komen. Gebruiksvriendelijk met veel ondersteuning.
Ziet er vertrouwd uit voor Windows gebruikers. Stabiel en betrouwbaar.
Gemaakt door System76. Uitstekend voor gaming en creatief werk.
Prachtig ontwerp geïnspireerd door macOS. Eenvoudig en elegant.
Nieuwste technologieën en functies. Voor technische gebruikers.
Arch-gebaseerd met extreme prestaties. Prachtig ontwerp en gaming-geoptimaliseerd.