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

modules/docs/contribute/style.css

@@ -1,15 +1,29 @@
 section.contribute {
+	grid-area: contribute;
+	width: 100%;
 	background-color: rgba(var(--primer-color-deep), .1);
 }
 
 section.contribute container {
+	justify-content: center;
 	flex-direction: column;
 }
 
 section.contribute ul {
 	display: flex;
-	padding-left: 0;
 	padding: var(--padding);
 	list-style: none;
 	gap: var(--padding);
+}
+
+/* # Size queries */
+
+@media (max-width: 950px) {
+	section.contribute ul {
+		flex-direction: column;
+	}
+
+	section.contribute button {
+		width: 100%;
+	}
 }

public/assets/css/document.css

@@ -4,8 +4,8 @@
 	--color-deep: rgba(var(--primer-color-deep));
 	--color-light: rgba(var(--primer-color-light));
 
-	--border-style-width: 3px;
+	--border-style-width: 1px;
-	--border-style: solid var(--border-style-width) rgba(var(--primer-color-deep), .1);
+	--border-style: solid var(--border-style-width) rgba(var(--primer-color-deep), .2);
 
     --padding: 10px;
 	--running-size: 70px;
@@ -28,6 +28,10 @@ body {
     overscroll-behavior: none;
 }
 
+body.menuOpen {
+	overflow: hidden;
+}
+
 a {
 	color: inherit;
     display: contents;
@@ -71,8 +75,7 @@ container {
 	margin: auto;
 	height: 100%;
 	display: flex;
-	min-width: 900px;
+	width: clamp(200px, 100%, 80vw);
-	width: clamp(900px, 100%, 80vw);
 	max-width: var(--max-width);
 	align-items: center;
 	gap: var(--padding);
@@ -99,13 +102,16 @@ container.split > div {
 
 button {
 	border: unset;
+	fill: black;
 	cursor: pointer;
 	padding: 10px 15px;
 	border-radius: 4px;
 	background-color: rgba(0, 0, 0, 0);
+	border: solid var(--border-style-width) transparent;
 }
 
 button.solid {
+	fill: white;
 	color: white;
 	background-color: var(--color-deep);
 }
@@ -116,7 +122,7 @@ button.shade {
 
 @media (hover: hover) {
 	button:hover {
-		background-color: rgba(0, 0, 0, .05);
+		background-color: rgba(var(--primer-color-light), .3);
 	}
 
 	button.solid:hover {
@@ -125,6 +131,11 @@ button.shade {
 	}
 }
 
+button svg {
+	fill: inherit;
+	width: 1em;
+}
+
 /* # Content */
 
 /* ## Runners */
@@ -136,7 +147,12 @@ button.shade {
 	gap: var(--padding);
 }
 
-:is(header, footer) ul:last-child {
+:is(header, footer) ul:last-of-type {
+	margin-left: auto;
+}
+
+:is(header, footer) container > button {
+	display: none;
 	margin-left: auto;
 }
 
@@ -160,12 +176,14 @@ header .logo {
 	background-color: var(--color-deep);
 }
 
+[vv-top-page="/"] header:not(.transparent) a[href="/"] button,
 [vv-top-page="/help"] header a[href="/help"] button,
 [vv-top-page^="/docs"] header a[href="/docs"] button,
 [vv-top-page="/demos"] header a[href="/demos"] button,
 [vv-top-page="/why"] header a[href="/why"] button {
 	font-weight: bold;
-	background-color: rgba(0, 0, 0, .05);
+	color: var(--color-deep);
+	border: var(--border-style);
 }
 
 /* ### Footer */
@@ -174,4 +192,76 @@ footer {
 	padding: var(--padding);
 	color: var(--color-light);
 	background-color: var(--color-deep);
+}
+
+/* ### Menu */
+
+menu {
+	display: none;
+	position: fixed;
+	top: var(--running-size);
+	left: 0;
+	width: 100svw;
+	padding: calc(var(--padding) * 2);
+	height: calc(100svh - var(--running-size));
+	background-color: var(--color-deep);
+}
+
+body.menuOpen menu {
+	display: initial;
+}
+
+menu ul {
+	list-style: none;
+	padding-left: unset;
+}
+
+menu button {
+	color: white;
+	width: 100%;
+	margin-top: var(--padding);
+}
+
+/* # Size queries */
+
+@media (max-width: 950px) {
+	container {
+		min-width: unset;
+		width: 100%;
+		padding: calc(var(--padding) * 2);
+	}
+
+	container.split {
+		display: flex;
+		flex-direction: column;
+	}
+
+	container.split.reverse {
+		flex-direction: column-reverse;
+	}
+
+	header ul button.solid,
+	:is(header, footer) ul:not(:last-of-type) {
+		display: none;
+	}
+
+	:is(header, footer) container > button {
+		display: initial;
+	}
+
+	footer :is(container, ul) {
+		flex-direction: column;
+	}
+
+	footer button,
+	footer ul:last-of-type {
+		width: 100%;
+		margin-left: unset;
+	}
+}
+
+@media (min-width: 950px) {
+	body.menuOpen menu {
+		display: none;
+	}
 }

public/assets/css/pages/demos.css

@@ -0,0 +1,26 @@
+/* # WIP */
+
+section#wip {
+	background-color: rgba(var(--primer-color-light), .3);
+}
+
+section#wip container {
+	flex-direction: column;
+	gap: var(--padding);
+}
+
+/* # Websites */
+
+section#websites container {
+	flex-direction: column;
+}
+
+section#websites ul {
+	list-style: none;
+	padding-left: unset;
+}
+
+section#websites button {
+	margin-top: var(--padding);
+	width: 100%;
+}

public/assets/css/pages/index.css

@@ -19,16 +19,40 @@ header.transparent {
 
 header.transparent .logo {
 	fill: var(--color-deep);
-	background-color: white;
+}
+
+header.transparent button {
+	fill: white;
 }
 
 header.transparent button.solid {
+	fill: var(--color-deep);
 	color: var(--color-deep);
 	background-color: white;
 }
 
 /* # Sections */
 
+/* ## Divider */
+
+section.divider {
+    width: 100%;
+    overflow: hidden;
+    line-height: 0;
+	background-color: white;
+}
+
+section.divider svg {
+    position: relative;
+    display: block;
+    width: calc(148% + 1.3px);
+    height: 79px;
+}
+
+section.divider .shape-fill {
+    fill: var(--color-deep);
+}
+
 /* ## Intro */
 
 section#intro {
@@ -62,8 +86,8 @@ section.waves {
 
 section.waves img {
 	margin: auto;
-	margin-top: -15%;
+	margin-top: -14%;
-	height: 190%;
+	width: 50%;
 	transform-origin: 50% 100%;
 	animation: ship 6s alternate infinite ease;
 }
@@ -104,6 +128,13 @@ section.waves .wave:last-child {
 	background-image: url("/assets/media/waves/1.svg");
 }
 
+/* ## Softnav */
+
+section#softnav {
+	color: white;
+	background: linear-gradient(0deg, rgba(0,128,255,1) 0%, rgba(76,166,255,1) 100%);
+}
+
 /* ## BYOE */
 
 section.info {
@@ -111,7 +142,7 @@ section.info {
 }
 
 section.info container {
-	min-height: 500px;
+	min-height: 400px;
 }
 
 section.info svg {
@@ -123,5 +154,35 @@ section.info svg {
 
 section#lead h1 {
 	color: white;
+	text-align: center;
 	font-weight: normal;
+}
+
+/* ## Free */
+
+section#free {
+	box-shadow: inset 0 0 20px 20px white, inset 0 0 140px 20px white;
+	background-color: rgba(255, 255, 255, .9);
+	background-blend-mode: screen;
+	background-image: url("/assets/media/gnu.png");
+}
+
+/* # Size queries */
+
+@media (max-width: 950px) {
+	section.waves {
+		display: none;
+	}
+
+	section.info container {
+		min-height: unset;
+	}
+
+	section.info svg {
+		width: 300px;
+	}
+
+	section#lead h1 {
+		font-size: 20px;
+	}
 }

public/assets/css/shells/docs.css

@@ -5,17 +5,23 @@ body {
 [vv-shell-id="/"] {
 	display: grid;
 	min-height: calc(100svh - var(--running-size) - var(--border-style-width));
+	grid-template-areas:
+		"aside main"
+		"contribute contribute"
+	;
 	grid-template-columns: 400px 1fr;
-	max-width: var(--max-width);
+	grid-template-rows: 1fr 200px;
 	gap: calc(var(--padding) * 2);
 	margin: auto;
 }
 
 [vv-shell-id="6ccb0465"] {
+	grid-area: main;
 	display: flex;
 	flex-direction: column;
 	gap: calc(var(--padding) * 2);
 	margin-top: calc(var(--padding) * 2);
+	padding-right: calc(var(--padding) * 2);
 }
 
 hr {
@@ -26,20 +32,22 @@ hr {
 /* # Aside */
 
 aside {
+	grid-area: aside;
 	height: 100%;
 	display: flex;
 	flex-direction: column;
 	padding: var(--padding) 0;
+	padding-left: calc(var(--padding) * 2);
 	border-right: var(--border-style);
 }
 
 aside button {
-	width: calc(100% - var(--padding));
+	width: calc(100% - (var(--padding) * 2));
 	text-align: left;
 }
 
 aside hr {
-	margin: var(--padding) 0;
+	margin: calc(var(--padding) * 2) 0;
 }
 
 aside ul {
@@ -156,7 +164,9 @@ code.tag::after {
 
 section.md pre {
 	width: 100%;
+	max-width: calc(100svw - (var(--padding) * 4));
 	tab-size: 3;
+	overflow: scroll;
 }
 
 section.md pre code {
@@ -164,6 +174,7 @@ section.md pre code {
 	--copy-inset: 5px;
 	--copy-border-size: 1px;
 
+	overflow: scroll;
 	position: relative;
 	padding-right: calc(var(--copy-size) + (var(--copy-inset) * 2) + var(--padding));
 	border-radius: 6px;
@@ -201,4 +212,63 @@ section.md pre code::after {
 		border: solid 1px rgba(255, 255, 255, .3);
 		background-color: rgba(255, 255, 255, .2);
 	}
+}
+
+/* ## Menu */
+
+section.menu {
+	display: none;
+	fill: white;
+	color: white;
+	grid-area: menu;
+	cursor: pointer;
+	background-color: rgba(var(--primer-color-deep), .8);
+}
+
+section.menu container svg {
+	width: 1em;
+}
+
+section.menu p::before {
+	content: "Open ";
+}
+
+/* # Size queries */
+
+@media (max-width: 950px) {
+	[vv-shell-id="/"] {
+		grid-template-areas:
+			"menu"
+			"main"
+			"contribute"
+		;
+		grid-template-columns: 1fr;
+		grid-template-rows: var(--running-size) 1fr 300px;
+	}
+
+	body.docsMenuOpen [vv-shell-id="/"] {
+		grid-template-areas:
+			"menu"
+			"aside"
+		;
+		grid-template-rows: var(--running-size) 1fr;
+	}
+
+	body.docsMenuOpen [vv-shell-id="6ccb0465"],
+	body.docsMenuOpen section.contribute,
+	body:not(.docsMenuOpen) aside {
+		display: none;
+	}
+
+	/* ---- */
+	
+	[vv-shell-id="6ccb0465"] {
+		margin-top: unset;
+	}
+
+	/* ---- */
+
+	section.menu {
+		display: initial;
+	}
 }

public/assets/js/shells/docs.js

@@ -0,0 +1,9 @@
+// Handle docs menu open/close
+{
+	const CLASSNAME_DOCS_MENU_OPEN = "docsMenuOpen";
+
+	// Toggle docs menu on button click
+	document.querySelector("section.menu").addEventListener("click", () => document.body.classList.toggle(CLASSNAME_DOCS_MENU_OPEN));
+	// Hide docs menu on navigation
+	document.addEventListener(vegvisir.Navigation.EVENTS.STARTED, () => document.body.classList.remove(CLASSNAME_DOCS_MENU_OPEN));
+}

public/assets/js/shells/document.js

@@ -0,0 +1,9 @@
+// Handle global menu open/close events
+{
+	const CLASSNAME_MENU_OPEN = "menuOpen";
+	
+	// Toggle menu on menu button click
+	document.querySelector("header .menuToggle").addEventListener("click", () => document.body.classList.toggle(CLASSNAME_MENU_OPEN));
+	// Close menu on navigation
+	document.addEventListener(vegvisir.Navigation.EVENTS.STARTED, () => document.body.classList.remove(CLASSNAME_MENU_OPEN));
+}

public/assets/media/icons/codeberg.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 85.495 82.004" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.14 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467 4.416 16.553a12 12 0 0 0 5.137-4.213z" transform="matrix(3.56228 0 0 3.56228 0 -1.745)"/></svg>

public/assets/media/icons/email.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 5.292 4.233" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160Zm320-280L160-640v400h640v-400zm0-80 320-200H160ZM160-640v-80 480z" transform="matrix(.00661 0 0 .00661 -.53 5.292)"/></svg>

public/assets/media/icons/matrix.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 8.467 8.467" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-71.169 -138.242)"><g transform="matrix(.26458 0 0 .26458 71.169 138.242)"><path d="M30 2v28h-3v2h5V0h-5v2z"/><path d="M9.952 10.594v1.544h.044a4.461 4.461 0 0 1 1.487-1.368c.58-.323 1.245-.485 1.993-.485.72 0 1.377.14 1.972.42.595.279 1.047.771 1.355 1.477.338-.5.796-.941 1.377-1.323.58-.383 1.266-.574 2.06-.574.602 0 1.16.074 1.674.22.514.148.954.383 1.322.707.366.323.653.746.859 1.268.205.522.308 1.15.308 1.887V22h-3.127v-6.464c0-.383-.016-.743-.044-1.082a2.302 2.302 0 0 0-.242-.882 1.473 1.473 0 0 0-.584-.596c-.257-.146-.606-.22-1.047-.22-.44 0-.796.085-1.068.253-.272.17-.485.39-.64.662-.159.287-.263.602-.307.927a7.074 7.074 0 0 0-.078 1.048V22h-3.128v-6.398c0-.338-.008-.673-.022-1.004a2.825 2.825 0 0 0-.188-.916 1.411 1.411 0 0 0-.55-.673c-.258-.168-.636-.253-1.135-.253a2.328 2.328 0 0 0-.584.1 1.94 1.94 0 0 0-.705.374c-.228.184-.422.449-.584.794-.16.346-.242.798-.242 1.357V22H7V10.59Z"/><path d="M2 2v28h3v2H0V0h5v2z"/></g></g></svg>

public/assets/media/icons/menu.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 4.762 3.175" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M120-240v-80h720v80zm0-200v-80h720v80zm0-200v-80h720v80z" transform="matrix(.00661 0 0 .00661 -.794 4.763)"/></svg>

public/assets/media/logo.svg

@@ -1 +1 @@
-<svg class="logo" viewBox="0 0 42.911 41.957" xmlns="http://www.w3.org/2000/svg"><g style="fill:#87ffff;fill-opacity:1"><g fill="none" style="fill:#87ffff;fill-opacity:1"><path class="solid" d="M12 22 0 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(-.95357 0 0 -.95357 33.375 20.979)"/><path class="stroke" d="M12 17.823 20.63 2H3.37L12 17.823M12 22 0 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(-.95357 0 0 -.95357 33.375 20.979)"/></g><g fill="none" style="fill:#87ffff;fill-opacity:1"><path class="solid" d="M12 22 0 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(.95357 0 0 .95357 10.49 20.979)"/><path class="stroke" d="M12 17.823 20.63 2H3.37L12 17.823M12 22 0 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(.95357 0 0 .95357 10.49 20.979)"/></g><g opacity=".5" style="fill:#87ffff;fill-opacity:1"><path class="solid" d="M24 22 12 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="scale(.95357) rotate(90 12 10)"/><path class="stroke" d="M24 17.823 32.63 2H15.37L24 17.823M24 22 12 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="scale(.95357) rotate(90 12 10)"/></g><g opacity=".5" style="fill:#87ffff;fill-opacity:1"><path class="solid" d="M24 22 12 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(0 -.95357 .95357 0 21.932 43.864)"/><path class="stroke" d="M24 17.823 32.63 2H15.37L24 17.823M24 22 12 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(0 -.95357 .95357 0 21.932 43.864)"/></g></g></svg>
+<svg class="logo" viewBox="0 0 42.911 41.957" xmlns="http://www.w3.org/2000/svg"><g><path class="solid" d="M12 22 0 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(-.95357 0 0 -.95357 33.375 20.979)"/><path class="stroke" d="M12 17.823 20.63 2H3.37L12 17.823M12 22 0 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(-.95357 0 0 -.95357 33.375 20.979)"/></g><g fill="none" style="fill:#87ffff;fill-opacity:1"><path class="solid" d="M12 22 0 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(.95357 0 0 .95357 10.49 20.979)"/><path class="stroke" d="M12 17.823 20.63 2H3.37L12 17.823M12 22 0 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(.95357 0 0 .95357 10.49 20.979)"/></g><g opacity=".5" style="fill:#87ffff;fill-opacity:1"><path class="solid" d="M24 22 12 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="scale(.95357) rotate(90 12 10)"/><path class="stroke" d="M24 17.823 32.63 2H15.37L24 17.823M24 22 12 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="scale(.95357) rotate(90 12 10)"/></g><g opacity=".5" style="fill:#87ffff;fill-opacity:1"><path class="solid" d="M24 22 12 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(0 -.95357 .95357 0 21.932 43.864)"/><path class="stroke" d="M24 17.823 32.63 2H15.37L24 17.823M24 22 12 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(0 -.95357 .95357 0 21.932 43.864)"/></g></svg>

public/assets/media/replace.svg

@@ -1 +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>
+<svg viewBox="0 0 180.663 62.67" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path style="fill:#fff;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="opacity:1;fill:#fff;fill-opacity:.3;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="fill:#fff;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:.3;fill:#fff;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:.3;fill:#fff;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:.5;fill:#fff;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:.5;fill:#fff;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/demos.php

@@ -0,0 +1,18 @@
+<style><?= VV::css("public/assets/css/pages/demos.css") ?></style>
+<section id="wip">
+	<container>
+		<h1>WIP</h1>
+		<p>Sorry, this whole website is a work in progress.. this page especially so.</p>
+	</container>
+</section>
+<section id="websites">
+	<container>
+		<h1>Websites built with Vegvisir</h1>
+		<ul>
+			<li><a href="https://vlw.se" target="_blank"><button class="shade">https://vlw.se</button></a></li>
+			<li><a href="https://icellate.com" target="_blank"><button class="shade">https://icellate.com</button></a></li>
+			<li><a href="https://genemate.se" target="_blank"><button class="shade">https://genemate.se</button></a></li>
+			<li><a href="https://codeberg.org/vegvisir/website" target="_blank"><button class="shade">..and this website! (view source)</a></li>
+		</ul>
+	</container>
+</section>

public/docs/API/JS/Navigation/EVENTS.php

@@ -71,6 +71,5 @@
 </section>
 
 <?php // Contribute ?>
-<?= VV::include("modules/docs/contribute") ?>
 
 <?= VV::shell("shells/docs") ?>

public/docs/API/JS/Navigation/MODE.php

@@ -47,6 +47,5 @@
 </section>
 
 <?php // Contribute ?>
-<?= VV::include("modules/docs/contribute") ?>
 
 <?= VV::shell("shells/docs") ?>

public/docs/API/JS/Navigation/POSITION.php

@@ -61,6 +61,5 @@
 </section>
 
 <?php // Contribute ?>
-<?= VV::include("modules/docs/contribute") ?>
 
 <?= VV::shell("shells/docs") ?>

public/docs/API/JS/Navigation/TARGET.php

@@ -73,6 +73,5 @@
 </section>
 
 <?php // Contribute ?>
-<?= VV::include("modules/docs/contribute") ?>
 
 <?= VV::shell("shells/docs") ?>

public/docs/API/JS/Navigation/abort.php

@@ -29,6 +29,5 @@
 </section>
 
 <?php // Contribute ?>
-<?= VV::include("modules/docs/contribute") ?>
 
 <?= VV::shell("shells/docs") ?>

public/docs/API/JS/Navigation/bindElements.php

@@ -31,6 +31,5 @@
 </section>
 
 <?php // Contribute ?>
-<?= VV::include("modules/docs/contribute") ?>
 
 <?= VV::shell("shells/docs") ?>

public/docs/API/JS/Navigation/constructor.php

@@ -65,6 +65,5 @@
 </section>
 
 <?php // Contribute ?>
-<?= VV::include("modules/docs/contribute") ?>
 
 <?= VV::shell("shells/docs") ?>

public/docs/API/JS/Navigation/navigate.php

@@ -88,6 +88,5 @@
 </section>
 
 <?php // Contribute ?>
-<?= VV::include("modules/docs/contribute") ?>
 
 <?= VV::shell("shells/docs") ?>

public/docs/API/JS/Navigation/options.php

@@ -60,6 +60,5 @@
 </section>
 
 <?php // Contribute ?>
-<?= VV::include("modules/docs/contribute") ?>
 
 <?= VV::shell("shells/docs") ?>

public/docs/API/PHP/VV/css.php

@@ -78,6 +78,5 @@
 </section>
 
 <?php // Contribute ?>
-<?= VV::include("modules/docs/contribute") ?>
 
 <?= VV::shell("shells/docs") ?>

public/docs/API/PHP/VV/embed.php

@@ -67,6 +67,5 @@
 </section>
 
 <?php // Contribute ?>
-<?= VV::include("modules/docs/contribute") ?>
 
 <?= VV::shell("shells/docs") ?>

public/docs/API/PHP/VV/include.php

@@ -73,6 +73,5 @@
 </section>
 
 <?php // Contribute ?>
-<?= VV::include("modules/docs/contribute") ?>
 
 <?= VV::shell("shells/docs") ?>

public/docs/API/PHP/VV/js.php

@@ -78,6 +78,5 @@
 </section>
 
 <?php // Contribute ?>
-<?= VV::include("modules/docs/contribute") ?>
 
 <?= VV::shell("shells/docs") ?>

public/docs/API/PHP/VV/root.php

@@ -72,6 +72,5 @@
 </section>
 
 <?php // Contribute ?>
-<?= VV::include("modules/docs/contribute") ?>
 
 <?= VV::shell("shells/docs") ?>

public/docs/API/PHP/VV/shell.php

@@ -70,6 +70,5 @@
 </section>
 
 <?php // Contribute ?>
-<?= VV::include("modules/docs/contribute") ?>
 
 <?= VV::shell("shells/docs") ?>

public/docs/index.php

@@ -12,5 +12,4 @@
 		<p>The older versions of Vegvisir can be found here. They lack proper documentation and function a bit differently than Vegvisir 3 which has been largely rewritten from scratch. The main addition to version 3 are what I call "shells".</p>
 	</container>
 </section>
-<?= VV::include("modules/docs/contribute") ?>
 <?= VV::shell("shells/docs") ?>

public/docs/installation.php

@@ -82,5 +82,4 @@
 		<p>Let's add the following <code>location</code> block to our NGINX virtual host that we set up in <a href="#asd">Step X</a>.</p>
 	</container>
 </section>
-<?= VV::include("modules/docs/contribute") ?>
 <?= VV::shell("shells/docs") ?>

public/index.php

@@ -16,13 +16,13 @@
 	</container>
 	<div class="wave"></div>
 </section>
-<section id="lead">
+<section id="lead" class="deep">
 	<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">
+	<container class="split">
 		<?= VV::embed("public/assets/media/replace.svg") ?>
 		<div>
 			<h1>Soft-navigation by design</h1>
@@ -30,18 +30,13 @@
 		</div>
 	</container>
 </section>
-<section id="free" class="info">
+<section class="divider">
-	<container class="split reverse">
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
-		<?= VV::embed("public/assets/media/replace.svg") ?>
+		<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
-		<div>
+	</svg>
-			<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">
+	<container class="split reverse">
 		<?= VV::embed("public/assets/media/byoe.svg") ?>
 		<div>
 			<h1>TypeScript, Bootstrap, something else?</h1>
@@ -50,4 +45,14 @@
 		</div>
 	</container>
 </section>
+<section id="free" class="info">
+	<container class="split">
+		<?= VV::embed("public/assets/media/gnu.svg") ?>
+		<div>
+			<h1>It's a GNU!</h1>
+			<p>The big names in PHP frameworks are all licensed under the permissive MIT license. This legally allows those frameworks to be used to develop proprietary malware. Vegvisir is free to use and will always respects your rights.</p>
+			<h2>Free as in -dom AND beer</h2>
+		</div>
+	</container>
+</section>
 <script><?= VV::js("public/assets/js/pages/index.js") ?></script>

shells/docs.php

@@ -1,4 +1,10 @@
 <style><?= VV::css("public/assets/css/shells/docs.css") ?></style>
+<section class="menu">
+	<container>
+		<?= VV::embed("public/assets/media/icons/menu.svg") ?>
+		<p>documentation menu</p>
+	</container>
+</section>
 <aside>
 	<ul>
 		<li><a href="/docs"><button><p>Introduction</p></button></a></li>
@@ -14,4 +20,5 @@
 
 </aside>
 <vv-shell></vv-shell>
+<?= VV::include("modules/docs/contribute") ?>
 <script type="module"><?= VV::js("public/assets/js/shells/docs.js") ?></script>

shells/document.php

@@ -36,6 +36,7 @@
 	<style><?= VV::css("public/assets/css/document.css") ?></style>
 
 	<title>Vegvisir</title>
+	<link rel="icon" href="/assets/media/logo.svg">
 </head>
 <body>
 	<header>
@@ -45,14 +46,16 @@
 				<li><a href="/"><button><p>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>
 			</ul>
 			<ul>
-				<li><a href="mailto:info@vlw.se"><button><p>Email</p></button></a></li>
+				<li><a href="mailto:info@vlw.se"><button title="E-mail" class="shade"><?= VV::embed("public/assets/media/icons/email.svg") ?></button></a></li>
-				<li><a href="matrix:#vegvisir:vlw.se"><button><p>Matrix</p></button></a></li>
+				<li><a href="matrix:#vegvisir:vlw.se"><button title="Matrix" class="shade"><?= VV::embed("public/assets/media/icons/matrix.svg") ?></button></a></li>
-				<li><a href="/"><button><p>Codeberg</p></button></a></li>
+				<li><a href="https://codeberg.org/vegvisir/vegvisir"><button title="Codeberg" class="shade"><?= VV::embed("public/assets/media/icons/codeberg.svg") ?></button></a></li>
-				<li><a href="/doc/installation"><button class="solid"><p>Get Vegvisir</p></button></a></li>
+				<li><a href="/docs/installation"><button class="solid"><p>Get Vegvisir</p></button></a></li>
 			</ul>
+			<button class="menuToggle solid">
+				<?= VV::embed("public/assets/media/icons/menu.svg") ?>
+			</button>
 		</container>
 	</header>
 	<vv-shell></vv-shell>
@@ -67,6 +70,14 @@
 			</ul>
 		</container>
 	</footer>
+	<menu>
+		<ul>
+			<li><a href="/"><button class="shade"><p>Vegvisir</p></button></a></li>
+			<li><a href="/docs"><button class="shade"><p>Documentation</p></button></a></li>
+			<li><a href="/demos"><button class="shade"><p>Demos</p></button></a></li>
+		</ul>
+	</menu>
 	<?= VV::init(); ?>
+	<script><?= VV::js("public/assets/js/shells/document.js") ?></script>
 </body>
 </html>