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 @@ -

Ubuntu

- Populair +
+

Ubuntu

+ Populair +

Perfect voor beginners die van Windows komen. Gebruiksvriendelijk met veel ondersteuning.

@@ -149,8 +151,10 @@
-

Linux Mint

- Windows-achtig +
+

Linux Mint

+ Windows-achtig +

Ziet er vertrouwd uit voor Windows gebruikers. Stabiel en betrouwbaar.

@@ -166,8 +170,10 @@ -

Pop!_OS

- Gaming +
+

Pop!_OS

+ Gaming +

Gemaakt door System76. Uitstekend voor gaming en creatief werk.

@@ -183,8 +189,10 @@ -

Elementary OS

- Mooi +
+

Elementary OS

+ Mooi +

Prachtig ontwerp geïnspireerd door macOS. Eenvoudig en elegant.

@@ -200,8 +208,10 @@ -

Fedora

- Geavanceerd +
+

Fedora

+ Geavanceerd +

Nieuwste technologieën en functies. Voor technische gebruikers.

@@ -219,8 +229,10 @@
-

Garuda Linux

- Prestaties +
+

Garuda Linux

+ Prestaties +

Arch-gebaseerd met extreme prestaties. Prachtig ontwerp en gaming-geoptimaliseerd.