lytedev/site.lyte.dev
1
0
Fork 0
Code Issues Pull requests 1 Releases Wiki Activity

Change to catppuccin theme, fix code block alignment, add copy code buttons

Browse source
This commit is contained in:
Daniel Flanagan 2023-05-11 13:54:04 -05:00
parent 04d855724b
commit 418766dca5
Signed by: lytedev
GPG key ID: 5B2020A0F9921EF4
6 changed files with 197 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
layouts/_default/baseof.html
View file

@ -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>

8
layouts/partials/align-toggle.html
View file

@ -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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 543 B

After

Width:  |  Height:  |  Size: 556 B

8
layouts/partials/theme-toggle.html
View file

@ -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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 966 B

After

Width:  |  Height:  |  Size: 838 B

20
src/stylus/core.styl
View file

@ -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

87
src/stylus/theme.styl
View file

@ -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
View file

@ -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();
});