tweak scrolling rows and banner

robotframework · Sep 14, 2024 · 4251402 · 4251402
1 parent 556491b
commit 4251402
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 31 deletions.
diff --git a/docs/assets/index-B2DWdlsJ.css b/docs/assets/index-B2DWdlsJ.css
diff --git a/docs/assets/index-BsLIsIYn.js → docs/assets/index-Bd7u1y3Y.js b/docs/assets/index-BsLIsIYn.js → docs/assets/index-Bd7u1y3Y.js
diff --git a/docs/assets/index-hBcxstQS.css b/docs/assets/index-hBcxstQS.css
diff --git a/docs/index.html b/docs/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>RoboCon - Robot Framework Conference</title>
-    <script type="module" crossorigin src="/assets/index-BsLIsIYn.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-hBcxstQS.css">
+    <script type="module" crossorigin src="/assets/index-Bd7u1y3Y.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-B2DWdlsJ.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/components/Banner.vue b/src/components/Banner.vue
@@ -25,9 +25,10 @@ const props = defineProps({
 
 <style scoped>
 .banner-container {
-  height: min(30rem, 40vh);
+  height: min(50vh);
   position: relative;
   overflow: hidden;
+  box-shadow: inset 0 0 20px #555577;
 }
 h1 {
   font-size: 4rem;
@@ -43,7 +44,7 @@ h1 {
     &.theme {
       font-family: 'RBCN';
       letter-spacing: 0;
-      font-size: 5.25rem;
+      font-size: 7.125rem;
     }
   }
 }
@@ -56,7 +57,7 @@ h1 {
       &.theme {
         font-family: 'RBCN';
         letter-spacing: 0;
-        font-size: 21vw;
+        font-size: 21.5vw;
       }
     }
   }
@@ -66,11 +67,26 @@ h1 {
   align-items: center;
 }
 .banner-img {
-  height: 110%;
-  width: 100%;
+  min-height: 130%;
+  max-width: 100%;
   position: absolute;
-  top: -5%;
+  top: 0;
+  left: 0;
   object-fit: cover;
   filter: blur(3px) brightness(1.3) contrast(0.7) saturate(0.5) opacity(0.5);
+
+  animation-name: imgParallax;
+  animation-duration: 1ms; /* Firefox requires this to apply the animation */
+  animation-direction: alternate;
+  animation-timeline: scroll(block root);
+}
+
+@keyframes imgParallax {
+  from {
+    transform: translate(0, -1rem);
+  }
+  to {
+    transform: translate(0, -50%);
+  }
 }
 </style>
diff --git a/src/components/SectionRow.vue b/src/components/SectionRow.vue
@@ -22,6 +22,7 @@ const components = renderEntryList(props.content)
 <style scoped>
 .section-row {
   --gutter: max(calc((100vw - var(--layout-container-narrow-max-width)) * 0.5), 0rem);
+  --row-width: calc(var(--layout-container-narrow-max-width) - 2rem);
 
   display: flex;
   flex-wrap: nowrap;
@@ -33,15 +34,15 @@ const components = renderEntryList(props.content)
 
   & > div {
     scroll-snap-align: start;
-    scroll-margin-inline: max(calc((100vw - var(--layout-container-narrow-max-width) * 1) / 2 + 1rem), 0rem);
+    scroll-margin-inline: max(calc((100vw - var(--row-width) * 1) / 2 + 1rem), 0rem);
   }
   & > div:first-child {
     scroll-snap-align: start;
-    margin-left: max(calc((100vw - var(--layout-container-narrow-max-width) * 1) / 2 + 1rem), 0rem);
+    margin-left: max(calc((100vw - var(--row-width) * 1) / 2 + 1rem), 0rem);
   }
   & > div:last-child {
     scroll-snap-align: end;
-    margin-right: calc((100vw - (var(--layout-container-narrow-max-width) / 3)) / 2 + 1rem);
+    margin-right: calc((100vw - (var(--row-width) / 3)) / 2 + 1rem);
     scroll-margin-right: 0;
   }
   @media screen and (max-width: 701px) {
@@ -52,7 +53,7 @@ const components = renderEntryList(props.content)
   }
 }
 .item-column {
-  flex: 0 0 calc(100% / 3.3);
+  flex: 0 0 calc(var(--layout-container-narrow-max-width) / 3);
   scroll-snap-align: start;
   scroll-margin-inline: 1rem;
 }