Initial theme setup + index/technical pages

This commit is contained in:
2025-03-20 22:59:45 -04:00
commit a13cf711e3
23 changed files with 3242 additions and 0 deletions

110
src/_includes/obsidian.pug Normal file
View File

@@ -0,0 +1,110 @@
doctype html
html(lang="en")
head
style.
body {
--background: #111;
--background-2: #252525;
--background-3: #444;
--color: #fffbe3;
--color-2: #d0c895;
background: var(--background);
color: var(--color);
font-family: "Reckless", serif;
margin: 0;
padding: 0;
overflow-x: hidden;
display: flex;
flex-direction: column;
align-items: center;
}
.wrapper {
max-width: 800px;
width: calc(100% - 40px);
padding-left: 20px;
padding-right: 20px;
margin-bottom: 100px;
min-height: 100vh;
}
block meta
meta(charset='utf-8')
meta(name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no')
meta(http-equiv='x-ua-compatible' content='ie=edge')
meta(name='description' content='Hi, there! My name is Garrett. I am a computer scientist, software engineer, and speaker.')
meta(name='keywords' content='garrett mills glmdev developer speaker flitter extollo student')
meta(name='author' content='Garrett Mills')
meta(name='robots' content='index, follow')
block title
if title
title #{title} | Garrett Mills
else
title Garrett Mills
block style
link(rel='stylesheet' href='/bundle.css')
//link(rel='stylesheet' href=asset('normalize.css'))
//link(rel='stylesheet' href=asset('main-bam.css'))
//script.
// window.glmdev = window.glmdev || {}
// window.glmdev.themeStats = window.glmdev.themeStats || []
// window.glmdev.themeStats.push('Default Theme: !{themeDisplayName}')
//link(rel='stylesheet' href=asset('main-70s.css'))
//link(rel='stylesheet' href=`/theme/${themeName}.css` title=themeDisplayName)
//if themeStylesheets
// each sheet in themeStylesheets
// link(rel='alternate stylesheet' href=sheet.url title=sheet.displayName)
link(rel='author' href='/humans.txt')
//link(rel="alternate" href="/links.mark.md" title="Garrett Mills - My Bookmarks" type="text/markdown;variant=markmark")
//link(rel="alternate" href="/links" title="Garrett Mills - My Bookmarks" type="text/html")
//link(rel="alternate" href="/links/atom.xml" title="Garrett's Bookmarks (Atom)" type="application/atom+xml")
//link(rel="alternate" href="/links/rss2.xml" title="Garrett's Bookmarks (RSS)" type="application/rss+xml")
//link(rel="alternate" href="/links/json.json" title="Garrett's Bookmarks (JSON)" type="application/feed+json")
//link(rel="alternate" href="/feed/atom.xml" title="Garrett Mills - Posts & Updates (Atom)" type="application/atom+xml")
//link(rel="alternate" href="/feed/rss.xml" title="Garrett Mills - Posts & Updates (RSS)" type="application/rss+xml")
//link(rel="alternate" href="/feed/json.json" title="Garrett Mills - Posts & Updates (JSON)" type="application/feed+json")
//link(rel="alternate" href="/blog/atom.xml" title="Garrett's Blog (Atom)" type="application/atom+xml")
//link(rel="alternate" href="/blog/rss2.xml" title="Garrett's Blog (RSS)" type="application/rss+xml")
//link(rel="alternate" href="/blog/json.json" title="Garrett's Blog (JSON)" type="application/feed+json")
//link(rel='apple-touch-icon' sizes='180x180' href=asset('favicon/apple-touch-icon.png'))
//link(rel='manifest' href=asset('favicon/site.webmanifest'))
//link(rel='icon' type='image/png' sizes='32x32' href=asset('favicon/favicon-32x32.png'))
//link(rel='icon' type='image/png' sizes='16x16' href=asset('favicon/favicon-16x16.png'))
//link(rel='shortcut icon' href=asset('favicon/favicon.ico'))
body
.wrapper
header.hero glm.
nav
ul
li
a(href='/') Home
//li
a(href='/timeline') Timeline
li
a(href='/blog') Blog
li
a(href='/feed') Notes
li
a(href='/links') Bookmarks <img class="inline-markmark-logo" src="/assets/img/markmark-light.svg" eleventy:ignore alt="MarkMark logo"/>
block content
div.content-wrapper !{content}
footer
.obsidian glm.
p &copy 2015-#{(new Date).getFullYear()} Garrett Mills — <a href="/technical">Technical Info</a>
//if user()
//p &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
//a(href="/dash") Dashboard
block script

7
src/assets/css/fonts.css Normal file
View File

@@ -0,0 +1,7 @@
@font-face {
font-family: My Font Name;
src: url('/font.woff2') format('woff2');
font-display: swap;
}

349
src/assets/css/normalize.css vendored Normal file
View File

@@ -0,0 +1,349 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

314
src/assets/css/obsidian.css Normal file
View File

@@ -0,0 +1,314 @@
@font-face {
font-family: 'Obsidian';
src: url('/assets/font/obsidian/Obsidian-Roman.otf') format('opentype');
font-weight: normal;
font-style: normal;
/*font-display: swap;*/
}
@font-face {
font-family: "JetBrains Mono";
src: url("/assets/font/jetbrains-mono/JetBrainsMono-Regular.woff2") format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Reckless";
src: url("/assets/font/reckless/WEB/Reckless-Regular.woff2") format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Reckless";
src: url("/assets/font/reckless/WEB/Reckless-RegularItalic.woff2") format('woff2');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Reckless";
src: url("/assets/font/reckless/WEB/Reckless-Bold.woff2") format('woff2');
font-weight: bold;
font-style: normal;
font-display: swap;
}
body {
--background: #111;
--background-2: #252525;
--background-3: #444;
--color: #fffbe3;
--color-2: #d0c895;
background: var(--background);
color: var(--color);
font-family: "Reckless", serif;
margin: 0;
padding: 0;
overflow-x: hidden;
display: flex;
flex-direction: column;
align-items: center;
}
.wrapper {
max-width: 800px;
width: calc(100% - 40px);
padding-left: 20px;
padding-right: 20px;
margin-bottom: 100px;
min-height: 100vh;
}
code {
font-family: "JetBrains Mono", monospace;
font-size: 0.8em;
color: var(--color-2);
}
p, h1, h2, h3, h4, h5, h6, li {
font-size: 1.3em;
}
h1:before, h2:before, h3:before, h4:before, h5:before, h6:before {
font-family: "Reckless", serif;
color: var(--color-2);
margin-right: 10px;
}
h1 {
font-size: 2em;
margin: 0;
margin-top: 50px;
}
h1:before {
content: '#';
/*margin-left: -27px;*/
}
h2 {
font-size: 1.7em;
margin: 0;
margin-top: 50px;
}
h2:before {
content: '##';
/*margin-left: -27px;*/
}
h3 {
font-size: 1.4em;
margin: 0;
margin-top: 50px;
}
h3:before {
content: '###';
/*margin-left: -27px;*/
}
h4 {
font-size: 1.3em;
color: var(--color-2);
margin: 0;
margin-top: 50px;
}
h4:before {
content: '####';
/*margin-left: -27px;*/
}
h5 {
font-size: 1.3em;
color: var(--color-2);
margin: 0;
margin-top: 50px;
}
h5:before {
content: '#####';
/*margin-left: -27px;*/
}
h6 {
font-size: 1.3em;
color: var(--color-2);
margin: 0;
margin-top: 50px;
}
h6:before {
content: '######';
/*margin-left: -27px;*/
}
a {
color: #dfdbc3;
}
p {
margin: 20px 0 0;
padding: 0;
}
.feed-item {
margin: 30px 0;
background: var(--background-2);
padding: 15px;
border: 1px solid var(--background-3);
}
.feed-item .tag, .secondary {
color: var(--color-2);
font-style: italic;
}
.secondary {
font-size: 0.8em;
}
.button-links a {
margin-right: 10px;
}
.obsidian {
font-family: "Obsidian", serif;
}
.hero {
font-family: "Obsidian", serif;
font-size: 11em;
margin-top: 0;
}
nav {
margin-top: 25px;
padding-bottom: 25px;
margin-bottom: 25px;
border-bottom: 1px solid #7f7b63;
/*margin-bottom: 150px;*/
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 30px;
}
nav ul a {
color: #fffbe3;
text-decoration: none;
}
nav ul a:hover {
color: #cfcbb3;
}
blockquote {
border-left: 2px solid var(--color-2);
color: var(--color-2);
padding-left: 10px;
margin-left: 10px;
}
img {
max-width: 100%;
}
center {
margin: 0 20px;
color: var(--color-2);
}
pre {
overflow-x: scroll;
}
hr {
border-color: var(--color-2);
margin: 30px 0;
}
button {
border: 1px solid var(--background-3);
color: var(--color-2);
background: var(--background-2);
padding: 3px 15px;
margin: 15px 0;
transition: all 0.1s linear;
}
button:hover {
cursor: pointer;
color: var(--color);
background: var(--background);
border-color: var(--color-2);
}
ul.plain {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.plain li {
margin: 20px 0;
}
.italic {
font-style: italic;
}
#about {
margin-top: 50px;
}
footer {
width: 100%;
min-height: 300px;
background-color: #ffffff08;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
footer .obsidian {
font-size: 4em;
margin-right: 30px;
padding-right: 30px;
border-right: 1px solid #fffbe1;
}
footer p {
margin: 5px 0 0;
}
.inline-markmark-logo {
height: 16pt;
margin-bottom: -3px;
opacity: 0.75;
}
@media screen and (max-width: 500px) {
nav ul {
flex-direction: column;
gap: 20px;
}
footer {
flex-direction: column;
align-items: start;
}
footer .obsidian, footer p {
margin: 0 50px;
}
footer .obsidian {
border-right: unset;
margin-bottom: 20px;
}
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@@ -0,0 +1,63 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg:svg
width="208"
height="128"
viewBox="0 0 208 128"
version="1.1"
id="svg1"
sodipodi:docname="ink-markmark-dark.svg"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:svg="http://www.w3.org/2000/svg">
<svg:defs
id="defs1" />
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="6.4081552"
inkscape:cx="85.281954"
inkscape:cy="73.109965"
inkscape:window-width="2544"
inkscape:window-height="1331"
inkscape:window-x="26"
inkscape:window-y="23"
inkscape:window-maximized="0"
inkscape:current-layer="svg1" />
<svg:rect
width="198"
height="118"
x="5"
y="5"
ry="10"
stroke="#000000"
stroke-width="10"
fill="none"
id="rect1" />
<svg:path
d="M 30,98 V 30 H 50 L 70,55 90,30 h 20 V 98 H 90 V 59 L 70,84 50,59 v 39 z"
id="path1"
sodipodi:nodetypes="ccccccccccccc" />
<script />
<svg:rect
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:21.7013;stroke-linecap:round"
id="rect2"
width="46.446552"
height="45.751724"
x="130.91896"
y="30" />
<svg:path
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
d="M 131.41896,75.742009 V 97.990285 L 154.64223,75.742009 Z"
id="path3" />
<svg:path
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
d="M 176.86551,75.751724 V 98 L 153.64224,75.751724 Z"
id="path3-6" />
</svg:svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@@ -0,0 +1,65 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg:svg
width="208"
height="128"
viewBox="0 0 208 128"
version="1.1"
id="svg1"
sodipodi:docname="inkmarkmark-light.svg"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:svg="http://www.w3.org/2000/svg">
<svg:defs
id="defs1" />
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="6.4081552"
inkscape:cx="85.281954"
inkscape:cy="73.109965"
inkscape:window-width="2544"
inkscape:window-height="1331"
inkscape:window-x="26"
inkscape:window-y="23"
inkscape:window-maximized="0"
inkscape:current-layer="svg1" />
<svg:rect
width="198"
height="118"
x="5"
y="5"
ry="10"
stroke="#000"
stroke-width="10"
fill="none"
id="rect1"
style="stroke:#ffffff;stroke-opacity:1" />
<svg:path
d="M 30,98 V 30 H 50 L 70,55 90,30 h 20 V 98 H 90 V 59 L 70,84 50,59 v 39 z"
id="path1"
sodipodi:nodetypes="ccccccccccccc"
style="fill:#fcfcfc;fill-opacity:1" />
<script />
<svg:rect
style="fill:#fcfcfc;fill-opacity:1;stroke:none;stroke-width:21.7013;stroke-linecap:round"
id="rect2"
width="46.446552"
height="45.751724"
x="130.91896"
y="30" />
<svg:path
style="fill:#fcfcfc;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
d="M 131.41896,75.742009 V 97.990285 L 154.64223,75.742009 Z"
id="path3" />
<svg:path
style="fill:#fcfcfc;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
d="M 176.86551,75.751724 V 98 L 153.64224,75.751724 Z"
id="path3-6" />
</svg:svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

5
src/css-bundle.njk Normal file
View File

@@ -0,0 +1,5 @@
---
permalink: bundle.css
---
{% include "./assets/css/normalize.css" %}
{% include "./assets/css/obsidian.css" %}

13
src/index.md Normal file
View File

@@ -0,0 +1,13 @@
---
layout: obsidian
---
<img src="/assets/img/01-self-portrait-bw.webp" alt="Self-portrait photo of Garrett" style="height: 250px; width: auto; padding-top: 25px;">
_Hi, I'm Garrett._
I'm a computer scientist and software engineer. Professionally, I design and build flexible, scalable software systems. Personally, I study programming languages, libre software, visual design, and the small web.
Other things I like: self-hosting, RSS, photography, cooking, and really good fonts.
✉️&nbsp;&nbsp;&nbsp;<a href="mailto:shout@garrettmills.dev">shout@garrettmills.dev</a>

38
src/technical.md Normal file
View File

@@ -0,0 +1,38 @@
---
layout: obsidian
---
# Technical Details for Nerds
This page contains a smattering of technical information that I think some people might find interesting, but not enough people for it to be included on the main page.
## Website Theme
I had a lot of fun with the [previous 70s-inspired design](https://static.garrettmills.dev/assets/70s.png). I think visual design can do a lot to communicate a _vibe_.
The current vibe feels like less. Less visual complexity, less scope, less techno-optimism, and perhaps a _bit_ less pretentiousness.
This design is my attempt to return to a [simpler](https://motherfuckingwebsite.com/) [design](http://bettermotherfuckingwebsite.com/) [language](https://thebestmotherfucking.website/) that better conveys my current mood, with really (_really_) good fonts on a solid background.
### Fonts
For the new logo, I'm using the [Obsidian Roman](https://www.typography.com/fonts/obsidian/overview) display font by Hoefler & Co. I don't love to support Monotype, but Obsidian is just _so good_.
The body font is comprised of a few variants of [Reckless](https://displaay.net/typeface/reckless-collection/reckless/) by Displaay.
For code/monospace text, I'm using my go-to font for code, [JetBrains Mono](https://www.jetbrains.com/lp/mono/). It's probably the single font I spend the most time looking at.
## Source Code & Licensing
![](/assets/img/cc-by-nc-sa.png)
This website, its source code, and its contents are licensed under the terms of the Creative Commons BY-NC-SA 4.0 license. Learn more [here](https://creativecommons.org/licenses/by-nc-sa/4.0/).
The source code for this site is available openly under the terms of the aforementioned license. You can view it [here](https://code.garrettmills.dev/garrettmills/www-ssg).
## Framework
## Analytics