website/public/features.php
vlw 7a8fc36ec0 feat: new website design and update to Vegvisir 3.1 (#2)
Brand new design for the website following the new design language I used for [version 2.0 of my personal website](https://codeberg.org/vlw/vlw.se/releases/tag/2.0.0).

Reviewed-on: https://codeberg.org/vegvisir/website/pulls/2
Co-authored-by: vlw <victor@vlw.se>
Co-committed-by: vlw <victor@vlw.se>
2025-03-05 11:16:54 +00:00

55 lines
No EOL
2.2 KiB
PHP

<style><?= VV::css("public/assets/css/snippets/split") ?></style>
<style><?= VV::css("public/assets/css/pages/features") ?></style>
<section id="this-stays">
<?= VV::embed("public/assets/media/arrow.svg") ?>
<div>
<h1>This thing there,</h1>
<p>That header is present on every page, so it's loaded once and never again.</p>
</div>
<?= VV::embed("public/assets/media/arrow.svg") ?>
</section>
<section id="softnav" class="split">
<div class="text">
<h1>Website shell</h1>
<p>Load your website's main stylesheet, JavaScript, markdown, and other assets <strong>once</strong> and keep them around between page navigations. Saving bandwidth and increases page load times considerably.</p>
<div class="buttons">
<a href="/docs/Reference/JavaScript"><button class="inline">
<p>Vegvisir shells</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
</div>
</div>
<div>
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=index_softnav") ?>
</div>
</section>
<section id="navigate" class="split reverse">
<div class="text">
<h1>Navigate any element</h1>
<p>Sometimes you just want to update a portion of your website. That can be done <a href="/docs/Reference/JavaScript/navigate">programmatically with JavaScript</a> or directly in the markdown using the <a href=""><code>vv</code>&nbsp;attributes</a>.</p>
<div class="buttons">
<a href="/docs/Reference/JavaScript"><button class="inline">
<p>'vv' attributes</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
</div>
</div>
<div>
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=features/vv-nav") ?>
</div>
</section>
<section id="include" class="split">
<div class="text">
<h1>..or include that page with the response</h1>
<p>Vevisir pages, snippets, and other PHP files can be inlined with the response using <code>VV::include</code>.</p>
<div class="buttons">
<a href="/docs/Reference/JavaScript"><button class="inline">
<p>VV::include()</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
</div>
</div>
<div>
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=features/vv-include") ?>
</div>
</section>