From ce1bda0afd29e2aa98480f070339e13a45b391e9 Mon Sep 17 00:00:00 2001 From: Bob Vandevliet Date: Fri, 7 Jun 2024 16:03:46 +0200 Subject: [PATCH 01/20] Initialized Bootstrap. --- public/index.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 public/index.html diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..07251ee --- /dev/null +++ b/public/index.html @@ -0,0 +1,18 @@ + + + + + + + + Bootstrap demo + + + + + + +

Hello world!

+ + + \ No newline at end of file From bd1ff485f244fe2d942ab31fa9078098a62fbd49 Mon Sep 17 00:00:00 2001 From: Bob Vandevliet Date: Fri, 7 Jun 2024 20:35:55 +0200 Subject: [PATCH 02/20] Using nginx SSI, building theme. --- .volumes/nginx/conf/conf.d/default.conf | 30 +++++++++++++++++++ docker-compose.yml | 11 +++++++ public/assets/css/styles.css | 28 +++++++++++++++++ public/includes/footer.html | 4 +++ public/includes/head.html | 11 +++++++ public/includes/nav.html | 18 +++++++++++ public/index.html | 40 ++++++++++++++++++------- 7 files changed, 132 insertions(+), 10 deletions(-) create mode 100644 .volumes/nginx/conf/conf.d/default.conf create mode 100644 docker-compose.yml create mode 100644 public/assets/css/styles.css create mode 100644 public/includes/footer.html create mode 100644 public/includes/head.html create mode 100644 public/includes/nav.html diff --git a/.volumes/nginx/conf/conf.d/default.conf b/.volumes/nginx/conf/conf.d/default.conf new file mode 100644 index 0000000..60fb704 --- /dev/null +++ b/.volumes/nginx/conf/conf.d/default.conf @@ -0,0 +1,30 @@ +server { + listen 80; + listen [::]:80; + server_name localhost; + + #access_log /var/log/nginx/host.access.log main; + + root /usr/share/nginx/public; + + location / { + index index.html; + ssi on; + try_files $uri $uri/ $uri.html =404; + } + + # location /includes/ { + # deny all; + # return 404; + # } + + error_page 404 /404.html; + location = /404.html { + root /usr/share/nginx/public; + } + + error_page 500 502 503 504 /50x.html; + location = /50x.html { + root /usr/share/nginx/html; + } +} \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..242e796 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,11 @@ +services: + nginx: + container_name: nginx.bvandevliet + image: nginx:stable-alpine + volumes: + - ./.volumes/nginx/conf/conf.d:/etc/nginx/conf.d:ro + - ./public:/usr/share/nginx/public:ro + ports: + - "8080:80" + environment: + - TZ=Europe/Amsterdam \ No newline at end of file diff --git a/public/assets/css/styles.css b/public/assets/css/styles.css new file mode 100644 index 0000000..9958052 --- /dev/null +++ b/public/assets/css/styles.css @@ -0,0 +1,28 @@ +/* Style for active link based on body class */ +body.home .home-link, +body.about .about-link, +body.contact .contact-link { + color: red; +} + +nav.bg-dark { + background-color: rgba(var(--bs-dark-rgb), 0.7) !important; +} + +section.hero { + position: relative; + min-height: 20rem; + height: 100vh; + overflow: hidden; + /* background-color: darkred; */ +} + +section.hero video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: -1; +} \ No newline at end of file diff --git a/public/includes/footer.html b/public/includes/footer.html new file mode 100644 index 0000000..ec51139 --- /dev/null +++ b/public/includes/footer.html @@ -0,0 +1,4 @@ +
+ +

©

+
\ No newline at end of file diff --git a/public/includes/head.html b/public/includes/head.html new file mode 100644 index 0000000..34c26ff --- /dev/null +++ b/public/includes/head.html @@ -0,0 +1,11 @@ + + + + + <!--# echo var="title" default="Title" --> + + + + + + \ No newline at end of file diff --git a/public/includes/nav.html b/public/includes/nav.html new file mode 100644 index 0000000..83b09ca --- /dev/null +++ b/public/includes/nav.html @@ -0,0 +1,18 @@ + \ No newline at end of file diff --git a/public/index.html b/public/index.html index 07251ee..ff9f0ab 100644 --- a/public/index.html +++ b/public/index.html @@ -1,18 +1,38 @@ - + - - - + - Bootstrap demo + + - - - + +
+ - -

Hello world!

+
+ +
+
+ +
+

About me

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat blandit aliquam etiam erat velit scelerisque. Donec adipiscing tristique risus nec feugiat in. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Orci a scelerisque purus semper eget duis at tellus at. Velit laoreet id donec ultrices tincidunt arcu. Sodales ut etiam sit amet nisl purus. Elementum curabitur vitae nunc sed velit dignissim sodales ut. Ipsum nunc aliquet bibendum enim facilisis gravida. Tristique senectus et netus et malesuada fames ac turpis. Donec massa sapien faucibus et. Dui sapien eget mi proin sed libero enim.

+

Dolor purus non enim praesent elementum. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Cursus euismod quis viverra nibh cras pulvinar mattis. Viverra justo nec ultrices dui sapien eget mi proin. Amet cursus sit amet dictum. Ut diam quam nulla porttitor massa id neque aliquam vestibulum. Nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Tellus molestie nunc non blandit. Ullamcorper velit sed ullamcorper morbi tincidunt. Felis imperdiet proin fermentum leo vel orci porta. Hendrerit gravida rutrum quisque non tellus orci. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Volutpat commodo sed egestas egestas fringilla. Sagittis vitae et leo duis ut diam quam nulla porttitor. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Suspendisse in est ante in nibh mauris. Odio facilisis mauris sit amet massa.

+

Volutpat blandit aliquam etiam erat. Erat imperdiet sed euismod nisi porta lorem. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Pharetra massa massa ultricies mi quis. Lacus sed viverra tellus in hac habitasse. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Velit ut tortor pretium viverra suspendisse potenti. Et malesuada fames ac turpis egestas. Enim praesent elementum facilisis leo vel fringilla. Id ornare arcu odio ut sem nulla pharetra diam sit. Arcu cursus vitae congue mauris rhoncus.

+

Tempus egestas sed sed risus pretium quam vulputate. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Sit amet dictum sit amet justo. Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Egestas fringilla phasellus faucibus scelerisque eleifend. Quam elementum pulvinar etiam non quam. Leo vel orci porta non. Aliquet nec ullamcorper sit amet risus nullam eget. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Donec enim diam vulputate ut. Nec feugiat nisl pretium fusce id velit ut tortor pretium. Egestas dui id ornare arcu odio. Mi bibendum neque egestas congue quisque egestas. Id aliquet risus feugiat in ante metus dictum at tempor. Orci porta non pulvinar neque laoreet. Diam quam nulla porttitor massa id neque aliquam vestibulum. Tincidunt praesent semper feugiat nibh sed pulvinar. Morbi blandit cursus risus at ultrices mi tempus.

+

Et netus et malesuada fames ac turpis. Tincidunt dui ut ornare lectus. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Orci sagittis eu volutpat odio facilisis mauris. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Lectus proin nibh nisl condimentum id venenatis a condimentum vitae. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Ultrices gravida dictum fusce ut placerat orci nulla. A lacus vestibulum sed arcu non odio euismod. Purus viverra accumsan in nisl. Lectus magna fringilla urna porttitor rhoncus dolor purus. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Id semper risus in hendrerit gravida rutrum quisque non. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Eu facilisis sed odio morbi quis. Ut ornare lectus sit amet. Aliquet nec ullamcorper sit amet risus nullam eget felis.

+

Contact me

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat blandit aliquam etiam erat velit scelerisque. Donec adipiscing tristique risus nec feugiat in. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Orci a scelerisque purus semper eget duis at tellus at. Velit laoreet id donec ultrices tincidunt arcu. Sodales ut etiam sit amet nisl purus. Elementum curabitur vitae nunc sed velit dignissim sodales ut. Ipsum nunc aliquet bibendum enim facilisis gravida. Tristique senectus et netus et malesuada fames ac turpis. Donec massa sapien faucibus et. Dui sapien eget mi proin sed libero enim.

+

Dolor purus non enim praesent elementum. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Cursus euismod quis viverra nibh cras pulvinar mattis. Viverra justo nec ultrices dui sapien eget mi proin. Amet cursus sit amet dictum. Ut diam quam nulla porttitor massa id neque aliquam vestibulum. Nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Tellus molestie nunc non blandit. Ullamcorper velit sed ullamcorper morbi tincidunt. Felis imperdiet proin fermentum leo vel orci porta. Hendrerit gravida rutrum quisque non tellus orci. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Volutpat commodo sed egestas egestas fringilla. Sagittis vitae et leo duis ut diam quam nulla porttitor. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Suspendisse in est ante in nibh mauris. Odio facilisis mauris sit amet massa.

+

Volutpat blandit aliquam etiam erat. Erat imperdiet sed euismod nisi porta lorem. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Pharetra massa massa ultricies mi quis. Lacus sed viverra tellus in hac habitasse. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Velit ut tortor pretium viverra suspendisse potenti. Et malesuada fames ac turpis egestas. Enim praesent elementum facilisis leo vel fringilla. Id ornare arcu odio ut sem nulla pharetra diam sit. Arcu cursus vitae congue mauris rhoncus.

+

Tempus egestas sed sed risus pretium quam vulputate. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Sit amet dictum sit amet justo. Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Egestas fringilla phasellus faucibus scelerisque eleifend. Quam elementum pulvinar etiam non quam. Leo vel orci porta non. Aliquet nec ullamcorper sit amet risus nullam eget. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Donec enim diam vulputate ut. Nec feugiat nisl pretium fusce id velit ut tortor pretium. Egestas dui id ornare arcu odio. Mi bibendum neque egestas congue quisque egestas. Id aliquet risus feugiat in ante metus dictum at tempor. Orci porta non pulvinar neque laoreet. Diam quam nulla porttitor massa id neque aliquam vestibulum. Tincidunt praesent semper feugiat nibh sed pulvinar. Morbi blandit cursus risus at ultrices mi tempus.

+

Et netus et malesuada fames ac turpis. Tincidunt dui ut ornare lectus. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Orci sagittis eu volutpat odio facilisis mauris. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Lectus proin nibh nisl condimentum id venenatis a condimentum vitae. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Ultrices gravida dictum fusce ut placerat orci nulla. A lacus vestibulum sed arcu non odio euismod. Purus viverra accumsan in nisl. Lectus magna fringilla urna porttitor rhoncus dolor purus. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Id semper risus in hendrerit gravida rutrum quisque non. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Eu facilisis sed odio morbi quis. Ut ornare lectus sit amet. Aliquet nec ullamcorper sit amet risus nullam eget felis.

+
+ + \ No newline at end of file From 22e16f3abd0546dbbd26f8d9a7303b3779460605 Mon Sep 17 00:00:00 2001 From: Bob Vandevliet Date: Fri, 7 Jun 2024 22:11:11 +0200 Subject: [PATCH 03/20] Improved spacing and opacity for readability. --- public/assets/css/styles.css | 13 +++++++++++++ public/assets/js/header.js | 3 +++ public/includes/head.html | 1 + 3 files changed, 17 insertions(+) create mode 100644 public/assets/js/header.js diff --git a/public/assets/css/styles.css b/public/assets/css/styles.css index 9958052..a99c2b1 100644 --- a/public/assets/css/styles.css +++ b/public/assets/css/styles.css @@ -1,3 +1,11 @@ +:target::before { + content: ""; + display: block; + height: 4rem; + margin-top: -4rem; + visibility: hidden; +} + /* Style for active link based on body class */ body.home .home-link, body.about .about-link, @@ -7,6 +15,11 @@ body.contact .contact-link { nav.bg-dark { background-color: rgba(var(--bs-dark-rgb), 0.7) !important; + transition: background-color 0.5s; +} + +body.is-scrolled nav.bg-dark { + background-color: rgba(var(--bs-dark-rgb), 1.0) !important; } section.hero { diff --git a/public/assets/js/header.js b/public/assets/js/header.js new file mode 100644 index 0000000..117b2e0 --- /dev/null +++ b/public/assets/js/header.js @@ -0,0 +1,3 @@ +window.addEventListener('scroll', function() { + document.body.classList.toggle('is-scrolled', window.scrollY > 0); +}); \ No newline at end of file diff --git a/public/includes/head.html b/public/includes/head.html index 34c26ff..1ae7d77 100644 --- a/public/includes/head.html +++ b/public/includes/head.html @@ -8,4 +8,5 @@ + \ No newline at end of file From d46ad902c5133eec627824ba5ccd9255e0b583e8 Mon Sep 17 00:00:00 2001 From: Bob Vandevliet Date: Wed, 12 Jun 2024 14:58:04 +0200 Subject: [PATCH 04/20] Preparing content. --- public/assets/css/styles.css | 27 ++++----- public/includes/nav.html | 20 ++++--- public/index.html | 107 ++++++++++++++++++++++++++++++----- 3 files changed, 121 insertions(+), 33 deletions(-) diff --git a/public/assets/css/styles.css b/public/assets/css/styles.css index a99c2b1..670f956 100644 --- a/public/assets/css/styles.css +++ b/public/assets/css/styles.css @@ -6,28 +6,29 @@ visibility: hidden; } -/* Style for active link based on body class */ -body.home .home-link, -body.about .about-link, -body.contact .contact-link { - color: red; -} - -nav.bg-dark { - background-color: rgba(var(--bs-dark-rgb), 0.7) !important; +nav.bg-body { + background-color: rgba(var(--bs-body-bg-rgb), 0.7) !important; transition: background-color 0.5s; } -body.is-scrolled nav.bg-dark { - background-color: rgba(var(--bs-dark-rgb), 1.0) !important; +body.is-scrolled nav.bg-body { + background-color: rgba(var(--bs-body-bg-rgb), 1.0) !important; +} + +.navbar-collapse:not(.collapsing):not(.show) { + max-width: fit-content; +} + +.navbar-nav .btn { + padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x); + padding-right: var(--bs-navbar-nav-link-padding-x); + padding-left: var(--bs-navbar-nav-link-padding-x); } section.hero { position: relative; - min-height: 20rem; height: 100vh; overflow: hidden; - /* background-color: darkred; */ } section.hero video { diff --git a/public/includes/nav.html b/public/includes/nav.html index 83b09ca..36adc93 100644 --- a/public/includes/nav.html +++ b/public/includes/nav.html @@ -1,16 +1,22 @@ -