feat(links): links page, 88x31 buttons, code highlighting

_includes/footer.html

@@ -16,7 +16,9 @@
     <a href="https://ko-fi.com/goshadotnet">Support my work on Ko-Fi</a>
   </p>
   <p>
-    <a href="http://validator.w3.org/check.cgi?url=https%3A//gosha.net/feed.xml"><img src="/assets/images/valid_atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a>
+    <a href="/links">
+      <img src="/assets/images/88x31.svg" width="88" height="31" alt="A banner showing four icons: a pirate flag, a square ruler, a camera, and a pencil." title="Link free!">
+    </a>
   </p>
   {% assign lyric = site.data.lyrics | sample: 1 %}
   <p class="motto">{{ lyric }}</p>

_sass/_code.scss

@@ -0,0 +1,130 @@
+code {
+  font-size: 0.8em;
+  padding: 0.5em 0.5em;
+  background-color: var(--color-emphasis);
+}
+
+div.highlighter-rouge {
+  width: 100%;
+  max-width: var(--max-width);
+}
+
+.highlight {
+  code, pre {
+    display: block;
+    overflow-x: scroll;
+  }
+}
+
+.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight, .highlight .w {
+  color: #c9d1d9;
+  background-color: #161b22;
+}
+.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
+  color: #ff7b72;
+}
+.highlight .gr {
+  color: #f0f6fc;
+}
+.highlight .gd {
+  color: #ffdcd7;
+  background-color: #67060c;
+}
+.highlight .nb {
+  color: #ffa657;
+}
+.highlight .nc {
+  color: #ffa657;
+}
+.highlight .no {
+  color: #ffa657;
+}
+.highlight .nn {
+  color: #ffa657;
+}
+.highlight .sr {
+  color: #7ee787;
+}
+.highlight .na {
+  color: #7ee787;
+}
+.highlight .nt {
+  color: #7ee787;
+}
+.highlight .gi {
+  color: #aff5b4;
+  background-color: #033a16;
+}
+.highlight .kc {
+  color: #79c0ff;
+}
+.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
+  color: #79c0ff;
+}
+.highlight .sb {
+  color: #79c0ff;
+}
+.highlight .bp {
+  color: #79c0ff;
+}
+.highlight .ne {
+  color: #79c0ff;
+}
+.highlight .nl {
+  color: #79c0ff;
+}
+.highlight .py {
+  color: #79c0ff;
+}
+.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
+  color: #79c0ff;
+}
+.highlight .o, .highlight .ow {
+  color: #79c0ff;
+}
+.highlight .gh {
+  color: #1f6feb;
+  font-weight: bold;
+}
+.highlight .gu {
+  color: #1f6feb;
+  font-weight: bold;
+}
+.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
+  color: #a5d6ff;
+}
+.highlight .nd {
+  color: #d2a8ff;
+}
+.highlight .nf, .highlight .fm {
+  color: #d2a8ff;
+}
+.highlight .err {
+  color: #f0f6fc;
+  background-color: #8e1519;
+}
+.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
+  color: #8b949e;
+}
+.highlight .gl {
+  color: #8b949e;
+}
+.highlight .gt {
+  color: #8b949e;
+}
+.highlight .ni {
+  color: #c9d1d9;
+}
+.highlight .si {
+  color: #c9d1d9;
+}
+.highlight .ge {
+  color: #c9d1d9;
+  font-style: italic;
+}
+.highlight .gs {
+  color: #c9d1d9;
+  font-weight: bold;
+}

_sass/_main.scss

@@ -86,7 +86,7 @@ p, pre, code, ul, ol {
   margin-top: 0px;
 }
 
-p, h1, h2, h3, h4, time, blockquote, pre, code, ul, ol, aside, .footnotes, .centered {
+p, h1, h2, h3, h4, time, blockquote, pre, code, ul, ol, table, aside, .footnotes, .centered {
   width: 100%;
   max-width: var(--max-width);
   margin-left: auto;

assets/stylesheets/app.scss

@@ -10,4 +10,5 @@
 @import "blog";
 @import "product";
 @import "emoji";
+@import "code";
 @import "ukraine";

links.md

@@ -0,0 +1,38 @@
+---
+layout: base
+title: Links
+---
+
+# Links
+
+(This is currently under construction!)
+
+## Banners
+
+I welcome links to my website! Please feel free to use one of the 88x31 banners below:
+
+1. <img src="/assets/images/88x31.svg" width="88" height="31" valign="bottom" /><br/>
+SVG file with `prefers-color-scheme` support `https://gosha.net/assets/images/88x31.svg`
+
+2. <img src="/assets/images/88x31.png" width="88" height="31" valign="bottom" /><br/>
+PNG file @2x, please set display size manually `https://gosha.net/assets/images/88x31.png`
+
+3. <img src="/assets/images/88x31.gif" width="88" height="31" valign="bottom" /><br/>
+Old school GIF file @2x, please set display size manually `https://gosha.net/assets/images/88x31.gif`
+
+Example code for linking:
+
+```html
+<a href="https://gosha.net">
+  <img 
+    src="https://gosha.net/assets/images/88x31.svg"
+    width="88" 
+    height="31"
+    alt="Link button for gosha.net"
+  />
+</a>
+```
+
+Please [email me](mailto:[email protected]?subject=Link) if you end up using the banner on your website!
+
+(This page inspired by [Mu-An’s own](https://muan.co/pages/banners).)