wip: 2024-08-22T13:34:46+0200 (1724326486)

public/assets/css/document.css

@@ -84,6 +84,10 @@ container.split {
 	grid-template-columns: repeat(2, 1fr);
 }
 
+container.split.reverse div:last-child {
+	order: -1;
+}
+
 container.split > div {
 	display: flex;
 	flex-direction: column;
@@ -91,11 +95,6 @@ container.split > div {
 	gap: var(--padding);
 }
 
-container.split > div:first-child {
-	align-items: baseline;
-	justify-content: center;
-}
-
 /* ## Button */
 
 button {

public/assets/css/pages/index.css

@@ -6,10 +6,6 @@ body {
 	background-color: var(--color-deep);
 }
 
-section h1 {
-	font-size: 50px;
-}
-
 section h2 {
 	color: white;
 	background-color: black;
@@ -41,6 +37,10 @@ section#intro {
 	min-height: 300px;
 }
 
+section#intro h1 {
+	font-size: 50px;
+}
+
 section#intro div {
 	display: flex;
 	flex-direction: column;
@@ -55,14 +55,15 @@ section.waves {
 
 	position: relative;
 	height: 300px;
-	margin-top: -100px;
 	user-select: none;
 	pointer-events: none;
+	z-index: -1;
 }
 
 section.waves img {
 	margin: auto;
-	height: 170%;
+	margin-top: -15%;
+	height: 190%;
 	transform-origin: 50% 100%;
 	animation: ship 6s alternate infinite ease;
 }
@@ -82,7 +83,7 @@ section.waves .wave {
 	width: 100%;
 	height: 100%;
 	transform: scale(1.5);
-	bottom: 0;
+	bottom: 70px;
 	animation: wave 7s alternate infinite cubic-bezier(var(--easing), 0, calc(1 - var(--easing)), 1);
 }
 
@@ -91,7 +92,7 @@ section.waves .wave {
 }
 
 section.waves + section {
-	margin-top: 50px;
+	background-color: #4ca6ff;
 }
 
 section.waves .wave:first-child {
@@ -105,21 +106,22 @@ section.waves .wave:last-child {
 
 /* ## BYOE */
 
-section#byoe {
+section.info {
 	background-color: white;
 }
 
-section#byoe container {
+section.info container {
-	min-height: 600px;
+	min-height: 500px;
 }
 
-section#byoe svg {
+section.info svg {
-	height: 500px;
+	justify-self: center;
+	width: 400px;
 }
 
-/* ## Example */
+/* ## Lead */
 
-section#example {
+section#lead h1 {
-	background-color: white;
+	color: white;
-	height: 700px;
+	font-weight: normal;
 }

public/assets/media/replace.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 180.663 62.67" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path style="fill:#0080ff;fill-opacity:1;stroke:none;stroke-width:3.96084;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" d="M147.956 81.213h69.902a5 5 45 0 1 5 5v60.775a5 5 135 0 1-5 5h-69.902a5 5 45 0 1-5-5V86.213a5 5 135 0 1 5-5z" transform="matrix(.53267 0 0 .53614 61.954 -25.021)"/><path style="fill:#0080ff;fill-opacity:1;stroke:none;stroke-width:3.96084;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" d="M147.956 81.213h69.902a5 5 45 0 1 5 5v60.775a5 5 135 0 1-5 5h-69.902a5 5 45 0 1-5-5V86.213a5 5 135 0 1 5-5z" transform="matrix(.53267 0 0 .53614 -50.268 -25.021)"/><path style="opacity:.164179;fill:#0080ff;fill-opacity:1;stroke:none;stroke-width:2.11667;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" d="M145.85 122.263h11.914a2 2 45 0 1 2 2v33.945a2 2 135 0 1-2 2H145.85a2 2 45 0 1-2-2v-33.945a2 2 135 0 1 2-2z" transform="translate(-137.588 -103.743)"/><path style="opacity:.164179;fill:#0080ff;fill-opacity:1;stroke:none;stroke-width:2.11667;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" d="M142.146 109.947h58.179a2 2 45 0 1 2 2v4.612a2 2 135 0 1-2 2h-58.18a2 2 45 0 1-2-2v-4.612a2 2 135 0 1 2-2z" transform="translate(-133.884 -103.743)"/><path style="opacity:1;fill:#0080ff;fill-opacity:.0941176;stroke:none;stroke-width:2.54323;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" d="M137.88 104.883h66.71a4 4 45 0 1 4 4v52.39a4 4 135 0 1-4 4h-66.71a4 4 45 0 1-4-4v-52.39a4 4 135 0 1 4-4z" transform="matrix(.9999 0 0 1.03777 -133.867 -108.844)"/><path style="opacity:.164179;fill:#0080ff;fill-opacity:1;stroke:none;stroke-width:1.78668;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" d="M216.777 139.26h33.331v3.952h-33.33z" transform="rotate(180 172.076 89.364)"/><path style="opacity:.164179;fill:#0080ff;fill-opacity:1;stroke:none;stroke-width:2.11667;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" d="m253.413 124.175-8.602 4.966a1.155 1.155 30 0 1-1.732-1v-9.933a1.155 1.155 150 0 1 1.732-1l8.602 4.967a1.155 1.155 90 0 1 0 2z" transform="matrix(-1.02203 0 0 -1.02544 342.479 163.8)"/></svg>

public/index.php

@@ -16,12 +16,36 @@
 	</container>
 	<div class="wave"></div>
 </section>
-<section id="byoe">
+<section id="lead">
+	<container>
+		<h1>This is a framework for building <strong>complete websites</strong> with automatic soft-navigation between pages that follow a traditional "multi-page" (MPA) file structure</h1>
+	</container>
+</section>
+<section id="softnav" class="info">
+	<container class="split reverse">
+		<?= VV::embed("public/assets/media/replace.svg") ?>
+		<div>
+			<h1>Soft-navigation by design</h1>
+			<p>Vegvisir will automatically soft-navigate between your pages. Dive deeper and fetch only the parts of your site that haven't been loaded yet with the help of shells.</p>
+		</div>
+	</container>
+</section>
+<section id="free" class="info">
+	<container class="split reverse">
+		<?= VV::embed("public/assets/media/replace.svg") ?>
+		<div>
+			<h1>Soft-navigation by design</h1>
+			<p>Vegvisir will automatically soft-navigate between your pages. Dive deeper and fetch only the parts of your site that haven't been loaded yet with the help of shells.</p>
+			<h2>Free as in -dom AND beer</h2>
+		</div>
+	</container>
+</section>
+<section id="byoe" class="info">
 	<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>
+			<p>No problem, Vegvisir's primary ethos is to not lock you down a specific paradigm. That is why Vegvisir will always 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>

public/why.php

@@ -1,11 +0,0 @@
-<style><?= VV::css("public/assets/css/pages/why.css") ?></style>
-<section id="freedom">
-	<container class="split">
-		<img src="/assets/media/why-gnu.svg">
-		<div>
-			<h1>It's a GNU!</h1>
-			<h2>A framework that respects your freedom</h2>
-			<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>
-		</div>
-	</container>
-</section>

shells/document.php

@@ -43,7 +43,6 @@
 			<a href="/"><?= VV::embed("public/assets/media/logo.svg") ?></a>
 			<ul>
 				<li><a href="/"><button><p>Vegvisir</p></button></a></li>
-				<li><a href="/why"><button><p>Why Vegvisir?</p></button></a></li>
 				<li><a href="/docs"><button><p>Documentation</p></button></a></li>
 				<li><a href="/demos"><button><p>Demos</p></button></a></li>
 				<li><a href="/help"><button><p>Need help?</p></button></a></li>