diff --git a/modules/docs/contribute/style.css b/modules/docs/contribute/style.css index 3cde112..39b6f6b 100644 --- a/modules/docs/contribute/style.css +++ b/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%; + } } \ No newline at end of file diff --git a/public/assets/css/document.css b/public/assets/css/document.css index 2e823ee..524af4b 100644 --- a/public/assets/css/document.css +++ b/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: solid var(--border-style-width) rgba(var(--primer-color-deep), .1); + --border-style-width: 1px; + --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(900px, 100%, 80vw); + width: clamp(200px, 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; + } } \ No newline at end of file diff --git a/public/assets/css/pages/demos.css b/public/assets/css/pages/demos.css new file mode 100644 index 0000000..036cef3 --- /dev/null +++ b/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%; +} \ No newline at end of file diff --git a/public/assets/css/pages/index.css b/public/assets/css/pages/index.css index 3cb792c..2a189f5 100644 --- a/public/assets/css/pages/index.css +++ b/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%; - height: 190%; + margin-top: -14%; + 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; + } } \ No newline at end of file diff --git a/public/assets/css/shells/docs.css b/public/assets/css/shells/docs.css index 810322f..7573160 100644 --- a/public/assets/css/shells/docs.css +++ b/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; + } } \ No newline at end of file diff --git a/public/assets/js/shells/docs.js b/public/assets/js/shells/docs.js index e69de29..c5dd70b 100644 --- a/public/assets/js/shells/docs.js +++ b/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)); +} \ No newline at end of file diff --git a/public/assets/js/shells/document.js b/public/assets/js/shells/document.js new file mode 100644 index 0000000..27bdc5f --- /dev/null +++ b/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)); +} \ No newline at end of file diff --git a/public/assets/media/gnu.svg b/public/assets/media/gnu.svg new file mode 100644 index 0000000..603cd0c --- /dev/null +++ b/public/assets/media/gnu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/media/icons/codeberg.svg b/public/assets/media/icons/codeberg.svg new file mode 100644 index 0000000..327966a --- /dev/null +++ b/public/assets/media/icons/codeberg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/media/icons/email.svg b/public/assets/media/icons/email.svg new file mode 100644 index 0000000..7c8b827 --- /dev/null +++ b/public/assets/media/icons/email.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/media/icons/matrix.svg b/public/assets/media/icons/matrix.svg new file mode 100644 index 0000000..63cbd84 --- /dev/null +++ b/public/assets/media/icons/matrix.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/media/icons/menu.svg b/public/assets/media/icons/menu.svg new file mode 100644 index 0000000..a361919 --- /dev/null +++ b/public/assets/media/icons/menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/media/logo.svg b/public/assets/media/logo.svg index 618f44d..510be1a 100644 --- a/public/assets/media/logo.svg +++ b/public/assets/media/logo.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/assets/media/replace.svg b/public/assets/media/replace.svg index 51f94f2..630883c 100644 --- a/public/assets/media/replace.svg +++ b/public/assets/media/replace.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/demos.php b/public/demos.php new file mode 100644 index 0000000..da2e789 --- /dev/null +++ b/public/demos.php @@ -0,0 +1,18 @@ + +
+ +

WIP

+

Sorry, this whole website is a work in progress.. this page especially so.

+ +
+
+ +

Websites built with Vegvisir

+ + +
\ No newline at end of file diff --git a/public/docs/API/JS/Navigation/EVENTS.php b/public/docs/API/JS/Navigation/EVENTS.php index 5e685c1..6265670 100644 --- a/public/docs/API/JS/Navigation/EVENTS.php +++ b/public/docs/API/JS/Navigation/EVENTS.php @@ -71,6 +71,5 @@ - \ No newline at end of file diff --git a/public/docs/API/JS/Navigation/MODE.php b/public/docs/API/JS/Navigation/MODE.php index bf831cb..f2592b9 100644 --- a/public/docs/API/JS/Navigation/MODE.php +++ b/public/docs/API/JS/Navigation/MODE.php @@ -47,6 +47,5 @@ - \ No newline at end of file diff --git a/public/docs/API/JS/Navigation/POSITION.php b/public/docs/API/JS/Navigation/POSITION.php index cd13220..1188f1b 100644 --- a/public/docs/API/JS/Navigation/POSITION.php +++ b/public/docs/API/JS/Navigation/POSITION.php @@ -61,6 +61,5 @@ - \ No newline at end of file diff --git a/public/docs/API/JS/Navigation/TARGET.php b/public/docs/API/JS/Navigation/TARGET.php index 1f992b0..348537d 100644 --- a/public/docs/API/JS/Navigation/TARGET.php +++ b/public/docs/API/JS/Navigation/TARGET.php @@ -73,6 +73,5 @@ - \ No newline at end of file diff --git a/public/docs/API/JS/Navigation/abort.php b/public/docs/API/JS/Navigation/abort.php index ebc8b68..48517de 100644 --- a/public/docs/API/JS/Navigation/abort.php +++ b/public/docs/API/JS/Navigation/abort.php @@ -29,6 +29,5 @@ - \ No newline at end of file diff --git a/public/docs/API/JS/Navigation/bindElements.php b/public/docs/API/JS/Navigation/bindElements.php index a4ad72f..9e2afeb 100644 --- a/public/docs/API/JS/Navigation/bindElements.php +++ b/public/docs/API/JS/Navigation/bindElements.php @@ -31,6 +31,5 @@ - \ No newline at end of file diff --git a/public/docs/API/JS/Navigation/constructor.php b/public/docs/API/JS/Navigation/constructor.php index 6f39aba..5c65867 100644 --- a/public/docs/API/JS/Navigation/constructor.php +++ b/public/docs/API/JS/Navigation/constructor.php @@ -65,6 +65,5 @@ - \ No newline at end of file diff --git a/public/docs/API/JS/Navigation/navigate.php b/public/docs/API/JS/Navigation/navigate.php index 9ddfb05..274d189 100644 --- a/public/docs/API/JS/Navigation/navigate.php +++ b/public/docs/API/JS/Navigation/navigate.php @@ -88,6 +88,5 @@ - \ No newline at end of file diff --git a/public/docs/API/JS/Navigation/options.php b/public/docs/API/JS/Navigation/options.php index 3dd1f7a..7562354 100644 --- a/public/docs/API/JS/Navigation/options.php +++ b/public/docs/API/JS/Navigation/options.php @@ -60,6 +60,5 @@ - \ No newline at end of file diff --git a/public/docs/API/PHP/VV/css.php b/public/docs/API/PHP/VV/css.php index 7139e5a..e68ffdb 100644 --- a/public/docs/API/PHP/VV/css.php +++ b/public/docs/API/PHP/VV/css.php @@ -78,6 +78,5 @@ - \ No newline at end of file diff --git a/public/docs/API/PHP/VV/embed.php b/public/docs/API/PHP/VV/embed.php index e06fece..c146d23 100644 --- a/public/docs/API/PHP/VV/embed.php +++ b/public/docs/API/PHP/VV/embed.php @@ -67,6 +67,5 @@ - \ No newline at end of file diff --git a/public/docs/API/PHP/VV/include.php b/public/docs/API/PHP/VV/include.php index 4a492f0..fb091e1 100644 --- a/public/docs/API/PHP/VV/include.php +++ b/public/docs/API/PHP/VV/include.php @@ -73,6 +73,5 @@ - \ No newline at end of file diff --git a/public/docs/API/PHP/VV/js.php b/public/docs/API/PHP/VV/js.php index 5dea272..e3b5d80 100644 --- a/public/docs/API/PHP/VV/js.php +++ b/public/docs/API/PHP/VV/js.php @@ -78,6 +78,5 @@ - \ No newline at end of file diff --git a/public/docs/API/PHP/VV/root.php b/public/docs/API/PHP/VV/root.php index 9294aed..760d600 100644 --- a/public/docs/API/PHP/VV/root.php +++ b/public/docs/API/PHP/VV/root.php @@ -72,6 +72,5 @@ - \ No newline at end of file diff --git a/public/docs/API/PHP/VV/shell.php b/public/docs/API/PHP/VV/shell.php index a923a51..38e8af3 100644 --- a/public/docs/API/PHP/VV/shell.php +++ b/public/docs/API/PHP/VV/shell.php @@ -70,6 +70,5 @@ - \ No newline at end of file diff --git a/public/docs/index.php b/public/docs/index.php index 6e8f4e7..4a37ffd 100644 --- a/public/docs/index.php +++ b/public/docs/index.php @@ -12,5 +12,4 @@

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".

- \ No newline at end of file diff --git a/public/docs/installation.php b/public/docs/installation.php index 536e649..3640e61 100644 --- a/public/docs/installation.php +++ b/public/docs/installation.php @@ -82,5 +82,4 @@

Let's add the following location block to our NGINX virtual host that we set up in Step X.

- \ No newline at end of file diff --git a/public/index.php b/public/index.php index 64059df..e422b19 100644 --- a/public/index.php +++ b/public/index.php @@ -16,13 +16,13 @@
-
+

This is a framework for building complete websites with automatic soft-navigation between pages that follow a traditional "multi-page" (MPA) file structure
- +

Soft-navigation by design

@@ -30,18 +30,13 @@
-
- - -
-

Soft-navigation by design

-

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.

-

Free as in -dom AND beer

-
- +
+ + +
- +

TypeScript, Bootstrap, something else?

@@ -50,4 +45,14 @@
+
+ + +
+

It's a GNU!

+

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.

+

Free as in -dom AND beer

+
+ +
\ No newline at end of file diff --git a/shells/docs.php b/shells/docs.php index 97802d0..f62e3ce 100644 --- a/shells/docs.php +++ b/shells/docs.php @@ -1,4 +1,10 @@ +
+ + +

documentation menu

+ +
+ \ No newline at end of file diff --git a/shells/document.php b/shells/document.php index 0750858..b22b323 100644 --- a/shells/document.php +++ b/shells/document.php @@ -36,6 +36,7 @@ Vegvisir +
@@ -45,14 +46,16 @@
    • -
    • +
    @@ -67,6 +70,14 @@ + + + + \ No newline at end of file