add rotating earth feature

sammypanda · Dec 4, 2024 · 955a5e7 · 955a5e7
1 parent d8d00eb
commit 955a5e7
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 13 deletions.
diff --git a/src/_includes/layouts/home.vto b/src/_includes/layouts/home.vto
@@ -7,10 +7,12 @@ page_stylesheet: home
 <div class="starry-hero">
 </div>
 
-<div class="earth-body">
-    <div class="earth-cap">
+<div class="curve-body">
+    <div class="curve-cap">
+        <img src="{{ curve }}" inline/>
+        <img src="{{ curve }}" class="curve-duplicate" inline/>
     </div>
 
-    <div class="earthy-inner">
+    <div class="curve-inner">
     </div>
 </div>
diff --git a/src/index.yml b/src/index.yml
@@ -1,6 +1,7 @@
 layout: layouts/home.vto
 title: Femboys Australia
 logo: /img/logo.png
+curve: /img/background/planet.svg
 
 # quicks are small buttons that link to external things
 quicks:

diff --git a/src/styles/pages/home.scss b/src/styles/pages/home.scss
@@ -12,19 +12,45 @@ body {
     height: 60vh;
 }
 
-.earth-body {
+.curve-body {
     background-color: var(--background);
     height: 20vh;
+}
+
+.curve-cap {
+    background-color: var(--base);
+    height: 20vh;  /* Container height */
+    width: 100%;   /* Full width of the parent container */
+    border-color: #000 transparent transparent transparent;
+    border-radius: 80%/200px 200px 0 0;
+    overflow: hidden;
+    display: flex; /* Make sure both SVGs are side by side */
+    position: relative; /* Position relative to allow absolute positioning for the duplicate */
+
+    svg {
+        width: 100%; /* Ensure SVG takes full width of the container */
+        // height: 100%; /* Ensure SVG takes full height of the container */
+        object-fit: cover; /* Ensure the SVG scales properly without distorting */
+        animation: scroll 120s linear infinite; /* Adjust the speed of the scroll */
+        transform-origin: center center; /* Keep the transform around the center */
+        position: absolute;
+    }
 
-    .earth-cap {
-        background-color: var(--base);
-        height: 20vh;
-        border-color: #000 transparent transparent transparent;
-        border-radius: 80%/200px 200px 0 0;
+    .curve-duplicate {
+        left: 100%; /* Start the duplicate right after the first SVG */
     }
+}
 
-    .earth-inner {
-        background-color: var(--base);
-        height: 100px;
+@keyframes scroll {
+    0% {
+        transform: translateX(0); /* Start from the initial position */
     }
-}
+    100% {
+        transform: translateX(-100%); /* Move completely off screen */
+    }
+}
+
+.curve-inner {
+    background-color: var(--base);
+    height: 100px;
+}