mirror of
https://codeberg.org/vegvisir/website.git
synced 2025-09-14 00:43:42 +02:00
wip: 2025-02-27T15:03:12+0100 (1740664992)
This commit is contained in:
parent
c0614d3634
commit
c7d8aba184
21 changed files with 355 additions and 24 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
61
public/assets/css/snippets/HTMLNavMenuElement.css
Normal file
61
public/assets/css/snippets/HTMLNavMenuElement.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
9
public/assets/js/pages/docs/layout.js
Normal file
9
public/assets/js/pages/docs/layout.js
Normal file
|
|
@ -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");
|
||||
});
|
||||
|
|
@ -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 }));
|
||||
36
public/assets/js/snippets/HTMLNavMenuElement.mjs
Normal file
36
public/assets/js/snippets/HTMLNavMenuElement.mjs
Normal file
|
|
@ -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);
|
||||
1
public/assets/media/icons/hamburger.svg
Normal file
1
public/assets/media/icons/hamburger.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 151 B |
BIN
public/assets/media/img/genemate-se.avif
Normal file
BIN
public/assets/media/img/genemate-se.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 8.2 KiB |
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
61
snippets/HTMLNavMenuElement/HTMLNavMenuElement.php
Normal file
61
snippets/HTMLNavMenuElement/HTMLNavMenuElement.php
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Reference in a new issue