wip: 2025-02-27T15:03:12+0100 (1740664992)

public/assets/css/pages/docs/header.css

@@ -63,4 +63,24 @@ section.header button.inline {
 section.header button.inline.solid {
 	color: var(--color-accent);
 	background-color: white;
+}
+
+/* ## Menu */
+
+section.header button.menu {
+	display: none;
+}
+
+/* # Size queries */
+
+@media (max-width: 950px) {
+	section.header > *:not(button.menu) {
+		display: none;
+	}
+
+	section.header button.menu {
+		width: 100%;
+		justify-content: center;
+		display: flex;
+	}
 }

public/assets/css/pages/docs/layout.css

@@ -52,4 +52,38 @@ section.md {
 
 section.md :is(ol, ul) li {
 	margin: calc(var(--padding) / 2) 0;
+}
+
+/* # Size queries */
+
+@media (max-width: 950px) {
+	vv-shell {
+		grid-template-rows: calc(var(--running-size) - var(--padding)) 1fr var(--running-size);
+		grid-template-areas:
+			"header"
+			"main"
+			"footer"
+		;
+		grid-template-columns: 100svw;
+	}
+
+	aside {
+		display: none;
+	}
+
+	vv-shell.menu-open {
+		grid-template-areas:
+			"header"
+			"aside"
+			"footer"
+		;
+	}
+
+	vv-shell.menu-open aside {
+		display: initial;
+	}
+
+	vv-shell.menu-open main {
+		display: none;
+	}
 }

public/assets/css/pages/examples.css

@@ -1,5 +1,6 @@
 vv-shell {
 	gap: var(--padding);
+	padding: var(--padding);
 }
 
 /* # Sections */
@@ -8,7 +9,6 @@ vv-shell {
 
 section.heading {
 	text-align: center;
-	margin: var(--padding) 0;
 }
 
 /* ## Grid */
@@ -39,4 +39,18 @@ section.grid button > div {
 
 section.grid button p {
 	color: black;
+}
+
+/* # Size queries */
+
+@media (max-width: 1000px) {
+	section.grid {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+@media (max-width: 550px) {
+	section.grid {
+		grid-template-columns: 1fr;
+	}
 }

public/assets/css/pages/features.css

@@ -21,4 +21,12 @@ section#this-stays svg {
 
 section#this-stays svg:last-child {
 	transform: rotateY(180deg);
+}
+
+/* # Size queries */
+
+@media (max-width: 950px) {
+	section#this-stays {
+		height: calc(var(--running-size) * 2);
+	}
 }

public/assets/css/pages/index.css

@@ -1,4 +1,5 @@
 vv-shell {
+	overflow-x: hidden;
 	padding: 0 var(--padding);
 }
 
@@ -59,4 +60,17 @@ section#intro div.compass svg:nth-child(2) {
 
 section#freedom > div > svg {
 	height: 300px;
+}
+
+/* # Size queries */
+
+@media (max-width: 950px) {
+	section#intro {
+		min-height: min(40svh, 1000px);
+	}
+
+	section#intro div.compass {
+		opacity: .3;
+		z-index: -1;
+	}
 }

public/assets/css/shell.css

@@ -39,14 +39,14 @@ body::before {
 	content: "";
 	position: absolute;
 	top: -5%;
-	right: 0;
+	left: 0;
 	width: 20%;
 	height: 5%;
 	border-radius: 100%;
 	z-index: 1000;
 	box-shadow:
-		0 0 30svh 10svh rgba(var(--primer-color-accent), .2),
+		0 0 30svh 10svh rgba(var(--primer-color-accent), .1),
-		0 0 30svh 60svh rgba(var(--primer-color-accent), .1),
+		0 0 30svh 60svh rgba(var(--primer-color-accent), .05),
 		0 0 30svh 150svh rgba(var(--primer-color-accent), .02)
 	;
 	opacity: 0;
@@ -66,7 +66,7 @@ a {
 /* ## vv-shell */
 
 vv-shell {
-	width: 100%;
+	width: 100svw;
 	display: flex;
 	max-width: 1500px;
 	position: relative;
@@ -134,6 +134,10 @@ button {
 	cursor: pointer;
 }
 
+button * {
+	pointer-events: none;
+}
+
 /* ### Inline */
 
 button.inline {
@@ -230,6 +234,10 @@ header nav:last-of-type {
 	gap: calc(var(--padding) / 2);
 }
 
+:is(header, footer) nav.m {
+	display: none;
+}
+
 /* ### Spacer */
 
 header nav > div {
@@ -358,20 +366,19 @@ footer button.inline.solid {
 
 /* # Size queries */
 
-@media (min-width: 700px) {
+@media (max-width: 950px) {
-	:root {
+	footer,
-		--header-search-size: 250px;
+	header {
+		grid-template-columns: var(--running-size) 1fr;
 	}
 
-	/* # Cornerstones */
+	:is(header, footer) nav.m {
+		display: flex;
+		padding-left: calc(var(--padding) / 2);
+		justify-content: space-between;
+	}
 
-	body::before {
+	:is(header, footer) nav:not(.m) {
-		right: unset;
+		display: none;
-		left: 0;
-		box-shadow:
-			0 0 30svh 10svh rgba(var(--primer-color-accent), .1),
-			0 0 30svh 60svh rgba(var(--primer-color-accent), .05),
-			0 0 30svh 150svh rgba(var(--primer-color-accent), .02)
-		;
 	}
 }

public/assets/css/snippets/HTMLCodeDemoElement.css

@@ -14,6 +14,7 @@ code-demo {
 
 code-demo .header {
 	display: flex;
+	overflow-x: scroll;
 	height: var(--height);
 	border-bottom: solid 1px rgba(255, 255, 255, .1);
 }
@@ -90,4 +91,13 @@ code-demo .body [data-file] {
 
 code-demo .body [data-file].active {
 	display: initial;
+}
+
+/* # Size queries */
+
+@media (max-width: 950px) {
+	code-demo {
+		width: 100%;
+		min-width: unset;
+	}
 }

public/assets/css/snippets/HTMLNavMenuElement.css

@@ -0,0 +1,61 @@
+nav-menu {
+	display: none;
+}
+
+@media (max-width: 950px) {
+	/* # Overrides */
+
+	body.menu-open {
+		overflow: hidden;
+	}
+
+	/* ## Header */
+
+	body.menu-open header {
+		background-color: var(--color-accent);
+	}
+	
+	body.menu-open header nav p {
+		color: white;
+	}
+
+	/* # Nav menu */
+	
+	nav-menu {
+		top: var(--running-size);
+		left: 0;
+		width: 100%;
+		overflow-y: scroll;
+		height: calc(100svh - var(--running-size));
+		display: none;
+		position: fixed;
+		align-items: center;
+		flex-direction: column;
+		background-color: white;
+	}
+	
+	nav-menu.active {
+		display: flex;
+	}
+
+	/* ## Sections */
+
+	nav-menu nav {
+		gap: calc(var(--padding) / 2);
+		width: 100%;
+		max-width: 600px;
+		display: flex;
+		padding: var(--padding);
+		flex-direction: column;
+	}
+
+	nav-menu nav:last-child {
+		margin-top: auto;
+	}
+	
+	nav-menu nav.horizontal {
+		gap: var(--padding);
+		flex-direction: row;
+		justify-content: center;
+	}
+}

public/assets/css/snippets/split.css

@@ -47,4 +47,25 @@ section.split .buttons {
 	display: flex;
 	gap: var(--padding);
 	margin-top: var(--padding);
+}
+
+/* # Size queries */
+
+@media (max-width: 950px) {
+	section.split {
+		display: flex;
+		margin: 5svh 0;
+		gap: var(--padding);
+		flex-direction: column;
+	}
+
+	section.split .text {
+		width: 100%;
+	}
+
+	section.split .buttons {
+		width: 100%;
+		flex-direction: column;
+		gap: calc(var(--padding) / 2);
+	}
 }

public/assets/js/pages/docs/layout.js

@@ -0,0 +1,9 @@
+// Toggle documentation menu with CSS when button in sub-header is clicked
+document.querySelector("section.header button.menu").addEventListener("click", () => {
+	vegvisir.Navigation.shellElement.classList.toggle("menu-open");
+});
+
+// Close documentation menu when shell is being navigated
+vegvisir.Navigation.shellElement.addEventListener(vegvisir.Navigation.EVENTS.STARTED, () => {
+	vegvisir.Navigation.shellElement.classList.remove("menu-open");
+});

public/assets/js/shell.js

@@ -0,0 +1,9 @@
+import { TAG_NAME } from "/assets/js/snippets/HTMLNavMenuElement.mjs";
+
+// Bind toggles for the nav menu
+[...document.querySelectorAll("[data-menu]")].forEach(element => {
+	element.addEventListener("click", () => document.querySelector(TAG_NAME).toggle());
+});
+
+// Scroll page to the top on navigations
+document.addEventListener(vegvisir.Navigation.EVENTS.FINISHED, () => window.scrollTo({ top: 0 }));

public/assets/js/snippets/HTMLNavMenuElement.mjs

@@ -0,0 +1,36 @@
+import { CustomElement } from "../CustomElement.mjs";
+
+export const TAG_NAME = "nav-menu";
+
+class HTMLNavMenuElement extends CustomElement {
+	constructor() {
+		super();
+
+		this.importElementStylesheet(this.constructor.name);
+	}
+
+	open() {
+		document.body.classList.add("menu-open");
+		this.classList.add("active");
+	}
+
+	close() {
+		this.classList.remove("active");
+
+		// Remove classname from body tag if this was the last menu that was open
+		if (!document.querySelector(TAG_NAME + ".active")) {
+			document.body.classList.remove("menu-open");
+		}
+	}
+
+	toggle() {
+		this.classList.contains("active") ? this.close() : this.open();
+	}
+
+	connected() {
+		// Close menu when a link is clicked
+		[...document.querySelectorAll("a")].forEach(element => element.addEventListener("click", () => this.close()));
+	}
+}
+
+globalThis.customElements.define(TAG_NAME, HTMLNavMenuElement);

public/assets/media/icons/hamburger.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>

public/docs/header.php

@@ -1,6 +1,6 @@
 <?php
 
-	use const VVWebsite\DEFAULT_BUTTON_ICON;
+	use const VVWebsite\ICONS_DIR;
 
 	require_once VV::root("src/Consts.php");
 
@@ -21,4 +21,8 @@
 			<p>JavaScript</p>
 		</button></a>
 	</nav>
+	<button class="inline menu">
+		<?= VV::embed(ICONS_DIR . "hamburger.svg") ?>
+		<p>docs menu</p>
+	</button>
 </section>

public/docs/v3.1.4/Reference/layout.php

@@ -1,3 +1,4 @@
 <style><?= VV::css("public/assets/css/pages/docs/layout") ?></style>
 <?= VV::include("public/docs/header") ?>
-<?= VV::include("public/docs/v3.1.4/Reference/aside") ?>
+<?= VV::include("public/docs/v3.1.4/Reference/aside") ?>
+<script><?= VV::js("public/assets/js/pages/docs/layout") ?></script>

public/docs/v3.1.4/layout.php

@@ -1,3 +1,4 @@
 <style><?= VV::css("public/assets/css/pages/docs/layout") ?></style>
 <?= VV::include("public/docs/header") ?>
-<?= VV::include("public/docs/v3.1.4/aside") ?>
+<?= VV::include("public/docs/v3.1.4/aside") ?>
+<script><?= VV::js("public/assets/js/pages/docs/layout") ?></script>

public/examples.php

@@ -4,17 +4,17 @@
 	<p>Here are some examples of Vegvisir being used on real websites!</p>
 </section>
 <section class="grid">
-	<a href="https://codeberg.org/vegvisir/website"><button class="inline">
+	<a href="https://codeberg.org/vegvisir/website" target="_blank"><button class="inline">
 		<img src="/assets/media/img/vegvisir-website.avif">
 		<div>
 			<div>
-				<h3>This website</h3>
+				<h3>This website!</h3>
 				<p>The website you're viewing right now has been built from scratch using only Vegvisir components.</p>
 			</div>
 			<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
 		</div>
 	</button></a>
-	<a href="https://vlw.se"><button class="inline">
+	<a href="https://vlw.se" target="_blank"><button class="inline">
 		<img src="/assets/media/img/vlw-se.avif">
 		<div>
 			<div>
@@ -24,7 +24,7 @@
 			<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
 		</div>
 	</button></a>
-	<a href="/"><button class="inline">
+	<a href="https://icellate-com.srv.vlw.se" target="_blank"><button class="inline">
 		<img src="/assets/media/img/icellate-com.avif">
 		<div>
 			<div>
@@ -34,4 +34,14 @@
 			<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
 		</div>
 	</button></a>
+	<a href="https://genemate-se.srv.vlw.se" target="_blank"><button class="inline">
+		<img src="/assets/media/img/genemate-se.avif">
+		<div>
+			<div>
+				<h3>genemate.se</h3>
+				<p>[Archived] Website for the Swedish bio-pharma start-up iCellate Medical.</p>
+			</div>
+			<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
+		</div>
+	</button></a>
 </section>

public/shell.php

@@ -54,6 +54,14 @@
 <body>
 	<header>
 		<a href="/"><?= VV::embed(MEDIA_DIR . "logo.svg") ?></a>
+		<nav class="m">
+			<a href="/"><button class="inline sly">
+				<p>vegvisir</p>
+			</button></a>
+			<button data-menu class="inline solid">
+				<?= VV::embed(ICONS_DIR . "hamburger.svg") ?>
+			</button>
+		</nav>
 		<nav>
 			<a href="/"><button class="inline sly">
 				<p>vegvisir</p>
@@ -91,6 +99,8 @@
 
 	<vv-shell></vv-shell>
 
+	<?= VV::include("snippets/HTMLNavMenuElement/HTMLNavMenuElement?menu=main-menu") ?>
+
 	<footer>
 		<nav>
 			<p>Copyleft <?= date("Y") ?> - All rights reversed</p>

snippets/HTMLNavMenuElement/HTMLNavMenuElement.php

@@ -0,0 +1,61 @@
+<?php
+
+	use const VVWebsite\{ICONS_DIR, DEFAULT_BUTTON_ICON};
+
+	require_once VV::root("src/Consts.php");
+
+	$HTMLNavMenuElement = new class {}
+
+?>
+<nav-menu>
+	<nav class="horizontal">
+		<a href="mailto:victor@vlw.se"><button class="inline">
+			<?= VV::embed(ICONS_DIR . "email.svg") ?>
+		</button></a>
+		<a href="matrix:@vegvisir:vlw.se"><button class="inline">
+			<?= VV::embed(ICONS_DIR . "matrix.svg") ?>
+		</button></a>
+		<a href="https://codeberg.org/vegvisir"><button class="inline">
+			<?= VV::embed(ICONS_DIR . "codeberg.svg") ?>
+		</button></a>
+	</nav>
+	<nav>
+		<a href="/docs/get-started"><button class="inline solid">
+			<p>get started</p>
+			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
+		</button></a>
+	</nav>
+	<nav>
+		<a href="/features"><button class="inline">
+			<p>features</p>
+			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
+		</button></a>
+		<a href="/docs"><button class="inline">
+			<p>documentation</p>
+			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
+		</button></a>
+		<a href="/examples"><button class="inline">
+			<p>examples</p>
+			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
+		</button></a>
+	</nav>
+	<nav>
+		<a href="https://vlw.se"><button class="inline">
+			<p>vlw</p>
+			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
+		</button></a>
+		<a href="https://codeberg.org/vegvisir/vegvisir/src/branch/master/LICENSE"><button class="inline">
+			<p>license</p>
+			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
+		</button></a>
+		<a href="https://codeberg.org/vegvisir/website"><button class="inline">
+			<p>website</p>
+			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
+		</button></a>
+		<a href="https://codeberg.org/vegvisir/vegvisir"><button class="inline solid">
+			<p>contribute ❤️</p>
+			<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
+		</button></a>
+	</nav>
+</nav-menu>
+<script type="module" src="/assets/js/snippets/HTMLNavMenuElement.mjs"></script>