Initial commit: Grav CMS setup with HTML reference material

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-18 23:38:26 +02:00
commit ec019928a0
2288 changed files with 419882 additions and 0 deletions
@@ -0,0 +1,155 @@
+@font-face {
+    font-family: 'Hobo Std';
+    src: url('../fonts/HoboStd.eot');
+    src: url('../fonts/HoboStd.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/HoboStd.woff2') format('woff2'),
+         url('../fonts/HoboStd.woff') format('woff'),
+         url('../fonts/HoboStd.ttf') format('truetype');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+.funky-font {
+    font-family: 'Hobo Std', Helvetica, Verdana, Arial;
+}
+
+.text-color-blue  { color: #0081c4; }
+.text-color-white { color: #ffffff; }
+.text-color-dark-grey  { color: #293236; }
+.text-color-light-grey { color: #909090; }
+
+html, body {
+    font-family: Helvetica, Verdana, Arial;
+    color: #293236;
+    font-weight: bold;
+    min-height: 100%;
+}
+
+body {
+    background-image: url('../img/achtergrond-3.jpg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-attachment: fixed;
+    animation: pageIn 0.3s ease-in;
+}
+
+@keyframes pageIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+#main-menu {
+    background-color: #0081c4;
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+@media (min-width: 768px) {
+    #main-menu {
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+}
+
+@media (min-width: 1200px) {
+    #main-menu {
+        padding-left: 30px;
+        padding-right: 30px;
+    }
+}
+
+#main-menu a {
+    color: #fff;
+}
+
+#main-menu a.active,
+#main-menu a:hover {
+    color: #293236;
+}
+
+#main-menu .navbar-toggler {
+    border-color: rgba(255, 255, 255, 0.5);
+}
+
+#main-menu .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2c 255%2c 255%2c 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+#main-menu .navbar-toggler:focus {
+    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
+}
+
+img.social-icon {
+    filter: invert(1);
+}
+
+a.active img.social-icon,
+a:hover img.social-icon {
+    filter: invert(0);
+}
+
+#main-outline {
+    border: 8px solid #0081c4;
+    border-top: none;
+    min-height: 50vh;
+    background-color: rgba(255, 255, 255, 0.6);
+    margin-left: 0;
+    margin-right: 0;
+}
+
+@media (min-width: 768px) {
+    #main-outline {
+        border-width: 15px;
+    }
+}
+
+@media (min-width: 1200px) {
+    #main-outline {
+        border-width: 30px;
+    }
+}
+
+.main-header {
+    font-size: 1.8em;
+    color: #0081c4;
+}
+
+@media (min-width: 768px) {
+    .main-header {
+        font-size: 2.4em;
+    }
+}
+
+@media (min-width: 1200px) {
+    .main-header {
+        font-size: 3em;
+    }
+}
+
+footer {
+    text-align: center;
+    text-shadow: 1px 1px #293236;
+}
+
+.gallery-item {
+    display: block;
+    overflow: hidden;
+}
+
+.gallery-thumb {
+    aspect-ratio: 1;
+    overflow: hidden;
+}
+
+.gallery-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+}
+
+.gallery-item:hover .gallery-thumb img {
+    transform: scale(1.05);
+}