improve styling

This commit is contained in:
Barrett Ruth 2025-10-05 00:26:54 -04:00
parent 250d6dd10b
commit 2e02b75e2a
2 changed files with 34 additions and 7 deletions

View file

@ -1,20 +1,23 @@
@font-face {
font-family: "Apercu Mono Pro";
src: url("/public/fonts/apercu-mono/ApercuMonoProRegular.ttf") format("truetype");
src: url("/public/fonts/apercu-mono/ApercuMonoProRegular.ttf")
format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Apercu Mono Pro";
src: url("/public/fonts/apercu-mono/ApercuMonoProMedium.ttf") format("truetype");
src: url("/public/fonts/apercu-mono/ApercuMonoProMedium.ttf")
format("truetype");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "Apercu Mono Pro";
src: url("/public/fonts/apercu-mono/ApercuMonoProLight.ttf") format("truetype");
src: url("/public/fonts/apercu-mono/ApercuMonoProLight.ttf")
format("truetype");
font-weight: 300;
font-style: normal;
}
@ -109,3 +112,24 @@ pre code {
main h2 {
margin-bottom: 0;
}
.gist-outer {
display: flex;
justify-content: center;
}
.gist-box {
display: inline-block;
min-width: 60vw;
max-width: 80vw;
width: max-content;
border: 1px solid #000;
border-radius: 0;
background: #fff;
box-sizing: border-box;
}
.hljs-ln-numbers {
text-align: right;
color: #999;
}

View file

@ -25,15 +25,18 @@
font-size: 3em;
align-self: flex-start;
margin-left: 40px;
margin-bottom: 10px;
"
>
{{ filename }}
</h2>
<div style="padding: 40px; width: 100%; max-width: 80ch">
<pre
class="line-numbers"
><code class="language-{{ lang }}">{{ code | e }}</code></pre>
<div class="gist-outer">
<div class="gist-box">
<pre
class="line-numbers"
><code class="language-{{ lang }}">{{ code | e }}</code></pre>
</div>
</div>
</main>