hypermedia-systems/www/cover.html

---
layout: layout.njk
url: /
templateEngine: njk
---

<meta property="og:title" content="Hypermedia Systems">
<meta property="og:description" content="
The revolutionary ideas that empowered the Web.
A simpler approach to building applications on the Web and beyond with htmx and Hyperview.
Enhancing web applications without using SPA frameworks.">
<meta property="og:type" content="book">
<meta property="og:book:author" content="Carson Gross">
<meta property="og:book:author" content="Adam Stepinski">
<meta property="og:book:author" content="Deniz Akşimşek">

<style>
.Cover-Header {
    padding-top: 10em;
    margin-top: 0;
    --bgw: 475px;
    --bgh: 110px;
    position: relative;
}

.Cover-Header::before {
  content: "";
  position: absolute;
  z-index: -1;
  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 padding-inline"
        >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>

    <p class="text-align:center italic">
        With a foreword by 
        <a href="https://training.amundsen.com/#h.p_6AntBa6tTn_J">Mike Amundsen</a>
    </p>
</header>

<main class="">

    <div class="box warn crowded color <small>" data-note>
        <script>{
            const me = document.currentScript.parentElement;
            if (localStorage.dismissedNote) me.remove();
        }</script>
        <button class="iconbutton float:right"
            onclick="
                localStorage.dismissedNote = true;
                this.closest(`[data-note]`).remove();
            ">
            <span aria-hidden="true">×</span>
            <v-h>Dismiss</v-h>
        </button>
        <p style="margin: 0"> 
        <strong class="allcaps margin-inline-end">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 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 <a href="https://htmx.org">htmx</a> and <a href="https://hyperview.org/">Hyperview</a></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>