Restyle WIP tutorial

This commit is contained in:
Richard Feldman 2023-11-18 22:16:27 -05:00
parent b725a114cf
commit 42630d8b50
No known key found for this signature in database
GPG Key ID: F1F21AA5B1D9E43B
2 changed files with 32 additions and 5 deletions

View File

@ -56,10 +56,10 @@ view = \page, htmlContent ->
[text htmlContent]
bodyAttrs =
if page == "index.html" then
[id "homepage-main"]
else
[class "article-layout"]
when page is
"index.html" -> [id "homepage-main"]
"tutorial.html" -> [id "tutorial-main", class "article-layout"]
_ -> [class "article-layout"]
html [lang "en", class "no-js"] [
head [] [
@ -72,6 +72,7 @@ view = \page, htmlContent ->
# The homepage doesn't actually use latin-ext
preloadWoff2 "/fonts/lato-v23-latin/lato-v23-latin-regular.woff2",
preloadWoff2 "/fonts/source-code-pro-v22-latin/source-code-pro-v22-latin-regular.woff2",
preloadWoff2 "/fonts/permanent-marker-v16-latin/permanent-marker-v16-latin-regular.woff2",
link [rel "prefetch", href "/repl/roc_repl_wasm.js"],
link [rel "stylesheet", href "/wip/site.css"],
link [rel "stylesheet", href "/wip/repl.css"],

View File

@ -685,6 +685,19 @@ li {
}
}
@font-face {
font-family: "Permanent Marker";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/permanent-marker-v16-latin/permanent-marker-v16-latin-regular.woff2") format("woff2"),
url("/fonts/permanent-marker-v16-latin/permanent-marker-v16-latin-regular.woff") format("woff");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: "Lato";
@ -1100,7 +1113,20 @@ code .dim {
border-color: var(--light-cyan);
}
/* Tutorial Table of Contents */
/* Tutorial */
#tutorial-main h1,
#tutorial-main h2,
#tutorial-main h3,
#tutorial-main h4,
#tutorial-main h5 {
font-family: "Permanent Marker";
line-height: 1rem;
margin-top: 1.75rem;
margin-bottom: 0;
color: var(--header-link-color);
border: none;
}
#tutorial-toc {
background-color: var(--gray-bg);