Initial commit: Grav CMS setup with HTML reference material

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

themes/natascha/blueprints.yaml

@@ -0,0 +1,6 @@
+name: Natascha
+version: 1.0.0
+description: Custom theme for Natascha Rieter art gallery website
+type: theme
+author:
+  name: Claude

themes/natascha/css/custom.css

@@ -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('../images/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);
+}

themes/natascha/js/main.js

@@ -0,0 +1,5 @@
+document.addEventListener('DOMContentLoaded', function () {
+    if (typeof GLightbox !== 'undefined' && document.querySelector('.glightbox')) {
+        GLightbox({ selector: '.glightbox', touchNavigation: true });
+    }
+});

themes/natascha/natascha.yaml

@@ -0,0 +1 @@
+enabled: true

themes/natascha/templates/contact.html.twig

@@ -0,0 +1,8 @@
+{% extends 'partials/base.html.twig' %}
+{% set page_class = 'row p-3' %}
+{% block content %}
+<div class="col-12 col-md-8 col-lg-6 p-3 text-start">
+    <h1 class="funky-font main-header">{{ page.title }}</h1>
+    {{ content }}
+</div>
+{% endblock %}

themes/natascha/templates/cv.html.twig

@@ -0,0 +1,14 @@
+{% extends 'partials/base.html.twig' %}
+{% set page_class = 'row p-3' %}
+{% block content %}
+<div class="col-12 col-md-3 p-3">
+    <img src="{{ url('theme://images/portret-1.jpg') }}" class="img-fluid mb-3" alt="Portret Natascha Rieter">
+</div>
+<div class="col-12 col-md-6 p-3 text-start">
+    <h1 class="funky-font main-header text-center">{{ page.title }}</h1>
+    {{ content }}
+</div>
+<div class="col-12 col-md-3 p-3 text-center">
+    <img src="{{ url('theme://images/logo-blauw.png') }}" class="img-fluid mb-3" alt="Logo Galerie Groot Welsden">
+</div>
+{% endblock %}

themes/natascha/templates/galerie.html.twig

@@ -0,0 +1,24 @@
+{% extends 'partials/base.html.twig' %}
+{% block extra_css %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
+{% endblock %}
+{% block extra_js %}
+<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>
+{% endblock %}
+{% block content %}
+<div class="row mb-3">
+    <div class="col-12 col-lg-8 offset-lg-2">
+        <h1 class="funky-font main-header text-center">{{ page.title }}</h1>
+        {{ content }}
+    </div>
+</div>
+<div class="row g-3">
+    {% for i in 1..12 %}
+    <div class="col-6 col-md-4 col-lg-3">
+        <a href="https://picsum.photos/seed/kunst{{ i }}/800/800" class="glightbox gallery-item" data-gallery="galerie" data-description="Werk {{ i }}">
+            <div class="gallery-thumb"><img src="https://picsum.photos/seed/kunst{{ i }}/350/350" alt="Werk {{ i }}"></div>
+        </a>
+    </div>
+    {% endfor %}
+</div>
+{% endblock %}

themes/natascha/templates/home.html.twig

@@ -0,0 +1,15 @@
+{% extends 'partials/base.html.twig' %}
+{% set page_class = 'row p-3' %}
+{% block content %}
+<div class="col-12 col-md-6 col-lg-3 p-3">
+    <img src="{{ url('theme://images/portret-2.jpg') }}" class="img-fluid mb-3" alt="Portret Natascha Rieter">
+    <img src="{{ url('theme://images/portret-1.jpg') }}" class="img-fluid d-none d-md-block" alt="Portret Natascha Rieter">
+</div>
+<div class="col-12 col-md-6 col-lg-6 p-3 text-start">
+    <h1 class="funky-font main-header text-center">Natascha Rieter</h1>
+    {{ content }}
+</div>
+<div class="col-12 col-md-6 col-lg-3 p-3 text-center">
+    <img src="{{ url('theme://images/logo-blauw.png') }}" class="img-fluid mb-3" alt="Logo Galerie Groot Welsden">
+</div>
+{% endblock %}

themes/natascha/templates/partials/base.html.twig

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="nl">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{% if page.title %}{{ page.title }} – {% endif %}Natascha Rieter</title>
+    <meta name="description" content="{{ page.header.description ?? 'Keramieke Galerie Groot Welsden – Natascha Rieter' }}">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
+    {% block extra_css %}{% endblock %}
+    <link rel="stylesheet" href="{{ url('theme://css/custom.css') }}">
+</head>
+<body>
+
+<div class="container mt-3 mt-sm-5">
+    {% include 'partials/nav.html.twig' %}
+
+    <div class="{{ page_class ?? 'p-3' }}" id="main-outline">
+        {% block content %}{% endblock %}
+    </div>
+
+    <div class="row text-color-white mt-3">
+        <footer>
+            <p>&copy; 2021–2026 – Kunst Galerie &amp; Atelier Natascha Rieter</p>
+        </footer>
+    </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+{% block extra_js %}{% endblock %}
+<script src="{{ url('theme://js/main.js') }}"></script>
+</body>
+</html>

themes/natascha/templates/partials/nav.html.twig

@@ -0,0 +1,38 @@
+<nav id="main-menu" class="navbar navbar-expand-md funky-font">
+    <div class="container-fluid px-0">
+        <a class="navbar-brand" href="{{ base_url_absolute }}">
+            <img src="{{ url('theme://images/logo-vignet-blauw.png') }}" alt="Logo" width="30" height="30" class="align-bottom d-none d-sm-inline">
+            Natascha Rieter
+        </a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain"
+                aria-controls="navbarMain" aria-expanded="false" aria-label="Menu openen">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarMain">
+            <ul class="navbar-nav ms-auto align-items-md-center">
+                {% for p in pages.children %}
+                {% if p.visible %}
+                <li class="nav-item">
+                    <a class="nav-link{% if page.url == p.url %} active{% endif %}" href="{{ p.url }}">{{ p.menu }}</a>
+                </li>
+                {% endif %}
+                {% endfor %}
+                <li class="nav-item">
+                    <a class="nav-link p-1" href="#" aria-label="Instagram">
+                        <img src="{{ url('theme://images/icon-instagram.png') }}" height="25" class="social-icon" alt="Instagram">
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link p-1" href="#" aria-label="Facebook">
+                        <img src="{{ url('theme://images/icon-facebook.png') }}" height="25" class="social-icon" alt="Facebook">
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link p-1" href="#" aria-label="LinkedIn">
+                        <img src="{{ url('theme://images/icon-linked-in.png') }}" height="25" class="social-icon" alt="LinkedIn">
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>

themes/natascha/templates/werk-in-detail.html.twig

@@ -0,0 +1,21 @@
+{% extends 'partials/base.html.twig' %}
+{% block extra_css %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
+{% endblock %}
+{% block extra_js %}
+<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>
+{% endblock %}
+{% block content %}
+<div class="row mb-3">
+    <h1 class="funky-font main-header text-center">{{ page.title }}</h1>
+</div>
+<div class="row g-3">
+    {% for i in 1..8 %}
+    <div class="col-6 col-md-4 col-lg-3">
+        <a href="https://picsum.photos/seed/detail{{ i }}/800/800" class="glightbox gallery-item" data-gallery="detail" data-description="Werk {{ i }}">
+            <div class="gallery-thumb"><img src="https://picsum.photos/seed/detail{{ i }}/350/350" alt="Werk {{ i }}"></div>
+        </a>
+    </div>
+    {% endfor %}
+</div>
+{% endblock %}