diff --git a/src/_includes/layouts/home.vto b/src/_includes/layouts/home.vto index 7ac3f76..28eefce 100644 --- a/src/_includes/layouts/home.vto +++ b/src/_includes/layouts/home.vto @@ -7,10 +7,12 @@ page_stylesheet: home
-
-
+
+
+ +
-
+
\ 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; +}