Compare commits
11 Commits
bb61bfd957
...
59447302f0
Author | SHA1 | Date |
---|---|---|
hedy | 59447302f0 | |
hedy | f4e6d27e56 | |
hedy | f06bc57414 | |
hedy | 3c035dc4ea | |
hedy | b5c790df77 | |
hedy | 1bb4339364 | |
hedy | 3ea69c95c8 | |
hedy | be943ebc2b | |
hedy | 269153f167 | |
hedy | 53f267dd20 | |
hedy | 0e8fec4b98 |
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"extends": ["html-validate:recommended"],
|
||||
"rules": {
|
||||
"doctype-style": ["off"],
|
||||
"void-style": ["error", { "style": "selfclosing" }],
|
||||
"valid-id": ["warn", { "relaxed": true}],
|
||||
"no-autoplay": ["warn"],
|
||||
"no-inline-style": ["warn", { "allowedProperties": [
|
||||
"display",
|
||||
"font-size",
|
||||
"font-family",
|
||||
"margin-bottom",
|
||||
"margin-top",
|
||||
"margin-left",
|
||||
"margin-right"
|
||||
] }]
|
||||
}
|
||||
}
|
|
@ -0,0 +1 @@
|
|||
bracketSameLine = false
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"extends": "stylelint-config-recommended",
|
||||
"rules": {
|
||||
"no-descending-specificity": null
|
||||
}
|
||||
}
|
|
@ -1,3 +1,6 @@
|
|||
public/
|
||||
resources/
|
||||
.hugo_build.lock
|
||||
tmp
|
||||
node_modules
|
||||
hint-report
|
||||
|
|
13
Makefile
13
Makefile
|
@ -21,6 +21,17 @@ DEPLOY_GEMINI_DIST=gemini.tar.gz
|
|||
|
||||
.DEFAULT_GOAL := all
|
||||
|
||||
lint-css:
|
||||
pnpm exec stylelint --config .config/stylelint.json --rd --rdd assets/main.css
|
||||
|
||||
lint-html-validate:
|
||||
pnpm exec html-validate --config .config/htmlvalidate.json $(HTML_DEST)
|
||||
|
||||
lint-html-proofer:
|
||||
htmlproofer $(HTML_DEST) --checks Links,Images,Scripts,Favicon,OpenGraph --no-allow-missing-href --no-ignore-empty-alt
|
||||
|
||||
lint: lint-css lint-html-validate lint-html-proofer
|
||||
|
||||
deploy-html:
|
||||
tar -C $(HTML_DEST) -cvz . > $(DEPLOY_HTML_DIST)
|
||||
$(HUT) pages publish --protocol HTTPS -d $(DEPLOY_DOMAIN) $(DEPLOY_HTML_DIST)
|
||||
|
@ -58,7 +69,7 @@ html:
|
|||
$(RSYNC) $(RSYNC_FLAGS) public/ --exclude '*.gmi' --exclude gemini $(HTML_DEST)
|
||||
@# Manually include gemini tag (because it was excluded above)
|
||||
$(RSYNC) $(RSYNC_FLAGS) public/tags/gemini $(HTML_DEST)/tags/
|
||||
$(PRETTIER) --write $(HTML_DEST)"/**/*.html"
|
||||
$(PRETTIER) --config .config/prettier.toml --write $(HTML_DEST)"/**/*.html"
|
||||
|
||||
finish-clean:
|
||||
rm -rf $(GEMINI_DEST)-back $(HTML_DEST)-back
|
||||
|
|
|
@ -45,6 +45,10 @@ css](https://simplecss.org) and sometimes [seirdy's site](https://seirdy.one).
|
|||
### deploy
|
||||
- **hut** - publishes HTML/gemini files to srht.site
|
||||
|
||||
### lint
|
||||
- `pnpm` - install dev dependencies in `package.json`
|
||||
- `ruby >= 2.7` - for `htmlproofer`
|
||||
|
||||
## hardcoded values
|
||||
|
||||
### resources
|
||||
|
|
581
assets/main.css
581
assets/main.css
|
@ -12,76 +12,65 @@
|
|||
*/
|
||||
|
||||
:root {
|
||||
--base-fontsize: 1rem;
|
||||
--base-fontsize: 1rem;
|
||||
|
||||
/* Major third scale progression - see https://type-scale.com/ */
|
||||
--header-scale: 1.25;
|
||||
/* I don't want h1, h2, and h3 to be too big */
|
||||
--header-scale-minor: 1.1;
|
||||
/* Major third scale progression - see https://type-scale.com/ */
|
||||
--header-scale: 1.25;
|
||||
/* I don't want h1, h2, and h3 to be too big */
|
||||
--header-scale-minor: 1.1;
|
||||
|
||||
/* Line height is set to the "Golden ratio" for optimal legibility */
|
||||
--line-height: 1.618;
|
||||
/* Line height is set to the "Golden ratio" for optimal legibility */
|
||||
--line-height: 1.618;
|
||||
|
||||
--mono-font: Hack, Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||
--bg: #fff;
|
||||
--accent-bg: #f7f4fb;
|
||||
--accent-bg-light: #f2f2f2;
|
||||
--mono-font: Hack, Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||
--bg: #fff;
|
||||
--accent-bg: #f7f4fb;
|
||||
--accent-bg-light: #f2f2f2;
|
||||
--code-bg: #f2f2f2;
|
||||
--text: #0a0a0a;
|
||||
--text-light: #787878;
|
||||
--non-text-light: #95aac0;
|
||||
--text: #0a0a0a;
|
||||
--text-light: #787878;
|
||||
--non-text-light: #95aac0;
|
||||
|
||||
--border: #bbb;
|
||||
--border-light: var(--border);
|
||||
--accent: #5c659b;
|
||||
--accent-light: #7890c1;
|
||||
--code: #d81b60;
|
||||
--preformatted: #444;
|
||||
--marked: #ffdd33;
|
||||
--disabled: #efefef;
|
||||
--border: #bbb;
|
||||
--border-light: var(--border);
|
||||
--accent: #5c659b;
|
||||
--accent-light: #7890c1;
|
||||
--code: #d81b60;
|
||||
--preformatted: #444;
|
||||
--marked: #ffdd33;
|
||||
--disabled: #efefef;
|
||||
|
||||
--shadow-color: #fff;
|
||||
|
||||
--link: #3c63e8;
|
||||
--link-hover: #93aaf9;
|
||||
--link-visited: #6971a0;
|
||||
|
||||
--link-alt: var(--link);
|
||||
|
||||
/* My theme stuff */
|
||||
--theme-purple: #3d4573;
|
||||
--link: #3c63e8;
|
||||
--link-visited: #6971a0;
|
||||
--link-alt: var(--link);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #232326;
|
||||
--accent-bg: #44475a;
|
||||
--accent-bg-light: #303035;
|
||||
--code-bg: #3e3e4b;
|
||||
--text: #eee;
|
||||
--text-light: #cecece;
|
||||
--non-text-light: #999fbf;
|
||||
:root {
|
||||
--bg: #232326;
|
||||
--accent-bg: #44475a;
|
||||
--accent-bg-light: #303035;
|
||||
--code-bg: #3e3e4b;
|
||||
--text: #eee;
|
||||
--text-light: #cecece;
|
||||
--non-text-light: #999fbf;
|
||||
|
||||
--border: #aaa;
|
||||
--border-light: #565656;
|
||||
--accent: #8be9fd;
|
||||
--accent-light: #ece1a1;
|
||||
--code: #f06292;
|
||||
--preformatted: #ccc;
|
||||
--disabled: #111;
|
||||
|
||||
--shadow-color: #36373b;
|
||||
--theme-purple: #af9dea;
|
||||
--border: #aaa;
|
||||
--border-light: #565656;
|
||||
--accent: #8be9fd;
|
||||
--accent-light: #ece1a1;
|
||||
--code: #f06292;
|
||||
--preformatted: #ccc;
|
||||
--disabled: #111;
|
||||
|
||||
--link: #cddfff;
|
||||
--link-hover: #8c9cba;
|
||||
--link-visited: #c3b1ff;
|
||||
/* Why doesn't the dracula pink look better? #ff79c6 */
|
||||
--link-alt: var(--accent-light);
|
||||
}
|
||||
}
|
||||
|
||||
img:not(.pfp), video {
|
||||
opacity: .6;
|
||||
}
|
||||
img:not(.pfp), video {
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
|
@ -91,149 +80,38 @@ body {
|
|||
* in their browser settings, so I help them.
|
||||
* But... that's barely an excuse for me to use a big font-stack, I know */
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
/* font-family: Roboto, sans-serif; */
|
||||
font-size: var(--base-fontsize);
|
||||
line-height: var(--line-height);
|
||||
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
main, #after-content {
|
||||
padding: 0 5%;
|
||||
/*******************************************************************
|
||||
* Body elements
|
||||
*/
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 1.1rem;
|
||||
}
|
||||
footer {
|
||||
margin: 0 5%;
|
||||
h1 {
|
||||
font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale-minor) * var(--header-scale-minor));
|
||||
margin-top: calc(var(--line-height) * 1.3rem);
|
||||
}
|
||||
|
||||
h1 .pfp {
|
||||
height: 2.5rem;
|
||||
vertical-align: text-top;
|
||||
h2 {
|
||||
font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale-minor) * var(--header-scale-minor));
|
||||
margin-top: calc(var(--line-height) * 1.1rem);
|
||||
}
|
||||
|
||||
nav .pfp {
|
||||
height: 1.7rem;
|
||||
vertical-align: middle;
|
||||
h3 {
|
||||
font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale-minor));
|
||||
}
|
||||
|
||||
|
||||
.pfp {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: .35em;
|
||||
h4 {
|
||||
font-size: calc(var(--base-fontsize) * var(--header-scale));
|
||||
}
|
||||
|
||||
.pfp-name {
|
||||
text-decoration: none;
|
||||
/* color: var(--theme-purple); */
|
||||
padding-left: 6px;
|
||||
padding-top: 0;
|
||||
h5 {
|
||||
font-size: var(--base-fontsize);
|
||||
}
|
||||
nav .pfp-name {
|
||||
/* color: var(--accent-light); /1* Consistency with other nav items *1/ */
|
||||
/* To have the icon and the text (.pfp-text) align */
|
||||
display: table;
|
||||
h6 {
|
||||
font-size: calc(var(--base-fontsize) / var(--header-scale));
|
||||
}
|
||||
nav .pfp-text {
|
||||
/* TODO: Hardcoded alignment is ugly. Please find a better fix */
|
||||
vertical-align: top;
|
||||
padding-left: 0.5rem;
|
||||
padding-top: 0.1rem;
|
||||
font-size: 1.1rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Homepage stuff */
|
||||
.blink {
|
||||
opacity: 0;
|
||||
color: var(--text-light);
|
||||
animation: blinker 1s step-start 5;
|
||||
}
|
||||
@keyframes blinker {
|
||||
50% {
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Differentiating between normal content links and meta content links */
|
||||
.meta a, .post-meta :not(.tags) a, footer a, #after-content a {
|
||||
text-decoration: none;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--link-alt);
|
||||
}
|
||||
}
|
||||
.meta a:hover, .post-meta :not(.tags) a:hover, footer a:hover, #after-content a:hover {
|
||||
color: var(--accent-light);
|
||||
text-decoration: underline;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
.post-meta .tags a, .post-meta .tags a:visited {
|
||||
text-decoration: underline;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
color: var(--link-alt);
|
||||
}
|
||||
|
||||
/* To have the left nav item (homepage) and right items (other pages) display
|
||||
* on same line */
|
||||
nav strong > a {
|
||||
margin-top: 1rem;
|
||||
font-weight: 650;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
nav strong > a, nav ul li {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
margin-right: 5%;
|
||||
margin-left: 5%;
|
||||
margin-bottom: 4rem;
|
||||
padding: 1rem 0.3rem;
|
||||
padding-top: 1.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
@media (min-width: 601px) {
|
||||
nav ul {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
/* Center-aligned nav on mobile */
|
||||
nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
nav a .pfp-name {
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
nav .selected {
|
||||
border-bottom: 2.5px solid;
|
||||
}
|
||||
|
||||
/********************************************************************
|
||||
* Idea from seirdy.one to have unstyled unordered-list nav
|
||||
* Step 1 to making the single-line nav: remove the bullet padding. */
|
||||
nav ul, nav a {
|
||||
padding: 0;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
/* Step 2: remove bullets and make elements inline.
|
||||
* Also: bump up the line-height and margins to increase space between
|
||||
* tap-targets (SC 2.5.5). Google a11y guidelines require 8 CSS pixels
|
||||
* between tap targets. */
|
||||
nav ul li, nav strong > a {
|
||||
display: inline-block;
|
||||
}
|
||||
/* END borrowed code from seirdy.one
|
||||
********************************************************************/
|
||||
|
||||
|
||||
blockquote {
|
||||
margin-left: 0;
|
||||
|
@ -264,43 +142,14 @@ th {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* No thanks */
|
||||
/* tr:nth-child(even) { */
|
||||
/* /1* Set every other cell slightly darker. Improves readability. *1/ */
|
||||
/* background: var(--accent-bg); */
|
||||
/* } */
|
||||
small {
|
||||
font-size: .8rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
main, #after-content {
|
||||
/* For better reading experience.
|
||||
* I don't want paragraphs to be too narrow, it looks ugly; Though I don't
|
||||
* want them to be too wide, either. Reading experience is important:
|
||||
* https://en.wikipedia.org/wiki/Eye_movement_in_reading */
|
||||
max-width: 45rem;
|
||||
|
||||
margin: auto;
|
||||
}
|
||||
#after-content {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
#after-content:empty {
|
||||
display: none;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
font-size: .9rem;
|
||||
color: var(--text-light);
|
||||
padding: 1rem 0 1rem 0;
|
||||
}
|
||||
footer a {
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem;
|
||||
}
|
||||
header p {
|
||||
text-align: left;
|
||||
}
|
||||
header pre {
|
||||
margin-bottom: 2rem;
|
||||
max-width:auto;
|
||||
ul li {
|
||||
/* Fix sizing of tap target when it's a list of links */
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Use mono font for code like elements */
|
||||
|
@ -350,54 +199,12 @@ pre code {
|
|||
tab-size: 4;
|
||||
}
|
||||
|
||||
.post-date {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
/* border-bottom: 1px solid var(--accent); */
|
||||
color: var(--link);
|
||||
}
|
||||
a:visited {
|
||||
color: var(--link-visited);
|
||||
}
|
||||
/* Don't change colors for visited links on nav, it makes nav bar look inconsistent */
|
||||
nav a:visited {
|
||||
color: var(--link-alt);
|
||||
}
|
||||
.post-meta a:visited, .meta a:visited, footer a:visited, .after-content a:visited {
|
||||
color: var(--link-alt);
|
||||
}
|
||||
main a:hover {
|
||||
opacity: .75;
|
||||
}
|
||||
nav a#home:hover {
|
||||
opacity: .75;
|
||||
}
|
||||
a:focus, form:focus {
|
||||
outline: 1px solid var(--border);
|
||||
text-decoration: none;
|
||||
}
|
||||
nav a:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* nav a:not(nav strong > a):not(nav ul li:last-child a):hover { */
|
||||
/* border-bottom: 2.5px solid; */
|
||||
/* } */
|
||||
nav li a:hover {
|
||||
border-bottom: 2.5px solid;
|
||||
}
|
||||
|
||||
header {top: 1px;}
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Misc body elements */
|
||||
hr {
|
||||
color: var(--border-light);
|
||||
border-color: var(--border-light);
|
||||
|
@ -448,7 +255,6 @@ button[disabled],
|
|||
input[type="submit"][disabled],
|
||||
input[type="reset"][disabled],
|
||||
input[type="button"][disabled] {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
@ -504,34 +310,222 @@ details[open]>*:last-child {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Format headers */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 1.1rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale-minor) * var(--header-scale-minor));
|
||||
margin-top: calc(var(--line-height) * 1.3rem);
|
||||
/*******************************************************************
|
||||
* Nav
|
||||
*/
|
||||
nav {
|
||||
margin-right: 5%;
|
||||
margin-left: 5%;
|
||||
margin-bottom: 4rem;
|
||||
padding: 1rem 0.3rem;
|
||||
padding-top: 1.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale-minor) * var(--header-scale-minor));
|
||||
margin-top: calc(var(--line-height) * 1.1rem);
|
||||
nav div {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale-minor));
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
color: var(--link-alt);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: calc(var(--base-fontsize) * var(--header-scale));
|
||||
/* To have the left nav item (homepage) and right items (other pages) display
|
||||
* on same line */
|
||||
nav .nav-left a {
|
||||
margin-top: 1rem;
|
||||
font-weight: 650;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
nav .nav-left a, nav ul li {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: var(--base-fontsize);
|
||||
@media (min-width: 601px) {
|
||||
nav .nav-right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
/* Center-aligned nav on mobile */
|
||||
nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
nav a .pfp-name {
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: calc(var(--base-fontsize) / var(--header-scale));
|
||||
nav .selected {
|
||||
border-bottom: 2.5px solid;
|
||||
}
|
||||
|
||||
/* Idea from seirdy.one to have unstyled unordered-list nav */
|
||||
nav ul, nav a {
|
||||
padding: 0;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
nav ul li, nav strong > a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.pfp {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: .35em;
|
||||
}
|
||||
|
||||
.pfp-name {
|
||||
text-decoration: none;
|
||||
padding-left: 6px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
nav .pfp {
|
||||
height: 1.7rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
nav .pfp-name {
|
||||
/* color: var(--accent-light); /1* Consistency with other nav items *1/ */
|
||||
/* To have the icon and the text (.pfp-text) align */
|
||||
display: table;
|
||||
}
|
||||
|
||||
h1 .pfp {
|
||||
height: 2.5rem;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
nav .pfp-text {
|
||||
/* TODO: Hardcoded alignment is ugly. Please find a better fix */
|
||||
vertical-align: top;
|
||||
padding-left: 0.5rem;
|
||||
padding-top: 0.1rem;
|
||||
font-size: 1.1rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/*******************************************************************
|
||||
* Homepage
|
||||
*/
|
||||
.hero {
|
||||
margin-bottom: 5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.blink {
|
||||
opacity: 0;
|
||||
color: var(--text-light);
|
||||
animation: blinker 1s step-start 5;
|
||||
font-family: var(--mono-font);
|
||||
}
|
||||
|
||||
@keyframes blinker {
|
||||
50% {
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************************************************
|
||||
* Page sections
|
||||
*/
|
||||
/* Differentiating between normal content links and meta content links */
|
||||
.meta a, .post-meta :not(.tags) a, footer a, #after-content a {
|
||||
text-decoration: none;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--link-alt);
|
||||
}
|
||||
}
|
||||
.meta a:hover, .post-meta :not(.tags) a:hover, footer a:hover, #after-content a:hover {
|
||||
color: var(--accent-light);
|
||||
text-decoration: underline;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
.post-meta .tags a, .post-meta .tags a:visited {
|
||||
text-decoration: underline;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
main, #after-content {
|
||||
/* For better reading experience.
|
||||
* I don't want paragraphs to be too narrow, it looks ugly; Though I don't
|
||||
* want them to be too wide, either. Reading experience is important:
|
||||
* https://en.wikipedia.org/wiki/Eye_movement_in_reading */
|
||||
max-width: 45rem;
|
||||
|
||||
margin: auto;
|
||||
padding: 0 5%;
|
||||
}
|
||||
#after-content {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
#after-content:empty {
|
||||
display: none;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
font-size: .9rem;
|
||||
color: var(--text-light);
|
||||
padding: 1rem 0 1rem 0;
|
||||
margin: 0 5%;
|
||||
}
|
||||
footer a {
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem;
|
||||
}
|
||||
header p {
|
||||
text-align: left;
|
||||
}
|
||||
header pre {
|
||||
margin-bottom: 2rem;
|
||||
max-width:auto;
|
||||
}
|
||||
|
||||
.post-date {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
/*******************************************************************
|
||||
* Links
|
||||
*/
|
||||
a {
|
||||
color: var(--link);
|
||||
}
|
||||
a:visited {
|
||||
color: var(--link-visited);
|
||||
}
|
||||
/* Don't change colors for visited links on nav, it makes nav bar look inconsistent */
|
||||
nav a:visited {
|
||||
color: var(--link-alt);
|
||||
}
|
||||
.post-meta a:visited, .meta a:visited, footer a:visited, .after-content a:visited {
|
||||
color: var(--link-alt);
|
||||
}
|
||||
main a:hover {
|
||||
opacity: .75;
|
||||
}
|
||||
nav a#home:hover {
|
||||
opacity: .75;
|
||||
}
|
||||
a:focus, form:focus {
|
||||
outline: 1px solid var(--border);
|
||||
text-decoration: none;
|
||||
}
|
||||
nav a:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
nav li a:hover {
|
||||
border-bottom: 2.5px solid;
|
||||
}
|
||||
|
||||
a.anchor {
|
||||
|
@ -544,6 +538,9 @@ a.anchor:hover {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*******************************************************************
|
||||
* Post components
|
||||
*/
|
||||
#post-header h1 {
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
@ -572,16 +569,6 @@ a.anchor:hover {
|
|||
margin-top: none;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: .8rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
ul li {
|
||||
/* Fix sizing of tap target when i's a list of links */
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
ul.post-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
|
@ -595,10 +582,12 @@ ul.post-list {
|
|||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.post-list .desc {
|
||||
margin-top: 0.5rem;
|
||||
.post-list .post-meta {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/*******************************************************************
|
||||
* Chroma
|
||||
*/
|
||||
.chroma .lntable pre {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
|
|
|
@ -3,16 +3,6 @@ outputs = ['html', 'gemtext']
|
|||
title = 'home'
|
||||
+++
|
||||
|
||||
<center class="hero" style="margin-bottom: 5rem;">
|
||||
|
||||
<h1><span style="font-size: 2.2rem;">{{% pfp-name %}}</span><span class="blink" style="font-family: var(--mono-font)">▂</span></h1>
|
||||
|
||||
[Fediverse](https://tilde.zone/@hedy) ⋅ [GitHub](https://github.com/hedyhli) ⋅ [SourceHut](https://sr.ht/~hedy)
|
||||
|
||||
</center>
|
||||
|
||||
---
|
||||
|
||||
## Contacts
|
||||
|
||||
Preferably <a rel="me" href="mailto:hedy.dev@protonmail.com">email</a> or
|
||||
|
|
|
@ -34,7 +34,7 @@ The site source is always linked at the footer, pointing to the SourceHut repo.
|
|||
A **Pubnix** is a Public Access Unix System — in other words, a unix machine on the internet that provides access to other people on the internet — which started before WWW and even the public internet. Pubnixes you may have heard of SDF, Circumlunar.Space (yes, the very same one of the former gemini homepage), and tilde.club.
|
||||
|
||||
=> gemini://sdf.org
|
||||
=> https://circumlunar.space/
|
||||
=> gopher://circumlunar.space/
|
||||
=> gemini://gemini.circumlunar.space
|
||||
|
||||
~cmccabe has a Pubnix History Project for you to explore if you're interested in learning more about pubnixes.
|
||||
|
|
|
@ -38,7 +38,8 @@ differences, remains mostly accurate.
|
|||
|
||||
This is where my gemlog/blog lives. It is statically generated
|
||||
with [Hugo](https://gohugo.io/) and rsync-ed to my `public_html` and `public_gemini`
|
||||
directories for HTML and gemini on [tilde.cafe](tilde.cafe) respectively on build.
|
||||
directories for HTML and gemini on [tilde.cafe](https://tilde.cafe) respectively
|
||||
on build.
|
||||
|
||||
The site source is always linked at the footer, pointing to the [sourcehut
|
||||
repo](https://sr.ht/~hedy/site) though the repo is also mirrored on
|
||||
|
@ -55,9 +56,10 @@ repo](https://sr.ht/~hedy/site) though the repo is also mirrored on
|
|||
A **Pubnix** is a Public Access Unix System — in other words, a unix machine on
|
||||
the internet that provides access to other people on the internet — which
|
||||
started before WWW and even the public internet. Pubnixes you may have heard of
|
||||
[SDF](https://sdf.org), [Circumlunar.Space](https://circumlunar.space/) (yes,
|
||||
the very same one of the [gemini homepage](https://gemini.circumlunar.space)),
|
||||
and [tilde.club](https://tilde.club).
|
||||
[SDF](https://sdf.org),
|
||||
[Circumlunar.Space](https://portal.mozz.us/gopher/circumlunar.space/) (yes, the
|
||||
very same one of the [gemini homepage](https://gemini.circumlunar.space)), and
|
||||
[tilde.club](https://tilde.club).
|
||||
|
||||
[~cmccabe](https://tilde.team/~cmccabe/) has a [Pubnix History
|
||||
Project](https://gopher.mills.io/rawtext.club/1/~cmccabe/pubnixhist/) for you to
|
||||
|
|
|
@ -3,8 +3,8 @@ Recently there've been some discussions about how Gemini "doesn't fix anything"
|
|||
=> https://lobste.rs/s/3nsvkk/gemini_is_useless Gemini is Useless
|
||||
|
||||
As well as a few posts related to that on smol.pub.
|
||||
=> //bentsai.smol.pub/embracing-constraints bentsai.smol.pub/embracing-constraints
|
||||
=> //mieum.smol.pub/for-the-love-of-gemini mieum.smol.pub/for-the-love-of-gemini
|
||||
=> gemini://bentsai.smol.pub/embracing-constraints bentsai.smol.pub/embracing-constraints
|
||||
=> gemini://mieum.smol.pub/for-the-love-of-gemini mieum.smol.pub/for-the-love-of-gemini
|
||||
|
||||
I think that those comments on Lobsters can be summarized into these main points:
|
||||
* We don't need a whole new protocol (and the corresponding new software) just because most of the web is gross
|
||||
|
@ -55,8 +55,8 @@ You don't have to ditch the web to use Gemini. You get to choose what you write
|
|||
=> https://lobste.rs/s/vhlagb/why_gemini_is_not_my_favorite_internet Why Gemini is Not My Favorite Internet Protocol (Lobste.rs)
|
||||
=> https://lobste.rs/s/3nsvkk/gemini_is_useless Gemini is Useless (Lobste.rs)
|
||||
=> https://news.ycombinator.com/item?id=27490769 Gemini is Useless (HN)
|
||||
=> //bentsai.smol.pub/embracing-constraints bentsai.smol.pub/embracing-constraints
|
||||
=> //mieum.smol.pub/for-the-love-of-gemini mieum.smol.pub/for-the-love-of-gemini
|
||||
=> gemini://bentsai.smol.pub/embracing-constraints bentsai.smol.pub/embracing-constraints
|
||||
=> gemini://mieum.smol.pub/for-the-love-of-gemini mieum.smol.pub/for-the-love-of-gemini
|
||||
=> https://lobste.rs/s/ivryqt/what_is_this_gemini_thing_anyway_why_am_i What is this Gemini thing anyway, and why am I excited about it? (Lobste.rs)
|
||||
=> https://proxy.flounder.online/station.martinrue.com/mozz/d29f6cf900b04aef9e7a2332c2098f13 mozz's message posted on Station (via Gemini to HTTP Proxy)
|
||||
=> https://portal.mozz.us/gemini/station.martinrue.com/mozz/d29f6cf900b04aef9e7a2332c2098f13 mozz's message posted on Station (via Gemini to HTTP Proxy)
|
||||
=> https://thomask.sdf.org/blog/2021/06/12/beyond-gemini.html Beyond Gemini? (In response to "Why Gemini is not my favourite internet protocol")
|
||||
|
|
|
@ -15,8 +15,8 @@ Recently there've been some discussions about how Gemini "doesn't fix anything"
|
|||
|
||||
As well as a few posts related to that on smol.pub:
|
||||
|
||||
* [bentsai.smol.pub/embracing-constraints](//bentsai.smol.pub/embracing-constraints)
|
||||
* [mieum.smol.pub/for-the-love-of-gemini](//mieum.smol.pub/for-the-love-of-gemini)
|
||||
* [bentsai.smol.pub/embracing-constraints](https://bentsai.smol.pub/embracing-constraints)
|
||||
* [mieum.smol.pub/for-the-love-of-gemini](https://mieum.smol.pub/for-the-love-of-gemini)
|
||||
|
||||
I think that those comments on Lobsters can be summarized into these main points:
|
||||
|
||||
|
@ -71,8 +71,8 @@ You don't have to ditch the web to use Gemini. You get to choose what you write
|
|||
* [Why Gemini is Not My Favorite Internet Protocol (Lobste.rs)](https://lobste.rs/s/vhlagb/why_gemini_is_not_my_favorite_internet)
|
||||
* [Gemini is Useless (Lobste.rs)](https://lobste.rs/s/3nsvkk/gemini_is_useless)
|
||||
* [Gemini is Useless (HN)](https://news.ycombinator.com/item?id=27490769)
|
||||
* [bentsai.smol.pub/embracing-constraints](//bentsai.smol.pub/embracing-constraints)
|
||||
* [mieum.smol.pub/for-the-love-of-gemini](//mieum.smol.pub/for-the-love-of-gemini)
|
||||
* [bentsai.smol.pub/embracing-constraints](https://bentsai.smol.pub/embracing-constraints)
|
||||
* [mieum.smol.pub/for-the-love-of-gemini](https://mieum.smol.pub/for-the-love-of-gemini)
|
||||
* [What is this Gemini thing anyway, and why am I excited about it? (Lobste.rs)](https://lobste.rs/s/ivryqt/what_is_this_gemini_thing_anyway_why_am_i)
|
||||
* [mozz's message posted on Station (via Gemini to HTTP Proxy)](https://proxy.flounder.online/station.martinrue.com/mozz/d29f6cf900b04aef9e7a2332c2098f13)
|
||||
* [mozz's message posted on Station (via Gemini to HTTP Proxy)](https://portal.mozz.us/gemini/station.martinrue.com/mozz/d29f6cf900b04aef9e7a2332c2098f13)
|
||||
* [Beyond Gemini? (In response to "Why Gemini is not my favourite internet protocol")](https://thomask.sdf.org/blog/2021/06/12/beyond-gemini.html)
|
||||
|
|
|
@ -6,7 +6,7 @@ highlight = true
|
|||
outputs = ['html', 'gemtext']
|
||||
slug = 'multiple-emails-git'
|
||||
tags = ['howto', 'git']
|
||||
title = 'Managing multiple emails for git across different computers'
|
||||
title = 'Multiple emails in git for different computers'
|
||||
+++
|
||||
|
||||
As someone who code on multiple machines to work on different projects, I like to commit with different emails.
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
+++
|
||||
outputs = ['html', 'gemtext', 'gematom', 'rss']
|
||||
outputs = ['html', 'gemtext', 'gematom', 'rss', 'atom']
|
||||
title = 'Posts'
|
||||
+++
|
||||
|
||||
|
|
|
@ -10,5 +10,5 @@ Last updated {{ .Lastmod.UTC.Format "2006-01-02" }}{{ end }}
|
|||
{{ trim (readFile (replace $.File.Path ".md" ".gmi")) "\n" | safeHTML }}
|
||||
|
||||
--
|
||||
=> {{ replace .Site.BaseURL "https:" "gemini:" }} Home
|
||||
=> / Home
|
||||
{{- end }}
|
||||
|
|
|
@ -1,3 +1,11 @@
|
|||
{{ define "main" }}
|
||||
<div class="hero">
|
||||
<h1>{{ partial "pfp-name.html" . }}<span class="blink">▂</span></h1>
|
||||
|
||||
<p><a href="https://tilde.zone/@hedy">Fediverse</a> ⋅ <a href="https://github.com/hedyhli">GitHub</a> ⋅ <a href="https://sr.ht/~hedy">SourceHut</a></p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
|
|
|
@ -11,57 +11,41 @@
|
|||
{{- end -}}
|
||||
<!--Have concerns? Drop me an email with your constructive criticism.-->
|
||||
<script data-goatcounter="https://ultimategopher.goatcounter.com/count"
|
||||
async src="//gc.zgo.at/count.js"></script>
|
||||
async src="https://gc.zgo.at/count.js"></script>
|
||||
|
||||
<!--favicon-->
|
||||
{{ $favicon_svg := resources.Get "/favicon.svg" | resources.Fingerprint "md5" }}
|
||||
{{- printf `<link rel="icon" sizes="any" href="%s" type="image/svg+xml" />` $favicon_svg.RelPermalink | safeHTML }}
|
||||
{{- printf `<link rel="icon" sizes="any" href="%s" type="image/svg+xml">` $favicon_svg.RelPermalink | safeHTML }}
|
||||
{{ $favicon_png := resources.Get "/favicon.png" | resources.Fingerprint "md5" }}
|
||||
{{- printf `<link rel="icon" sizes="192x192" href="%s" type="image/png" />` $favicon_png.RelPermalink | safeHTML -}}
|
||||
{{- printf `<link rel="icon" sizes="192x192" href="%s" type="image/png">` $favicon_png.RelPermalink | safeHTML -}}
|
||||
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<meta name="format-detection" content="telephone=no" />
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
|
||||
<link rel="webmention" href="https://webmention.io/home.hedy.dev/webmention" />
|
||||
<link rel="pingback" href="https://webmention.io/ome.hedy.dev/xmlrpc" />
|
||||
<link rel="alternate" type="application/rss+xml" href="{{ .Site.BaseURL }}posts/index.xml" title="{{ $.Site.Title }}">
|
||||
<link rel="webmention" href="https://webmention.io/home.hedy.dev/webmention">
|
||||
<link rel="pingback" href="https://webmention.io/ome.hedy.dev/xmlrpc">
|
||||
<link rel="alternate" type="application/rss+xml" href="/posts/index.xml" title="{{ $.Site.Title }}">
|
||||
{{- if ne .Site.BaseURL "https://home.hedy.dev/" -}}
|
||||
<meta name="robots" content="noindex">
|
||||
{{- end -}}
|
||||
|
||||
<meta name="color-scheme" content="light dark">
|
||||
{{ $css := resources.Get "main.css" | minify -}}
|
||||
<style>{{ $css.Content | safeCSS }}</style>
|
||||
<!--
|
||||
Syntax Highlighting ZONE :D
|
||||
|
||||
1. has different themes for light and dark mode
|
||||
light = monokailight
|
||||
dark = dracula!
|
||||
2. Only adds the syntax css if the page needs it. The highlight param
|
||||
is turned off by default, hence only posts and pages that have the
|
||||
"highlight = true" will get this style :)
|
||||
3. Doesn't require an extra request. The two CSS files are saved in my
|
||||
assets, and is tracked with git.
|
||||
4. IDK why but the dracula file had many classes set as just "{ }" and
|
||||
makes it super unreadable in dark mode, so I've made all the blank ones
|
||||
set color to white so it can be read in dark mode :>
|
||||
-->
|
||||
<link rel="stylesheet" href="{{ $css.RelPermalink }}">
|
||||
{{ if .Params.highlight -}}
|
||||
{{ $syntaxlight := resources.Get "syntax/light.css" | minify -}}
|
||||
{{ $syntaxdark := resources.Get "syntax/dark.css" | minify -}}
|
||||
{{ $syntaxcustom := resources.Get "syntax/custom.css" | minify -}}
|
||||
<style>
|
||||
{{- $syntaxlight.Content | safeCSS }}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
{{- $syntaxdark.Content | safeCSS -}}
|
||||
}
|
||||
{{- $syntaxcustom.Content | safeCSS }}
|
||||
</style>
|
||||
{{ end -}}
|
||||
<!-- END Syntax Highlighting ZONE!! -->
|
||||
{{ if eq .Permalink $.Site.BaseURL -}}
|
||||
|
||||
{{ if eq .RelPermalink "/" -}}
|
||||
<title>{{ $.Site.Title }}</title>
|
||||
{{ else -}}
|
||||
<title>{{ .Title }}{{ .Site.Params.suffixTitle }}</title>
|
||||
|
|
|
@ -6,19 +6,18 @@
|
|||
{{ end -}}
|
||||
{{ end -}}
|
||||
<nav>
|
||||
<strong><a title="home" id="home" href="{{ .Site.BaseURL }}">{{ $home }}</a></strong>
|
||||
<ul>
|
||||
<div class="nav-left"><strong><a title="home" id="home" href="/">{{ $home }}</a></strong></div>
|
||||
<div class="nav-right"><ul>
|
||||
{{- $currentPage := . }}
|
||||
|
||||
{{- range .Site.Menus.main.ByWeight }}
|
||||
{{- $url := printf "%s%s" $.Site.BaseURL .URL }}
|
||||
{{- .Pre }}
|
||||
<li>
|
||||
<a href="{{ $url }}"
|
||||
<a href="{{ .URL }}"
|
||||
{{- if hasPrefix $currentPage.RelPermalink .URL }}class="selected"{{ end -}}
|
||||
title="{{ .Title }}">{{- .Name -}}</a>
|
||||
</li>
|
||||
{{ .Post -}}
|
||||
{{- end }}
|
||||
</ul>
|
||||
</ul></div>
|
||||
</nav>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
{{ if lt .Page.Date .Page.Lastmod -}}
|
||||
{{ .Prefix | safeHTML }}Last updated on
|
||||
<time itemprop="dateModified" class="dt-updated">{{ .Page.Lastmod.UTC.Format "Jan 2, 2006" }}</time>
|
||||
<time itemprop="dateModified" class="dt-updated" datetime="{{ .Page.Lastmod.UTC.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Page.Lastmod.UTC.Format "Jan 2, 2006" }}</time>
|
||||
{{- end -}}
|
||||
|
|
|
@ -11,5 +11,5 @@
|
|||
{{ range (where .Site.RegularPages "Section" "posts") }}
|
||||
{{- if .OutputFormats.Get "gemtext" }}
|
||||
=> {{replace (replace .RelPermalink "/gemini" "" 1) "/index.gmi" ".gmi" 1}} {{ .Date.Format "2006-01-02" }} · {{.Title | safeHTML}}{{ end }}
|
||||
{{ .Description }}{{ partial "tags.gmi" (dict "Page" . "Prefix" " (tagged " "Postfix" ")") -}}
|
||||
{{ .Description }}
|
||||
{{ end -}}
|
||||
|
|
|
@ -10,9 +10,9 @@
|
|||
{{- end }}
|
||||
|
||||
<p class="meta">
|
||||
<a href="{{ .Site.BaseURL }}tags/">Tags</a> |
|
||||
<a href="{{ .Site.BaseURL }}posts/index.xml">RSS feed</a> |
|
||||
<a href="{{ .Site.BaseURL }}posts/atom.xml">Atom feed</a> |
|
||||
<a href="/tags/">Tags</a> |
|
||||
<a href="/posts/index.xml">RSS feed</a> |
|
||||
<a href="/posts/atom.xml">Atom feed</a> |
|
||||
<a href="https://lists.sr.ht/~hedy/posts">Subscribe via email</a>
|
||||
</p>
|
||||
|
||||
|
@ -31,10 +31,8 @@
|
|||
</h3>
|
||||
{{ end -}}
|
||||
<p class="post-meta">
|
||||
<time datetime="{{ .Date.Format "2006-01-02 15:04:05Z07:00" }}">{{ .Date.Format "Jan 02, 2006" }}</time>
|
||||
{{- partial "tags.html" (dict "Page" . "Prefix" " · ") -}}
|
||||
<time datetime="{{ .Date.Format "2006-01-02 15:04:05Z07:00" }}">{{ .Date.Format "Jan 02, 2006" }}</time> · <span class="desc">{{ .Description }}</span>
|
||||
</p>
|
||||
<p class="desc">{{ .Description }}</p>
|
||||
</li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<h1 itemprop="name headline" class="p-name">{{ .Title }}</h1>
|
||||
<div class="post-meta">
|
||||
<p>
|
||||
<time itemprop="datePublished" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Date.Format "Jan 02, 2006" }}</time>
|
||||
<time itemprop="datePublished" datetime="{{ .Date.UTC.Format "2006-01-02T15:04:05Z" }}">{{ .Date.Format "Jan 02, 2006" }}</time>
|
||||
{{- partial "lastmod.html" (dict "Page" . "Prefix" " · " ) }}
|
||||
· {{ .WordCount }} words
|
||||
</p>
|
||||
|
|
|
@ -3,4 +3,5 @@
|
|||
{{ $old := "<table>" -}}
|
||||
{{ $new := printf "<table class=\"%s\">" $class -}}
|
||||
{{ $htmlTable := replace $htmlTable $old $new -}}
|
||||
{{ "<!-- [html-validate-disable-block wcag/h63: markdown does not generate tables with scope attribute] -->" | safeHTML }}
|
||||
{{ $htmlTable | safeHTML }}
|
||||
|
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"devDependencies": {
|
||||
"@hint/hint-doctype": "^3.3.20",
|
||||
"hint": "^7.1.0",
|
||||
"html-validate": "^8.18.1",
|
||||
"stylelint": "^14.8.1",
|
||||
"stylelint-config-recommended": "^7.0.0",
|
||||
"stylelint-config-standard": "^25.0.0"
|
||||
}
|
||||
}
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue