vegvisir/website
1
0
Fork 0
mirror of https://codeberg.org/vegvisir/website.git synced 2025-09-14 00:43:42 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Victor Westerlund 2024-08-22 13:34:54 +02:00
parent dc86a20327
commit 3cce6d3184
9 changed files with 51 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
public/assets/css/document.css
View file

@ -84,6 +84,10 @@ container.split {
grid-template-columns: repeat(2, 1fr);
}
container.split.reverse div:last-child {
order: -1;
}
container.split > div {
display: flex;
flex-direction: column;
@ -91,11 +95,6 @@ container.split > div {
gap: var(--padding);
}
container.split > div:first-child {
align-items: baseline;
justify-content: center;
}
/* ## Button */
button {

36
public/assets/css/pages/index.css
View file

@ -6,10 +6,6 @@ body {
background-color: var(--color-deep);
}
section h1 {
font-size: 50px;
}
section h2 {
color: white;
background-color: black;
@ -41,6 +37,10 @@ section#intro {
min-height: 300px;
}
section#intro h1 {
font-size: 50px;
}
section#intro div {
display: flex;
flex-direction: column;
@ -55,14 +55,15 @@ section.waves {
position: relative;
height: 300px;
margin-top: -100px;
user-select: none;
pointer-events: none;
z-index: -1;
}
section.waves img {
margin: auto;
height: 170%;
margin-top: -15%;
height: 190%;
transform-origin: 50% 100%;
animation: ship 6s alternate infinite ease;
}
@ -82,7 +83,7 @@ section.waves .wave {
width: 100%;
height: 100%;
transform: scale(1.5);
bottom: 0;
bottom: 70px;
animation: wave 7s alternate infinite cubic-bezier(var(--easing), 0, calc(1 - var(--easing)), 1);
}
@ -91,7 +92,7 @@ section.waves .wave {
}
section.waves + section {
margin-top: 50px;
background-color: #4ca6ff;
}
section.waves .wave:first-child {
@ -105,21 +106,22 @@ section.waves .wave:last-child {
/* ## BYOE */
section#byoe {
section.info {
background-color: white;
}
section#byoe container {
min-height: 600px;
section.info container {
min-height: 500px;
}
section#byoe svg {
height: 500px;
section.info svg {
justify-self: center;
width: 400px;
}
/* ## Example */
/* ## Lead */
section#example {
background-color: white;
height: 700px;
section#lead h1 {
color: white;
font-weight: normal;
}

2
public/assets/media/byoe.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
public/assets/media/gnu.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 288 KiB

1
public/assets/media/replace.svg Normal file
View file

@ -0,0 +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>
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

1
public/assets/media/why-gnu.svg
View file

File diff suppressed because one or more lines are too long
Side by side

Before

Width:  |  Height:  |  Size: 17 KiB

28
public/index.php
View file

@ -16,12 +16,36 @@
</container>
<div class="wave"></div>
</section>
<section id="byoe">
<section id="lead">
<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">
<?= VV::embed("public/assets/media/replace.svg") ?>
<div>
<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>
</div>
</container>
</section>
<section id="free" class="info">
<container class="split reverse">
<?= VV::embed("public/assets/media/replace.svg") ?>
<div>
<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">
<?= VV::embed("public/assets/media/byoe.svg") ?>
<div>
<h1>TypeScript, Bootstrap, something else?</h1>
<p>No problem, Vegvisir's ethos is to not lock you down a specific paradigm. That is why Vegvisir will try to interfere as little as possible with how and with what you build your website by being as simple as possible.</p>
<p>No problem, Vegvisir's primary ethos is to not lock you down a specific paradigm. That is why Vegvisir will always try to interfere as little as possible with how and with what you build your website by being as simple as possible.</p>
<h2>Bring-Your-Own-Experience</h2>
</div>
</container>

11
public/why.php
View file

@ -1,11 +0,0 @@
<style><?= VV::css("public/assets/css/pages/why.css") ?></style>
<section id="freedom">
<container class="split">
<img src="/assets/media/why-gnu.svg">
<div>
<h1>It's a GNU!</h1>
<h2>A framework that respects your freedom</h2>
<p>The "big players" in PHP frameworks are all published under the permissive MIT-license. This legally enables those frameworks to be modified to develop proprietary malware.</p>
</div>
</container>
</section>

1
shells/document.php
View file

@ -43,7 +43,6 @@
<a href="/"><?= VV::embed("public/assets/media/logo.svg") ?></a>
<ul>
<li><a href="/"><button><p>Vegvisir</p></button></a></li>
<li><a href="/why"><button><p>Why 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>