jfmonty2/blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: jfmonty2:9d3a59e5546096c7c8bceb1dddb7cabac3c24724
Branches Tags
jfmonty2:master
jfmonty2:post-sidenotes
...
compare: jfmonty2:a6735c45f481f451a44271252415d2d59fb2740f
Branches Tags
jfmonty2:master
jfmonty2:post-sidenotes

2 Commits
9d3a59e554 ... a6735c45f4

Author SHA1 Message Date
Joseph Montanaro
a6735c45f4 add mono font and rework codeblock css 2023-12-20 07:45:26 -08:00
Joseph Montanaro
b5ca20d739 further simplify heading links 2023-12-19 07:51:20 -08:00
8 changed files with 52 additions and 141 deletions
Show Stats Expand all files Collapse all files

38
src/lib/Heading.svelte
View File

@ -6,12 +6,12 @@
</script>
<style lang="scss">
.h {
position: relative;
}
.before {
/* shift the anchor link to hang off the left side of the content when there's room */
.anchor-wrapper {
/* slightly overlap the span with the heading so that it doesn't
lose its hover state as the cursor moves between them */
position: absolute;
@ -19,15 +19,7 @@
left: -1.25em;
@media(max-width: 58rem) {
display: none;
}
}
.after {
display: none;
@media(max-width: 58rem) {
display: revert;
position: revert;
}
}
@ -46,13 +38,13 @@
}
/* emphasize anchor link when heading is hovered or when clicked (the latter for mobile) */
.h:hover a, .before:hover a, .h a:active {
.h:hover a, .anchor-wrapper:hover a, .h a:active {
color: var(--accent-color);
opacity: 100%;
}
svg {
/* undo the reset that makes svg's block */
/* undo the reset that makes images block */
display: inline;
width: 1em;
/* tiny tweak for optical alignment */
@ -61,22 +53,16 @@
</style>
<svelte:element this={tag} {id} class="h">
<span class="before">
<a href="#{id}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
</svg>
</a>
</span>
<span>
<slot></slot>
</span>
<!-- Icon from https://heroicons.com/ -->
<a href="#{id}" class="after">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
</svg>
</a>
<span class="anchor-wrapper">
<a href="#{id}" >
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
</svg>
</a>
</span>
</svelte:element>

16
src/lib/Post.svelte
View File

@ -1,5 +1,6 @@
<script context="module">
import '$styles/prose.scss';
import '$styles/code.scss';
import { onMount } from 'svelte';
import { formatDate } from './datefmt.js';
@ -23,21 +24,23 @@
<style>
.page {
/* 3-column grid: left gutter, center content, and right gutter */
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, var(--content-width)) minmax(0, 1fr);
/* a bit of breathing room for narrow screens */
padding: 0 0.5rem;
}
/* container for the table of contents */
.left-gutter {
grid-column: 1 / 2;
justify-self: end;
}
.title {
grid-column: 2 / 3;
}
.left-gutter {
grid-column: 1 / 2;
justify-self: end;
}
.subtitle {
font-size: 0.9em;
font-style: italic;
@ -100,7 +103,6 @@
<meta property="og:url" content="https://blog.jfmonty2.com/{slug}">
<meta property="og:description" content={description}>
<meta property="og:site_name" content="Joe's Blog">
<link rel="stylesheet" href="/prism-dracula.css" />
</svelte:head>
<div class="page">

23
src/styles/code.scss Normal file
View File

@ -0,0 +1,23 @@
@import 'prism-dracula';
@font-face {
font-family: 'Hack';
font-style: normal;
font-weight: 400;
src: url(/Hack-Regular.woff2) format('woff2');
font-display: block;
}
code {
padding: 0.05rem 0.2rem 0.1rem;
background: #eee;
border-radius: 0.2rem;
font-size: 0.75em;
font-family: 'Hack', monospace;
}
pre > code[class*="language-"] {
font-size: 0.75em;
font-family: 'Hack', monospace;
}

8
src/styles/main.scss
View File

@ -9,14 +9,6 @@
font-display: block;
}
@font-face {
font-family: 'Baskerville';
font-style: normal;
font-weight: 400;
src: url(/Baskerville-Regular.woff2) format('woff2');
font-display: block;
}
:root {
--content-size: 1.25rem;
--content-line-height: 1.3;

0
static/prism-dracula.css → src/styles/prism-dracula.css
View File

21
src/styles/prose.scss
View File

@ -1,3 +1,11 @@
@font-face {
font-family: 'Baskerville';
font-style: normal;
font-weight: 400;
src: url(/Baskerville-Regular.woff2) format('woff2');
font-display: block;
}
h1, h2, h3, h4, h5, h6 {
font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;
font-weight: 600;
@ -29,16 +37,3 @@ h1, h2, h3, h4 {
p {
margin-bottom: 0.8em;
}
code {
background: #eee;
border-radius: 0.2rem;
font-family: Consolas, monospace;
font-size: 0.75em;
padding: 0.05rem 0.2rem 0.1rem;
}
pre > code[class*="language-"] {
font-size: 1rem;
font-family: 'Consolas', monospace;
}

BIN
static/Hack-Regular.woff2 Normal file
View File

Binary file not shown.

87
static/style.css
View File

@ -1,87 +0,0 @@
/* ### TYPOGRAPHY ### */
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 400;
src: url(/Tajawal-Regular.woff2) format('woff2');
font-display: block;
}
@font-face {
font-family: 'Baskerville';
font-style: normal;
font-weight: 400;
src: url(/Baskerville-Regular.woff2) format('woff2');
font-display: block;
}
:root {
--content-size: 1.25rem;
--content-line-height: 1.3;
--content-color: #1e1e1e;
--content-color-faded: #555;
--accent-color: #8c0606;
}
html {
font-family: 'Tajawal', sans-serif;
font-size: var(--content-size);
line-height: var(--content-line-height);
letter-spacing: -0.005em;
color: var(--content-color);
box-sizing: border-box;
}
body {
margin: 0;
--content-width: 42rem;
}
h1, h2, h3, h4, h5, h6 {
font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;;
font-weight: 600;
color: #464646;
}
h1 {
font-variant: petite-caps;
margin-top: 0.75rem;
}
h1, h2 {
margin-bottom: 0.75rem;
}
h3 {
font-size: 1.2rem;
}
h4 {
font-size: 1.1rem;
}
h3, h4 {
margin-bottom: 0.5rem;
}
h5, h6 {
font-size: 1rem;
margin-bottom: 0;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
code {
background: #eee;
border-radius: 0.2rem;
font-family: Consolas, monospace;
font-size: 0.8em;
padding: 0.05rem 0.2rem 0.1rem;
}
pre > code {
font-size: 0.8rem;
}