website with minimal content
This commit is contained in:
commit
c6c0af092a
|
|
@ -0,0 +1,2 @@
|
|||
_cache
|
||||
_site
|
||||
|
|
@ -0,0 +1 @@
|
|||
function
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import rehypeComponents from 'npm:rehype-components';
|
||||
import {h} from 'https://esm.sh/hastscript@9?pin=v135';
|
||||
|
||||
const wrapIt = (props, children) => {
|
||||
return h(`div.wikkel ${props.className.join(' ')}`, [...children]);
|
||||
}
|
||||
|
||||
//wrap two block-level children side by side.
|
||||
const sideBySide = (props, children) => {
|
||||
return h(`div.wikkel naast-elkaar ${props.className ? props.className.join(' ') : ''}`, [...children]);
|
||||
}
|
||||
|
||||
const imgFloatRight = (props, children) => {
|
||||
return h(`img.imgfloatright ${props.className ? props.className.join(' ') : ''}`, {src: props.src});
|
||||
}
|
||||
const buttonAlone = (props, children) => {
|
||||
return h(`button.button-alone ${props.className ? props.className.join(' ') : ''}`, [...children]);
|
||||
}
|
||||
|
||||
const figFloatRight = (props, children) => {
|
||||
return h(`figure.imgfloatright ${props.className ? props.className.join(' ') : ''}`, [
|
||||
h(`img`, {src: props.src}),
|
||||
h(`figcaption`, [children[0].value])
|
||||
]);
|
||||
}
|
||||
|
||||
const nav = (props, children) => {
|
||||
return h(`div.wikkel wikkel-nav ${props.className ? props.className.join(' ') : ''}`, [
|
||||
...children
|
||||
]);
|
||||
}
|
||||
const note = (props, children) => {
|
||||
return h(`div.wikkel wikkel-note ${props.className ? props.className.join(' ') : ''}`, [
|
||||
...children
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
//the first set is a 'wrapper' that defines blocks with certain classnames.
|
||||
//This is reusable as a
|
||||
export default function componentIze() {
|
||||
return [rehypeComponents, {
|
||||
components: {
|
||||
'wikkel': wrapIt,
|
||||
'wikkel-side-by-side': sideBySide,
|
||||
'wikkel-img-right': imgFloatRight,
|
||||
'wikkel-fig-right': figFloatRight,
|
||||
'wikkel-button-alone': buttonAlone,
|
||||
'wikkel-nav': nav,
|
||||
'wikkel-note': note
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
import lume from "lume/mod.ts";
|
||||
import feed from "lume/plugins/feed.ts";
|
||||
import postcss from "lume/plugins/postcss.ts";
|
||||
import postcssDesignTokens from "https://esm.sh/@csstools/postcss-design-tokens@3.1.5";
|
||||
import postcssUtopia from "https://esm.sh/postcss-utopia@1.0.1";
|
||||
import inline from "lume/plugins/inline.ts";
|
||||
import remark from "lume/plugins/remark.ts";
|
||||
import remarkDirective from 'https://esm.sh/remark-directive@3'
|
||||
import remarkDirectiveRehype from 'https://cdn.skypack.dev/remark-directive-rehype';
|
||||
import remarkComponents from "https://esm.sh/rehype-components@0.3.0";
|
||||
import remarkToc from 'https://esm.sh/remark-toc@9'
|
||||
import rehypeAutolinkHeadings from 'https://esm.sh/rehype-autolink-headings@7'
|
||||
import rehypeSlug from 'https://esm.sh/rehype-slug@6'
|
||||
import date from "lume/plugins/date.ts";
|
||||
import smartypants from "https://esm.sh/remark-smartypants@3.0.1";
|
||||
import {h} from "https:/esm.sh/hastscript@9.0.0";
|
||||
import redirects from "lume/plugins/redirects.ts";
|
||||
import multilanguage from "lume/plugins/multilanguage.ts";
|
||||
|
||||
|
||||
//hide private 'notes' (with tag 'hide') by default, unless in draft mode.
|
||||
function hideNotes(props, children){
|
||||
if (Deno.env.get('LUME_DRAFTS') === 'true') {
|
||||
return h('div.note-content', {...props}, [...children]);
|
||||
}
|
||||
};
|
||||
|
||||
//style 'draft' notes as such
|
||||
function showDrafts(props, children){
|
||||
return h('div.draft-content', {...props}, [
|
||||
h('details', {...props}, [
|
||||
h('summary', ['DRAFT: ' + props.summary]), ...children
|
||||
])
|
||||
]);
|
||||
};
|
||||
|
||||
//add translation picker
|
||||
function arrangeTranslations(props, children) {
|
||||
return h('div.translated-content', {...props}, [
|
||||
h('input#lang-toggle', {type: 'radio'}),
|
||||
h('label.lang-toggle-container', {for: 'lang-toggle'},
|
||||
props.langs.split(', ').map(l => h('div.'+l, l))
|
||||
),
|
||||
|
||||
...children
|
||||
])
|
||||
|
||||
}
|
||||
|
||||
|
||||
const site = lume({
|
||||
src: './src',
|
||||
dest: '_site',
|
||||
location: new URL("https://hansfast.net")
|
||||
});
|
||||
|
||||
site.use(postcss({
|
||||
plugins: [
|
||||
postcssDesignTokens({
|
||||
valueFunctionName: 'tkn'
|
||||
}),
|
||||
postcssUtopia(),
|
||||
]
|
||||
}));
|
||||
site.use(remark({
|
||||
remarkPlugins: [
|
||||
[smartypants, {dashes: 'oldschool'}],
|
||||
remarkDirective,
|
||||
remarkToc,
|
||||
remarkDirectiveRehype
|
||||
],
|
||||
rehypePlugins: [
|
||||
rehypeSlug,
|
||||
rehypeAutolinkHeadings,
|
||||
[remarkComponents, {
|
||||
components: {
|
||||
'hide': hideNotes, //show 'hide' components if LUME_DRAFTS is true.
|
||||
'draft': showDrafts, //show draft components with special rendering
|
||||
// 'multilang': arrangeTranslations //enable when this is implemented: https://stackoverflow.com/questions/1431726/css-selector-for-a-checked-radio-buttons-label
|
||||
}
|
||||
}]
|
||||
]
|
||||
}));
|
||||
|
||||
site.use(feed({
|
||||
output: ['everything.rss'],
|
||||
query: 'url^=/articles',
|
||||
info: {
|
||||
title: 'hansfast.net all articles'
|
||||
},
|
||||
items: {
|
||||
title: '=title',
|
||||
description: '=excerpt',
|
||||
published: '=date'
|
||||
}
|
||||
}));
|
||||
site.use(feed({
|
||||
output: ['/changelog/changelog.rss'],
|
||||
query: 'url^=/changelog level!=index',
|
||||
info: {
|
||||
title: 'hansfast.net — Changelog',
|
||||
description:'Updates to the site presented in a changelog format with a summary of what changed.'
|
||||
},
|
||||
items: {
|
||||
title: '=title',
|
||||
description: '=excerpt',
|
||||
published: '=date'
|
||||
}
|
||||
}));
|
||||
site.use(redirects());
|
||||
|
||||
site.use(date());
|
||||
site.use(inline());
|
||||
site.use(multilanguage({
|
||||
languages: ["en", "nl"],
|
||||
defaultLanguage: "en"
|
||||
}));
|
||||
|
||||
site.copyRemainingFiles((path) => path.startsWith('/static'));
|
||||
|
||||
export default site;
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"imports": {
|
||||
"lume/": "https://deno.land/x/lume@v2.1.4/"
|
||||
},
|
||||
"tasks": {
|
||||
"lume": "echo \"import 'lume/cli.ts'\" | deno run -A -",
|
||||
"build": "deno task lume",
|
||||
"serve": "deno task lume -s",
|
||||
"deploy": "rsync -rvaz _site/ huur2:/home/hans/hansfast.net"
|
||||
},
|
||||
"compilerOptions": {
|
||||
"types": [
|
||||
"lume/types.ts"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
translation_of: translation of
|
||||
translated_into: translated into
|
||||
|
||||
nl:
|
||||
|
||||
langnames:
|
||||
nl:
|
||||
translation_of: vertaling van
|
||||
translated_as: vertaald als
|
||||
en:
|
||||
translation_of: translation of
|
||||
translated_as: translated as
|
||||
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
text: |
|
||||
Contact me at hans [at] this domain.
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{{export function nextPrev (url, query) }}
|
||||
{{ set prev = search.previousPage(url, query) }}
|
||||
{{ set next = search.nextPage(url, query) }}
|
||||
|
||||
<div class="next-prev-links | flex stretch flex-wrap">
|
||||
{{if prev }}
|
||||
<a href="{{prev.url}}" rel="prev">previous: {{prev.title}}</a>
|
||||
{{else}}
|
||||
<p></p>
|
||||
{{/if}}
|
||||
<a class="everything-link" href="/everything/">Everything</a>
|
||||
{{if next }}
|
||||
<a href="{{next.url}}" rel="next">next: {{next.title}}</a>
|
||||
{{else}}
|
||||
<p></p>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{/export}}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
---
|
||||
layout: layouts/wrapper.vto
|
||||
---
|
||||
|
||||
<h1>{{title}}</h1>
|
||||
|
||||
<h2>Artikelen</h2>
|
||||
<p>in volgorde van datum</p>
|
||||
|
||||
<p class="metadata-paragraph"><span>EN:</span>See the list of English articles <a href="/everything">here</a></p>
|
||||
{{for item of search.pages("url^=/nl/articles lang=nl", "date=desc")}}
|
||||
<p class="flex stretch | article-list"><a href="{{item.url}}">{{item.title}}</a><span>{{item.date |> date('DATE')}}</span></p>
|
||||
{{/for}}
|
||||
|
||||
|
||||
<h2>Notes</h2>
|
||||
<p>(Mostly in English)</p>
|
||||
<p>by date</p>
|
||||
|
||||
{{for item of search.pages("url^=/notes", "date=desc")}}
|
||||
<p class="flex stretch | article-list"><a href="{{item.url}}">{{item.title}}</a><span>{{item.date |> date('DATE')}}</span></p>
|
||||
{{/for}}
|
||||
|
||||
<h2>Andere Pagina's</h2>
|
||||
|
||||
|
||||
{{for item of search.pages("!url^=/articles !url^= !url^=/notes !url^=/changelog")}}
|
||||
<p class="flex stretch | article-list"><a href="{{item.url}}">{{item.title}}</a><span>{{item.date |> date('DATE')}}</span></p>
|
||||
{{/for}}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
layout: layouts/wrapper.vto
|
||||
---
|
||||
<p class="metadata-paragraph"><a href="/changelog/"> ← Changelog</a></p>
|
||||
|
||||
{{include "partials/article.vto" {item: page.data} }}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
layout: layouts/wrapper.vto
|
||||
---
|
||||
|
||||
<h1>{{title}}</h1>
|
||||
|
||||
{{console.log( page.data.url)}}
|
||||
|
||||
{{- content -}}
|
||||
|
||||
<!-- {{set items = search.pages("url^=/changelog/", "date=desc").filter(item => item.page.data.url !== "/changelog/")}} -->
|
||||
{{set items = search.pages("url^=/changelog level!=index ", "date=desc")}}
|
||||
{{ for item of items }}
|
||||
<p class="flex stretch | article-list"><a href="{{item.url}}">{{item.title}}</a><span>{{item.date |> date('DATE')}}</span></p>
|
||||
{{/for}}
|
||||
|
||||
{{page.data.notes |> md}}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
---
|
||||
layout: layouts/wrapper.vto
|
||||
---
|
||||
|
||||
<h1>{{title}}</h1>
|
||||
|
||||
<h2>Articles</h2>
|
||||
<p>by date</p>
|
||||
|
||||
<p class="metadata-paragraph"><span>🇳🇱</span> Zie ook de lijst van alle Nederlandse artikelen <a href="/alles">hier</a></p>
|
||||
{{for item of search.pages("url^=/articles lang=en", "date=desc")}}
|
||||
<p class="flex stretch | article-list"><a href="{{item.url}}">{{item.title}}</a><span>{{item.date |> date('DATE')}}</span></p>
|
||||
{{/for}}
|
||||
|
||||
|
||||
<h2>Notes</h2>
|
||||
<p>by date</p>
|
||||
|
||||
{{for item of search.pages("url^=/notes", "date=desc")}}
|
||||
<p class="flex stretch | article-list"><a href="{{item.url}}">{{item.title}}</a><span>{{item.date |> date('DATE')}}</span></p>
|
||||
{{/for}}
|
||||
|
||||
<h2>Other pages</h2>
|
||||
|
||||
|
||||
{{for item of search.pages("!url^=/articles !url^=/notes !url^=/changelog !url^=/nl/")}}
|
||||
<p class="flex stretch | article-list"><a href="{{item.url}}">{{item.title}}</a><span>{{item.date |> date('DATE')}}</span></p>
|
||||
{{/for}}
|
||||
<p class="flex stretch | article-list"><a href="/changelog/">Changelog</a></p>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
layout: layouts/wrapper.vto
|
||||
---
|
||||
|
||||
{{- content -}}
|
||||
|
||||
{{set item = search.page("url^=/articles", "date=desc")}}
|
||||
{{include "partials/article.vto" {on_homepage: true} }}
|
||||
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
layout: layouts/wrapper.vto
|
||||
---
|
||||
|
||||
{{include "partials/article.vto" {item: page.data} }}
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
layout: layouts/wrapper.vto
|
||||
---
|
||||
|
||||
{{- content -}}
|
||||
|
||||
|
||||
{{ set pages = search.pages("thread="+page.data.threadId) }}
|
||||
|
||||
{{if pages }}
|
||||
|
||||
{{for page of pages }}
|
||||
<p class="flex stretch | article-list"><a href="{{page.url}}">{{page.title}}</a></p>
|
||||
|
||||
|
||||
{{/for}}
|
||||
|
||||
|
||||
{{/if}}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
|
||||
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, target-densitydpi=device-dpi">
|
||||
<link rel="stylesheet" href="/styles/main.css">
|
||||
<link rel="alternate" type="application/rss+xml" href="/changelog/changelog.rss" title="hansfast.net Changelog RSS Feed">
|
||||
<link rel="alternate" type="application/rss+xml" href="/everything.rss" title="hansfast.net Articles RSS Feed">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="content-grid">
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="logo-group">
|
||||
<a href="/">
|
||||
<img class="template-img" alt="Logo" src="/static/img/a_logo2.svg">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<ul class="menu">
|
||||
|
||||
<li>
|
||||
<!--<a class="header-home-link" href="/">-->
|
||||
<!--Home-->
|
||||
<!--</a>-->
|
||||
</li>
|
||||
{{ for item of search.pages("frontpage=true") }}
|
||||
<li><a href="{{item.url}}">{{item.title}}</a></li>
|
||||
{{/for}}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
<!--<img class="variable full-width wave" src="/static/img/wave.svg" inline/>-->
|
||||
</header>
|
||||
|
||||
<main class="stack">
|
||||
|
||||
{{- content -}}
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="wrapper">
|
||||
<div>
|
||||
<h1>Contact</h1>
|
||||
{{ contact.text |> md }}
|
||||
</div>
|
||||
<div>
|
||||
<h1>Subscribe</h2>
|
||||
<p>
|
||||
<a href="/changelog/changelog.rss">Summary of changes in Changelog format — RSS Feed</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="/everything.rss">RSS Feed of Articles only</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{{import {nextPrev} from 'functions/next_prev_links.vto'}}
|
||||
{{if on_homepage}}
|
||||
<p class="metadata-paragraph">Latest article</p>
|
||||
{{/if}}
|
||||
|
||||
|
||||
<h2>{{item.title}}</h2>
|
||||
{{if item.page.data.translated }}
|
||||
{{set translation = search.page("id="+item.page.data.translated)}}
|
||||
{{if translation }}
|
||||
<p class="emphasis">{{langnames[translation.page.data.lang]["translated_as"]}}/{{langnames[lang]["translated_as"]}}: <a href="{{translation.url}}">{{translation.page.data.title}}</a></p>
|
||||
{{/if}}
|
||||
{{else if item.page.data.translates }}
|
||||
{{set translation=search.page("id="+item.page.data.translates)}}
|
||||
{{if translation }}
|
||||
{{console.log(translations)}}
|
||||
<p class="emphasis"> {{langnames[lang]["translation_of"]}}/{{langnames[translation.page.data.lang]["translation_of"]}}: <a href="{{translation.url}}">{{translation.page.data.title}}</a></p>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{item.content |> md}}
|
||||
{{nextPrev(item.url, 'url^=/articles')}}
|
||||
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
/*stack: vertical spacing between elements*/
|
||||
|
||||
/*.stack * {*/
|
||||
/*margin-block-end: 0;*/
|
||||
/*}*/
|
||||
|
||||
/*The basics of stacking or flow. All 'joining' elements get a leading margin of line-height.*/
|
||||
.stack > * + * {
|
||||
--space: var(--line-height);
|
||||
margin-block-start: var(--space);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
margin-block-end: calc(var(--space) * 0.58);
|
||||
}
|
||||
|
||||
|
||||
/*In the following, we will override this setting for flow items which should have more spacing.
|
||||
* This is mostly headings.
|
||||
* instead of growing from line-height, though, we are going to use the utopia-generated fluid space variables.
|
||||
* The key is that the --space variable gets reassigned for each type.*/
|
||||
|
||||
|
||||
.stack h1{
|
||||
--space: var(--space-xl-2xl);
|
||||
}
|
||||
|
||||
|
||||
/*.stack h1 + * {*/
|
||||
/*--space: calc(var(--space) * 0.666);*/
|
||||
/*}*/
|
||||
.stack h2{
|
||||
--space: var(--space-l-xl);
|
||||
}
|
||||
|
||||
/*.stack h2 + * {*/
|
||||
/*--space: calc(var(--space) * 0.666);*/
|
||||
/*}*/
|
||||
|
||||
.stack h3 {
|
||||
--space: var(--space-l);
|
||||
}
|
||||
|
||||
/*.stack h3 + * {*/
|
||||
/*--space: calc(var(--space) * 0.666);*/
|
||||
|
||||
/*}*/
|
||||
|
||||
|
||||
.stack h4 {
|
||||
--space: var(--space-m);
|
||||
}
|
||||
|
||||
/*.stack h4 + * {*/
|
||||
/*--space: calc(var(--space) * 0.666)*/
|
||||
/*}*/
|
||||
|
||||
/*This special case seems necessary because the * + * selector doesn't match the first item.*/
|
||||
.stack > :nth-child(1) {
|
||||
margin-block-start: var(--space);
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
footer h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
footer > .wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3xl);
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
html {
|
||||
background-color: tkn('colors.mist');
|
||||
}
|
||||
body {
|
||||
color: tkn('colors.dark');
|
||||
padding: 0 3px;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,350 @@
|
|||
/*! 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 <]*/ /*set in my css*/
|
||||
-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;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
|
||||
@font-face {
|
||||
font-family: "Charter";
|
||||
src: url('/static/fonts/charter_bold.woff2');
|
||||
font-weight: bold;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Charter";
|
||||
src: url('/static/fonts/charter_italic.woff2');
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Charter";
|
||||
src: url('/static/fonts/charter_bold_italic.woff2');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Charter";
|
||||
src: url('/static/fonts/charter_regular.woff2');
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Charis';
|
||||
}
|
||||
/*@font-face {*/
|
||||
/*font-family: "Comfortaa";*/
|
||||
/*src: url('/static/fonts/Comfortaa-VariableFont_wght.ttf');*/
|
||||
/*}*/
|
||||
/*@font-face {*/
|
||||
/*font-family: "Montserrat";*/
|
||||
/*font-style: normal;*/
|
||||
/*src: url('/static/fonts/Montserrat-VariableFont_wght.ttf');*/
|
||||
/*}*/
|
||||
:root {
|
||||
@utopia typeScale({
|
||||
minWidth: 320,
|
||||
maxWidth: 1240,
|
||||
minFontSize: 16,
|
||||
maxFontSize: 20,
|
||||
minTypeScale: 1.2,
|
||||
maxTypeScale: 1.25,
|
||||
positiveSteps: 5,
|
||||
negativeSteps: 2,
|
||||
prefix: "step",
|
||||
});
|
||||
}
|
||||
|
||||
:root {
|
||||
--text-color: tkn('colors.dark');
|
||||
--heading-color: tkn('colors.dark');
|
||||
--link-color: tkn('colors.dark');
|
||||
--link-color-visited: tkn('colors.dark');
|
||||
--link-color-hover: tkn('colors.blue');
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: 'Charter', serif;
|
||||
font-style: normal;
|
||||
font-size: var(--step-0);
|
||||
color: var(--text-color);
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, header, .hero-text {
|
||||
color: var(--heading-color);
|
||||
font-weight: bold;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--step-5);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--step-3);
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--step-2);
|
||||
}
|
||||
h4 {
|
||||
font-size: var(--step-1);
|
||||
}
|
||||
|
||||
/*From css-tricks: https://css-tricks.com/snippets/css/prevent-superscripts-and-subscripts-from-affecting-line-height/*/
|
||||
sup, sub {
|
||||
vertical-align: baseline;
|
||||
position: relative;
|
||||
top: -0.4em;
|
||||
}
|
||||
|
||||
sub {
|
||||
top: 0.4em;
|
||||
}
|
||||
|
||||
.emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
|
||||
/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
|
||||
|
||||
:root {
|
||||
@utopia spaceScale({
|
||||
minWidth: 320,
|
||||
maxWidth: 1240,
|
||||
minSize: 16,
|
||||
maxSize: 20,
|
||||
positiveSteps: [1.5, 2, 3, 4, 6],
|
||||
negativeSteps: [0.75, 0.5, 0.25],
|
||||
customSizes: ["s-l"],
|
||||
prefix: "space",
|
||||
});
|
||||
}
|
||||
|
||||
:root {
|
||||
--line-height: tkn('leading.standard' to em);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
@design-tokens url('./design-tokens.json') format('style-dictionary3');
|
||||
|
||||
:root {
|
||||
--padding-inline: tkn('spacing.padding-inline');
|
||||
--content-max-width: tkn('spacing.content-max-width');
|
||||
--breakout-max-width: calc(var(--content-max-width) + 250px);
|
||||
|
||||
--breakout-size: calc(
|
||||
(var(--breakout-max-width) - var(--content-max-width)) / 2
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
[full-width-start] minmax(var(--padding-inline), 1fr)
|
||||
[breakout-start] minmax(0, var(--breakout-size))
|
||||
[content-start] min(
|
||||
100% - (var(--padding-inline) * 2),
|
||||
var(--content-max-width)
|
||||
)
|
||||
[content-end]
|
||||
minmax(0, var(--breakout-size)) [breakout-end]
|
||||
minmax(var(--padding-inline), 1fr) [full-width-end];
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
/*.header_layout {*/
|
||||
/*display: flex;*/
|
||||
/*flex-direction: row;*/
|
||||
/*justify-content: space-between;*/
|
||||
/*align-items: baseline;*/
|
||||
/*}*/
|
||||
|
||||
header {
|
||||
background-image: url('/static/img/water1.jpg');
|
||||
background-image: url('/static/media/boot_demo_2048.jpg');
|
||||
background-size: cover;
|
||||
background-position-y: center;
|
||||
background-position-x: left;
|
||||
}
|
||||
|
||||
/*For images part of template, not content*/
|
||||
.template-img {
|
||||
padding-top: var(--space-xs);
|
||||
padding-bottom: var(--space-xs);
|
||||
max-width: var(--space-xl-2xl);
|
||||
}
|
||||
|
||||
|
||||
ul.menu {
|
||||
background-color: tkn('colors.text.main');
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/*ul.menu li {*/
|
||||
/*padding: 0 var(--space-2xs);*/
|
||||
/*}*/
|
||||
|
||||
|
||||
/*Now add flex for menu*/
|
||||
ul.menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 var(--space-xs);
|
||||
}
|
||||
|
||||
header > .wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
||||
|
||||
header > .wrapper > .logo-group {
|
||||
min-width: 100px;
|
||||
flex-grow: 1;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*Could we make the menu wrap with the same kind of technique?*/
|
||||
|
||||
nav {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
ul.menu {
|
||||
width: 100%;
|
||||
--modifier: calc(650px - 100%);
|
||||
}
|
||||
ul.menu li {
|
||||
min-width: fit-content;
|
||||
flex-grow: 1;
|
||||
padding: var(--space-xs);
|
||||
flex-basis: calc(var(--modifier) * 999);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*I think the menu needs some breakpointing ...*/
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
layout: layouts/page.vto
|
||||
title: About me
|
||||
---
|
||||
|
||||
I'm a designer and builder.
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
layout: layouts/alles.vto
|
||||
title: Alles
|
||||
---
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
layout: layouts/page.vto
|
||||
articles_path: articles
|
||||
notes_path: notes
|
||||
nl:
|
||||
articles_path: artikelen
|
||||
notes_path: notities
|
||||
# url: '/${page.data.lang}/${articles_path}/${page.data.slug}'
|
||||
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
---
|
||||
title: "Denkt jou website software in jouw tal(en)?"
|
||||
date: 2024-10-31
|
||||
id: "trnslNL"
|
||||
lang: nl
|
||||
translates: "trnslEN"
|
||||
---
|
||||
|
||||
_Dit is mijn inzending voor de [IndieWeb Carnaval editie october 2024](https://tilde.team/~zinricky/multilingualism/)._
|
||||
|
||||
Elk systeem om websites te vertalen moet een structuur imponeren, anders wordt de complexiteit te groot. Maar structuur brengt beperkingen. Je moet aannames maken over hoe texten-in-meerdere-talen-als-data zich tot elkaar gaan verhouden.
|
||||
|
||||
Voor een grote zakelijke of overheidssite zijn die beperkingen het misschien waard omdat systematische, volledige vertaling de doelen van de organisatie bevordert.
|
||||
|
||||
Maar dit is een persoonlijk website en het mag dus mijn manier van taalgebruik weerspiegelen. Ik ben opgegroeid in een zeer meertalige omgeving, waar taal en vertalen zelfs expliciete onderwerpen van aandacht waren vanwege het werk dat mijn ouders deden als expats. Hierdoor is mijn moedertaal eigenlijk een mix van talen. Als dat een onbekend idee is voor jou, kijk dan naar de eerste video op de Wikipedia pagina over [code-switching](https://en.wikipedia.org/wiki/Code-switching).
|
||||
|
||||
Ik heb dus gereedschap nodig voor mijn website die een soort code-switching toestaat: op een ongestructureerde manier schakelen tussen talen. In de toekomst, wanneer deze site meer zakelijke doeleinden ondersteunt, zou een voorspelbare structuur met automatische links tussen vertalingen wel nuttig kunnen zijn. Maar zelfs dan zullen Engelse en Nederlandse delen waarschijnlijk voor verschillende doelgroepen worden geschreven. Of zal er nog steeds veel op één pagina gemengd willen worden. Technische documentatie heeft ten slotte van nature veel Engelse termen, ongeacht de hoofdtaal waarin het wordt geschreven. En Nederlanders kunnen over het algemeen wel wat Engels aan.
|
||||
|
||||
Voor nu, echter, zijn doodgewone handgemaakte hyperlinks de beste manier om meertaligheid binnen documenten weer te kunnen geven.
|
||||
|
||||
Het is licht ironisch dat de vertaling-links boven aan dit artikel en het Engelse origineel mijn probleem juist illustreren.
|
||||
|
||||
Ik had de [Multilanguage Plugin](https://lume.land/plugins/multilanguage/) geïnstalleerd van de [static site generator Lume ](https://lume.land) die ik gebruik, maar het voegt taalcodes toe aan het begin van elke URL. Dat wil ik niet, om verschillende redenen waar ik het een andere keer over zal hebben.
|
||||
|
||||
:::draft
|
||||
Het dwingt je om keuzes te maken die ik helemaal niet wil maken, zoals hoe/of je artikelen in verschillende talen opneemt in overzichtslijsten op je site ...
|
||||
:::
|
||||
|
||||
Maar, hoewel ik dacht dat ik mijn code onafhankelijk had gemaakt van de plugin, gingen de links toch stuk toen ik die uitzette. Kennelijk had ik toch een variabel gebruikt die door de plugin werdt geïntroduceerd. Dus om dit artikel op tijd af te krijgen, moest ik kiezen tussen géén vertaling, of suboptimale URLs.
|
||||
|
||||
Ik ga daarom links naar vertalingen met de hand toevoegen, niet automatisch. De enige automatisering zal wellicht zijn de markup genereren en de URLs opzoeken op basis van een kortere ID. Mijn code zal geen aannames maken over de URL structuur van artikelen in verschillende talen. Dat wil niet zeggen dat ik nooit dergelijke structuur zal willen hebben, maar het is nu nog te vroeg voor mij om die beslissing te maken.
|
||||
|
||||
---
|
||||
|
||||
Stop de pers: gelukkig had onze gastheer ons tot 11:00 op 1 november gegeven om onze bijdragen in te sturen. Want vanochtend vroeg bedacht ik een oplossing.
|
||||
|
||||
I was van plan om af te sluiten met de vraag of het Web uberhaupt mijn soort flexibele meertaligheid kan ondersteunen. Het Web is georganiseerd in domeinnamen, mappen en paden, en elke html zou idealiter een `lang=…` attribuut moeten hebben. Geen wonder dat elk vertaalsysteem allemaal rigiditeit introduceert, want ze zijn allemaal gebaseerd op een substraat die werkt met stricte scheidingen.
|
||||
|
||||
Maar ik werd wakker uit een lichte slaap met een oplossing, in ieder geval een deeloplossing. Het was iets dat ik in de documentatie van Lume had gezien: een [selectie-mechanisme op niveau van een alinea](https://lume.land/plugins/multilanguage/#link-to-a-page-in-current-language).
|
||||
|
||||
Net als alle oplossingen heeft ook deze zijn nadelen. In dit geval komt er wat meer markup bij die de auteur moet schrijven. Maar het idee is: afzonderelijke alinea's of hele pagina's kunnen een keuzeknop erboven krijgen om de taal te veranderen.
|
||||
|
||||
Dit maakt het mogelijk om hele documenten te vertalen, of alleen delen ervan, zonder een afhankelijkheid van enige externe processen. Alles zit in de markup van een pagina. Je kunt hiermee bijvoorbeeld alleen de samenvatting bovenaan vertalen, of de paragrafen één voor één vertalen wanneer je tijd hebt.
|
||||
|
||||
Dit kan aan de voorkant met enkel CSS worden gemaakt. Het genereren van HTML vergt wel wat sjabloon-scripting, maar dat is vrij simpel want het hoeft niet verder te kijken dan de huidige sectie of pagina.
|
||||
|
||||
Ik zal binnenkort een demo hiervan maken.
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: Green and blue of spring
|
||||
date: 2024-05-08 13:14
|
||||
---
|
||||
|
||||
Every spring I'm amazed at how green the greens are and how blue the blues.
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
---
|
||||
title: Low-tech, low-energy yoghurt making
|
||||
draft: true
|
||||
date: 2024-05-25 21:00
|
||||
---
|
||||
|
||||
I make yoghurt. I'm continuously tweaking and experimenting with the procedure,
|
||||
to try to make it as efficient, easy, and low-energy as possible.
|
||||
|
||||
There's a tension between taste/texture, energy use, and ease of the process.
|
||||
Yoghurt is the result of various species of bacteria fermenting milk.
|
||||
The bacteria in question are classified as 'thermophilic' meaning they
|
||||
thrive in fairly warm temperatures of 30-50 degrees Celcius.
|
||||
Since they need typically 8-12 hours to do their thing,
|
||||
that's a not-insignificant amount of energy use.
|
||||
Further, I usually heat the milk well above that first, for two reasons.
|
||||
|
||||
First, for safety. Though I'm personally not too concerned about consuming
|
||||
unpasteurized milk from healthy cows, I do like to reduce the risk
|
||||
especially if things are going to be stored for a while.
|
||||
|
||||
The second reason I heat the milk has more to to with taste.
|
||||
Heating the milk to 91 degrees breaks down proteins in the milk,
|
||||
which allows the bacteria to get a lot more done,
|
||||
resulting in a very firm yoghurt which I much prefer.
|
||||
|
||||
I probably like this so much because the yoghurt my mother used to make was so thick and firm.
|
||||
But she made it with powdered milk,
|
||||
which means you can 'supersaturate' the milk proteins.
|
||||
Nowadays I avoid such heavily processed things as powdered milk.
|
||||
|
||||
I like to try to do things as 'low tech' as possible,
|
||||
to be mindful of energy use but also just because it's a fun challenge
|
||||
that grows my skills and keeps me learning.
|
||||
So my method of incubating yoghurt is with a 'hay box'.
|
||||
That's an insulated container which keeps food hot/warm for slow cooking
|
||||
(we do all our water-cooked foods in here, like potatoes or rice).
|
||||
In our case it's a plywood box stuffed with eight centimetres of wool
|
||||
that doubles as a seat.
|
||||
So, for the long wait, I'm using no extra energy at all.
|
||||
The yoghurt goes in at 49 degrees, and comes out the next morning, 8-12 hours later,
|
||||
at around 38 degrees -- still within the yoghurt-making range.
|
||||
|
||||
This phase is not only low-energy, it's extremely hands-off (I'm sleeping the whole time).
|
||||
But it's getting everything too this point which is both energy- and attention intensive.
|
||||
The effort required often would put me off doing it.
|
||||
But I've persevered and can say that its starting to feel a lot easier,
|
||||
thanks to practise and one piece of tech that I added to my process.
|
||||
|
||||
That is a simple digital thermometer with a probe on a long cable,
|
||||
and, crucially, a temperature alarm. It cost about 19 Euros.
|
||||
This allows me to set-and-forget the milk in the heating process.
|
||||
Before, I would have to be constantly checking and stirring,
|
||||
especially as I approached boiling point,
|
||||
to avoid the milk boiling over.
|
||||
|
||||
There are also low-tech devices to alert for boiling over.
|
||||
They're called pot minders or milk minders,
|
||||
and they work by capturing and then releasing bubbles,
|
||||
bouncing on the bottom of the pot and making a noise.
|
||||
But I have not been able to find one for sale anywhere.
|
||||
Moreover, the thermometer is useful for a multitude of things,
|
||||
including makng the second phase, the cooldown, much easier too.
|
||||
|
||||
The goal is to heat the milk to 85 or 90, then keep it there for ten or twenty minutes,
|
||||
then cool it to 49, add the yoghurt starter, and then get it in the incubator as quickly as possible.
|
||||
In order to have enough mass to maintain heat overnight,
|
||||
I heat about three litres of water to 49 degrees,
|
||||
and put the two or three pots of yoghurt, 600ml each, in there.
|
||||
|
||||
The cooldown can go slow, but I usually speed it up by putting the pot of yoghurt in a tub of cold water.
|
||||
The thermometer lets me cool it down as fast as possible and know when to stop.
|
||||
It also helps me mix the water accurately. I pour boiling or near-boiling water
|
||||
into cold water and stir, checking and repeating until I get the right temperature.
|
||||
|
||||
Today I did this process, and I feel like I've hit on a routine that works well and is reproducable,
|
||||
takes as little time as possible, and saves some energy.
|
||||
|
||||
I re-use the cooling water as the basis for the incubating bath. Today this water was 27 degrees when it had
|
||||
absorbed the energy from the heated milk. That saves quite a bit of energy since that's already a third of the difference from tap water (16 degrees) to my target of 49. I also had just enough of this warm water left over for washing up afterwards.
|
||||
|
||||
I've always been hesitant to do this, for heygiene reasons. But I figure if I work really clean, and since the yoghurt
|
||||
is sealed in the pots, it should be ok. I think if I was selling yoghurt I'd need to be more strict about this.
|
||||
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
---
|
||||
title: "Does your site publishing system think in your language(s)?"
|
||||
date: 2024-10-31
|
||||
id: "trnslEN"
|
||||
lang: en
|
||||
translated: "trnslNL"
|
||||
---
|
||||
|
||||
_This is my entry for the [October 2024 IndieWeb Carnaval](https://tilde.team/~zinricky/multilingualism/)._
|
||||
|
||||
|
||||
Every framework for translating a website needs to impose some kind of structure. Whenever you add structure, you introduce tradeoffs. You need to make some assumptions about how content-in-languages-as-data are going to behave and relate to each other, otherwise the complexity of your information model will explode. Those assumptions invariably introduce inflexibility that limits what your system can handle.
|
||||
|
||||
For a large corporate or government site, the limitations on flexibility might be worth it because exhaustive systematic translation furthers the organisations goals.
|
||||
|
||||
|
||||
But this is a personal website and it gets to reflect my personal way of using language. And as someone who grew up in a very multilingual environment where language and translation were indeed always explicit topics of attention because of the work my parents were doing as expats, my native language is arguably a mix of several languages. If that sounds strange to you, check out the first video on the Wikipedia page about [code-switching](https://en.wikipedia.org/wiki/Code-switching), the act of mixing languages within a discourse unit.
|
||||
|
||||
|
||||
So I need website-building tools that allow for the textual equivalent of code-switching.
|
||||
In the future, when this site serves more business purposes, a more predictable structure with some automatic linking of translations might be useful. But even then, I suspect Dutch and English content will be either written for different audiences, or will still want to mix within a single page. It's the nature of technical documentation to include a lot of English, regardless of the main language, and Dutch people can generally handle a fair bit of English.
|
||||
|
||||
But for now, plain handmade hyperlinks are the best way to represent the kind of sub-publication multilingualism I envision.
|
||||
|
||||
Ironically, the links at the top of this article and it's Dutch translation illustrate the problem.
|
||||
|
||||
I installed [Lume's](https://lume.land) [Multilanguage Plugin](https://lume.land/plugins/multilanguage/) to provide the links between translations. But it adds a language prefix to every URL, as seen on the Dutch version. I don't want that, for various reasons conceptual and technical, which I'll get into another time.
|
||||
|
||||
:::draft
|
||||
It forces you to make choices you don't want to make, like including different language articles in overview lists or not ...
|
||||
:::
|
||||
|
||||
However, while I thought my code ended up independent of the plugin, when I disabled it, my links broke. Without realizing it, I made them dependent on a variable which is defined by the plugin. So to finish this article on time, I was stuck with either no translations, or URLs that I didn't want.
|
||||
|
||||
My plan is to add links to translations or other-language-versions by hand, as necessary. The only automation I'll add is the generating of the markup and maybe looking up the target URL using a shorter ID. My code will make no assumptions about the URLs of articles in different languages. It's not to say I'll never want that, but it's too early for me to make that decision yet.
|
||||
|
||||
---
|
||||
|
||||
Stop press: luckily our host gave us until 11:00 on 1 November to submit our contributions.
|
||||
Because early this morning I thought of a simple solution to my problem.
|
||||
|
||||
I was going to conclude that I almost think the Web itself can't handle such flexible linguistic mixing, with the way it's organised into domain names, folders, and paths, with every HTML page strongly encouraged to include a single `lang=…` property. It's no wonder every site translation system ends up making choices that preclude the kind of fluidity I want, because they're based on a fabric which only works with strict separation.
|
||||
|
||||
But I woke from light sleep with at least a partial solution in my head. It was, in fact, something I saw on Lume's documentation page itself: a [section-level switcher](https://lume.land/plugins/multilanguage/#link-to-a-page-in-current-language).
|
||||
|
||||
Like all solutions it has its own tradeoffs; in this case, the author has to add some more markup to their document source. The idea is that individual paragraphs or whole sections get a selector above them to switch their language.
|
||||
|
||||
This allows translating whole documents or just parts of them, without depending on any processing logic -- it's encoded in the markup. You could just translate the summary at the top, or translate the various sections as you have time, or translate the whole page.
|
||||
|
||||
The selector/switcher can be implemented in CSS only. Processing the markup requires some template scripting, but it is fairly simle as it doesn't have to look beyond the current section or page.
|
||||
|
||||
I'll make a demo as soon as I have time.
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
---
|
||||
title: "Adding a 'notes' section to the site"
|
||||
date: 2024-07-09
|
||||
---
|
||||
|
||||
I can't keep up with all the online discussion threads, and with all my ideas for those threads.
|
||||
When I have time to work on an article on any subject, I want to reference all the articles on that subject.
|
||||
But then my article becomes too big of a project to finish in the time I have available.
|
||||
|
||||
So I'm doing what quite a few people do in this space: adding a 'notes' section.
|
||||
The purpose is to help me feel less pressure on my writing. I can put my thoughts on the ongoing conversations out there,
|
||||
without feeling like I have to full justice to everyone who has said wiser and more coherent things about the topic.
|
||||
|
||||
After all, we're not really having a conversation. A conversation is when you're in the same room taking turns speaking and listening.
|
||||
|
||||
We are doing something very valuable -- reading and referring to each others' writing -- but in the end it's asynchronous writing.
|
||||
|
||||
#### Disclaimer
|
||||
I shold probably have a disclaimer about my opinion on all these topics being subject to change.
|
||||
|
||||
#### What to do with the Feed?
|
||||
For now I'm going to keep the Notes section out of the RSS feed, which will only contain Articles. While I think about how I want to present the combination of notes and articles.
|
||||
|
||||
#### Where to find them
|
||||
You can find the notes on the [Everything](/everything/) page, below the 'Articles' section.
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: 2024-10-08 — Unidentified Release
|
||||
date: 2024-10-08
|
||||
---
|
||||
|
||||
* Added note [Creating a changelog](/notes/creating-a-changelog/) (502 words)
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Release 24uc-1 – 2024-10-09
|
||||
date: 2024-10-09
|
||||
---
|
||||
|
||||
* Added note [Sketch: changelog commit workflow](/notes/sketch-changelog-commit-workflow/) (98 words, 1 drawing)
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: Release 24uc-2 – 2024-10-09
|
||||
date: 2024-10-09
|
||||
---
|
||||
* Added note [Publish first, release later](/notes/publish-first-release-later/) (175 words)
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
title: Release 24uc-3 – 2024-10-09 — more notes about changelog
|
||||
date: 2024-10-09
|
||||
---
|
||||
|
||||
Adds an article about what the units in the feed will be.
|
||||
|
||||
Adds the final part of the previous note, [Publish first, release later](/notes/publish-first-release-later/),
|
||||
as part of a test of the release workflow.
|
||||
|
||||
* Added: [Changelog: what are the meaningful units?](/notes/changelog-units/) (514 words)
|
||||
* Expanded: [Publish first, release later](/notes/publish-first-release-later/) (+99 words)
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: Release 24v1-1 – 2024-10-15
|
||||
date: 2024-10-15
|
||||
---
|
||||
|
||||
Add a note about paper being advanced technology.
|
||||
Very disjointed evening thoughts.
|
||||
Publishing more to aim for my quota than for anything else.
|
||||
|
||||
* Added: [Advanced technology isn't necessarily complex](/notes/paper-is-advanced-tech/) (115 words)
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
title: 24w5-1 IndieWeb Carnaval on Multilingualism
|
||||
date: 2024-11-01
|
||||
---
|
||||
|
||||
This is my submission for the October 2024 IndieWeb Carnaval on the topic of multilingualism!
|
||||
|
||||
Appropriately, I added a Dutch translation and page translation links, too.
|
||||
However, the articles are mostly about how website translation frameworks don't do what I envision.
|
||||
|
||||
Added: [Mixed Multilingual content](/articles/mixed-multilingual-content/) with Dutch translation: [Gemengde meertaligheid](/nl/articles/gemenge-meertaligheid/)
|
||||
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
---
|
||||
layout: layouts/changelog-entry.vto
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
layout: layouts/changelog.vto
|
||||
title: Changelog
|
||||
level: index
|
||||
notes: |
|
||||
### Notes
|
||||
This is how I generate the wordcount:
|
||||
|
||||
```
|
||||
sed '{ /^---/ { :a N; /\n---/! ba; d} }' FILENAME | \
|
||||
sed '{/^```/ { :a N; /\n```/! ba; d} }' \
|
||||
| wc -w
|
||||
```
|
||||
|
||||
This excludes yaml frontmatter (between `---` lines) and code blocks (between ``` lines).
|
||||
---
|
||||
|
||||
This is a provisional changelog. Currently it shows statistics for words written.
|
||||
It will eventually become a proper changelog with all modifications.
|
||||
|
||||
You can subscribe to this changelog as an [RSS Feed](/changelog/changelog.rss).
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
layout: layouts/everything.vto
|
||||
title: Site Index
|
||||
---
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
title: "Home"
|
||||
layout: layouts/index.vto
|
||||
---
|
||||
|
||||
# I'm Hans,
|
||||
a creator of spaces that work for people.
|
||||
|
||||
|
||||
## Information spaces
|
||||
visual design and interactive layouts to make complex information clear. Tools for digital data ownership and unfettered sharing.
|
||||
|
||||
## learning spaces
|
||||
sharing knowledge with care for effective learning and meaningful connection.
|
||||
## physical spaces
|
||||
implements and space design for joyful, purposeful living and working.
|
||||
|
||||
---
|
||||
|
||||
_more coming end of 2024 …_
|
||||
|
||||
---
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Notes and drafts
|
||||
date: 2024-06-18 09:03
|
||||
layout: layouts/page.vto
|
||||
draft: true
|
||||
---
|
||||
|
||||
I ~~explained~~ will explain the purpose of the 'notes and drafts' category in [this article](/articles/its-called-a-digital-garden/).
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
layout: layouts/page.vto
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: advanced technology isn't necessary complex
|
||||
date: 2024-10-15
|
||||
---
|
||||
|
||||
Sometimes, we can forget how advanced seemingly simple technologies are.
|
||||
It can be tempting to want to erase complicated stuff and start again more simply.
|
||||
But let's not forget that technologies we take for granted are anything but.
|
||||
|
||||
After coming back to web development following a hiatus making things in the real world,
|
||||
one thought that keeps getting stronger is that I can't wait for this domain to go the way of paper.
|
||||
Paper, pens and pencils are ubiquitous. That doesn't mean they aren't marvelous feats of engineering and production.
|
||||
I rely on factory-produced, precision products for the simple, more natural practise of writing on paper.
|
||||
|
||||
I think websites should be standardized just like this.
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
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: 573 KiB |
|
|
@ -0,0 +1,70 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="112.37685mm"
|
||||
height="69.02063mm"
|
||||
viewBox="0 0 112.37685 69.02063"
|
||||
version="1.1"
|
||||
id="svg840"
|
||||
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
|
||||
sodipodi:docname="a_logo.svg">
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<sodipodi:namedview
|
||||
id="namedview842"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="1.0909718"
|
||||
inkscape:cx="14.665821"
|
||||
inkscape:cy="175.07326"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1025"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="28"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0" />
|
||||
<defs
|
||||
id="defs837" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-43.614336,-55.419697)">
|
||||
<path
|
||||
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#4794d1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||
d="m 118.02998,55.445762 c -1.50326,-0.07438 -3.23026,0.01417 -5.15692,0.217904 -3.85335,0.406997 -8.41504,1.379447 -13.022054,2.984856 -4.95062,1.725172 -7.99379,3.990067 -9.32468,6.723744 -0.922618,1.895032 -0.632144,3.863928 0.09687,5.731088 -5.793458,1.310454 -11.518649,3.111649 -16.726324,6.637254 L 45.417841,68.92091 c -1.766256,-0.546487 -2.585969,2.102896 -0.819713,2.649366 l 27.183111,8.418864 c -7.473915,11.108536 -9.546973,13.20403 -26.013918,19.59912 -1.686497,0.84776 -0.351835,3.36761 1.297013,2.44876 16.418017,-6.354339 19.272378,-9.429899 26.161538,-19.596017 1.721364,7.249972 3.900479,7.99044 7.79545,15.014503 4.024457,7.257574 5.532752,10.284214 7.833241,19.554904 0.657184,1.74834 3.278287,0.73078 2.58365,-1.00302 -1.902861,-9.46546 -5.513025,-16.286989 -8.127222,-20.115217 -2.309963,-3.382697 -6.208972,-8.678684 -7.615584,-14.692844 l 29.926743,9.647504 v 32.166017 c -0.0572,1.9033 2.82764,1.9033 2.77042,0 V 90.860664 l 46.53697,-13.675752 c 1.87599,-0.462229 1.04567,-3.283847 -0.78168,-2.65629 L 107.01601,88.377316 77.421287,78.830112 c 4.487218,-2.586978 9.441235,-4.009528 14.526597,-5.098147 3.776572,4.658903 11.708626,7.800817 20.430616,7.201044 1.911,-0.06588 1.71178,-2.960028 -0.19023,-2.763516 -7.18645,0.494194 -13.678411,-2.082921 -17.030702,-5.229563 7.600412,-1.415838 15.387062,-2.335286 22.405532,-5.080845 4.22205,-1.651629 6.77122,-3.467982 7.65068,-5.807182 0.43972,-1.1696 0.29761,-2.509185 -0.35972,-3.531343 -0.65732,-1.022159 -1.70448,-1.758199 -3.0056,-2.31733 -1.03378,-0.444256 -2.31516,-0.683004 -3.81844,-0.757468 z m -4.86639,2.974496 c 3.61976,-0.382329 6.56263,-0.112273 7.5884,0.328583 0.96397,0.41424 1.533,0.902909 1.77086,1.272806 0.23786,0.369879 0.27126,0.591007 0.0969,1.054901 -0.3488,0.927789 -2.18651,2.681029 -6.06658,4.198869 -6.91864,2.706512 -15.11014,3.538568 -23.315181,5.167317 -0.620509,-1.30036 -0.844594,-2.569235 -0.217886,-3.856455 0.848631,-1.743111 3.17919,-3.729981 7.740597,-5.319505 4.39743,-1.532378 8.78318,-2.464187 12.40294,-2.846516 z"
|
||||
id="path864"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccscccccccccsccccccccccccccccscscccccscsccscc"
|
||||
inkscape:export-xdpi="300"
|
||||
inkscape:export-ydpi="300" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
|
|
@ -0,0 +1,325 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="210mm"
|
||||
height="297mm"
|
||||
viewBox="0 0 210 297"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)"
|
||||
sodipodi:docname="drawing.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="1.0091449"
|
||||
inkscape:cx="555.91618"
|
||||
inkscape:cy="818.01926"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1025"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="28"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1">
|
||||
<inkscape:path-effect
|
||||
effect="bounding_box"
|
||||
linkedpath="#text3"
|
||||
id="path-effect4"
|
||||
is_visible="true"
|
||||
lpeversion="1.3"
|
||||
visualbounds="false" />
|
||||
<inkscape:path-effect
|
||||
effect="bounding_box"
|
||||
linkedpath="#text1"
|
||||
id="path-effect1"
|
||||
is_visible="true"
|
||||
lpeversion="1.3"
|
||||
visualbounds="false" />
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:8.46667px;line-height:1.25;font-family:'Clear Sans';-inkscape-font-specification:'Clear Sans';letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect7);display:inline;stroke-width:0.264583"
|
||||
x="66.576172"
|
||||
y="102.16096"
|
||||
id="text5"><tspan
|
||||
x="5.8886719"
|
||||
y="9.7316109"
|
||||
id="tspan2">Now, we will type some text<tspan
|
||||
dx="3.0137711"
|
||||
id="tspan1" /></tspan><tspan
|
||||
x="5.8886719"
|
||||
y="20.314949"
|
||||
id="tspan4">and see where it ends up.<tspan
|
||||
dx="2.2944336"
|
||||
id="tspan3" /></tspan><tspan
|
||||
x="5.8886719"
|
||||
y="30.898287"
|
||||
id="tspan8">no one is going to tell me </tspan><tspan
|
||||
x="5.8886719"
|
||||
y="41.481626"
|
||||
id="tspan9">anything.</tspan></text>
|
||||
<rect
|
||||
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-opacity:1"
|
||||
id="rect7"
|
||||
width="106.98487"
|
||||
height="42.684219"
|
||||
x="5.8891301"
|
||||
y="2.5168412" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:4.23333px;line-height:1.25;font-family:'Clear Sans';-inkscape-font-specification:'Clear Sans';letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect10);display:inline;stroke-width:0.264583"
|
||||
x="66.576172"
|
||||
y="102.16096"
|
||||
id="text10"><tspan
|
||||
x="9.6660156"
|
||||
y="81.491778"
|
||||
id="tspan10">I am organising a whole bunch of things.</tspan></text>
|
||||
<rect
|
||||
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-opacity:1"
|
||||
id="rect10"
|
||||
width="80.990067"
|
||||
height="4.8877163"
|
||||
x="9.6659298"
|
||||
y="77.883957" />
|
||||
<path
|
||||
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="M 55.896687,45.201061 50.560012,77.883957"
|
||||
id="path10"
|
||||
inkscape:connector-type="polyline"
|
||||
inkscape:connector-curvature="0"
|
||||
inkscape:connection-start="#rect7"
|
||||
inkscape:connection-end="#rect10" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:4.23333px;line-height:1.25;font-family:'Clear Sans';-inkscape-font-specification:'Clear Sans';letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect15);display:inline;stroke-width:0.264583"
|
||||
x="66.576172"
|
||||
y="102.16096"
|
||||
id="text15"><tspan
|
||||
x="110.76758"
|
||||
y="81.913653"
|
||||
id="tspan11">I am very close to getting Johnny Decimal </tspan><tspan
|
||||
x="110.76758"
|
||||
y="87.205317"
|
||||
id="tspan12">system for our setup.</tspan></text>
|
||||
<rect
|
||||
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-opacity:1"
|
||||
id="rect15"
|
||||
width="81.198155"
|
||||
height="11.722587"
|
||||
x="110.76707"
|
||||
y="78.307076" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:4.23333px;line-height:1.25;font-family:'Clear Sans';-inkscape-font-specification:'Clear Sans';letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect16);display:inline;stroke-width:0.264583"
|
||||
x="66.576172"
|
||||
y="102.16096"
|
||||
id="text16"><tspan
|
||||
x="110.76758"
|
||||
y="121.42147"
|
||||
id="tspan13">In process of migrating/reinstalling OS.
|
||||
</tspan></text>
|
||||
<rect
|
||||
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-opacity:1"
|
||||
id="rect16"
|
||||
width="80.990067"
|
||||
height="7.3019986"
|
||||
x="110.76707"
|
||||
y="117.81396" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:4.23333px;line-height:1.25;font-family:'Clear Sans';-inkscape-font-specification:'Clear Sans';letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect17);display:inline;stroke-width:0.264583"
|
||||
x="66.576172"
|
||||
y="102.16096"
|
||||
id="text17"><tspan
|
||||
x="110.76758"
|
||||
y="158.18709"
|
||||
id="tspan14">Why?
|
||||
</tspan><tspan
|
||||
x="110.76758"
|
||||
y="163.47875"
|
||||
id="tspan15">Because I want to set up terminal, shell, </tspan><tspan
|
||||
x="110.76758"
|
||||
y="168.7704"
|
||||
id="tspan16">and development tools properly. I've tried </tspan><tspan
|
||||
x="110.76758"
|
||||
y="174.06206"
|
||||
id="tspan17">this sometimes ... how will I make it work </tspan><tspan
|
||||
x="110.76758"
|
||||
y="179.35372"
|
||||
id="tspan18">this time?</tspan></text>
|
||||
<rect
|
||||
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-opacity:1"
|
||||
id="rect17"
|
||||
width="80.990067"
|
||||
height="28.244722"
|
||||
x="110.76707"
|
||||
y="154.58052" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:4.23333px;line-height:1.25;font-family:'Clear Sans';-inkscape-font-specification:'Clear Sans';letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect18);display:inline;stroke-width:0.264583"
|
||||
x="66.576172"
|
||||
y="102.16096"
|
||||
id="text18"><tspan
|
||||
x="10.904297"
|
||||
y="97.144121"
|
||||
id="tspan19">I need to keep from losing files!
|
||||
</tspan><tspan
|
||||
x="10.904297"
|
||||
y="102.43579"
|
||||
id="tspan20">Create a repository for hansfast.net!</tspan></text>
|
||||
<rect
|
||||
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-opacity:1"
|
||||
id="rect18"
|
||||
width="78.332155"
|
||||
height="11.59655"
|
||||
x="10.90518"
|
||||
y="93.538078" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:4.23333px;line-height:1.25;font-family:'Clear Sans';-inkscape-font-specification:'Clear Sans';letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect19);display:inline;stroke-width:0.264583"
|
||||
x="66.576172"
|
||||
y="102.16096"
|
||||
id="text19"><tspan
|
||||
x="10.904297"
|
||||
y="128.98787"
|
||||
id="tspan21">A list of tasks to get opdeboot.com </tspan><tspan
|
||||
x="10.904297"
|
||||
y="134.27953"
|
||||
id="tspan22">finished.</tspan></text>
|
||||
<rect
|
||||
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-opacity:1"
|
||||
id="rect19"
|
||||
width="80.804674"
|
||||
height="11.091521"
|
||||
x="10.90518"
|
||||
y="125.38054" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:4.23333px;line-height:1.25;font-family:'Clear Sans';-inkscape-font-specification:'Clear Sans';letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect20);display:inline;stroke-width:0.264583"
|
||||
x="66.576172"
|
||||
y="102.16096"
|
||||
id="text20"><tspan
|
||||
x="101.29297"
|
||||
y="200.42342"
|
||||
id="tspan23">I can do this. I know I can. I am a smart individual. I </tspan><tspan
|
||||
x="101.29297"
|
||||
y="205.71507"
|
||||
id="tspan24">can break it down into smaller chunks, and work on </tspan><tspan
|
||||
x="101.29297"
|
||||
y="211.00673"
|
||||
id="tspan25">them one at a time.
|
||||
</tspan><tspan
|
||||
x="101.29297"
|
||||
y="216.29839"
|
||||
id="tspan26">
|
||||
</tspan><tspan
|
||||
x="101.29297"
|
||||
y="221.59004"
|
||||
id="tspan27">It's interesting to think about this in terms of leegte. </tspan><tspan
|
||||
x="101.29297"
|
||||
y="226.8817"
|
||||
id="tspan28">Emotionele, lichamelijke leegte. Does every non-</tspan><tspan
|
||||
x="101.29297"
|
||||
y="232.17336"
|
||||
id="tspan29">growth activity of ours result from emptiness? Trying </tspan><tspan
|
||||
x="101.29297"
|
||||
y="237.46501"
|
||||
id="tspan30">to fill it? And does every growth activity also come </tspan><tspan
|
||||
x="101.29297"
|
||||
y="242.75667"
|
||||
id="tspan31">from imitation?
|
||||
</tspan><tspan
|
||||
x="101.29297"
|
||||
y="248.04833"
|
||||
id="tspan32">
|
||||
</tspan><tspan
|
||||
x="101.29297"
|
||||
y="253.33998"
|
||||
id="tspan33">I think so. That resonates. I feel like I'm on to </tspan><tspan
|
||||
x="101.29297"
|
||||
y="258.63164"
|
||||
id="tspan34">something here.
|
||||
</tspan><tspan
|
||||
x="101.29297"
|
||||
y="263.9233"
|
||||
id="tspan35">
|
||||
</tspan><tspan
|
||||
x="101.29297"
|
||||
y="269.21495"
|
||||
id="tspan36">Everything is imitation... and whom shall we imitate?</tspan></text>
|
||||
<rect
|
||||
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-opacity:1"
|
||||
id="rect20"
|
||||
width="100.91839"
|
||||
height="76.519119"
|
||||
x="101.29344"
|
||||
y="196.81575" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:4.23333px;line-height:1.25;font-family:'Clear Sans';-inkscape-font-specification:'Clear Sans';letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect21);display:inline;stroke-width:0.264583"
|
||||
x="66.576172"
|
||||
y="102.16096"
|
||||
id="text21"><tspan
|
||||
x="9.6660156"
|
||||
y="153.63045"
|
||||
id="tspan37">Some infrastructure. Make it visual. Very </tspan><tspan
|
||||
x="9.6660156"
|
||||
y="158.92211"
|
||||
id="tspan38">visual. On the wall. Think of things in </tspan><tspan
|
||||
x="9.6660156"
|
||||
y="164.21376"
|
||||
id="tspan39">terms of a design which is being </tspan><tspan
|
||||
x="9.6660156"
|
||||
y="169.50542"
|
||||
id="tspan40">implemented, rather than individual things </tspan><tspan
|
||||
x="9.6660156"
|
||||
y="174.79708"
|
||||
id="tspan41">which have to be attacked. It's a whole; </tspan><tspan
|
||||
x="9.6660156"
|
||||
y="180.08873"
|
||||
id="tspan42">see it as such!</tspan></text>
|
||||
<rect
|
||||
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-opacity:1"
|
||||
id="rect21"
|
||||
width="81.445589"
|
||||
height="33.65652"
|
||||
x="9.6659298"
|
||||
y="150.02393" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-size:3.52778px;line-height:1.25;font-family:'Clear Sans';-inkscape-font-specification:'Clear Sans';letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect22);display:inline;stroke-width:0.264583"
|
||||
x="66.576172"
|
||||
y="102.16096"
|
||||
id="text22"><tspan
|
||||
x="2.9414062"
|
||||
y="281.91405"
|
||||
id="tspan43">[Border around formatted text in Inkscape - Graphic Design Stack Exchange](https://graphicdesign.stackexchange.com/</tspan><tspan
|
||||
x="2.9414062"
|
||||
y="286.32378"
|
||||
id="tspan44">questions/25249/border-around-formatted-text-in-inkscape )</tspan></text>
|
||||
<rect
|
||||
style="fill:none;stroke:#000000;stroke-width:0.264584;stroke-opacity:1"
|
||||
id="rect22"
|
||||
width="200.75041"
|
||||
height="8.4828854"
|
||||
x="2.9404559"
|
||||
y="278.90854" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 896 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 830 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"colors": {
|
||||
"blue": {"value": "#4794d1"},
|
||||
"mist": {"value": "#f3f3ef"},
|
||||
"sea": {"value": "#6093ac"},
|
||||
"dark": {"value": "#333333"}
|
||||
},
|
||||
"font": {
|
||||
"size": {
|
||||
"min": {"value": 16},
|
||||
"max": {"value": 20},
|
||||
"base": {"value": "16px"}
|
||||
}
|
||||
},
|
||||
"leading": {
|
||||
"flat": {"value": 1},
|
||||
"fine": {"value": 1.38},
|
||||
"standard": {"value": 1.5},
|
||||
"loose": {"value": 1.9}
|
||||
},
|
||||
"spacing":
|
||||
{
|
||||
"padding-inline": {"value": "1rem"},
|
||||
"content-max": {"value": "900px"}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,225 @@
|
|||
@import 'styles/global/variables.css';
|
||||
@import 'styles/global/global.css';
|
||||
@import 'styles/global/typography.css';
|
||||
@import 'styles/comp/space.css';
|
||||
@import 'styles/header.css';
|
||||
@import 'styles/footer.css';
|
||||
|
||||
/*A single top-level import of design tokens suffices.
|
||||
* All @import-ed files have access to the `tkn()` function,
|
||||
* because design-tokens processes all @design-tokens declarations
|
||||
* in one go and thus they are available to entire final CSS.*/
|
||||
@design-tokens url('./design-tokens.json') format('style-dictionary3');
|
||||
|
||||
/*Reset links!*/
|
||||
a {
|
||||
outline-color: transparent;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--link-color-visited);
|
||||
}
|
||||
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
a:hover , a:hover p, a:hover h3{
|
||||
color: var(--link-color-hover);
|
||||
}
|
||||
a:hover:visited , a:visited:hover p, a:visited:hover h3{
|
||||
color: tkn('colors.blue');
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: tkn('colors.white');
|
||||
}
|
||||
|
||||
.grid-item:hover{
|
||||
background-color: tkn('colors.blue');
|
||||
}
|
||||
|
||||
/*override link styling in page header*/
|
||||
header {
|
||||
& a:link {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
& a:visited {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
& a:focus {
|
||||
text-decoration: none;
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
& a:hover , a:hover p, a:hover h3{
|
||||
color: tkn('colors.rust');
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
& a:active {
|
||||
background-color: var(--link-color);
|
||||
color: tkn('colors.white');
|
||||
}
|
||||
|
||||
& a.current {
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*Set the max width of the body ...
|
||||
* incompatible with later grid-based wrapping*/
|
||||
main, .wrapper {
|
||||
max-width: calc(var(--space-3xl) * 4.5);
|
||||
width: 90vw;
|
||||
margin: 0 auto;
|
||||
/*hyphens: auto;*/
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
flex: 1
|
||||
}
|
||||
|
||||
main img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.item_layout a:hover img{
|
||||
transition: all 300ms ease-out;
|
||||
}
|
||||
|
||||
|
||||
.item_layout a:hover img{
|
||||
transform: scale(1.04)
|
||||
}
|
||||
|
||||
.footnotes {
|
||||
font-size: var(--step--1);
|
||||
|
||||
& h2 {
|
||||
font-size: var(--step-1);
|
||||
}
|
||||
}
|
||||
|
||||
.next-prev-links {
|
||||
font-size: var(--step--1);
|
||||
margin-block-start: var(--space-xl);
|
||||
margin-block-end: var(--space-xl);
|
||||
|
||||
& > * {
|
||||
max-width: 100%;
|
||||
min-width: 30%;
|
||||
width: calc((500px - 100%) * 999);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.stretch {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
||||
.article-list {
|
||||
gap: var(--space-l);
|
||||
}
|
||||
|
||||
.article-list > :last-child {
|
||||
flex-grow: 1;
|
||||
max-width: 50%;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
/*metadata paragraph should hug closer to next (override stack/flow spacing)*/
|
||||
.metadata-paragraph {
|
||||
font-size: var(--step--1);
|
||||
margin-block-end: var(--space-2xs);
|
||||
font-style: italic;
|
||||
background-color: lightgray;
|
||||
border-radius: 5px;
|
||||
padding: 3px 7px;
|
||||
max-width: fit-content;
|
||||
}
|
||||
.metadata-paragraph + * {
|
||||
margin-block-start: 0;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.draft-content{
|
||||
border-left: 5px solid #eee;
|
||||
border-right: 5px solid #eee;
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
.draft-content p {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.draft-content summary{
|
||||
color: #bbb;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.draft-content details[open]::after {
|
||||
color: #bbb;
|
||||
display: block;
|
||||
content: 'END DRAFT MATERIAL';
|
||||
text-align: center;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.note-content {
|
||||
border-left: 5px solid red;
|
||||
border-right: 5px solid red;
|
||||
padding: 0 3px;
|
||||
|
||||
}
|
||||
.note-content::before {
|
||||
display: block;
|
||||
content: 'PRIVATE NOTES';
|
||||
text-align: center;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#lang-toggle {
|
||||
display: none;
|
||||
}
|
||||
.lang-toggle-container {
|
||||
display: flex;
|
||||
|
||||
& * {
|
||||
padding: 0 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue