diff --git a/public/assets/css/pages/docs/header.css b/public/assets/css/pages/docs/header.css index 3ac4427..f8c81e2 100644 --- a/public/assets/css/pages/docs/header.css +++ b/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; + } } \ No newline at end of file diff --git a/public/assets/css/pages/docs/layout.css b/public/assets/css/pages/docs/layout.css index 3a28f56..5ce738f 100644 --- a/public/assets/css/pages/docs/layout.css +++ b/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; + } } \ No newline at end of file diff --git a/public/assets/css/pages/examples.css b/public/assets/css/pages/examples.css index 3e93239..01e6438 100644 --- a/public/assets/css/pages/examples.css +++ b/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; + } } \ No newline at end of file diff --git a/public/assets/css/pages/features.css b/public/assets/css/pages/features.css index 16325e5..ae1da35 100644 --- a/public/assets/css/pages/features.css +++ b/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); + } } \ No newline at end of file diff --git a/public/assets/css/pages/index.css b/public/assets/css/pages/index.css index aa0d13e..ae129ec 100644 --- a/public/assets/css/pages/index.css +++ b/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; + } } \ No newline at end of file diff --git a/public/assets/css/shell.css b/public/assets/css/shell.css index d46c612..2993f92 100644 --- a/public/assets/css/shell.css +++ b/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 60svh rgba(var(--primer-color-accent), .1), + 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) ; 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) { - :root { - --header-search-size: 250px; +@media (max-width: 950px) { + footer, + 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 { - right: unset; - 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) - ; + :is(header, footer) nav:not(.m) { + display: none; } } \ No newline at end of file diff --git a/public/assets/css/snippets/HTMLCodeDemoElement.css b/public/assets/css/snippets/HTMLCodeDemoElement.css index c0039d2..2b8052b 100644 --- a/public/assets/css/snippets/HTMLCodeDemoElement.css +++ b/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; + } } \ No newline at end of file diff --git a/public/assets/css/snippets/HTMLNavMenuElement.css b/public/assets/css/snippets/HTMLNavMenuElement.css new file mode 100644 index 0000000..428a8b2 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/public/assets/css/snippets/split.css b/public/assets/css/snippets/split.css index ffc102e..d69d691 100644 --- a/public/assets/css/snippets/split.css +++ b/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); + } } \ No newline at end of file diff --git a/public/assets/js/pages/docs/layout.js b/public/assets/js/pages/docs/layout.js new file mode 100644 index 0000000..6a1960d --- /dev/null +++ b/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"); +}); \ No newline at end of file diff --git a/public/assets/js/shell.js b/public/assets/js/shell.js index e69de29..f84c4a7 100644 --- a/public/assets/js/shell.js +++ b/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 })); \ No newline at end of file diff --git a/public/assets/js/snippets/HTMLNavMenuElement.mjs b/public/assets/js/snippets/HTMLNavMenuElement.mjs new file mode 100644 index 0000000..61b6eb2 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/public/assets/media/icons/hamburger.svg b/public/assets/media/icons/hamburger.svg new file mode 100644 index 0000000..bfa139a --- /dev/null +++ b/public/assets/media/icons/hamburger.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/media/img/genemate-se.avif b/public/assets/media/img/genemate-se.avif new file mode 100644 index 0000000..ad2eb34 Binary files /dev/null and b/public/assets/media/img/genemate-se.avif differ diff --git a/public/assets/media/img/icellate-com.avif b/public/assets/media/img/icellate-com.avif index 11e7c21..67b403f 100644 Binary files a/public/assets/media/img/icellate-com.avif and b/public/assets/media/img/icellate-com.avif differ diff --git a/public/docs/header.php b/public/docs/header.php index 3055e20..5f63cb2 100644 --- a/public/docs/header.php +++ b/public/docs/header.php @@ -1,6 +1,6 @@ JavaScript

+ \ No newline at end of file diff --git a/public/docs/v3.1.4/Reference/layout.php b/public/docs/v3.1.4/Reference/layout.php index 0eef26a..c0b0ffe 100644 --- a/public/docs/v3.1.4/Reference/layout.php +++ b/public/docs/v3.1.4/Reference/layout.php @@ -1,3 +1,4 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/public/docs/v3.1.4/layout.php b/public/docs/v3.1.4/layout.php index 0cf2d6a..425b1fa 100644 --- a/public/docs/v3.1.4/layout.php +++ b/public/docs/v3.1.4/layout.php @@ -1,3 +1,4 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/public/examples.php b/public/examples.php index 0d9d5fc..3b2d1f2 100644 --- a/public/examples.php +++ b/public/examples.php @@ -4,17 +4,17 @@

Here are some examples of Vegvisir being used on real websites!

- - - +
\ No newline at end of file diff --git a/public/shell.php b/public/shell.php index 35f259b..cacdbac 100644 --- a/public/shell.php +++ b/public/shell.php @@ -54,6 +54,14 @@
+ + + + + + \ No newline at end of file