+
+
+
-
\ No newline at end of file
diff --git a/src/index.yml b/src/index.yml
index 65fe897..24568db 100644
--- 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
index db28e0f..359a699 100644
--- 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 */
}
-}
\ No newline at end of file
+ 100% {
+ transform: translateX(-100%); /* Move completely off screen */
+ }
+}
+
+.curve-inner {
+ background-color: var(--base);
+ height: 100px;
+}