Progress so far. Waarom Linux still looks very ugly so WIP

This commit is contained in:
2025-09-03 13:06:02 +02:00
parent e9816d431d
commit 58e46b79c5
12 changed files with 209 additions and 54 deletions

View File

@ -374,6 +374,11 @@ p {
background: #f9fafb;
}
/* Brand-tinted light background for callouts and CTAs */
.section--brand {
background: #f0fdf4;
}
.section--hero {
padding: 4rem 0;
min-height: 80vh;
@ -415,9 +420,6 @@ p {
}
/* Legacy Section Classes - Cleaned Up */
.benefits {
background: #fff;
}
.benefits h2 {
text-align: center;
@ -547,9 +549,6 @@ p {
}
/* Distributions Section */
.distros {
background: #f9fafb;
}
.distros h2 {
text-align: center;
@ -675,9 +674,6 @@ p {
}
/* Services Section */
.services {
background: #fff;
}
.services h2 {
text-align: center;
@ -691,11 +687,56 @@ p {
gap: 2rem;
}
/* Linux Features Section */
.linux-features {
background: #f9fafb;
/* Steps grid: balanced layout 3/2/1 across breakpoints */
.steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
@media (max-width: 1024px) {
.steps-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.steps-grid {
grid-template-columns: 1fr;
}
}
/* Distro tiles */
.distro-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
}
.distro-tile {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1.25rem;
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.distro-tile:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(5,150,105,0.12);
}
.distro-tile__img {
width: 72px;
height: 72px;
object-fit: contain;
margin-bottom: 0.75rem;
}
/* Linux Features Section */
.linux-features h2 {
text-align: center;
margin-bottom: 1rem;
@ -832,6 +873,15 @@ h2 a {
color: inherit;
}
/* Ensure card titles with links look identical to non-linked titles */
.card h3 a,
.card h3 a:visited,
.card h3 a:hover,
.card h3 a:active {
text-decoration: none;
color: inherit;
}
/* Reusable link wrapper to make whole cards clickable */
.card-link {
text-decoration: none;
@ -970,9 +1020,6 @@ h2 a {
min-height: 120px;
}
.contact-cta {
background: #f0fdf4;
}
.contact-cta h2 {
text-align: center;
@ -986,6 +1033,60 @@ h2 a {
gap: 2rem;
}
/* Pricing/Tarieven benefit cards */
.cta-benefit {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1.5rem;
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-benefit:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(5,150,105,0.12);
}
.benefit-icon {
width: 56px;
height: 56px;
border-radius: 9999px;
background: #ecfdf5;
border: 2px solid #bbf7d0;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.75rem auto;
}
.benefit-icon__glyph {
font-weight: 700;
color: #047857;
font-size: 1.25rem;
line-height: 1;
}
/* Collapsible disclaimer styles */
details.disclaimer {
margin-top: 0.5rem;
}
details.disclaimer summary {
cursor: pointer;
color: #047857;
font-weight: 600;
}
details.disclaimer .disclaimer-body {
background: #f9fafb;
border-left: 4px solid #059669;
padding: 1rem 1rem 1rem 1.25rem;
border-radius: 6px;
margin-top: 0.75rem;
}
/* Footer */
footer {
background: #f9fafb;

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/images/fedora.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

3
static/images/garuda.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0 0 48 48">
<path fill="#1e88e5" d="M28.465,38.611c0.419-1.105,0.664-2.365,0.664-3.714c0-4.133-2.211-7.494-4.929-7.494 c-2.741,0-4.951,3.361-4.951,7.494c0,1.326,0.221,2.586,0.641,3.669c-9.041,0.951-15.407,4.731-17.993,6.432 c4.355-6.278,8.909-13.638,13.262-22.105c1.083-2.101,2.101-4.178,3.05-6.211c0.375,0.243,0.751,0.509,1.171,0.775 c1.945,1.215,3.759,1.879,5.084,2.233c-0.973-0.73-2.033-1.613-3.116-2.697c-0.817-0.817-1.547-1.637-2.167-2.433 C21.016,10.538,22.608,6.669,24,3c2.32,6.144,5.217,12.842,8.841,19.893c2.343,4.531,4.731,8.754,7.117,12.644 c-0.685-0.375-1.437-0.73-2.233-1.039c-1.371-0.53-2.652-0.862-3.759-1.06c1.503,0.751,3.25,1.747,5.084,3.073 c1.194,0.885,2.254,1.769,3.161,2.631c0.021,0.021,0.021,0.021,0.045,0.045c1.26,2.056,2.565,3.957,3.846,5.813 C43.561,43.319,37.306,39.605,28.465,38.611z"></path>
</svg>

After

Width:  |  Height:  |  Size: 1011 B

3
static/images/mint.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0 0 48 48">
<path fill="#c5e1a5" d="M21.5,44C13.492,44,7,37.508,7,29.5V18H2V4h29.031C39.298,4,46,10.702,46,18.969V44H21.5z"></path><path fill="#689f38" d="M30.031,8H6v6h2c1.657,0,3,1.343,3,3v0v11.5C11,34.851,16.149,40,22.5,40H38c2.209,0,4-1.791,4-4 V19.969C42,13.359,36.641,8,30.031,8z"></path><path fill="#fff" d="M33.5,15c-1.577,0-2.996,0.672-4,1.74c-1.004-1.069-2.423-1.74-4-1.74c-3.033,0-5.5,2.473-5.5,5.512 V28h3v-7.488c0-1.381,1.122-2.505,2.5-2.505S28,19.13,28,20.512V28h3v-7.488v0c0-1.381,1.122-2.505,2.5-2.505S36,19.13,36,20.512 V28.5c0,1.93-1.57,3.5-3.5,3.5h-12c-1.93,0-3.5-1.57-3.5-3.5V12h-3v16.5c0,3.584,2.916,6.5,6.5,6.5h12c3.584,0,6.5-2.916,6.5-6.5 v-7.988C39,17.472,36.533,15,33.5,15z"></path>
</svg>

After

Width:  |  Height:  |  Size: 903 B

1
static/images/popos.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><linearGradient id="inxzwh639poeU1X9W8tTQa" x1="7.037" x2="45.033" y1="7.037" y2="45.033" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#05acb3"/><stop offset="1" stop-color="#038387"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQa)" d="M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z"/><linearGradient id="inxzwh639poeU1X9W8tTQb" x1="22.277" x2="31.658" y1="31.726" y2="57.724" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQb)" d="M15.5,38.5h17c1.105,0,2-0.895,2-2v0c0-1.105-0.895-2-2-2h-17c-1.105,0-2,0.895-2,2v0 C13.5,37.605,14.395,38.5,15.5,38.5z"/><linearGradient id="inxzwh639poeU1X9W8tTQc" x1="30.056" x2="40.896" y1="16.127" y2="46.17" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQc)" d="M34,16c-3-1-3.5,0.5-4,2.5c-0.618,2.473-1,7-1,8.5s1,2,2,0.5s4-6.5,4.5-8S35.956,16.652,34,16 z"/><linearGradient id="inxzwh639poeU1X9W8tTQd" x1="28.561" x2="31.626" y1="29.85" y2="38.346" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQd)" d="M27.996,30.447c-0.642,0.833-0.433,2.571,1.067,2.589c0.938,0.011,1.584-0.887,1.509-2.029 C30.518,30.184,29.104,29.01,27.996,30.447z"/><linearGradient id="inxzwh639poeU1X9W8tTQe" x1="17.026" x2="40.638" y1="8.349" y2="73.788" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f0f0f0"/><stop offset="1" stop-color="#fff"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQe)" d="M26,12c-3.056-5.239-8.399-4.379-13.366-0.748c-1.265,0.924-1.651,2.649-0.91,4.029 l8.91,16.606c0.49,0.913,1.596,1.3,2.549,0.892h0c1.006-0.431,1.479-1.591,1.059-2.602c-0.819-1.975-2.095-5.059-2.742-6.677 C23.5,22.5,29.846,18.592,26,12z M21.352,19.609c-0.515,0.303-1.907,0.452-3.239-2.812c-1.213-2.971-0.849-4.335-0.212-4.547 s1.971,0.485,3.244,3.001C22.418,17.767,21.868,19.306,21.352,19.609z"/></svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
static/images/ubuntu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB