Change to catppuccin theme, fix code block alignment, add copy code buttons
This commit is contained in:
parent
04d855724b
commit
418766dca5
GPG key ID:
5B2020A0F9921EF4
6 changed files with 197 additions and 93 deletions
|
|
@ -33,10 +33,10 @@
|
|||
{{ end }}
|
||||
</section>
|
||||
<section style="position:absolute;height:100%;right:0">
|
||||
<button class="no-bg theme-toggler js-only centerize" aria-label="toggle dark theme">
|
||||
<button class="no-bg theme-toggler js-only centerize" aria-label="toggle theme">
|
||||
{{ partial "theme-toggle.html" . }}
|
||||
</button>
|
||||
<button class="no-bg align-toggler js-only hidden-on-mobile centerize" aria-label="toggle text alignment">
|
||||
<button class="no-bg align-toggler js-only hidden-on-mobile centerize" aria-label="toggle alignment">
|
||||
{{ partial "align-toggle.html" . }}
|
||||
</button>
|
||||
</section>
|
||||
|
|
@ -47,16 +47,30 @@
|
|||
|
||||
<ul class="horizontal-blocks">
|
||||
<li>
|
||||
<a href="https://discord.gg/jUCXCYp">Discord</a>
|
||||
<a href="https://discord.gg/jUCXCYp">
|
||||
<svg fill="currentColor" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/></svg>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="mailto:daniel@lyte.dev">Email</a>
|
||||
<a href="mailto:daniel@lyte.dev">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
|
||||
</svg>
|
||||
Email
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://git.lyte.dev/lytedev">git.lyte.dev</a>
|
||||
<a href="https://git.lyte.dev/lytedev">
|
||||
<svg height="24" width="24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M439.55 236.05L244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
|
||||
git.lyte.dev
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/lytedev">GitHub</a>
|
||||
<a href="https://github.com/lytedev">
|
||||
<svg height="24" width="24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
@ -64,10 +78,20 @@
|
|||
|
||||
<ul class="horizontal-blocks">
|
||||
<li>
|
||||
<a href="/privacy">Privacy Policy</a>
|
||||
<a href="/privacy">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
|
||||
</svg>
|
||||
Privacy Policy
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://git.lyte.dev/lytedev/site.lyte.dev">Site Code</a>
|
||||
<a href="https://git.lyte.dev/lytedev/site.lyte.dev">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
|
||||
</svg>
|
||||
Site Code
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,2 +1,6 @@
|
|||
<svg class="hide-in-align-left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><rect fill="none" height="24" width="24"/><path style="fill:var(--fg)" d="M4,22H2V2h2V22z M22,7H6v3h16V7z M16,14H6v3h10V14z"/></svg>
|
||||
<svg class="hide-in-align-center" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path style="fill:var(--fg)" d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z"/></svg>
|
||||
<svg class="hide-in-align-left" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" />
|
||||
</svg>
|
||||
<svg class="hide-in-align-center" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 543 B After Width: | Height: | Size: 556 B |
|
|
@ -1,2 +1,6 @@
|
|||
<svg class="hide-in-light-theme" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path style="fill:var(--fg)" d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zm-2 5.79V18h-3.52L12 20.48 9.52 18H6v-3.52L3.52 12 6 9.52V6h3.52L12 3.52 14.48 6H18v3.52L20.48 12 18 14.48zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
|
||||
<svg class="hide-in-dark-theme" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path style="stroke:var(--fg)" d="M10 4c4.41 0 8 3.59 8 8s-3.59 8-8 8c-.34 0-.68-.02-1.01-.07C10.9 17.77 12 14.95 12 12s-1.1-5.77-3.01-7.93C9.32 4.02 9.66 4 10 4m0-2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 8.65C6.47 21.5 8.18 22 10 22c5.52 0 10-4.48 10-10S15.52 2 10 2z"/></svg>
|
||||
<svg class="hide-in-light-theme" height="24" width="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
||||
</svg>
|
||||
<svg class="hide-in-dark-theme" height="24" width="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 966 B After Width: | Height: | Size: 838 B |
|
|
@ -4,10 +4,26 @@ code, pre
|
|||
ul, ol { padding-left: 2em }
|
||||
|
||||
a
|
||||
cursor pointer
|
||||
text-decoration-skip-ink auto
|
||||
color var(--link-fg)
|
||||
&:visited { color: var(--link-visited-fg) }
|
||||
|
||||
a > svg
|
||||
margin-right: 0.5em
|
||||
|
||||
button.copy-code-button
|
||||
display none
|
||||
position absolute
|
||||
top 0.5em
|
||||
right 0.5em
|
||||
color var(--link-fg)
|
||||
text-decoration underline
|
||||
z-index 10
|
||||
|
||||
pre.chroma:hover > button.copy-code-button
|
||||
display block
|
||||
|
||||
img, embed, frame, iframe { max-width: 100vw }
|
||||
|
||||
html,body
|
||||
|
|
@ -196,6 +212,7 @@ form
|
|||
border-left 0
|
||||
|
||||
pre.chroma
|
||||
position relative
|
||||
padding 0
|
||||
display flex
|
||||
width auto
|
||||
|
|
@ -207,6 +224,7 @@ form
|
|||
margin-right auto
|
||||
|
||||
> code
|
||||
width: 600px;
|
||||
padding 0.25em 0.5em
|
||||
border-left solid var(--syntax-bpx) var(--syntax-ledg)
|
||||
|
||||
|
|
@ -234,7 +252,7 @@ ul.horizontal-blocks
|
|||
flex-grow 1
|
||||
display flex
|
||||
padding 0.5em 2em
|
||||
background-color var(--header-bg)
|
||||
background-color var(--button-bg)
|
||||
text-align center
|
||||
justify-content center
|
||||
align-items center
|
||||
|
|
|
|||
|
|
@ -1,34 +1,50 @@
|
|||
/* catppuccin colors */
|
||||
latte = {
|
||||
red: #d20f39,
|
||||
yellow: #df8e1d,
|
||||
green: #40a02b,
|
||||
sapphire: #209fb5,
|
||||
mauve: #8839ef,
|
||||
}
|
||||
|
||||
mocha = {
|
||||
red: #f38ba8,
|
||||
yellow: #f9e2af,
|
||||
green: #a6e3a1
|
||||
sapphire: #74c7ec,
|
||||
mauve: #cba6f7,
|
||||
}
|
||||
|
||||
light-syntax = {
|
||||
brd: rgba(255, 255, 255, 0.2),
|
||||
bg: rgba(0, 0, 0, 0.05),
|
||||
ledg: #ccc,
|
||||
sh: #775,
|
||||
name: #480,
|
||||
mag: #d04,
|
||||
lit: #40f,
|
||||
lits: #660,
|
||||
aq: #04d,
|
||||
err: #960050,
|
||||
bg: #e6e9ef,
|
||||
ledg: rgba(0, 0, 0, 0.1),
|
||||
sh: #6c6f85,
|
||||
name: latte['green'],
|
||||
mag: latte['red'],
|
||||
lit: latte['mauve'],
|
||||
lits: latte['yellow'],
|
||||
aq: latte['sapphire'],
|
||||
err: latte['red'],
|
||||
}
|
||||
|
||||
dark-syntax = {
|
||||
brd: rgba(255, 255, 255, 0.2),
|
||||
bg: rgba(255, 255, 255, 0.03),
|
||||
ledg: #333,
|
||||
sh: #75715e,
|
||||
name: #a6e22e,
|
||||
mag: #f92672,
|
||||
lit: #ae81ff,
|
||||
lits: #e6db74,
|
||||
aq: #66d9ef,
|
||||
err: #960050,
|
||||
bg: #181825,
|
||||
ledg: #313244,
|
||||
sh: #6c7086,
|
||||
name: mocha['green'],
|
||||
mag: mocha['red'],
|
||||
lit: mocha['mauve'],
|
||||
lits: mocha['yellow'],
|
||||
aq: mocha['sapphire'],
|
||||
err: mocha['red'],
|
||||
}
|
||||
|
||||
theme-colors = {
|
||||
heading-fg: #333,
|
||||
icon-shadow: #fff,
|
||||
link-visited-fg: #666,
|
||||
link-fg: #000,
|
||||
link-visited-fg: #5c5f77,
|
||||
link-fg: #209fb5,
|
||||
}
|
||||
|
||||
:root
|
||||
|
|
@ -43,12 +59,13 @@ light-theme =
|
|||
--syntax-{k}: v
|
||||
for k2, v2 in theme-colors
|
||||
{unquote("--" + k2)}: v2
|
||||
--bg #fff
|
||||
--header-bg #eee
|
||||
--heading-fg #4c4f69
|
||||
--bg #eff1f5
|
||||
--header-bg rgba(255, 255, 255, 0.1)
|
||||
--header-hover-bg #ddd
|
||||
--fg #111
|
||||
--inline-code-bg #ddd
|
||||
--input-bg rgba(0, 0, 0, 0.08)
|
||||
--fg #4c4f69
|
||||
--inline-code-bg rgba(0,0,0,0.08)
|
||||
--input-bg #dce0e8
|
||||
--input-hover-bg rgba(0, 0, 0, 0.16)
|
||||
--input-focus-bg var(--input-bg)
|
||||
--button-bg var(--input-bg)
|
||||
|
|
@ -60,15 +77,17 @@ dark-theme =
|
|||
--syntax-{k}: v
|
||||
for k2, v2 in theme-colors
|
||||
{unquote("--" + k2)}: invert(v2)
|
||||
--bg #111
|
||||
--header-bg #191919
|
||||
--bg #1e1e2e
|
||||
--header-bg rgba(255, 255, 255, 0.03)
|
||||
--header-hover-bg #333
|
||||
--fg #fff
|
||||
--link-visited-fg #aaa
|
||||
--inline-code-bg #222
|
||||
--input-bg rgba(255, 255, 255, 0.08)
|
||||
--input-hover-bg rgba(255, 255, 255, 0.16)
|
||||
--input-focus-bg var(--input-bg)
|
||||
--fg #cdd6f4
|
||||
--heading-fg #cdd6f4
|
||||
--link-visited-fg #a6adc8
|
||||
--link-fg #74c7ec
|
||||
--inline-code-bg rgba(255,255,255,0.05)
|
||||
--input-bg #181825
|
||||
--input-hover-bg #313244
|
||||
--input-focus-bg #45475a
|
||||
--button-bg var(--input-bg)
|
||||
--button-hover-bg var(--input-hover-bg)
|
||||
--button-focus-bg var(--input-bg)
|
||||
|
|
|
|||
127
static/global.js
127
static/global.js
|
|
@ -1,60 +1,95 @@
|
|||
const body = document.body
|
||||
const queryAll = sel => document.querySelectorAll(sel)
|
||||
const body = document.body;
|
||||
const queryAll = (sel) => document.querySelectorAll(sel);
|
||||
|
||||
const initTheme = () => {
|
||||
const curTheme = localStorage.getItem('theme')
|
||||
const oldTheme = curTheme == 'dark' ? 'light' : 'dark'
|
||||
body.classList.add(`${curTheme}-theme`)
|
||||
body.classList.remove(`${oldTheme}-theme`)
|
||||
const curTheme = localStorage.getItem("theme");
|
||||
const oldTheme = curTheme == "dark" ? "light" : "dark";
|
||||
body.classList.add(`${curTheme}-theme`);
|
||||
body.classList.remove(`${oldTheme}-theme`);
|
||||
};
|
||||
|
||||
if (localStorage.getItem("theme") === null) {
|
||||
localStorage.setItem(
|
||||
"theme",
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light",
|
||||
);
|
||||
}
|
||||
|
||||
if (localStorage.getItem('theme') === null) {
|
||||
localStorage.setItem('theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
|
||||
}
|
||||
initTheme();
|
||||
|
||||
initTheme()
|
||||
const toggleTheme = (ev) => {
|
||||
localStorage.setItem(
|
||||
"theme",
|
||||
localStorage.getItem("theme") == "dark" ? "light" : "dark",
|
||||
);
|
||||
initTheme();
|
||||
if (!!ev.target) ev.preventDefault();
|
||||
return false;
|
||||
};
|
||||
|
||||
const toggleTheme = ev => {
|
||||
localStorage.setItem('theme', localStorage.getItem('theme') == 'dark' ? 'light' : 'dark')
|
||||
initTheme()
|
||||
if (!!ev.target) ev.preventDefault()
|
||||
return false
|
||||
}
|
||||
|
||||
queryAll('.theme-toggler').forEach(a => a.addEventListener('click', toggleTheme))
|
||||
queryAll('.js-only').forEach(a => a.classList.remove('js-only'))
|
||||
queryAll('.js-disabled-only').forEach(a => a.remove())
|
||||
queryAll(".theme-toggler").forEach((a) =>
|
||||
a.addEventListener("click", toggleTheme)
|
||||
);
|
||||
queryAll(".js-only").forEach((a) => a.classList.remove("js-only"));
|
||||
queryAll(".js-disabled-only").forEach((a) => a.remove());
|
||||
|
||||
const initAlign = () => {
|
||||
const cur = localStorage.getItem('align')
|
||||
const prev = cur == 'center' ? 'left' : 'center'
|
||||
body.classList.add('align-' + cur)
|
||||
body.classList.remove('align-' + prev)
|
||||
const cur = localStorage.getItem("align");
|
||||
const prev = cur == "center" ? "left" : "center";
|
||||
body.classList.add("align-" + cur);
|
||||
body.classList.remove("align-" + prev);
|
||||
};
|
||||
|
||||
if (localStorage.getItem("align") === null) {
|
||||
localStorage.setItem("align", "center");
|
||||
}
|
||||
|
||||
if (localStorage.getItem('align') === null) localStorage.setItem('align', 'center')
|
||||
initAlign();
|
||||
|
||||
initAlign()
|
||||
const toggleAlign = (ev) => {
|
||||
localStorage.setItem(
|
||||
"align",
|
||||
localStorage.getItem("align") == "center" ? "left" : "center",
|
||||
);
|
||||
initAlign();
|
||||
if (!!ev.target) ev.preventDefault();
|
||||
return false;
|
||||
};
|
||||
|
||||
const toggleAlign = ev => {
|
||||
localStorage.setItem('align', localStorage.getItem('align') == 'center' ? 'left' : 'center')
|
||||
initAlign()
|
||||
if (!!ev.target) ev.preventDefault()
|
||||
return false
|
||||
queryAll(".align-toggler").forEach((a) =>
|
||||
a.addEventListener("click", toggleAlign)
|
||||
);
|
||||
|
||||
window.addEventListener("load", (_ev) => {
|
||||
const selector = [1, 2, 3, 4, 5, 6].map((n) => `h${n}[id]`).join(",");
|
||||
queryAll(selector).forEach((el) => {
|
||||
const anchorLink = document.createElement("a");
|
||||
anchorLink.classList.add("anchor-link");
|
||||
anchorLink.textContent = "§";
|
||||
anchorLink.href = `#${el.id}`;
|
||||
el.appendChild(anchorLink);
|
||||
});
|
||||
});
|
||||
|
||||
function initCodeCopyButtons() {
|
||||
const codeBlocks = document.querySelectorAll("pre.chroma");
|
||||
codeBlocks.forEach((block) => {
|
||||
const code = block.querySelectorAll("code")[0];
|
||||
const button = document.createElement("button");
|
||||
button.classList.add("copy-code-button");
|
||||
block.appendChild(button);
|
||||
button.textContent = "Copy";
|
||||
button.addEventListener("click", (_ev) => {
|
||||
navigator.clipboard.writeText(code.textContent);
|
||||
const lastText = button.textContent;
|
||||
button.textContent = "Copied to clipbooard!";
|
||||
setTimeout(() => button.textContent = lastText, 3000);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
queryAll('.align-toggler').forEach(a => a.addEventListener('click', toggleAlign))
|
||||
|
||||
window.addEventListener('load', _ev => {
|
||||
console.log('loaded')
|
||||
const selector = [1, 2, 3, 4, 5, 6].map(n => `h${n}[id]`).join(',')
|
||||
console.log(selector)
|
||||
queryAll(selector).forEach(el => {
|
||||
console.log(el)
|
||||
const anchorLink = document.createElement('a')
|
||||
anchorLink.classList.add('anchor-link')
|
||||
anchorLink.textContent = '§'
|
||||
anchorLink.href = `#${el.id}`
|
||||
el.appendChild(anchorLink)
|
||||
})
|
||||
})
|
||||
window.addEventListener("load", (_ev) => {
|
||||
initCodeCopyButtons();
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue