Progress so far. Waarom Linux still looks very ugly so WIP
This commit is contained in:
@ -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;
|
||||
|
BIN
static/images/elementary.png
Normal file
BIN
static/images/elementary.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.5 KiB |
BIN
static/images/fedora.png
Normal file
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
3
static/images/garuda.svg
Normal 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
3
static/images/mint.svg
Normal 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
1
static/images/popos.svg
Normal 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
BIN
static/images/ubuntu.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.2 KiB |
Reference in New Issue
Block a user