19.0 RC3

[index]
- fix video chain
- reduce video opacity
- fix 'stop' overlay button

[general]
- rework projects' titles

[webutils]
- better styling for img options

Author: miermontoto

package.json

@@ -143,4 +143,4 @@ js: index
     </div>
 </section>
 
-<video id="background" autoplay loop muted playsinline></video>
+<video id="background" autoplay muted playsinline></video>

src/index.njk

@@ -41,6 +41,15 @@ table td:nth-child(2) input
 	width: 70%
 	height: auto
 
+#img-options
+	display: flex
+	flex-wrap: wrap
+	align-items: center
+	justify-content: center
+
+	caption
+		margin: 1em
+
 #img-convert
 	text-align: center
 	margin: 1em

src/static/css/app/webutils.sass

@@ -94,7 +94,7 @@ video#background
     left: 50%
     transform: translate(-50%, -50%)
     z-index: -3
-    opacity: 0.125
+    opacity: 0.1
     transition: all 0.5s ease
     width: 100%
     height: 100%

src/static/css/index.sass

@@ -4,9 +4,20 @@
 #back
     position: static
 
-h1
-    text-align: center
-    margin-top: 1em
+#title-container
+    display: flex
+    flex-wrap: wrap
+
+    #title
+        margin: 1em 0 0.6em
+        font-size: 3em
+        font-weight: bold
+
+    #breadcrumbs
+        justify-content: flex-end
+        align-items: center
+        align-content: center
+        width: 100%
 
 body
     margin-left: 10%
@@ -15,8 +26,6 @@ body
 
 #project-buttons
     display: flex
-    justify-content: center
-    align-items: center
 
     .button
         height: 20px

src/static/css/project.sass

@@ -45,7 +45,7 @@ fullscreen.addEventListener('click', () => {
 
 stop.addEventListener('click', () => {
     videoElement.remove();
-    document.getElementById('overlay').remove();
+    overlay_container.remove();
 });
 
 next.addEventListener('click', () => {

src/static/js/index/overlay.js

@@ -1,9 +1,15 @@
 ---
-layout: navigated.njk
+layout: base.njk
 css: project
 ---
 
-<h1>{{ title }}</h1>
+<div id="title-container">
+    <span id="breadcrumbs">
+        {% set navPages = collections.all | eleventyNavigation %}
+        {% breadcrumbs navPages %}
+    </span>
+    <span id="title">{{ title }}</span>
+</div>
 <div id="project-buttons">
     {% for button in buttons %}
         <a class="button" href="{{ button.url }}">{{ button.img | safe }}{{ button.text }}</a>