more css & cover page

This commit is contained in:
Deniz Akşimşek 2022-11-09 16:18:57 +03:00
parent 546ab487d6
commit 4b4732df9c
2 changed files with 38 additions and 5 deletions

View File

@ -9,7 +9,7 @@
--main-font: "Palatino", serif;
--secondary-font: "Source Sans Pro", "Source Sans 3", sans-serif;
--display-font: "ChicagoFLF", "Impact", sans-serif;
--mono-font: "Berkeley Mono", "Input Mono", "Iosevka", "Victor Mono", "Consolas", monospace, monospace;
--mono-font: "Berkeley Mono", "Input Mono", "Iosevka", "Liberation Mono", "Victor Mono", "Consolas", monospace, monospace;
font-size: calc((18 / 16) * 100%);
}
@ -18,6 +18,26 @@
font-weight: normal;
font-family: var(--display-font);
}
p, li, figcaption {
text-align: justify;
}
.colist {
counter-reset: colist;
}
.colist li {
counter-increment: colist;
margin-inline-start: 1.2ch;
}
.colist li::marker {
content: "(" counter(colist) ") ";
font-family: var(--mono-font);
font-size: .9em;
font-weight: bold;
}
</style>
</head>
<body>

View File

@ -1,7 +1,19 @@
---
layout: layout.njk
---
# Building Hypermedia Systems
<header style="min-height: 40vh; display: grid; place-items: center">
<div>
# Hypermedia Systems {.italic .allcaps .text-align:center style="font-size: calc(.142 * var(--eff-line-length)); line-height: 1em"}
- Carson&nbsp;Gross
- Adam&nbsp;Stepinski
- Deniz&nbsp;Akşimşek
{role=list .f-row .flex-wrap:wrap .justify-content:center .italic}
</div>
</header>
This is a book about building systems with hypermedia, or, as we like to call them, Hypermedia Driven Applications (HDAs).
@ -12,6 +24,7 @@ It covers:
* Using HyperView to build mobile HDAs
* Using non-Hypermedia technology effectively within HDAs
You can purchase a PDF of the book here (TBD)
Or you can view the entire book online for free [here](/manuscript/BuildingHypermediaSystems).
<p class="f-row flex-wrap:wrap justify-content:center" style="column-gap: calc(.5 * var(--gap))">
<strong><a href="/manuscript/BuildingHypermediaSystems" class="<button>">Read online for free</a></strong>
<strong><a href="#" class="<button>">Get PDF</a></strong>
</p>