13 Commits

Author SHA1 Message Date
72b5479472 bruh
it's not variable font
2023-01-22 20:25:20 -06:00
4d1a0d6be2 Jost 2023-01-22 20:01:33 -06:00
ac580e1995 WIP 2023-01-22 18:57:52 -06:00
cee1cd3a82 WIP 2023-01-22 18:57:52 -06:00
3fae019148 Finish support for list page subtitle
Fixes #27 (as long as I didn't miss anything)
2023-01-22 16:43:09 -06:00
8ef1e3840a Change color when hovering over share buttons 2023-01-22 16:31:08 -06:00
629b3758b9 Change print button to an <a> to match the rest of the buttons
Also makes it have pointer cursor
2023-01-22 16:28:24 -06:00
9412906b4f Make the left bar of blockquote lined up with rest of text 2023-01-22 16:26:43 -06:00
f8cfad647f Fix contrast of code block Copy button 2023-01-22 16:23:03 -06:00
b200623dca Fix keyboard accessibility of code block copy button 2023-01-22 16:22:51 -06:00
80f5994d96 Improve code block copy text
- Use JS to get it directly from the code block instead of needing a
  separate `pre.code-raw` to get it from. That makes it possible to:
- bashsession: Don't copy prompt or command output
2023-01-22 00:09:34 -06:00
342710a755 Reduce gap between elements in subsections list 2023-01-21 23:34:34 -06:00
8eb642dbc8 Remove <hr> separator before footer 2023-01-21 23:32:32 -06:00
22 changed files with 206 additions and 21 deletions

View File

@ -1,4 +1,6 @@
/* bobatheme is available under the MIT license at /* vim: foldmethod=marker
*
* bobatheme is available under the MIT license at
* https://github.com/BBaoVanC/bobatheme. * https://github.com/BBaoVanC/bobatheme.
*/ */
@ -46,6 +48,7 @@
--text-gray-1: #919191; /* lch(60, 0, X) */ --text-gray-1: #919191; /* lch(60, 0, X) */
--link-0: #3a94fb; /* lch(60, 60, 270) */ --link-0: #3a94fb; /* lch(60, 60, 270) */
--link-1: #4ea1ff; /* lch(65, 60, 270) -- out of sRGB */
--figure-border: #1f5593; /* lch(35, 40, 270) */ --figure-border: #1f5593; /* lch(35, 40, 270) */
@ -116,6 +119,166 @@
/* Fonts */
/* Open Sans {{{ */
/* cyrillic-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/font/opensans/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4taVIGxA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/font/opensans/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4kaVIGxA.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/font/opensans/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4saVIGxA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/font/opensans/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4jaVIGxA.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/font/opensans/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4iaVIGxA.woff2) format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/font/opensans/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4vaVIGxA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/font/opensans/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4uaVIGxA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/font/opensans/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2) format('woff2');
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;
}
/* }}} */
/* JetBrains Mono {{{ */
/* cyrillic-ext */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/font/jetbrainsmono/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTN1OVgaY.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/font/jetbrainsmono/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTPlOVgaY.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/font/jetbrainsmono/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTOVOVgaY.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/font/jetbrainsmono/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTNVOVgaY.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/font/jetbrainsmono/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTNFOVgaY.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/font/jetbrainsmono/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTOlOV.woff2) format('woff2');
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;
}
/* }}} */
:root {
--font-sans: "Open Sans", "Noto Sans", sans-serif;
--font-mono: "JetBrains Mono", monospace;
}
html {
font-family: var(--font-sans);
}
pre, code, kbd, samp {
font-family: var(--font-mono);
font-size: 0.75em;
}
pre > code {
/* otherwise it ends up being 0.75^2 em */
font-size: unset;
}
/* Post layout (in list pages) */ /* Post layout (in list pages) */
.list-page-content { .list-page-content {
display: flex; display: flex;
@ -272,7 +435,7 @@
.sections { .sections {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 40px; gap: 10px;
} }
.section { .section {
@ -423,16 +586,15 @@
justify-content: center; justify-content: center;
} }
.share-buttons button,
.share-buttons a { .share-buttons a {
background-color: var(--background-2); background-color: var(--background-2);
color: var(--text-2); color: var(--text-2);
padding: 4px; padding: 4px;
border-radius: 8px; border-radius: 8px;
} }
.share-buttons a:hover {
.share-buttons button { background-color: var(--background-3);
border: none; color: var(--text-3);
} }
.share-buttons svg { .share-buttons svg {
@ -570,7 +732,6 @@ html {
body { body {
background-color: var(--background-0); background-color: var(--background-0);
color: var(--text-0); color: var(--text-0);
font-family: "Open Sans", "Noto Sans", sans-serif;
margin: 20px; margin: 20px;
max-width: 720px; max-width: 720px;
overflow-wrap: break-word; overflow-wrap: break-word;
@ -583,6 +744,7 @@ body {
} }
footer { footer {
margin-top: 20px;
text-align: center; text-align: center;
} }
@ -630,6 +792,7 @@ a:hover {
blockquote { blockquote {
border-left: 5px solid var(--background-2); border-left: 5px solid var(--background-2);
padding-left: 15px; padding-left: 15px;
margin-left: 0;
} }
hr { hr {
@ -700,10 +863,12 @@ table.markdown {
} }
.code-block > .code-header > .code-type { .code-block > .code-header > .code-type {
border-top-left-radius: 8px; border-top-left-radius: 8px;
font-family: monospace;
margin: auto 0; margin: auto 0;
} }
/* TODO: make the code copy button prettier */ /* TODO: make the code copy button prettier */
.code-block > .code-header > .code-copy-button {
color: var(--link-1);
}
.code-block > .code-header > .code-copy-button:hover { .code-block > .code-header > .code-copy-button:hover {
cursor: pointer; cursor: pointer;
} }
@ -738,6 +903,7 @@ table.markdown {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.code-block > .code-header > .code-type,
code { code {
border-radius: 5px; border-radius: 5px;
} }

View File

@ -12,14 +12,19 @@ window.onscroll = function() {
window.onload = () => { window.onload = () => {
document.querySelectorAll(".code-block").forEach(codeBlock => { document.querySelectorAll(".code-block").forEach(codeBlock => {
const button = codeBlock.querySelector(".code-header > .code-copy-button"); const button = codeBlock.querySelector(".code-header > .code-copy-button");
// TODO: maybe get this from HTMLElement.innerText on the actual code block content element
// but it's hard to select it; `data-lang` attribute might not always be there (if lang is unset) // lang will not be unset because we default it to text
const rawCode = codeBlock.querySelector("pre.code-raw").innerText; // clone it so it doesn't change the actual DOM element
const codeElem = codeBlock.querySelector("code[data-lang]").cloneNode(true);
// bashsession: remove command output lines
codeElem.querySelectorAll(".go").forEach(e => e.parentNode.removeChild(e));
// bashsession: remove prompt symbol
codeElem.querySelectorAll(".gp").forEach(e => e.parentNode.removeChild(e));
const rawCode = codeElem.innerText;
const originalCopyText = button.innerHTML; const originalCopyText = button.innerHTML;
button.onclick = event => { button.onclick = event => {
navigator.clipboard.writeText(rawCode); navigator.clipboard.writeText(rawCode);
console.log(rawCode);
// TODO: maybe we could add a fancier indicator, like a flash or something // TODO: maybe we could add a fancier indicator, like a flash or something
event.target.innerHTML = "Copied!"; event.target.innerHTML = "Copied!";
setTimeout(() => { setTimeout(() => {

View File

@ -1,13 +1,15 @@
{{ $type := "text" }}
{{ with .Type }}
{{ $type = . }}
{{ end }}
<div class="code-block"> <div class="code-block">
<div class="code-header"> <div class="code-header">
<span class="code-type">{{ .Type }}</span> <pre class="code-type">{{ $type }}</pre>
<a class="code-copy-button"> <a href="javascript:void(0)" class="code-copy-button">
{{ i18n "copy_to_clipboard" }} {{ i18n "copy_to_clipboard" }}
</a> </a>
</div> </div>
{{/* a div.highlight is already created by highlight function */}}
{{ highlight .Inner .Type }}
{{/* for copy to clipboard */}} {{/* a div.highlight is already created by highlight function */}}
<pre class="code-raw" style="display: none;">{{ .Inner }}</pre> {{ highlight .Inner $type }}
</div> </div>

View File

@ -21,7 +21,6 @@
</main> </main>
{{ if or .Site.Copyright .Site.Params.footer }} {{ if or .Site.Copyright .Site.Params.footer }}
<hr>
<footer> <footer>
<small> <small>
{{ with .Site.Copyright }} {{ with .Site.Copyright }}

View File

@ -5,6 +5,10 @@
{{ partial "rss-link.html" . }} {{ partial "rss-link.html" . }}
</h1> </h1>
{{ with .Content }}
{{ . }}
{{ end }}
<div class="list-page-content"> <div class="list-page-content">
{{ with .Sections }} {{ with .Sections }}
<div class="sections"> <div class="sections">

View File

@ -4,6 +4,10 @@
{{ .Title | markdownify }} {{ .Title | markdownify }}
</h1> </h1>
{{ with .Content }}
{{ . }}
{{ end }}
<div class="page-list"> <div class="page-list">
{{ with .Paginator.Pages }} {{ with .Paginator.Pages }}
{{ range . }} {{ range . }}

View File

@ -54,9 +54,10 @@
*/}} */}}
{{ if .Site.Params.shareButtons.print }} {{ if .Site.Params.shareButtons.print }}
<button class="print-share" <a class="print-share"
href="javascript:void(0)"
onclick="window.print(); share_event('Print');"> onclick="window.print(); share_event('Print');">
{{- partial "icon.html" "printer" -}} {{- partial "icon.html" "printer" -}}
</button> </a>
{{ end }} {{ end }}
</div> </div>

View File

@ -4,6 +4,10 @@
{{ .Title | markdownify }} {{ .Title | markdownify }}
</h1> </h1>
{{ with .Content }}
{{ . }}
{{ end }}
<div class="series-taxonomy-list"> <div class="series-taxonomy-list">
{{ with .Pages }} {{ with .Pages }}
{{ range . }} {{ range . }}