hypermedia-systems/www/cover.html

97 lines
3.1 KiB
HTML

---
layout: layout.njk
url: /
templateEngine: njk
---
<style>
.Cover-Header {
padding-top: 10em;
margin-top: 0;
--bgw: 475px;
--bgh: 110px;
position: relative;
}
.Cover-Header::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-image: url(/images/radialbugpattern-spine-black-realsize.png);
background-position: center calc(var(--bgh) - 28em);
background-size: calc(var(--bgw) * 6);
background-repeat: no-repeat;
image-rendering: pixelated;
}
@media (prefers-color-scheme: dark) {
.Cover-Header::before {
filter: invert();
}
}
</style>
<header class="Cover-Header">
<h1 class="massivetext italic allcaps text-align:center fullbleed"
>Hypermedia Systems</h1>
<p class="allcaps text-align:center f-row dense justify-content:center flex-wrap:wrap" style="row-gap: 0">
<span>Carson&nbsp;Gross</span>
<span>Adam&nbsp;Stepinski</span>
<span lang="tr">Deniz&nbsp;Akşimşek</span>
</p>
</header>
<main class="">
<div class="box warn crowded color">
<p>
<strong class="color margin-inline-end allcaps secondary-font">Note</strong>
Hypermedia Systems is a rewrite of a book that fell out of contract with
a publisher and is currently a <strong>work in progress</strong>.</p>
</div>
<div class="grid margin-block">
<ul id="blurb" role=list data-cols="1 3" data-cols@s="1" data-rows="1 3"
class="big italic margin-inline-end flow-gap">
<li>The revolutionary ideas that empowered the Web</li>
<li>A simpler approach to building applications on the Web and beyond with <i><a href="https://htmx.org">htmx</a></i> and <i><a href="https://hyperview.org/">Hyperview</a></i></li>
<li>Enhancing web applications without using SPA frameworks</li>
<li></li>
</ul>
<ul data-cols="4 5" data-cols@s="1" role=list class="f-row flex-wrap:wrap crowded">
<li><strong><a href="/book/contents" class="big <button>">
<span>
Read online
<small>(Free, forever)</small>
</span>
</a></strong>
<li><a disabled class="big <button>">
<span>
Hard copy
<small>(planned in 2023)</small>
</span>
</a></strong>
<li><a disabled class="big <button>">
<span>
Ebook
<small>(planned in 2023)</small>
</span>
</a></strong>
</ul>
<p data-cols="4 5" data-cols@s="1" class="<small> secondary-font">
For web developers frustrated with the complexity of modern practice,<span class="aestheticbreak"></span>
those looking to brush up on web fundamentals,<span class="aestheticbreak"></span>
web development shops looking to bring their apps to mobile,<span class="aestheticbreak"></span>
and any workaday programmer looking for an introduction to hypermedia and REST.
</p>
</div>
</main>
<footer>
{% include "global-footer.njk" %}
</footer>