feat(11ty): add new fonts and initial css layout

This commit is contained in:
taco 2026-04-10 01:14:05 -04:00
parent 84482accdd
commit 01f40a673b
No known key found for this signature in database
31 changed files with 426 additions and 85 deletions

5
.prettierignore Normal file
View file

@ -0,0 +1,5 @@
# Ignore artifacts:
build
coverage
_site
node_modules

17
.prettierrc Normal file
View file

@ -0,0 +1,17 @@
{
"plugins": ["prettier-plugin-jinja-template"],
"overrides": [
{
"files": ["*.njk"],
"options": {
"parser": "jinja-template"
}
}
],
"useTabs": false,
"singleQuote": false,
"semi": true,
"endOfLine": "lf",
"arrowParens": "always",
"printWidth": 100
}

View file

@ -1,4 +1,4 @@
Contact: mailto:security@tacowolf.net
Expires: 2025-04-20T20:20:00.000Z
Expires: 2030-04-20T20:20:00.000Z
Preferred-Languages: en, es
Canonical: https://mestizo.monster/.well-known/security.txt

23
_includes/_footer.njk Normal file
View file

@ -0,0 +1,23 @@
<footer>
<p>
<a rel="me" href="https://tilde.zone/@taco">mastodon</a> /
<a href="https://codeberg.org/takouhai">codeberg</a> /
<a href="https://keyoxide.org/dde52d5b73e9bcb3da5af230f762860f6b1c66b7">keyoxide</a>
</p>
<p>
<a rel="noreferrer noopener" href="https://mestizo.monster" target="_blank">mestizo.monster</a>
© current year by
<a rel="noreferrer noopener" href="https://mestizo.monster/about" target="_blank">taco</a> is
licensed under
<a
rel="noreferrer noopener"
href="http://creativecommons.org/licenses/by-nc/4.0/?ref=chooser-v1"
target="_blank"
>CC BY-NC 4.0</a
>.
</p>
<p>
this website is
<a href="https://git.tacowolf.net/TacoWolf/mestizo.monster" target="_blank">open source</a>.
</p>
</footer>

11
_includes/_header.njk Normal file
View file

@ -0,0 +1,11 @@
<header>
<img href="/" src="/img/taco.svg" />
<nav>
<h1>mestizo.monster</h1>
<ul>
<li><a href="/" title="home">🏠</a></li>
<li><a href="/posts" title="posts">✍️</a></li>
<li><a href="/about" title="about">🌮</a></li>
</ul>
</nav>
</header>

16
_includes/base.njk Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ title }} - mestizo.monster</title>
<link href="/css/main.css" rel="stylesheet" />
</head>
<body>
<main>
{% include "_header.njk" %}
{{ content | safe }}
{% include "_footer.njk" %}
</main>
</body>
</html>

0
_includes/navigation.njk Normal file
View file

10
_includes/post-list.njk Normal file
View file

@ -0,0 +1,10 @@
---
layout: base.njk
---
{{ content | safe }}
<ul>
{%- for post in ( collections.post | sortByDate ) -%}
<li><a href="{{ post.url }}">{{ post.data.date }} - {{ post.data.title }}</a></li>
{%- endfor -%}
</ul>

View file

@ -1,29 +1,17 @@
---
published: Last Modified
layout: base.njk
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
</head>
<body>
<article>
<section>
</section>
<hgroup>
<h1>{{ title }}</h1>
<p>{{ description }}</p>
<ul>
<li>published: {{ date }}</li>
<li>reading time: about {{ content | readingTime }}</li>
<li>author: <a href="/about">daniel (taco)</a></li>
</ul>
</hgroup>
<section>
{{ content | safe }}
</section>
</article>
</body>
</html>
<article>
<section></section>
<hgroup>
<h1>{{ title }}</h1>
<p>{{ description }}</p>
<ul>
<li>published: {{ date }}</li>
<li>reading time: about {{ content | readingTime }}</li>
<li>author: <a href="/about">daniel a. gallegos (taco)</a></li>
</ul>
</hgroup>
<section>{{ content | safe }}</section>
</article>

View file

@ -1,9 +1,8 @@
---
title = 'about'
draft = false
menus = 'main'
images = ['about/taco.png']
description = 'but who is taco? and how much does it weigh?'
title: "about"
layout: base.njk
images: ["about/taco.png"]
description: "but who is taco? and how much does it weigh?"
---
<figure>
@ -11,19 +10,21 @@ description = 'but who is taco? and how much does it weigh?'
<figcaption>artwork by <a href="https://www.heyheymomo.com">heyheymomo</a></figcaption>
</figure>
**Daniel A. Gallegos**, also known as **“taco”,** is a [Full-Stack Software Developer](https://en.wikipedia.org/wiki/Solution_stack) and [Site Reliability Engineer](https://en.wikipedia.org/wiki/Site_reliability_engineering) who works with businesses, governments, [educators](https://web.archive.org/web/20230131144232/https://eberly.wvu.edu/news-events/eberly-news/2021/04/12/eberly-college-students-lead-gender-inclusivity-anti-racism-training-at-wvu), [non-profits](https://carrynaloxone.org/), and [startups](https://web.archive.org/web/20160901215818/https://devacademy.la/) to create digital solutions for your real-world problems, ranging from 🖥️ developing government enterprise applications, to 🎨 creating graphic assets for professional digital portfolios, to 🛠️ administering servers for a harm reduction coalition.
# {{ title }}
After spending a decade working with a variety of frontends, backends, deadends, software, hardware, various operating systems and more, Daniel is more than capable of handling whatever software or hardware problem you need solved.
**Daniel A. Gallegos**, also known as **"taco",** is a [full-stack software developer](https://en.wikipedia.org/wiki/Solution_stack) and [site reliability engineer](https://en.wikipedia.org/wiki/Site_reliability_engineering) who works with businesses, governments, [educators](https://web.archive.org/web/20230131144232/https://eberly.wvu.edu/news-events/eberly-news/2021/04/12/eberly-college-students-lead-gender-inclusivity-anti-racism-training-at-wvu), [non-profits](https://carrynaloxone.org/), and [startups](https://web.archive.org/web/20160901215818/https://devacademy.la/) to create digital solutions for your real-world problems, ranging from developing government enterprise applications 🖥️, to creating graphic assets for professional digital presence 🎨, to administering servers for harm reduction coalitions 🛠️.
Daniel has contributed to projects around the world, including developing enterprise software applications for the 🇵🇪 Peruvian government, creating on-brand graphic assets for multiple offices at 🎓 West Virginia University, redesigning an entire technical institutes website, working as a HIPAA-compliant system administrator for a 🧑‍⚕️ harm reduction coalition and managing hundreds of 🐧 Linux servers in the cloud daily. In addition to his extensive software development and system operations experience, Daniel is a skilled technical writer, copywriter, graphic designer, and definitely doesnt feel weird writing about himself in the third person. Hes a pro! 😉
after spending over 15 years working with a variety of frontends, backends, deadends, software, hardware, various operating systems, and more, daniel is more than capable of handling whatever software or hardware problem you need solved.
Daniel has contributed to projects around the world, including developing enterprise software applications for the peruvian government 🇵🇪, creating on-brand graphic assets for multiple offices at west virginia university 🎓, redesigning an entire technical institutes website, working as a hipaa-compliant system administrator for a harm reduction coalition 🧑‍⚕️, and managing hundreds of linux servers in the cloud daily 🐧. in addition to his extensive software development and system operations experience, daniel is a skilled technical writer, copywriter, graphic designer, and definitely doesnt feel weird writing about himself in the third person. hes a pro! 😉
Daniel holds a Bachelors in Multidisciplinary Studies (BMdS) from [West Virginia University](https://web.archive.org/web/20230728010055/https://lists.wvu.edu/graduation?county=&letter=--&name=&page=5&state=&term=fall&year=2021), which includes areas of study such as:
- 💻 Computer Science
- 🇺🇸 English
- 🇪🇸 Spanish
- 🇪🇨🇨🇴🇻🇪 Latin American Studies
- 🏳️‍🌈 LGBTQ+ Studies
- 💻 computer science
- 🇺🇸 english
- 🇪🇸 spanish
- 🇪🇨🇨🇴🇻🇪 latin american studies
- 🏳️‍🌈 lgbtq+ studies
- and other classes he took and just enjoyed, tbh
He currently works as a [Site Reliability Engineer](https://en.wikipedia.org/wiki/Site_reliability_engineering) for some big healthcare corporation and as a [Webmaster](https://en.wikipedia.org/wiki/Webmaster) for a harm reduction coalition. In his free time, Daniel likes tinkering with Linux server administration and self-hosting technologies to better his life and the lives of those around him. As it is with most folks, Daniels opinions are his own and do not represent the views of his employer(s).
he currently works as a [site reliability engineer](https://en.wikipedia.org/wiki/Site_reliability_engineering) for some big healthcare corporation and as a [webmaster](https://en.wikipedia.org/wiki/Webmaster) for various nonprofit organizations. in his free time, daniel likes tinkering with linux server administration and self-hosting technologies to better his life and the lives of those around him. as it is with most folks, daniels opinions are his own and do not represent the views of his employer(s).

0
assets/css/colors.css Normal file
View file

29
assets/css/fonts.css Normal file
View file

@ -0,0 +1,29 @@
@font-face {
font-family: "VT323";
src: url("/fonts/VT323.woff2") format("woff2");
}
@font-face {
font-family: "Martian Grotesk";
font-display: swap;
src: url("/fonts/MartianGrotesk-StdLt.woff2") format("woff2");
font-weight: 300;
font-stretch: 100%;
}
h1,
h2,
h3,
h4 {
font-family: "VT323", monospace;
font-weight: 400;
font-style: normal;
}
p,
ul,
li,
ol {
font-family: "Martian Grotesk";
font-weight: 400;
font-style: normal;
}

120
assets/css/layout.css Normal file
View file

@ -0,0 +1,120 @@
body {
display: grid;
place-items: center;
}
main {
padding: 1em;
}
header {
display: flex;
justify-content: start;
align-content: center;
img {
width: 4em;
}
nav {
width: 100%;
display: flex;
padding-left: 1em;
h1 {
align-content: center;
}
ul {
align-content: center;
li {
font-size: 1.5em;
padding: 0.5em;
list-style: none;
display: inline-block;
}
}
}
}
article {
padding: 0.5em;
hgroup {
ul {
list-style: none;
padding: 0;
text-align: justify;
}
}
}
p {
padding-top: 1em;
padding-bottom: 1em;
}
footer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 576px) {
main {
width: 100%;
}
nav {
display: flex;
h1 {
display: none;
}
justify-content: flex-end;
}
}
@media only screen and (min-width: 577px) and (max-width: 768px) {
main {
width: 80%;
nav {
justify-content: space-between;
ul {
li {
font-size: 1em;
}
}
}
}
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
main {
width: 666px;
nav {
justify-content: space-between;
ul {
li {
font-size: 1.2em;
}
}
}
}
}
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
main {
width: 666px;
nav {
justify-content: space-between;
ul {
li {
font-size: 1.3em;
}
}
}
}
}
@media only screen and (min-width: 1441px) {
main {
width: 666px;
nav {
justify-content: space-between;
}
}
}

4
assets/css/main.css Normal file
View file

@ -0,0 +1,4 @@
@import "reset.css";
@import "layout.css";
@import "fonts.css";
@import "colors.css";

65
assets/css/reset.css Normal file
View file

@ -0,0 +1,65 @@
/* stolen from https://www.joshwcomeau.com/css/custom-css-reset/ */
*,
*::before,
*::after {
box-sizing: border-box;
}
*:not(dialog) {
margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
html {
interpolate-size: allow-keywords;
}
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
p {
text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
}
#root,
#__next {
isolation: isolate;
}

Binary file not shown.

BIN
assets/fonts/VT323.woff2 Normal file

Binary file not shown.

View file

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 95 KiB

View file

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

View file

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

View file

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

View file

@ -1,9 +1,10 @@
import markdownIt from "markdown-it";
import footnote_plugin from "markdown-it-footnote";
import readingTime from "eleventy-plugin-reading-time";
/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
export default async function (eleventyConfig) {
eleventyConfig.addPassthroughCopy("assets");
eleventyConfig.addPassthroughCopy({ assets: "/" });
eleventyConfig.addPassthroughCopy(".well-known");
eleventyConfig.addPassthroughCopy("**/*.jpg");
eleventyConfig.addPassthroughCopy("**/*.png");
@ -26,16 +27,21 @@ export default async function (eleventyConfig) {
return redirects;
});
eleventyConfig.addCollection("posts", function (collection) {
return collection.getFilteredByGlob("posts/**/*.md");
});
function sortByDate(values) {
// inspired by
let vals = [...values];
return vals.sort((a, b) => {
return a.data.date < b.data.date ? 1 : -1;
});
}
eleventyConfig.addFilter("sortByDate", sortByDate);
let options = {
let markdownItOptions = {
html: true,
breaks: true,
linkify: true,
};
eleventyConfig.setLibrary("md", markdownIt(options));
eleventyConfig.setLibrary("md", markdownIt(markdownItOptions));
eleventyConfig.amendLibrary("md", (mdLib) => mdLib.use(footnote_plugin));
eleventyConfig.addPlugin(readingTime);
}

BIN
favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -1,9 +1,10 @@
---
title: "home"
layout: base.njk
description: "words by taco, the mestizo monster."
---
the [wedsite](https://web.archive.org/web/20240708121013/http://hrwiki.org/wiki/Homestar_Runner%27s_Website) of
the [wedsite](https://homestar.wiki/wiki/Homestar_Runner%27s_Website) of
# daniel a. gallegos

39
package-lock.json generated
View file

@ -11,7 +11,12 @@
"dependencies": {
"@11ty/eleventy": "^3.1.5",
"eleventy-plugin-reading-time": "^0.0.1",
"markdown-it": "^14.1.1"
"markdown-it": "^14.1.1",
"markdown-it-footnote": "^4.0.0"
},
"devDependencies": {
"prettier": "^3.8.1",
"prettier-plugin-jinja-template": "^2.1.0"
}
},
"node_modules/@11ty/dependency-tree": {
@ -1041,6 +1046,12 @@
"markdown-it": "bin/markdown-it.mjs"
}
},
"node_modules/markdown-it-footnote": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-4.0.0.tgz",
"integrity": "sha512-WYJ7urf+khJYl3DqofQpYfEYkZKbmXmwxQV8c8mO/hGIhgZ1wOe7R4HLFNwqx7TjILbnC98fuyeSsin19JdFcQ==",
"license": "MIT"
},
"node_modules/mdurl": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
@ -1283,6 +1294,32 @@
"node": ">=12"
}
},
"node_modules/prettier": {
"version": "3.8.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
"integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
"dev": true,
"license": "MIT",
"bin": {
"prettier": "bin/prettier.cjs"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/prettier-plugin-jinja-template": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/prettier-plugin-jinja-template/-/prettier-plugin-jinja-template-2.1.0.tgz",
"integrity": "sha512-mzoCp2Oy9BDSug80fw3B3J4n4KQj1hRvoQOL1akqcDKBb5nvYxrik9zUEDs4AEJ6nK7QDTGoH0y9rx7AlnQ78Q==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"prettier": "^3.0.0"
}
},
"node_modules/prr": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",

View file

@ -2,7 +2,8 @@
"dependencies": {
"@11ty/eleventy": "^3.1.5",
"eleventy-plugin-reading-time": "^0.0.1",
"markdown-it": "^14.1.1"
"markdown-it": "^14.1.1",
"markdown-it-footnote": "^4.0.0"
},
"name": "mestizo.monster",
"version": "1.0.0",
@ -14,5 +15,9 @@
"keywords": [],
"author": "",
"license": "ISC",
"type": "module"
"type": "module",
"devDependencies": {
"prettier": "^3.8.1",
"prettier-plugin-jinja-template": "^2.1.0"
}
}

View file

@ -1,5 +1,7 @@
---
title: 'posts'
title: "posts"
layout: post-list.njk
tags: nav
---
posts i done gone and wrote

View file

@ -0,0 +1,16 @@
---
title: letting myself relax
description: "the first post of many, i hope"
layout: post.njk
draft: false
date: 2026-04-09
tags: post
---
i think i'm putting a barrier between me and posting words on my website that there shouldn't be. like everything needs to be "curated" and be an effective essay to publish stuff. but i don't think this is healthy, scrutinizing myself to a specific point and not getting this stuff out into the world. i want my work to be read by other people and to do that i need to start publishing more. i want to develop my skills as a writer and hone my own voice. that means i need to be willing to make more mistakes. blogs and their posts should, by design, be ugly. they should be representations of the people who write them, who are mostly miserable little piles of secrets.[^1]
here's my promise to you, dear reader: i will start writing more. i will start publishing more. not, like, consistently, but more™. it will not be perfect but it will be my organically written words. you are going to be reading real thoughts written by a real, genuine dumbass on the other end of the screen who doesn't know what they're doing, like the rest of us are.
maybe the posts will be long, maybe the posts will be short. but i will post more. it's good for the brain to get these thoughts and ideas out to other people instead of letting it sit and gather dust. i think that's the whole point of this communicating thing, so i really need to exercise it if i want to get better at talking to others. talking to my preferred markdown editor is a good start.
[^1]: but enough talk. [have at you!](https://www.youtube.com/watch?v=5tV33Ewf_hw)

View file

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

View file

@ -1,9 +1,9 @@
---
title: "moving on from freenom 👋"
date: "2023-10-06"
date: 2023-10-06
tags: post
layout: post.njk
draft: false
categories: ["life", "technology"]
keywords:
[
"ga",
@ -22,25 +22,9 @@ keywords:
"life",
"technology",
]
tags:
[
"ga",
"daniel-ga",
"dns",
"domain",
"domain-names",
"freenom",
"gabon",
"mestizo-monster",
"networking",
"personal-websites",
"taco-ga",
"website",
"websites",
]
images: ["posts/moving-on-from-freenom/images/header.png"]
images: ["posts/moving-on-from-freenom/header.png"]
description: "what's the harm in a free domain name?"
aliases: ["/2023/10/06/moving-on-from-freenom/index.html"]
aliases: ["../2023/10/06/moving-on-from-freenom/"]
kind: "page"
---
@ -58,7 +42,7 @@ kind: "page"
<figure>
<img alt="A screenshot of the Freenom admin interface showing the domain daniel.ga being active and paid for"
src="images/header.png"/>
src="header.png"/>
<figcaption>goodnight, sweet prince. </figcaption>
</figure>

View file

@ -3,18 +3,19 @@ pagination:
data: collections.redirects
size: 1
alias: redirect
permalink: "{{redirect[1]}}"
permalink: "{{ redirect[1] }}"
layout: ""
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="1; URL='{{ redirect[0] }}'" />
<title>Redirecting to: {{ redirect[0] }}</title>
</head>
<body>
You should be redirecting to <a href="{{ redirect[0] }}">{{ redirect[0] }} now</a>.
</body>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="refresh" content="1; URL='{{ redirect[0] }}'" />
<title>Redirecting to: {{ redirect[0] }}</title>
</head>
<body>
You should be redirecting to <a href="{{ redirect[0] }}">{{ redirect[0] }} now</a>.
</body>
</html>