wip: 2024-08-17T12:18:04+0200 (1723889884)

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);
 }
 

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 {
+section.waves img {
-	width: calc(100% + var(--wavelength));
+	margin: auto;
-	object-fit: cover;
+	height: 170%;
-	animation: waves 9s linear infinite;
+	transform-origin: 50% 100%;
+	animation: ship 6s alternate infinite ease;
 }
 
-@keyframes waves {
+@keyframes ship {
-	to {
+	0% {
-		transform: translateX(calc((var(--wavelength) * 2) * -1));
+		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;
 }

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));
 }

public/assets/media/waves/0.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 800"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="hsla(0, 0%, 100%, 1.00)" offset="0%"/><stop stop-color="#0080ffff" offset="100%"/></linearGradient></defs><path d="M0 337.466q257.143 228.65 342.857-43.026Q600 484.322 685.714 363.274q257.143 161.704 342.857-60.051 257.143 316.379 342.858 74.764 257.142 112.31 342.857-47.243 257.143 197.325 342.857-40.287Q2314.286 461.742 2400 375.936V800H0V336.499Z" transform="translate(0 54.771)" opacity="NaN" fill="url(#a)"/></svg>

public/assets/media/waves/1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 800"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="hsla(0, 0%, 100%, 1.00)" offset="0%"/><stop stop-color="#0080ffff" offset="100%"/></linearGradient></defs><g fill="url(#a)" transform="translate(0 -115.971)"><path d="M0 433.06q257.143 284.425 342.857-74.118Q600 625.662 685.714 451.544q257.143 210.104 342.857-21.634 257.143 308.024 342.858-37.478Q1628.57 706.827 1714.286 398q257.143 309.153 342.857-3.915Q2314.286 730.111 2400 442.904V891H0V404.337Z" opacity=".05"/><path d="M0 524.06q257.143 284.425 342.857-74.118Q600 716.662 685.714 542.544q257.143 210.104 342.857-21.634 257.143 308.024 342.858-37.478Q1628.57 797.827 1714.286 489q257.143 309.153 342.857-3.915Q2314.286 821.111 2400 533.904V982H0V495.337Z" opacity=".53"/><path d="M0 615.06q257.143 284.425 342.857-74.118Q600 807.662 685.714 633.544q257.143 210.104 342.857-21.634 257.143 308.024 342.858-37.478Q1628.57 888.827 1714.286 580q257.143 309.153 342.857-3.915Q2314.286 912.111 2400 624.904V1073H0V586.337Z"/></g></svg>

public/assets/media/waves/waves.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 621.59 97.944" xmlns="http://www.w3.org/2000/svg"><path d="M0 203.768v-32.404l7.208-.59c3.964-.325 10.76-1.708 15.1-3.074 4.342-1.365 11.812-4.564 16.602-7.108 4.79-2.544 13.426-7.179 19.191-10.3 5.766-3.121 13.93-6.716 18.142-7.99 4.213-1.273 10.432-2.71 13.82-3.191 3.388-.483 9.005-.88 12.482-.885 3.476-.005 10.328.574 15.226 1.287 5.48.797 12.502 2.739 18.261 5.048 5.146 2.064 15.046 6.99 22 10.946 6.953 3.957 15.854 8.477 19.78 10.046 3.927 1.57 10.833 3.516 15.347 4.326 5.691 1.021 11.152 1.343 17.808 1.049 6.889-.305 12.075-1.18 18.367-3.098 5.556-1.695 15.454-6.36 27.028-12.737 11.406-6.285 21.48-11.042 26.833-12.67 4.714-1.435 12.774-3.053 17.91-3.596 6.985-.739 11.693-.739 18.678 0 5.136.543 13.196 2.16 17.91 3.595 5.353 1.629 15.427 6.386 26.833 12.67 11.289 6.221 21.51 11.054 26.769 12.659 5.918 1.805 11.498 2.75 18.334 3.104 7.144.37 12.078.105 18.068-.97 4.531-.814 11.452-2.754 15.378-4.312 3.926-1.558 13.372-6.35 20.99-10.647 7.618-4.297 17.245-9.083 21.394-10.635 4.15-1.552 10.243-3.44 13.542-4.194 3.957-.906 10.537-1.363 19.342-1.346 10.435.021 14.988.441 20.88 1.928 4.144 1.045 10.329 3.087 13.744 4.538 3.416 1.45 11.087 5.438 17.048 8.861 5.961 3.423 13.47 7.499 16.687 9.056 3.218 1.557 9.539 3.899 14.048 5.202 7.028 2.033 10.002 2.37 20.84 2.37v65.464H0Z" style="fill:#fff;fill-opacity:1;stroke-width:1" transform="translate(0 -138.226)"/></svg>

public/index.php

@@ -7,13 +7,23 @@
 			<p>that handles navigation and routing, and nothing else</p>
 		</div>
 	</container>
-	<div class="waves">
-		<img src="assets/media/waves/waves.svg">
-	</div>
 </section>
-<section id="example">
+<section class="waves">
-	<container>
+	<div class="wave"></div>
-		<h1>Freedom to CREATE</h1>
+	<container class="split">
+		<div>&nbsp;</div>
+		<img src="assets/media/waves/shiponastick.svg">
+	</container>
+	<div class="wave"></div>
+</section>
+<section id="byoe">
+	<container class="split">
+		<?= VV::embed("public/assets/media/byoe.svg") ?>
+		<div>
+			<h1>TypeScript, Bootstrap, something else?</h1>
+			<p>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.</p>
+			<h2>Bring-Your-Own-Experience</h2>
+		</div>
 	</container>
 </section>
 <script><?= VV::js("public/assets/js/pages/index.js") ?></script>

public/why.php

@@ -1,35 +1,11 @@
 <style><?= VV::css("public/assets/css/pages/why.css") ?></style>
-<section class="title">
+<section id="freedom">
-	<container>
-		<div>
-			<h1>Load what's needed and change what needs to change</h1>
-		</div>
-	</container>
-</section>
-<section class="text">
 	<container class="split">
-		<div>
+		<img src="/assets/media/why-gnu.svg">
-			<p>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.</p>
-			<p>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?</p>
-			<p>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.</p>
-		</div>
-	</container>
-</section>
-<section id="free" class="title">
-	<container>
-		<?= VV::embed("public/assets/media/why-gnu.svg") ?>
 		<div>
 			<h1>It's a GNU!</h1>
-			<h2>Vegvisir is and will always be free software.</h2>
+			<h2>A framework that respects your freedom</h2>
-		</div>
+			<p>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.</p>
-	</container>
-</section>
-<section class="text">
-	<container class="split">
-		<div>
-			<h2>Free as in freedom</h2>
-			<p>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.</p>
-			<p>Vegvisir is licensed under GNU GPL v3 (or newer) and that will never change.</p>
 		</div>
 	</container>
 </section>