Fix banner buttons in responsive and correct header effect.

cacybernetic · Mar 16, 2024 · 2988a6b · 2988a6b
1 parent c445ad1
commit 2988a6b
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 41 deletions.
diff --git a/public/style.css b/public/style.css
diff --git a/src/common/utils/scroll/scroll.js b/src/common/utils/scroll/scroll.js
@@ -5,14 +5,35 @@
 * @supported DESKTOP & MOBILE
 * @type {ScrollManager}
 * @created 2023-03-10
-* @updated 2023-03-13
+* @updated 2023-03-16
 * @file scroll.js
 * @version 0.0.4
 */
 
 // Custom dependencies.
 import {listenLoadEvent} from "../browser/browser.js";
 
+/**
+ * @description Calculates and returns the
+ *  scroll bar progress in percentage.
+ * @param {boolean} useInnerHeight Whether
+ *  we want to compute values with window
+ *  inner height. 
+ * @function getScrollPercent
+ * @public
+ * @returns {Number} Number
+ */
+function getScrollPercent (useInnerHeight) {
+  // The document height size.
+  const height = document.body.offsetHeight;
+  // The current scroll y axis.
+  const scrollY = (
+    window.scrollY + (useInnerHeight ? window.innerHeight : 0)
+  );
+  // Sends scroll progress in percentage.
+  return ((scrollY * 100) / height);
+}
+
 /**
  * @description Stops an auto scrolling
  *  process initialized previously.
@@ -69,31 +90,6 @@ function scrollTo (id) {
   }
 }
 
-/**
- * @description Calculates and
- * 	returns the scroll bar
- * 	progress in percentage.
- * @function getScrollPercent
- * @public
- * @returns {Number} Number
- */
-function getScrollPercent () {
-  // The current scroll y axis.
-  const scrollY = (
-    Math.round (window.scrollY)
-      + window.innerHeight
-  );
-  // The document height size.
-  const height = (
-    document.body.offsetHeight
-  );
-  // Returns the current progress
-  // in percentage.
-  return Math.round (
-    (scrollY * 100) / height
-  );
-}
-
 /**
  * @description Scrolls to multiple
  *  passed elements regardless a

diff --git a/src/home/components/banner/_banner.scss b/src/home/components/banner/_banner.scss
@@ -4,7 +4,7 @@
 * @fileoverview: Banner section stylesheets.
 * @supported: DESKTOP & MOBILE
 * @created: 2024-03-05
-* @updated: 2024-03-14
+* @updated: 2024-03-16
 * @file: banner.scss
 * @version: 0.0.4
 */
@@ -108,8 +108,9 @@ div.banner-left-part {
 
 // Download options.
 div.banner-downloads {
-  display: inline-flex;
+  flex-direction: row;
   column-gap: 16px;
+  display: flex;
   // From 620 to 326.
   @media #{$banner-620} {
     justify-content: center;
@@ -118,6 +119,7 @@ div.banner-downloads {
   // From 326 to 0.
   @media #{$banner-326} {
     flex-direction: column;
+    align-items: center;
     row-gap: 16px;
   }
   // Button links.
@@ -130,7 +132,7 @@ div.banner-downloads {
     cursor: pointer;
     // From 326 to 0.
     @media #{$banner-326} {
-      width: 100%;
+      width: 132px;
     }
     // Hover.
     &:hover {
@@ -147,14 +149,6 @@ div.banner-downloads {
     border-top-right-radius: 6px;
     margin-left: 10px;
   }
-  // Left and right icons.
-  a > div:nth-child(1) > img, a > div:nth-child(3) > img {
-    // From 812 to 0.
-    @media #{$banner-812} {
-      height: 16px;
-      width: 16px;
-    }
-  }
   // Top text.
   a > div:nth-child(2) > span:nth-child(1) {
     color: $banner-btn-border-color;

diff --git a/src/home/components/header/header.jsx b/src/home/components/header/header.jsx
@@ -4,7 +4,7 @@
 * @fileoverview The header view section.
 * @supported DESKTOP & MOBILE
 *	@created 2024-03-04
-*	@updated 2024-03-13
+*	@updated 2024-03-16
 *	@file header.jsx
 *	@version 0.0.5
 */
@@ -63,9 +63,9 @@ export default React.forwardRef(({onOptionClicked, onDownload}, ref) => {
     // The header tag.
     const header = document.querySelector("header.header");
     // The color opacity.
-    let opacity = ((getScrollPercent() - 30) / 20);
+    let opacity = (getScrollPercent(false) / 10);
     // Corrects generated opacity.
-    opacity = (opacity > 1.0 ? 1.0 : opacity);
+    opacity = (opacity > 1.0 ? 1.0 : (opacity < 0.0 ? 0.0 : opacity));
     // Updates header background color.
     header.style.backgroundColor = `rgba(26, 86, 48, ${opacity})`;
     // Whether we have an opacity.