diff --git a/public/assets/css/document.css b/public/assets/css/document.css index 5f1da0f..c24ccd5 100644 --- a/public/assets/css/document.css +++ b/public/assets/css/document.css @@ -24,7 +24,6 @@ body { font-size: 15px; - min-height: 100svh; overflow-x: hidden; overscroll-behavior: none; } @@ -88,6 +87,7 @@ container.split { container.split > div { display: flex; flex-direction: column; + align-items: baseline; gap: var(--padding); } diff --git a/public/assets/css/pages/index.css b/public/assets/css/pages/index.css index 73c618c..ecc1c60 100644 --- a/public/assets/css/pages/index.css +++ b/public/assets/css/pages/index.css @@ -6,6 +6,15 @@ body { background-color: var(--color-deep); } +section h1 { + font-size: 50px; +} + +section h2 { + color: white; + background-color: black; +} + header.transparent { color: white; background-color: transparent; @@ -27,8 +36,9 @@ header.transparent button.solid { /* ## Intro */ section#intro { + display: grid; color: white; - height: 400px; + min-height: 300px; } section#intro div { @@ -38,37 +48,78 @@ section#intro div { align-items: baseline; } -section#intro h1 { - font-size: 50px; -} - -section#intro h2 { - background-color: black; -} - /* ### Waves */ -section#intro .waves { +section.waves { + --easing: .2; + position: relative; - z-index: -1; + height: 300px; + margin-top: -100px; + user-select: none; + pointer-events: none; } -section#intro .waves img { - width: calc(100% + var(--wavelength)); - object-fit: cover; - animation: waves 9s linear infinite; +section.waves img { + margin: auto; + height: 170%; + transform-origin: 50% 100%; + animation: ship 6s alternate infinite ease; } -@keyframes waves { - to { - transform: translateX(calc((var(--wavelength) * 2) * -1)); +@keyframes ship { + 0% { + transform: translate(0, -7px) rotate(-7deg); } + + 100% { + transform: translate(5px, 10px) rotate(4deg); + } +} + +section.waves .wave { + position: absolute; + width: 100%; + height: 100%; + transform: scale(1.5); + bottom: 0; + animation: wave 7s alternate infinite cubic-bezier(var(--easing), 0, calc(1 - var(--easing)), 1); +} + +@keyframes wave { + to { transform: scale(1.5) translateX(100px); } +} + +section.waves + section { + margin-top: 50px; +} + +section.waves .wave:first-child { + background-image: url("/assets/media/waves/0.svg"); +} + +section.waves .wave:last-child { + animation-duration: 5s; + background-image: url("/assets/media/waves/1.svg"); +} + +/* ## BYOE */ + +section#byoe { + background-color: white; +} + +section#byoe container { + min-height: 600px; +} + +section#byoe svg { + height: 500px; } /* ## Example */ section#example { - margin-top: calc(var(--wavelength) / 2); background-color: white; height: 700px; } \ No newline at end of file diff --git a/public/assets/css/pages/why.css b/public/assets/css/pages/why.css index 4b090fa..d2fded6 100644 --- a/public/assets/css/pages/why.css +++ b/public/assets/css/pages/why.css @@ -1,59 +1,15 @@ /* # Sections */ -/* ## Title */ - -section.title { - color: white; - padding: calc(var(--padding) * 2) 0; - align-items: center; - background-color: var(--color-deep); -} - -section.title container { - display: flex; - gap: 50px; -} - -section.title svg { - height: 150px; -} - -section.title container > div { - display: flex; - flex-direction: column; - gap: var(--padding); -} - -section.title h1 span { - text-decoration: underline; -} - -section.title h2 { - background-color: black; -} - -/* ## Text */ - -section.text { - min-height: 400px; - padding: calc(var(--padding) * 2) 0; -} - -section.text h2 { - color: white; - background-color: black; -} - /* ## Free */ -section#free { +section#freedom { background-position: 50% 50%; background-size: 400px; - background-color: red; + background-color: var(--color-deep); background-blend-mode: lighten; background-image: url("/assets/media/gnu.png"); } -section#free svg { +section#freedom svg { filter: drop-shadow(0 0 40px rgba(255, 255, 255, .3)); } \ No newline at end of file diff --git a/public/assets/media/byoe.svg b/public/assets/media/byoe.svg new file mode 100644 index 0000000..4039a24 --- /dev/null +++ b/public/assets/media/byoe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/media/waves/0.svg b/public/assets/media/waves/0.svg new file mode 100644 index 0000000..f16be57 --- /dev/null +++ b/public/assets/media/waves/0.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/media/waves/1.svg b/public/assets/media/waves/1.svg new file mode 100644 index 0000000..f4d4b33 --- /dev/null +++ b/public/assets/media/waves/1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/media/waves/shiponastick.svg b/public/assets/media/waves/shiponastick.svg new file mode 100644 index 0000000..fbfd6d1 --- /dev/null +++ b/public/assets/media/waves/shiponastick.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/media/waves/waves.svg b/public/assets/media/waves/waves.svg deleted file mode 100644 index 1f46bfa..0000000 --- a/public/assets/media/waves/waves.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/assets/media/why-gnu.svg b/public/assets/media/why-gnu.svg index a9adf30..3f27b51 100644 --- a/public/assets/media/why-gnu.svg +++ b/public/assets/media/why-gnu.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/index.php b/public/index.php index 08f3c00..40098a2 100644 --- a/public/index.php +++ b/public/index.php @@ -7,13 +7,23 @@

that handles navigation and routing, and nothing else

-
- -
-
- -

Freedom to CREATE

+
+
+ +
 
+ + +
+
+
+ + +
+

TypeScript, Bootstrap, something else?

+

No problem, Vegvisir's ethos is to not lock you down a specific paradigm. That is why Vegvisir will try to interfere as little as possible with how and with what you build your website by being as simple as possible.

+

Bring-Your-Own-Experience

+
\ No newline at end of file diff --git a/public/why.php b/public/why.php index bc95501..5515eb9 100644 --- a/public/why.php +++ b/public/why.php @@ -1,35 +1,11 @@ -
- -
-

Load what's needed and change what needs to change

-
- -
-
+
-
-

By loading what's needed and changing only what needs to change on a page, Vegvisir can compile a custom server-side rendered response body for each request depending on what the client already has loaded.

-

For example, why should the header on this page be loaded again when you navigate to another page on this site? Your browser has already fetched, compiled, and rendered everything needed to display it. And when you navigate to the documentation page, why should the documentation page inner "shell" be replaced when you navigate the documentation pages?

-

Each Vegvisir navigation request contains a list of all loaded shells, which the Vegvisir back-end uses to determine what content should be returned depending on what the client has already loaded.

-
- -
-
- - +

It's a GNU!

-

Vegvisir is and will always be free software.

-
- -
-
- -
-

Free as in freedom

-

Major PHP frameworks like Laravel, Symphony, and CakePHP are all licensed under the permissive MIT software license. These frameworks can and are being used today to develop proprietary software.

-

Vegvisir is licensed under GNU GPL v3 (or newer) and that will never change.

+

A framework that respects your freedom

+

The "big players" in PHP frameworks are all published under the permissive MIT-license. This legally enables those frameworks to be modified to develop proprietary malware.
\ No newline at end of file