Differences

This shows you the differences between two versions of the page.

--- handleiding_nieuw:sub_weblinks [2025/10/28 17:02] – support
+++ handleiding_nieuw:sub_weblinks [2026/02/09 21:16] (current) – support
@@ Line 2: / Line 2: @@
 <style>
-/* Algemene layout */
+/* ===== Basis ===== */
 .startpagina {
-  font-family: sans-serif;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
   margin: 0 auto;
   max-width: 1000px;
+  padding: 12px;
+  background: #ffffff;
 }
-/* Header met achtergrondafbeelding */
+/* ===== Header (mag zo blijven: subtiel) ===== */
 .startpagina-header {
   position: relative;
-  border-radius: 12px;
+  border-radius: 16px;
   overflow: hidden;
-  margin-bottom: 2em;
+  margin-bottom: 1.2em;
-  height: 220px;
+  min-height: 210px;
+  border: 1px solid rgba(0,0,0,0.10);
+  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
+  background: #fff;
 }
 .startpagina-header::before {
-  content: "";
+  content:"";
-  position: absolute;
+  position:absolute;
-  inset: 0;
+  inset:0;
-  background-image: url('/dokuwiki/lib/exe/fetch.php?media=internet_header.jpg');
+  pointer-events:none;
-  background-size: cover;
+  background:
-  background-position: center;
+    repeating-linear-gradient(135deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 26px),
-  filter: brightness(0.6);
+    radial-gradient(circle at 10% 35%, rgba(220, 20, 60, 0.12) 0 16px, transparent 17px),
+    radial-gradient(circle at 86% 28%, rgba(30, 90, 200, 0.11) 0 20px, transparent 21px),
+    radial-gradient(circle at 62% 80%, rgba(245, 200, 40, 0.13) 0 26px, transparent 27px),
+    linear-gradient(0deg, rgba(255,255,255,0.86), rgba(255,255,255,0.86));
 }
-/* Tekst over afbeelding */
 .startpagina-header-text {
   position: relative;
   z-index: 1;
-  color: white;
+  color: #111;
-  text-align: center;
+  text-align: left;
-  padding: 3em 1.5em;
+  padding: 26px 22px;
-  text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
+  max-width: 760px;
 }
 .startpagina-header-text h1 {
-  font-size: 2em;
+  font-size: 1.9em;
   margin: 0;
+  letter-spacing: -0.2px;
 }
 .startpagina-header-text p {
-  margin: 0.5em 0 0;
+  margin: 0.55em 0 0;
-  font-size: 1.1em;
+  font-size: 1.05em;
+  line-height: 1.35;
+  opacity: 0.88;
+}
+/* ===== Sectietitels ===== */
+h2{
+  font-size: 1.2em;
+  margin: 16px 0 10px;
+  letter-spacing: -0.15px;
 }
-/* Tegelcontainer */
+/* ===== Tegelcontainer ===== */
 .tile-container {
   display: flex;
   flex-wrap: wrap;
-  gap: 1em;
+  gap: 14px;
-  margin: 1em 0;
+  margin: 10px 0 16px;
 }
-/* Tegels */
+/* ===== Tegels ===== */
 .tile {
   flex: 1 1 300px;
-  background: #f0f4f8;
+  background: rgba(255,255,255,0.92); /* iets transparant zodat art erdoorheen kan */
-  border-radius: 6px;
+  border-radius: 12px;
-  padding: 1.2em;
+  padding: 1.1em;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  border: 1px solid rgba(0,0,0,0.10);
-  transition: all 0.3s ease;
+  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
+  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
   text-align: center;
-  word-wrap: break-word;
+  min-height: 72px;
-  white-space: normal;
-  min-height: 70px;
   display: flex;
   align-items: center;
   justify-content: center;
+  backdrop-filter: blur(0.6px);
 }
 .tile:hover {
-  background: #dceeff;
+  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+  box-shadow: 0 10px 18px rgba(0,0,0,0.12);
+  background: rgba(255,255,255,0.97);
 }
 .tile a {
   text-decoration: none;
-  color: #2c3e50;
+  color: #1f2d3d;
-  font-weight: bold;
+  font-weight: 800;
   font-size: 1.05em;
   display: block;
+  padding: 4px 8px;
+}
+/* ===== “Stage” onder de tegels: transparant + duidelijke lijnen/vlakken ===== */
+.tile-stage{
+  position: relative;
+  padding: 10px 8px 18px;
+  border-radius: 18px;
+  overflow: hidden;
+  margin-bottom: 14px;
+  background: transparent; /* cruciaal: art moet zichtbaar blijven */
+}
+/* Duidelijke vlakken + strakke lijnen achter de tiles */
+.tile-stage::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  pointer-events:none;
+  opacity: 0.55; /* maak dit 0.70 als je nóg meer wilt */
+  z-index: 0;
+  background:
+    /* 2 dikke zwarte lijnen (Kandinsky/De Stijl) */
+    linear-gradient(to right, rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
+    linear-gradient(to bottom, rgba(0,0,0,0.30), rgba(0,0,0,0.30)),
+    /* kleurvlakken (strak) */
+    linear-gradient(0deg, rgba(245,200,40,0.22), rgba(245,200,40,0.22)),
+    linear-gradient(0deg, rgba(30,90,200,0.20), rgba(30,90,200,0.20)),
+    linear-gradient(0deg, rgba(220,20,60,0.18), rgba(220,20,60,0.18)),
+    /* een boog / ring (Kandinsky vibe) */
+    radial-gradient(circle at 84% 26%,
+      transparent 0 34px,
+      rgba(0,0,0,0.22) 34px 36px,
+      transparent 36px 54px,
+      rgba(220,20,60,0.18) 54px 56px,
+      transparent 56px 999px
+    ),
+    /* zachte basis */
+    radial-gradient(circle at 20% 70%, rgba(0,0,0,0.04), transparent 52%),
+    linear-gradient(0deg, rgba(255,255,255,0.96), rgba(255,255,255,0.96));
+  /* Posities en maten van alle shapes */
+  background-size:
+% 4px,     /* horizontale lijn */
+px 82%,     /* verticale lijn */
+px 120px, /* geel vlak */
+px 140px, /* blauw vlak */
+px 110px, /* rood vlak */
+    auto,        /* ring */
+    auto,        /* zachte schaduw */
+    auto;        /* papier */
+  background-position:
+% 22%,     /* horizontale lijn */
+% 16%,     /* verticale lijn */
+% 78%,      /* geel vlak */
+% 78%,     /* blauw vlak */
+% 18%,      /* rood vlak */
+    right 6% top 8%, /* ring */
+    center,
+    center;
+  background-repeat: no-repeat;
+}
+/* Zorg dat inhoud boven art ligt */
+.tile-stage > *{
+  position: relative;
+  z-index: 1;
 }
 </style>
@@ Line 91: / Line 183: @@
   </div>
-  <h2>📺 Video's en tools</h2>
+  <!-- Artlaag achter de tegels -->
-  <div class="tile-container">
+  <div class="tile-stage">
-    <div class="tile"><a href="https://www.youtube.com/watch?v=9uPY2MgyZ1M" target="_blank">Introductie Sumsonite</a></div>
-<div class="tile disabled">Ruimte voor een nieuw filmpje</div>
+    <h2>Video's en tools</h2>
-    <div class="tile"><a href="https://www.youtube.com/watch?v=H6Zo3TERD-g" target="_blank">Oefening 1: laadvermogen</a></div>
+    <div class="tile-container">
-    <div class="tile"><a href="https://www.youtube.com/watch?v=FKxFl4B7luM" target="_blank">Oefening 2: spelen met laadvermogen</a></div>
+      <div class="tile">
-    <div class="tile"><a href="http://referentieboek.sumcity.nl" target="_blank">Eenheidsprijzenboekje openbare ruimte</a></div>
+        <a href="https://youtu.be/sx6E3bd6PLg" target="_blank" rel="noopener">Introductie Sumsonite</a>
-  </div>
+      </div>
+      <div class="tile">
+        <a href="https://www.youtube.com/watch?v=FKxFl4B7luM" target="_blank" rel="noopener">Spelen met laadvermogen</a>
+      </div>
+      <div class="tile">
+        <span style="opacity:.55; font-weight:800;">...</span>
+      </div>
+      <div class="tile">
+        <a href="http://referentieboek.sumcity.nl" target="_blank" rel="noopener">Eenheidsprijzenboekje openbare ruimte</a>
+      </div>
+    </div>
+    <h2>Andere handige links</h2>
+    <div class="tile-container">
+      <div class="tile"><a href="https://kadastralekaart.com/" target="_blank" rel="noopener">Kadaster Online</a></div>
+      <div class="tile"><a href="https://omgevingswet.overheid.nl/regels-op-de-kaart/zoeken/locatie?regelsandere=regels" target="_blank" rel="noopener">Omgevingsplannen</a></div>
+      <div class="tile"><a href="https://www.wozwaardeloket.nl/" target="_blank" rel="noopener">WOZ-waardeloket</a></div>
+      <div class="tile"><a href="https://www.bouwkostenkompas.nl/nl" target="_blank" rel="noopener">Bouwkostenkompas</a></div>
+      <div class="tile"><a href="https://www.topotijdreis.nl/" target="_blank" rel="noopener">Topotijdreis</a></div>
+      <div class="tile"><a href="https://huurprijscheck.huurcommissie.nl/zelfstandige-woonruimte" target="_blank" rel="noopener">Huurprijscheck</a></div>
+      <div class="tile"><a href="https://iplo.nl/thema/ruimtelijke-ontwikkelingen/instrumenten-grondbeleid/kostenverhaal-gebiedsontwikkeling-financiele/berekening-plankosten/" target="_blank" rel="noopener">Plankostenscan</a></div>
+      <div class="tile"><a href="https://plancapaciteit.nl/kaart" target="_blank" rel="noopener">Plancapaciteit</a></div>
+      <div class="tile"><a href="/wiki/doku.php?id=handleiding_nieuw:spacematrix">Kaartenbak stedelijke dichtheid</a></div>
+      <div class="tile"><a href="https://www.fundainbusiness.nl/" target="_blank" rel="noopener">Funda in business</a></div>
+    </div>
-  <h2>📁 Andere handige links</h2>
-  <div class="tile-container">
-    <div class="tile"><a href="https://kadastralekaart.com/" target="_blank">Kadaster Online</a></div>
-    <div class="tile"><a href="https://omgevingswet.overheid.nl/regels-op-de-kaart/zoeken/locatie?regelsandere=regels" target="_blank">Omgevingsplannen</a></div>
-    <div class="tile"><a href="https://www.wozwaardeloket.nl/" target="_blank">WOZ-waardeloket</a></div>
-    <div class="tile"><a href="https://www.bouwkostenkompas.nl/nl" target="_blank">Bouwkostenkompas</a></div>
-    <div class="tile"><a href="https://www.topotijdreis.nl/" target="_blank">Topotijdreis</a></div>
-    <div class="tile"><a href="https://huurprijscheck.huurcommissie.nl/zelfstandige-woonruimte" target="_blank">Huurprijscheck</a></div>
-    <div class="tile"><a href="https://iplo.nl/thema/ekening-plankosten" target="_blank">Plankostenscan</a></div>
-    <div class="tile"><a href="https://plancapaciteit.nl/kaart" target="_blank">Plancapaciteit</a></div>
-    <div class="tile"><a href="/wiki/doku.php?id=handleiding_nieuw:spacematrix">Kaartenbak stedelijke dichtheid</a></div>
-    <div class="tile"><a href="https://www.fundainbusiness.nl/" target="_blank">Funda in business</a></div>
   </div>
@@ Line 117: / Line 221: @@
 </html>