Add landing page mobile styles

cble-platform · Apr 24, 2024 · 683c931 · 683c931
1 parent d05cceb
commit 683c931
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 21 deletions.
diff --git a/overrides/assets/javascripts/hero.js b/overrides/assets/javascripts/hero.js
@@ -1,6 +1,10 @@
 // Max rotation
 const MAX_ROTATION = 20;
 
+function is_touch_enabled() {
+  return "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+}
+
 // Integrate with mkdocs instant loading
 document$.subscribe(function () {
   // Check light/dark mode
@@ -20,7 +24,7 @@ document$.subscribe(function () {
 
   heroContainer.onmousemove = (e) => {
     // Only run animation on large devices
-    if (window.innerWidth < 1220) return;
+    if (window.innerWidth < 1220 || is_touch_enabled()) return;
 
     let x = e.pageX;
     let y = e.pageY;

diff --git a/overrides/assets/stylesheets/custom/layout/hero.css b/overrides/assets/stylesheets/custom/layout/hero.css
@@ -19,7 +19,7 @@
 .cble-hero {
   height: calc(100dvh - 9em);
   width: 100%;
-  margin: 0 1rem;
+  /* margin: 0 1rem; */
   /* color: var(--md-primary-bg-color); */
   color: var(--md-typeset-color);
 }
@@ -61,27 +61,56 @@
   color: var(--md-primary-bg-color);
 }
 
-/* Button on focus/hover */
-/* .cble-hero .md-button:is(:focus, :hover) {
-  color: var(--md-accent-bg-color);
-  background-color: var(--md-accent-fg-color);
-  border-color: var(--md-accent-fg-color);
-} */
+@media screen and (max-width: 1220px) {
+  .cble-hero {
+    height: calc(100dvh - 3em);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-start;
+    padding: 2rem 5rem;
+  }
+
+  .cble-hero .cble-hero__image {
+    flex-grow: 1;
+    height: auto;
+    margin: 0 4rem;
+  }
+
+  .cble-hero .cble-hero__content {
+    padding-bottom: 0;
+  }
+}
+
+@media screen and (max-width: 960px) and (orientation: landscape) {
+  .cble-hero {
+    flex-direction: row;
+  }
 
-/* Primary button */
-/* .cble-hero .md-button--primary {
-  color: var(--md-accent-fg-color);
-  background-color: var(--md-primary-bg-color);
-  border-color: var(--md-primary-bg-color);
-} */
+  .cble-hero .cble-hero__image {
+    order: 1;
+    height: 100%;
+    margin: 0;
+    margin-left: 3rem;
+    /* display: none; */
+  }
+}
 
 @media screen and (max-width: 479px) {
+  .cble-hero {
+    padding: 2rem 1rem;
+  }
+
+  .cble-hero .cble-hero__image {
+    margin: 0;
+  }
+
   .cble-hero h1 {
     font-size: 1.75rem;
   }
 }
 
-@media screen and (min-width: 960px) {
+@media screen and (min-width: 1220px) {
   .cble-hero {
     display: flex;
     justify-content: space-between;
@@ -99,12 +128,6 @@
   }
 }
 
-/* @media screen and (min-width: 1220px) {
-  .cble-hero .cble-hero__image {
-    transform: translateX(10rem);
-  }
-} */
-
 /* 
 ///   $break-devices: (
 ///     mobile: (