Compare commits
No commits in common. "a6735c45f481f451a44271252415d2d59fb2740f" and "9d3a59e5546096c7c8bceb1dddb7cabac3c24724" have entirely different histories.
a6735c45f4
...
9d3a59e554
@ -6,12 +6,12 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.h {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* shift the anchor link to hang off the left side of the content when there's room */
|
||||
.anchor-wrapper {
|
||||
.before {
|
||||
/* 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,7 +19,15 @@
|
||||
left: -1.25em;
|
||||
|
||||
@media(max-width: 58rem) {
|
||||
position: revert;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.after {
|
||||
display: none;
|
||||
|
||||
@media(max-width: 58rem) {
|
||||
display: revert;
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,13 +46,13 @@
|
||||
}
|
||||
|
||||
/* emphasize anchor link when heading is hovered or when clicked (the latter for mobile) */
|
||||
.h:hover a, .anchor-wrapper:hover a, .h a:active {
|
||||
.h:hover a, .before:hover a, .h a:active {
|
||||
color: var(--accent-color);
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
svg {
|
||||
/* undo the reset that makes images block */
|
||||
/* undo the reset that makes svg's block */
|
||||
display: inline;
|
||||
width: 1em;
|
||||
/* tiny tweak for optical alignment */
|
||||
@ -53,16 +61,22 @@
|
||||
</style>
|
||||
|
||||
<svelte:element this={tag} {id} class="h">
|
||||
<span>
|
||||
<slot></slot>
|
||||
</span>
|
||||
|
||||
<!-- Icon from https://heroicons.com/ -->
|
||||
<span class="anchor-wrapper">
|
||||
<a href="#{id}" >
|
||||
<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>
|
||||
</svelte:element>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<script context="module">
|
||||
import '$styles/prose.scss';
|
||||
import '$styles/code.scss';
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
import { formatDate } from './datefmt.js';
|
||||
@ -24,23 +23,21 @@
|
||||
|
||||
<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;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
|
||||
.left-gutter {
|
||||
grid-column: 1 / 2;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 0.9em;
|
||||
font-style: italic;
|
||||
@ -103,6 +100,7 @@
|
||||
<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">
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
@ -9,6 +9,14 @@
|
||||
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;
|
||||
|
||||
@ -1,11 +1,3 @@
|
||||
@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;
|
||||
@ -37,3 +29,16 @@ 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;
|
||||
}
|
||||
|
||||
Binary file not shown.
87
static/style.css
Normal file
87
static/style.css
Normal file
@ -0,0 +1,87 @@
|
||||
/* ### 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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user