Homepage: discover button

intk · Sep 19, 2024 · 9dbeeb0 · 9dbeeb0
1 parent 8444172
commit 9dbeeb0
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 5 deletions.
diff --git a/server/modules/@apostrophecms/home-page/ui/src/index.scss b/server/modules/@apostrophecms/home-page/ui/src/index.scss
@@ -40,12 +40,14 @@
   height: 560px;
   width: 100%;
   overflow: hidden;
+  display: flex;
 
   @media (min-width: map-get($breakpoints, 'sm')) {
     height: 532px;
   }
   @media (min-width: map-get($breakpoints, 'md')) {
     height: 1873px;
+    overflow: unset;
   }
 
   .pdl-home__cover {
@@ -178,6 +180,41 @@
   }
 }
 
+.pdl-home__discover {
+  background: black;
+  color: white;
+  padding: 15px 12px;
+  font-size: 18px;
+  border-radius: 4px;
+  position: sticky;
+  top: calc(100% - 80px);
+  margin-bottom: 30px;
+  margin-left: auto;
+  margin-right: auto;
+  align-self: baseline;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+
+  @media (min-width: map-get($breakpoints, 'md')) {
+    top: calc(100% - 90px);
+  }
+
+  &:not(:hover) {
+    color: white;
+    svg path {
+      animation: notHoverArrow 300ms ease;
+    }
+  }
+
+  &:hover {
+    color: white;
+    svg path {
+      animation: hoverArrow 300ms ease;
+    }
+  }
+}
+
 .pdl-home__about {
   background: black;
   color: white;
@@ -186,7 +223,7 @@
   z-index: 3;
 
   font-size: 39px;
-  padding-top: 20px;
+  padding-top: 60px;
   padding-bottom: 22px;
 
   @media (min-width: map-get($breakpoints, 'sm')) {

diff --git a/server/modules/@apostrophecms/home-page/views/page.html b/server/modules/@apostrophecms/home-page/views/page.html
@@ -14,6 +14,10 @@ <h1 class="pdl-home__headline">
           {% render fragment.preview(book, { light: true }) %}
         </div>
       {% endfor %}
+      <a class="pdl-home__discover" href="#home-about">
+        {% include "svg-arrow-down.html" %}
+        {{ __t('pdl:Discover') }}
+      </a>
     </div>
     <div class="pdl-home__about" id="home-about">
       <div class="pdl-home__about-text">
@@ -22,7 +26,7 @@ <h1 class="pdl-home__headline">
       </div>
       <a class="pdl-home__about-link" href="/{{ data.locale }}/about">
         {{ __t('pdl:About Public Domain Library') }}
-        {% include "svg-arrow.html" %}
+        {% include "svg-arrow-right.html" %}
       </a>
     </div>
     <div class="pdl-home__" style="background: white; height: 500px; width: 100%;"></div>

diff --git a/server/modules/@apostrophecms/home-page/views/svg-arrow-down.html b/server/modules/@apostrophecms/home-page/views/svg-arrow-down.html
@@ -0,0 +1,3 @@
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06004 9.04965V0.5H6.93996V9.04965L10.7424 5.5512L12 6.97967L6 12.5L0 6.97967L1.2576 5.5512L5.06004 9.04965Z" fill="white"/>
+</svg>
diff --git a/...strophecms/home-page/views/svg-arrow.html → ...ecms/home-page/views/svg-arrow-right.html b/...strophecms/home-page/views/svg-arrow.html → ...ecms/home-page/views/svg-arrow-right.html
diff --git a/server/modules/asset/i18n/en.json b/server/modules/asset/i18n/en.json
@@ -21,5 +21,6 @@
   "Start reading now": "Start reading now",
   "Credits": "Credits",
   "Font Color": "Font Color",
-  "About Public Domain Library": "About Public Domain Library"
+  "About Public Domain Library": "About Public Domain Library",
+  "Discover": "Discover"
 }
diff --git a/server/modules/asset/ui/src/scss/_layout.scss b/server/modules/asset/ui/src/scss/_layout.scss
@@ -1,5 +1,9 @@
 @import './_settings';
 
+html {
+  scroll-behavior: smooth;
+}
+
 body, html {
   scrollbar-width: none;
 

diff --git a/server/modules/book-page/ui/src/preview.scss b/server/modules/book-page/ui/src/preview.scss
@@ -237,11 +237,11 @@
 
   @keyframes hoverArrow {
     0% {
-      transform: translateY(0)
+      transform: translateY(0);
     }
 
     50% {
-      transform: translateY(40px)
+      transform: translateY(40px);
     }
 
     51% {
@@ -257,6 +257,28 @@
     }
   }
 
+  @keyframes notHoverArrow {
+    0% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(-25px);
+    }
+
+    51% {
+      visibility: hidden;
+    }
+
+    52% {
+      transform: translateY(40px);
+    }
+
+    100% {
+      transform: translateY(0);
+    }
+  }
+
   .pdl-book-preview__other {
     display: flex;
     flex-direction: column;