diff --git a/src/App.svelte b/src/App.svelte index ce244d0..0eb34ba 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -2,9 +2,12 @@ import WeAreText from './lib/WeAreText.svelte' import { Parallax, ParallaxLayer, StickyLayer } from 'svelte-parallax'; import { onMount } from "svelte"; + import ZSpacer from './lib/Universal/ZSpacer.svelte'; + import planeImg from './images/PlaneGrid.png'; window.onload = function() { - window.scrollTo(0, 100); + //window.scrollTo(0, 100); + window.scrollTo(0, 5500); // Debug } // Auto assigned fields (Will change after load) @@ -14,10 +17,11 @@ const handleProgress = (progress) => { parallaxProgress = progress; }; - - + function debugClick(){ } + + let weAreTexts: string[] = ['overlooked', 'underfunded', 'constrained', 'depleated']; @@ -35,28 +39,43 @@ sections={10} config={{stiffness: 0.2, damping: 0.3}} > - + - +
{scrollPos}
- - - + {#each weAreTexts as text, i} + {@const stickyOffset = 0.65} + {@const stickyInterval = 1} + {@const stickyDuration = 0.5} - -
+ +
+ {text} +
+
+ {/each} + + +
The deprived devs
+ + + + diff --git a/src/app.css b/src/app.css index e09e940..dfd3a34 100644 --- a/src/app.css +++ b/src/app.css @@ -18,23 +18,6 @@ body { margin: 0; } -.typewriter h1 { - overflow: hidden; /* Ensures the content is not revealed until the animation */ - border-right: .15em solid orange; /* The typwriter cursor */ - white-space: nowrap; /* Keeps the content on a single line */ - margin: 0 auto; /* Gives that scrolling effect as the typing happens */ - letter-spacing: .15em; /* Adjust as needed */ - animation: - typing 3.5s steps(40, end), - blink-caret .75s step-end infinite; -} - -/* The typing effect */ -@keyframes typing { - from { width: 0 } - to { width: 100% } -} - /* Add a black background color to the top navigation */ .topnav { background-color: #333; @@ -68,10 +51,6 @@ body { justify-content: flex-start; } -.big-text { - font-size: 125px; -} - .no-wrap { text-wrap: nowrap; white-space: nowrap; @@ -81,10 +60,37 @@ body { pointer-events: none; } +.yes-interact { + pointer-events: all; +} + .hide{ visibility: hidden; } +.parallax-layer { + pointer-events: none; +} + +.parallax-layer * { + pointer-events: all; +} + +.sticky-layer { + pointer-events: none; +} + +.sticky-layer * { + pointer-events: all; +} + +@font-face { + font-family: 'CozetteVector'; + font-style: normal; + font-weight: 400; + src: url('./static/CozetteVector.ttf') format('truetype'); +} + /* ================================================ */ /* Aligning */ /* ================================================ */ @@ -92,6 +98,7 @@ body { align-content: center; align-items: center; justify-content: center; + vertical-align: middle; display: flex; text-align: center; vertical-align: middle; diff --git a/src/images/PlaneGrid.png b/src/images/PlaneGrid.png new file mode 100644 index 0000000..4783ff8 Binary files /dev/null and b/src/images/PlaneGrid.png differ diff --git a/src/lib/WeAreText.svelte b/src/lib/WeAreText.svelte index 8a67d9f..0faeacc 100644 --- a/src/lib/WeAreText.svelte +++ b/src/lib/WeAreText.svelte @@ -2,26 +2,21 @@ import ZSpacer from "./Universal/ZSpacer.svelte"; -
-
-
+
+
We are
-
\ No newline at end of file diff --git a/src/static/CozetteVector.ttf b/src/static/CozetteVector.ttf new file mode 100644 index 0000000..067e82d Binary files /dev/null and b/src/static/CozetteVector.ttf differ