From 58e46b79c52cea62960abdbd57af3c9a7bc15f90 Mon Sep 17 00:00:00 2001 From: bdnugget Date: Wed, 3 Sep 2025 13:06:02 +0200 Subject: [PATCH] Progress so far. Waarom Linux still looks very ugly so WIP --- static/css/style.css | 131 +++++++++++++++++++++++++++++++---- static/images/elementary.png | Bin 0 -> 1568 bytes static/images/fedora.png | Bin 0 -> 1441 bytes static/images/garuda.svg | 3 + static/images/mint.svg | 3 + static/images/popos.svg | 1 + static/images/ubuntu.png | Bin 0 -> 1239 bytes templates/contact.html | 4 +- templates/diensten.html | 41 ++++++++--- templates/footer.html | 2 +- templates/index.html | 22 ++++-- templates/linux.html | 56 +++++++++------ 12 files changed, 209 insertions(+), 54 deletions(-) create mode 100644 static/images/elementary.png create mode 100644 static/images/fedora.png create mode 100644 static/images/garuda.svg create mode 100644 static/images/mint.svg create mode 100644 static/images/popos.svg create mode 100644 static/images/ubuntu.png diff --git a/static/css/style.css b/static/css/style.css index 12ead1f..da50a9b 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -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; diff --git a/static/images/elementary.png b/static/images/elementary.png new file mode 100644 index 0000000000000000000000000000000000000000..0c30e689a425e6810e81d849735a07adcc7bdb8b GIT binary patch literal 1568 zcmV+*2H*LKP)X)}%98_U*_HLHE@ z-S?iW{b9plKiA%8t^ZnkZKw{KfXTo-;C0|jU^CDQ?9}fr;BDX`-~wPU|1%nZR$wJi zsG#fsJ^-!+_S>6+4+q+SKPwbGR5k%~fyO;4_#j|rir{|(OI3YDRkj8CYyjGI^YYj7 zfj%37tALtn3x5=_DzIQDa1AgPcqj6-e*(qfHuDK- z6vMvG;oTk5NqhR|xpoP*elzWv9Srbh8Gk@!Sku0S>Y&5Sd3r>D z(TH!%m@CpI69?vTpJ{)rN*fSbOy-ohCUPbx$T715QSHOh z@S3R@9~gMB3vshzfQw37BF5A!|N9My?0jV^jt&eSW!l$PS$#I@A1;Mk%@`Y}eSzDV z_ydn-(=P5mE9@O&Zsh6Pc*ru5*k(V&=;s{FWh7~rU!MgN&0G=`O0ZT6bKHp^;6j>y zfl?^FG1#wFuT z*m}u~X;%hpGMT4VZ1cv}u+(WjgPIxAw_R5#}MfK9IRUe;c+Ef$uz z0;XZ0My{6nW=D)W%xQ-BjRX@+{SqHWr?J8e)93j};pH0oiWC0H2uD~8yzhcXYn%6a zCpg7a2*ria>@L_Ly0sVseCLFJCen+~cP!)8y4|!-N<8gOGaz`|aS^LHmJk~BcPH~D zhCe$pV7tR@T5?GiIm4QHo5ooYaZ$g~T__H8H>O)$&{xn)ka*r0-0sGPX!ZuvE}8A! znC5gYg#CdZOurYE((cj(m5)3|#eMili{7l<*Br zE)&sV)=tF{?v5bpb7F}xIiz=K|r#coZ><`HT5oq>5f$}!kj)M`Mt zDX?Il<|^;e2f1c-Ty^Tya{5>@LHjIockzO8QqyCoG7B2jmD_ZC*0NPEQxe+mHPovL zEOl%ZTZCOCkh{J@6|5>mMI_}RPU=<7-$*h_QX;});uxh)+8$MQEA^%vg?|79su*3K Sb4dOG0000qU*ehlLHk z&13cBn@8)%<_qe^u4`(?+BMeE_w(z<%VbXi-e~ncqiqRVOIrdHr7Zy{X$e4avmc6@ zCg6DE1Qa&-;As6g9H|?Jg4!|A)QrOOHKTCYdJXcby}n$_NVSaWeEL5jUuF-!t+j<_ z%4|UpOFqAP1oEmzAh*&B>Pqi)j>U8Gu@Nt@PaQg84_(sQLy#)@9JDOMpf(SK$~^ql zF>2zujFK;X@5jR@P6vNTH+eM@KzTq(v6DD8nx8T9T6=IhbL2gsG!;nk4A&2Y-710Z7q7PK06VwzNPu|3W!pH(nvXioU@3UzWkc#K?DrtD_3=7{d z_hI(oI&5x-VRn8UzINY(mu)mCjm|joa!vpP7)gJb7V=tq;AAS~jUW4AX>}WtVQF<6 z%Fp^hK|12dN7f+&`%daPFEuKwhT-)ytRVRa7FW06r6w21Nji=^_Z0}{R!V(BYY){( zEm-7vWSa=?KUm{-TVw9${{B9<#=pDdybE~w;64GnBG^jF0!nQ`ztprr1&cf%0V1t3 zx=~bul5|7GSzlD#+!|oIZUF(zxa8R;m8e8%v%M4MN#>EgF=@kq#?;Th+t}IxOm{V@ z0Gy=5O3Ga#S^yf%QptIhp(oDkit_Gg+K@E7_2D)C-Mzn70n_ye2w(sw*wdl~>`j%D zo0PI5L4dwH8kK|#KDzu1|L(F&xCZvV!gt~YH2H6&(qR(?$n{;(s3hF*s?7~|{#=3E zv&-;`&CNX%7Qjr27EsjWn}4JZYoQ^>I0!1#T@5`PaTU?eStb_vsVji%yLP=^-VeCJ z!P$l@UW4Nx@~Ds>h!#-T=-c?WCiOz28!leC4L|+12rKK+yhr2{1;iHY=bbaVB1q;@ z*SdHC2az{Bq2c0`V3Xnm=#vXTSX$izOxKlJ0SE0oA|H+>yYqj{uR-mFNjPE|;CEhL-UD)7ynsXRb^vzjYP1HDj1G7@i#X|cV4*qB z$C59$IzVM~?RMDMkvKsBA}@k4#PD+%9F*u;^e2D+ujXMi~>wBdMFw$m80+JrUO)j|5F~bv^ znO%m$$^noQ&b?HjIr8WkD)0!}+NS|G42dUC&^IL?Xp-I@m{=&Sb#SMs2++Z#_IwC5 zR3Ep{&c~8pSlNQ(RRe$%v;+a}H)T>Gc=bU#!FnzTI|p^LJ)qxIeiD$l`^*=T$#VjP z?rl)PRt$i(Ey(Sz5YW4-PXl6S9@rxvNcmbtkbI + + diff --git a/static/images/mint.svg b/static/images/mint.svg new file mode 100644 index 0000000..fd38dad --- /dev/null +++ b/static/images/mint.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/images/popos.svg b/static/images/popos.svg new file mode 100644 index 0000000..44628a2 --- /dev/null +++ b/static/images/popos.svg @@ -0,0 +1 @@ + diff --git a/static/images/ubuntu.png b/static/images/ubuntu.png new file mode 100644 index 0000000000000000000000000000000000000000..69fd1bd35a52f93044e5d33957733aa397ab8697 GIT binary patch literal 1239 zcmV;|1StE7P)S+)1oP zN<*!sLTMrrv9*6qiP+g@1oRL}1D0otpgz#M)qwc^%+VktVN`^Qi z8PC8=lw@$M;I8JU>H?lK(y22#w|3xm)m3WX*fj$VyOl?+S@#z>FI|xUe#=+z!Pe#{ zxJt%r51y|0$2fk|7w|Y67(MC+o)t)3fmY?QH52gLY{FU-L=L?wlxrK@NSs?6ct$$? z2A})q7OY5a>ZZ6??s=V2Q`hL5Re?`zU%yUgl>12_(z6v-O9WTKB|2f)_CEV68TJhF z^^Gw9Sr4Rt{TA{(2xcY)W;P9ZBLoY9BM|>&Pbq<($^@28X~+|J%#PJ0spw%1z%;>0 z^2RL8?b{-L3nnyq!`%;rl8mQ}ZIuU-z_lj0bMbR9_HGu}sh=)EIZ0m|17qJ7SQtJA ziNS-C;0vZSAO#+aEUZ&x2fp*o7Z$kd{3?6*v*cZV>iaOVp`qet4|?$r@6mljJ1#ZSK@Z>B1F$=!SyJt;L< z`*X0Q2W?<-(|-YPFK-sn-q#=>H|#4Co`LYLX1P_+=m{ADV={v!`VQEDn2R}xzQ4`g z(R+84tVE*!T{!}bj=B?2>E9JIXiuwf+=bzzHV}8OoR>C*)ORCx=e|BJOJLHK09Q%O zHG@w626KBi3x`~h=!Z<20Qy9+EQO|JeIP1BASaVSF%+hL__}Z%eruDwGghr6TOEP! zRtEw{MJRj_3B(*tXzFGGYNQ&juuW>u2DssUrA$s}mUy z$|o|F9{0DD!18#xl)yw5d2g$A|5TT-b98Lf*hd|f**KLFpT6yHDdD-8yEG(#B+vJW z>&T%NFmu@wpoJMXW<~f#O^yusU(9(frx}IhS09Voh<9v+#pyrGf=~Z4D)t1JL*@q$ zR@_cH5a?HGy`f2dd7{G1hpY`vQRvN0{UJ%hY{LjdQIA&GpajYsIh-21s$<$pjE>W~Rr$Fl$c002ovPDHLkV1gbT BOQHY( literal 0 HcmV?d00001 diff --git a/templates/contact.html b/templates/contact.html index 02dd993..a944fc2 100644 --- a/templates/contact.html +++ b/templates/contact.html @@ -60,7 +60,7 @@

Neem contact op

-

Heeft u vragen over Linux‑migratie? Ik help u graag verder!

+

Heeft u vragen over Linux-migratie? Ik help u graag verder!

@@ -101,7 +101,7 @@

Openingstijden

-

Maandag – vrijdag: 09:00 – 17:00 (op afspraak)

+

Maandag - vrijdag: 09:00 - 17:00 (op afspraak)

Weekend: op afspraak

diff --git a/templates/diensten.html b/templates/diensten.html index b260355..6b5172c 100644 --- a/templates/diensten.html +++ b/templates/diensten.html @@ -64,7 +64,7 @@

Datamigratie

-

Overzetten van bestanden, documenten en foto’s van uw oude systeem naar Linux.

+

Overzetten van bestanden, documenten en foto’s van uw oude systeem naar Linux. Zie ook de back-updisclaimer hieronder.

Training en ondersteuning

@@ -74,24 +74,40 @@
-
+
+
+

Mijn aanpak

+
+

1. Kennismaking (gratis)

We bespreken wensen, hardware en gebruik.

+

2. Proefstart

Linux live vanaf USB om te testen op uw pc.

+

3. Installatie

Compleet ingericht met updates, drivers en basissoftware.

+

4. Migratie

Bestanden, foto’s en documenten veilig overzetten.

+

5. Uitleg & nazorg

Korte training en laagdrempelige ondersteuning.

+
+
+

Daarnaast geef ik gratis informatiebijeenkomsten en help ik soms bij Repair Cafés met installaties, zonder kosten.

+
+
+
+ +

Tarieven

-
💶
+

€20 per half uur

Transparant, zonder verborgen kosten. Reistijd in overleg, binnen Het Hogeland vaak kosteloos.

-
🧾
+

Voorbeelden

-

Installatie + basisinrichting: 1 à 2 uur. Migratie van gegevens: afhankelijk van volume en snelheid van opslag.

+

Installatie + basisinrichting + uitleg: 1 à 2 uur. Migratie van gegevens: afhankelijk van volume en snelheid van opslag.

-
🔁
+

Extra service

-

Optioneel kan ik data kopiëren naar uw USB-stick(s) of externe schijf. Zie de disclaimer hieronder.

+

Optioneel kan ik data kopiëren naar uw USB-stick(s) of externe schijf. Zie de back-updisclaimer.

@@ -99,9 +115,14 @@
-

Belangrijk over back‑ups

-

Ik lever een Linux‑installatie‑ en migratieservice en ben geen back‑updienst. Back‑ups maken en bewaren is in principe de verantwoordelijkheid van de klant. Als extra service kan ik, op uw verzoek, data kopiëren naar door u aangeleverde USB‑sticks of een externe schijf.

-

Hoewel ik zorgvuldig werk, kan er bij datakopie of migratie altijd een risico op dataverlies bestaan (bijvoorbeeld door defecte schijven, corrupte data of hardwarefouten). U blijft verantwoordelijk voor uw eigen data. Ik ben niet aansprakelijk voor verlies of beschadiging van gegevens. Ik adviseer altijd om vooraf een eigen back‑up te maken.

+

Belangrijk over back-ups

+
+ Lees de back-updisclaimer +
+

Ik lever een Linux-installatie- en migratieservice. Back-ups maken en bewaren is in principe de verantwoordelijkheid van de klant. Als extra service kan ik, op uw verzoek, data kopiëren naar door u aangeleverde USB-sticks of een externe schijf. Als u geen opslag bij de hand heeft, kan ik USB-sticks van verschillende groottes meebrengen en leveren tegen een normale, eerlijke prijs.

+

Hoewel ik zorgvuldig werk, kan er bij datakopie of migratie altijd een risico op dataverlies bestaan, bijvoorbeeld door defecte schijven, corrupte data of hardwarefouten. U blijft verantwoordelijk voor uw eigen data. Ik ben niet aansprakelijk voor verlies of beschadiging van gegevens. Ik adviseer altijd om vooraf een eigen back-up te maken.

+
+
Vrijblijvend contact opnemen
diff --git a/templates/footer.html b/templates/footer.html index 6937a59..dc245a2 100644 --- a/templates/footer.html +++ b/templates/footer.html @@ -20,7 +20,7 @@

Gemeenschap

Lid van Nederlandse Linux Gebruikers Groep (NLLGG.nl)

Actief bij Buurtlinux.nl initiatief

-

Ik ondersteun de End‑of‑10-beweging voor duurzaam computergebruik.

+

Ik ondersteun de End-of-10-beweging voor duurzaam computergebruik.

Over mij · Contact

diff --git a/templates/index.html b/templates/index.html index 5dd6830..47c5d40 100644 --- a/templates/index.html +++ b/templates/index.html @@ -152,6 +152,20 @@
+
+
+

Mijn aanpak

+
+

1. Kennismaking (gratis)

Korte intake: wensen, hardware en gebruik. Samen kiezen we een route.

+

2. Proefstart

Linux live vanaf USB zodat u ziet hoe het werkt op uw pc.

+

3. Installatie

Veilig, met updates, codecs, printer, Nederlandse taal en basissoftware.

+

4. Migratie

Bestanden, foto's, documenten en favorieten overzetten.

+

5. Uitleg & nazorg

Korte training, daarna laagdrempelig bereikbaar voor vragen.

+
+

Daarnaast geef ik gratis informatiebijeenkomsten en help ik soms bij Repair Cafés met installaties, zonder kosten.

+
+
+

Welke Linux past bij u?

@@ -296,10 +310,10 @@

Installatieservice

Professionele Linux-installatie op uw computer, inclusief alle benodigde software.

- -

Datamigratie

-

Veilige overdracht van al uw bestanden, foto's en documenten van Windows naar Linux.

- +
+

Datamigratie

+

Veilige overdracht van al uw bestanden, foto's en documenten van Windows naar Linux. Zie de back-updisclaimer.

+

Training en ondersteuning

Persoonlijke begeleiding om u vertrouwd te maken met uw nieuwe Linux-systeem.

diff --git a/templates/linux.html b/templates/linux.html index f117c4d..0250373 100644 --- a/templates/linux.html +++ b/templates/linux.html @@ -46,35 +46,47 @@

Waarom Linux?

-

Nieuw bij Linux? Geen zorgen. Linux is een veilig en snel besturingssysteem dat uw huidige computer nieuw leven kan geven, zonder licentiekosten. Hieronder vindt u een korte beslishulp, mijn aanpak en voorbeelden in beeld.

+

Nieuw bij Linux? Geen zorgen. Linux is een veilig en snel besturingssysteem dat uw huidige computer nieuw leven kan geven, zonder licentiekosten. Hieronder vindt u een korte beslishulp en voorbeelden in beeld.

{{template "benefits" .}} -
+

Welke Linux past bij u?

-

Er zijn veel Linux-distributies, elk met hun eigen voordelen. Ik help u graag de perfecte keuze te maken.

-
-

Windows‑achtig en eenvoudig

Linux Mint – vertrouwde interface, zeer stabiel.

-

Populair en veelzijdig

Ubuntu LTS – grote community, langetermijnupdates.

-

Gaming en drivers

Pop!_OS – gaming‑geoptimaliseerd, NVIDIA‑ondersteuning.

-

Design en eenvoud

Elementary OS – elegant en eenvoudig.

-

Prestaties en tweaken

Garuda Linux – Arch‑basis, snelle prestaties.

-
-
-
- -
-
-

Mijn aanpak

-
-

1. Kennismaking (gratis)

Korte intake: wensen, hardware en gebruik. Samen kiezen we een route.

-

2. Proefstart

Linux live vanaf USB zodat u ziet hoe het werkt op uw pc.

-

3. Installatie

Veilig, met updates, codecs, printer, NL‑taal en basissoftware.

-

4. Migratie

Bestanden, foto’s, documenten en favorieten overzetten.

-

5. Uitleg & nazorg

Korte training, daarna laagdrempelig bereikbaar voor vragen.

+

Een paar goede keuzes met elk een duidelijk profiel.

+
+
+ Linux Mint +

Linux Mint

+

Windows-achtig, stabiel, vertrouwd voor overstappers.

+
+
+ Ubuntu +

Ubuntu LTS

+

Populair, langetermijnupdates, breed inzetbaar.

+
+
+ Pop!_OS +

Pop!_OS

+

Gaming-geoptimaliseerd, uitstekende NVIDIA-ondersteuning.

+
+
+ Fedora +

Fedora

+

Nieuwste technologie, Red Hat-basis, ontwikkelaarstools.

+
+
+ Elementary OS +

Elementary OS

+

Elegant, eenvoudig, design-gericht.

+
+
+ Garuda Linux +

Garuda Linux

+

Arch-basis, snelle prestaties, modern.

+