The code for my personal website, powered by Jekyll.
arthr.me
jekyll-site
personal-website
Move things around for Minduim.
authored by
Arthur Freitas
and committed by
Arthur Freitas
aaaa8b62
a4ad4127
+22
-1556
-45
.pages.yml
-45
.pages.yml
···
1
-
media: uploads
2
-
3
-
content:
4
-
- name: posts
5
-
label: Posts
6
-
type: collection
7
-
path: _posts
8
-
view:
9
-
fields:
10
-
- date
11
-
- title
12
-
sort:
13
-
- date
14
-
search:
15
-
- title
16
-
- body
17
-
- tags
18
-
fields:
19
-
- name: layout
20
-
type: string
21
-
hidden: true
22
-
default: post
23
-
- name: title
24
-
label: Title
25
-
type: string
26
-
- name: body
27
-
label: Body
28
-
type: rich-text
29
-
- name: tags
30
-
label: Tags
31
-
list: true
32
-
type: string
33
-
- name: date
34
-
label: Date
35
-
type: date
36
-
options:
37
-
time: true
38
-
format: yyyy-MM-dd' 'HH:mm:ss' 'xxxx
39
-
- name: now
40
-
label: Status post
41
-
type: boolean
42
-
- name: published
43
-
label: Published
44
-
type: boolean
45
-
default: false
+1
-1
404.html
+1
-1
404.html
···
4
4
permalink: /404.html
5
5
---
6
6
7
-
<p>Parece que não tem nada por aqui. Quer dar uma explorada <a href="{% link arquivo.html %}">no blog</a>?
7
+
<p>Parece que não tem nada por aqui. Quer dar uma explorada <a href="{{ site.url }}">no blog</a>?
8
8
9
9
<p>Também não está por lá? Eu escrevi no <a href="https://arthrfrts.tumblr.com/" rel="me">Tumblr</a> entre 2020 e 2024, e no <a href="https://paomortadela.com.br/" rel="me">Pão com Mortadela</a> entre 2013 e 2023. Meus textos antigos provavelmente estão lá.</p>
+5
-20
Gemfile
+5
-20
Gemfile
···
2
2
3
3
gem "jekyll", "~> 4.4"
4
4
5
-
# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
6
-
# and associated library.
7
-
platforms :mingw, :x64_mingw, :mswin, :jruby do
8
-
gem "tzinfo", ">= 1", "< 3"
5
+
install_if -> { Gem.win_platform? } do
6
+
gem "wdm", "~> 0.2"
7
+
gem "tzinfo", "~> 2.0.4"
9
8
gem "tzinfo-data"
10
9
end
11
10
12
-
# Performance-booster for watching directories on Windows
13
-
gem "wdm", "~> 0.1", :platforms => [:mingw, :x64_mingw, :mswin]
11
+
gem "jekyll-remote-theme", "~> 0.4.1", group: :jekyll_plugins
14
12
15
-
# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
16
-
# do not have a Java counterpart.
17
-
gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
18
-
19
-
gem "jekyll-feed", "~> 0.17.0", :group => :jekyll_plugins
20
-
gem "jekyll-json-feed", "~> 1.0", :group => :jekyll_plugins
21
-
gem "jekyll-sitemap", "~> 1.4", :group => :jekyll_plugins
22
-
gem "jekyll-seo-tag", "~> 2.8", :group => :jekyll_plugins
23
-
gem "jekyll-paginate", "~> 1.1", :group => :jekyll_plugins
24
-
gem "jekyll-archives", "~> 2.3", :group => :jekyll_plugins
25
-
gem "jekyll-redirect-from", "~> 0.16.0", :group => :jekyll_plugins
26
-
gem "jekyll-last-modified-at", "~> 1.3", :group => :jekyll_plugins
27
-
gem "jekyll-compose", "~> 0.12.0", :group => :jekyll_plugins
28
-
gem "jekyll-relative-links", "~> 0.7.0", :group => :jekyll_plugins
13
+
gem "jekyll-relative-links", "~> 0.7.0", group: :jekyll_plugins
-21
LICENSE
-21
LICENSE
···
1
-
MIT License
2
-
3
-
Copyright (c) 2024 Arthur Freitas
4
-
5
-
Permission is hereby granted, free of charge, to any person obtaining a copy
6
-
of this software and associated documentation files (the "Software"), to deal
7
-
in the Software without restriction, including without limitation the rights
8
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
-
copies of the Software, and to permit persons to whom the Software is
10
-
furnished to do so, subject to the following conditions:
11
-
12
-
The above copyright notice and this permission notice shall be included in all
13
-
copies or substantial portions of the Software.
14
-
15
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
-
SOFTWARE.
+2
-3
README.md
+2
-3
README.md
···
6
6
7
7
My true mother tongue is **HTML, CSS, and JavaScript**. With these, it seems like I can do anything. From mere documents to real web experiences that anyone with access to a browser can enjoy. That's my favorite magic.
8
8
9
-
I also make [small web games][1] and [write on my blog][2].
9
+
I also make small web games and [write on my blog][1].
10
10
11
11
You can reach me at <email@arthr.me>.
12
12
13
13
Thank you!
14
14
15
-
[1]: https://arthr.dev/
16
-
[2]: https://arthr.me/
15
+
[1]: https://arthr.me/
+12
-25
_config.yml
+12
-25
_config.yml
···
18
18
email: email@arthr.me
19
19
picture: https://gravatar.com/avatar/63d8285c2a55e1d4fefe7747e2c17ead9d3654dc39c4791adf088484105e5000?size=128
20
20
21
-
22
21
# Menu
23
22
main_menu:
24
-
- index.md
25
-
- agora.html
26
-
- arquivo.html
27
-
- sobre.md
23
+
title: Navegar
24
+
items:
25
+
- url: /
26
+
label: Agora
27
+
- url: /sobre.html
28
+
label: Sobre
28
29
29
30
# Build settings
30
31
include:
31
-
- _pages
32
32
- _redirects
33
33
34
34
permalink: /blog/:year/:month/:title:output_ext
35
35
36
+
remote_theme: arthrfrts/minduim@latest
37
+
36
38
plugins:
37
-
- jekyll-feed
38
-
- jekyll-json-feed
39
-
- jekyll-sitemap
40
-
- jekyll-seo-tag
41
-
- jekyll-archives
42
-
- jekyll-last-modified-at
39
+
- jekyll-remote-theme
43
40
- jekyll-relative-links
44
41
45
-
jekyll-archives:
46
-
enabled:
47
-
- year
48
-
- month
49
-
- tags
50
-
layout: archive
51
-
permalinks:
52
-
year: "/blog/:year/"
53
-
month: "/blog/:year/:month/"
54
-
tag: "/blog/tags/:name/"
55
-
slug_mode: latin
56
-
57
42
seo:
58
43
name: Arthur Freitas
59
44
links:
60
45
- https://github.com/arthrfrts
61
46
- https://linkedin.com/in/arthrfrts
62
-
- https://letterboxd.com/arthrfrts
47
+
- https://bsky.app/profile/arthr.me
63
48
- https://www.tumblr.com/arthrfrts
49
+
- https://www.last.fm/user/arthrfrts
50
+
- https://letterboxd.com/arthrfrts
64
51
65
52
relative_links:
66
53
enabled: true
-32
_includes/header.html
-32
_includes/header.html
···
1
-
<header class="site-header">
2
-
{% capture site_branding %}
3
-
<a href="{{ '/' | absolute_url }}">
4
-
<img class="site-logo" src="{{ site.logo }}" width="64" height="64" alt="" role="presentation" />
5
-
<span class="a11y-helper">
6
-
{{- site.title -}}
7
-
</span>
8
-
</a>
9
-
{% endcapture %}
10
-
11
-
{%- if page.title and page.title != "" -%}
12
-
<cite class="site-title">
13
-
{{ site_branding }}
14
-
</cite>
15
-
{% else %}
16
-
<h1 class="site-title">
17
-
{{ site_branding }}
18
-
</h1>
19
-
{% endif %}
20
-
21
-
{% if site.main_menu %}
22
-
<nav class="main-menu" aria-label="Menu de navegação">
23
-
{% for path in site.main_menu %}
24
-
{% assign item = site.pages | where: "path", path | first %}
25
-
26
-
<a class="menu-item" href="{{ item.url | relative_url }}">
27
-
{{ item.title | default: "Início" }}
28
-
</a>
29
-
{% endfor %}
30
-
</nav>
31
-
{% endif %}
32
-
</header>
-33
_includes/post.html
-33
_includes/post.html
···
1
-
<article class="post _bit">
2
-
<header class="post-header">
3
-
{% if post.title and post.title != "" %}
4
-
<h3 class="post-title">
5
-
<a href="{{ post.url | relative_url }}">
6
-
{{ post.title }}
7
-
</a>
8
-
</h3>
9
-
{% endif %}
10
-
11
-
<span class="post-meta">
12
-
<a class="post-author a11y-helper" href="{{ post.author.url | default: site.author.url }}" rel="author">
13
-
{{ post.author.name | default: site.author.name}}
14
-
</a>
15
-
</span>
16
-
</header>
17
-
18
-
<div class="post-content">
19
-
{% if include.show_contents %}
20
-
{{ post.content }}
21
-
{% else %}
22
-
{{ post.description | default: post.excerpt | markdownify }}
23
-
{% endif %}
24
-
</div>
25
-
26
-
<footer class="post-footer post-meta">
27
-
<a class="post-permalink" href="{{ post.url | absolute_url }}" rel="bookmark">
28
-
<time datetime="{{ post.date | date_to_xmlschema }}">
29
-
{{ post.date | date: "%d/%m/%Y às %H:%M" }}
30
-
</time>
31
-
</a>
32
-
</footer>
33
-
</article>
-25
_layouts/archive.html
-25
_layouts/archive.html
···
1
-
---
2
-
layout: default
3
-
---
4
-
<article class="page blog-section">
5
-
<header class="page-header">
6
-
<h1 class="section-title">
7
-
{%- if page.type == "tag" -%}
8
-
Posts sobre <strong>{{ page.title }}</strong>
9
-
{%- else -%}
10
-
Posts de
11
-
{% if page.type == "month" -%}
12
-
<strong>{{ page.date | date: "%m/%Y" }}</strong>
13
-
{%- else -%}
14
-
<strong>{{ page.date | date: "%Y" }}</strong>
15
-
{%- endif -%}
16
-
{%- endif -%}
17
-
</h1>
18
-
</header>
19
-
20
-
<div class="page-content">
21
-
{% for post in page.posts %}
22
-
{% include post.html %}
23
-
{% endfor %}
24
-
</div>
25
-
</article>
-49
_layouts/default.html
-49
_layouts/default.html
···
1
-
<!doctype html>
2
-
<html lang="{{- page.lang | default: site.lang -}}">
3
-
<head>
4
-
<meta charset="{{- site.encoding | default: 'utf-8' -}}" />
5
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
-
7
-
{%- capture title -%}
8
-
{% case page.type %}
9
-
{% when "tag" %}
10
-
Posts sobre {{ page.title }} —
11
-
{% when "year" %}
12
-
Posts de {{ page.date | date: "%Y" }} —
13
-
{% when "month" %}
14
-
Posts de {{ page.date | date: "%m/%Y" }} —
15
-
{% else %}
16
-
{% if page.title and page.title != "" %}
17
-
{{ page.title }} —
18
-
{% endif %}
19
-
{% endcase %}
20
-
21
-
{{ site.title }}
22
-
{%- endcapture -%}
23
-
24
-
<title>{{- title | strip_newlines | normalize_whitespace -}}</title>
25
-
{% seo title=false %}
26
-
{% feed_meta %}
27
-
{% json_feed_meta %}
28
-
<link rel="icon" type="image/png" href="{%- link assets/img/favicon.png -%}" />
29
-
<link rel="stylesheet" href="{%- link assets/css/reset.css -%}" />
30
-
<link rel="stylesheet" href="{%- link assets/css/base.css -%}" />
31
-
<link rel="stylesheet" href="{%- link assets/css/layout.css -%}" />
32
-
<link rel="stylesheet" href="{%- link assets/css/syntax.css -%}" />
33
-
<link rel="stylesheet" href="{%- link assets/css/fonts.css -%}" />
34
-
</head>
35
-
<body>
36
-
<div class="site">
37
-
{% include header.html %}
38
-
39
-
<main id="content" class="site-content">
40
-
{{ content }}
41
-
</main>
42
-
43
-
{% include footer.html %}
44
-
</div>
45
-
46
-
<script src="https://cursor-party.arthrfrts.partykit.dev/cursors.js"></script>
47
-
<script src="https://tinylytics.app/embed/h_wCUuwD5xFfnztP8wn7.js?webring&kudos=✌️" defer></script>
48
-
</body>
49
-
</html>
-45
_layouts/home.html
-45
_layouts/home.html
···
1
-
---
2
-
layout: default
3
-
---
4
-
5
-
<div class="home-page">
6
-
<section class="home-section _content">
7
-
{{ content }}
8
-
</section>
9
-
10
-
{% assign now = site.posts | where: "now", true | first %}
11
-
12
-
{% if now %}
13
-
<section class="home-section _now">
14
-
<h2 class="section-title">
15
-
👨💻
16
-
<a href="{% link agora.html %}">Agora</a>
17
-
</h2>
18
-
19
-
<div class="post-content">
20
-
{{ now.content }}
21
-
</div>
22
-
23
-
<footer class="post-footer post-meta">
24
-
<a class="post-permalink" href="{{ now.url | relative_url }}" rel="bookmark">
25
-
<time datetime="{{ now.date | date_to_xmlschema }}">{{- now.date | date: "%d/%m/%Y às %H:%M" -}}</time>
26
-
</a>
27
-
</footer>
28
-
</section>
29
-
{% endif %}
30
-
31
-
<section class="home-section blog-section _blog">
32
-
<h2 class="section-title">
33
-
📝
34
-
<a href="{% link arquivo.html %}">
35
-
Blog
36
-
</a>
37
-
</h2>
38
-
39
-
{% assign blog_posts = site.posts | where_exp: "item", "item.now != true" %}
40
-
41
-
{% for post in blog_posts limit: 5 %}
42
-
{% include post.html %}
43
-
{% endfor %}
44
-
</section>
45
-
</div>
-14
_layouts/page.html
-14
_layouts/page.html
-86
_layouts/post.html
-86
_layouts/post.html
···
1
-
---
2
-
layout: default
3
-
---
4
-
5
-
<article class="post _single">
6
-
<header class="post-header">
7
-
{% if page.title and page.title != "" %}
8
-
<h1 class="post-title">
9
-
{{ page.title }}
10
-
</h1>
11
-
{% endif %}
12
-
<p class="post-meta">
13
-
Publicado em
14
-
15
-
<a class="post-date" href="{{ page.url | absolute_url }}">
16
-
<time datetime="{{ page.date | date_to_xmlschema }}">
17
-
{{ page.date | date: "%d/%m/%Y" }}
18
-
</time>
19
-
</a>
20
-
21
-
<span class="post-author a11y-helper">
22
-
por
23
-
<a href="{{ post.author.url | default: site.author.url }}" rel="author">
24
-
{{ post.author.name | default: site.author.name }}
25
-
</a>
26
-
</span>
27
-
</p>
28
-
</header>
29
-
30
-
<div class="post-content">
31
-
{{ content }}
32
-
</div>
33
-
34
-
<footer class="post-footer">
35
-
<ul class="post-meta">
36
-
{% if page.last_modified_at %}
37
-
<li class="post-update-time a11y-helper">
38
-
Atualizado em
39
-
<time datetime="{{ page.last_modified_at | date_to_xmlschema }}">
40
-
{{ page.last_modified_at | date: "%d/%m/%Y às %H:%M" }}
41
-
</time>
42
-
</li>
43
-
{%- endif -%}
44
-
{% if page.tags.size > 0 %}
45
-
<li class="post-tags">
46
-
Tags:
47
-
48
-
{% for tag in page.tags -%}
49
-
{%- assign tag_slug = tag | slugify: 'latin' -%}
50
-
{%- assign tag_url = site.jekyll-archives.permalinks.tag | replace: ':name', tag_slug -%}
51
-
52
-
<a class="tag" href="{{ tag_url | relative_url }}" rel="tag">
53
-
{{- tag -}}
54
-
</a>
55
-
56
-
{%- unless forloop.last-%}, {% endunless -%}
57
-
{%- endfor -%}
58
-
</li>
59
-
{% endif %}
60
-
61
-
<li>
62
-
<button class="tinylytics_kudos" data-path="{{- page.url | relative_url -}}" aria-label="Gostou desse post? Clique aqui e envie um joinha ao autor!">😄 Kudos!</button>
63
-
</li>
64
-
</ul>
65
-
</footer>
66
-
67
-
{% if page.next or page.previous -%}
68
-
<nav class="pagination">
69
-
<h2 class="a11y-helper">
70
-
Navegar entre posts
71
-
</h2>
72
-
73
-
{% if page.previous -%}
74
-
<a class="nav-page _prev as-button" href="{{- page.previous.url | relative_url -}}" rel="prev">
75
-
← Post anterior
76
-
</a>
77
-
{%- endif -%}
78
-
79
-
{% if page.next -%}
80
-
<a class="nav-page _next as-button" href="{{- page.next.url | relative_url -}}" rel="next">
81
-
Próximo post →
82
-
</a>
83
-
{%- endif %}
84
-
</nav>
85
-
{%- endif%}
86
-
</article>
-31
agora.html
-31
agora.html
···
1
-
---
2
-
layout: page
3
-
title: Agora
4
-
permalink: /agora/
5
-
---
6
-
7
-
{% assign now_posts = site.posts | where: "now", true | limit: 20 %}
8
-
9
-
{% for post in now_posts %}
10
-
<article class="post {% if forloop.first %}_now{% endif %}">
11
-
<div class="post-content">
12
-
{{ post.content }}
13
-
</div>
14
-
15
-
<span class="post-footer post-meta">
16
-
<a class="post-permalink" href="{{ post.url | absolute_url }}" rel="bookmark">
17
-
<time datetime="{{ post.date | date_to_xmlschema }}">
18
-
{{ post.date | date: "%d/%m/%Y às %H:%M" }}
19
-
</time>
20
-
</a>
21
-
</span>
22
-
</article>
23
-
24
-
{% if forloop.first %}
25
-
{% unless forloop.last %}
26
-
27
-
<hr />
28
-
<h2 class="section-title">Anteriormente…</h2>
29
-
{% endunless %}
30
-
{% endif %}
31
-
{% endfor %}
-25
arquivo.html
-25
arquivo.html
···
1
-
---
2
-
layout: page
3
-
title: Arquivo
4
-
permalink: /arquivo/
5
-
redirect_from:
6
-
- /blog/
7
-
---
8
-
9
-
{% assign years = site.posts | where_exp: "item", "item.now != true" | group_by_exp: "post", "post.date | date: '%Y'" %}
10
-
11
-
{% for year in years %}
12
-
<section class="page-section blog-section">
13
-
<h2 class="section-title">
14
-
{{ year.name }}
15
-
</h2>
16
-
17
-
{% for post in year.items %}
18
-
{% include post.html %}
19
-
{% endfor %}
20
-
</section>
21
-
{% endfor %}
22
-
23
-
<hr />
24
-
25
-
<p><strong>Procurando por mais alguma coisa?</strong> Eu escrevi no <a href="https://arthrfrts.tumblr.com/" rel="me">Tumblr</a> entre 2020 e 2024, e no <a href="https://paomortadela.com.br/" rel="me">Pão com Mortadela</a> entre 2013 e 2023. Meus textos antigos provavelmente estão lá.</p>
-452
assets/css/base.css
-452
assets/css/base.css
···
1
-
:root {
2
-
--dark: 28, 27, 25;
3
-
--light: 255, 255, 255;
4
-
--gray: 198, 198, 198;
5
-
--green: 0, 208, 132;
6
-
--purple: 155, 81, 224;
7
-
--red: 207, 46, 46;
8
-
--pink: 247, 141, 167;
9
-
--orange: 255, 105, 0;
10
-
--yellow: 252, 185, 0;
11
-
--blue: 6, 147, 227;
12
-
13
-
--ui-font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
14
-
--base-font-family: var(--ui-font-family);
15
-
--code-font-family: "IBM Plex Mono", ui-monospace, monospace;
16
-
17
-
--base-font-size: 1rem;
18
-
--base-line-height: 1.5;
19
-
--spacing-unit: 1.5rem;
20
-
21
-
--color-background: rgb(var(--light));
22
-
--color-foreground: rgb(var(--dark));
23
-
--color-border: rgba(var(--gray), 0.5);
24
-
--color-link: rgb(var(--green));
25
-
--color-active: rgb(var(--orange));
26
-
--color-visited: rgb(var(--purple));
27
-
28
-
--box-shadow: rgba(37, 38, 39, 0.04) 0 3px 5px -2px, rgba(37, 38, 39, 0.06) 0 7px 14px -5px;
29
-
--border-radius: 0.625rem;
30
-
--transition-duration: 0.15s;
31
-
--outline: 0.5rem solid rgba(var(--green), 0.5);
32
-
}
33
-
34
-
@media (prefers-color-scheme: dark) {
35
-
:root {
36
-
--color-background: rgb(var(--dark));
37
-
--color-foreground: rgb(var(--light));
38
-
}
39
-
}
40
-
41
-
body {
42
-
font-family: var(--ui-font-family);
43
-
font-size: var(--base-font-size);
44
-
color: var(--color-foreground);
45
-
line-height: var(--base-line-height);
46
-
background-color: var(--color-background);
47
-
}
48
-
49
-
p, blockquote, pre,
50
-
ul, ol, dl, figure,
51
-
video, audio, iframe,
52
-
table {
53
-
margin-bottom: var(--spacing-unit);
54
-
}
55
-
56
-
/*
57
-
Text Elements
58
-
*/
59
-
60
-
em, i { font-style: italic; }
61
-
62
-
strong, b { font-weight: 700; }
63
-
64
-
mark, ins {
65
-
color: rgb(var(--dark));
66
-
text-decoration: none;
67
-
background-color: rgb(var(--yellow));
68
-
border-radius: 0.25em;
69
-
padding-inline: calc(var(--spacing-unit) / 4);
70
-
}
71
-
72
-
del, strike, s {
73
-
text-decoration: line-through;
74
-
text-decoration-style: double;
75
-
text-decoration-color: rgb(var(--red));
76
-
}
77
-
78
-
abbr {
79
-
cursor: help;
80
-
text-decoration: underline;
81
-
text-decoration-style: dotted;
82
-
}
83
-
84
-
sub, sup { font-size: 0.75em; }
85
-
86
-
sub { vertical-align: text-bottom; }
87
-
88
-
sup { vertical-align: text-top; }
89
-
90
-
91
-
/*
92
-
Links
93
-
*/
94
-
95
-
a {
96
-
color: currentcolor;
97
-
text-decoration: underline;
98
-
text-decoration-color: var(--color-link);
99
-
transition: color var(--transition-duration);
100
-
}
101
-
102
-
a:hover,
103
-
a:focus {
104
-
color: var(--color-link);
105
-
}
106
-
107
-
a:visited { text-decoration-color: var(--color-visited); }
108
-
109
-
a:visited:hover,
110
-
a:visited:focus {
111
-
color: var(--color-visited);
112
-
}
113
-
114
-
a:active { color: var(--color-active); }
115
-
116
-
a[href*="http"]::after {
117
-
display: inline-block;
118
-
font-size: 0.75rem;
119
-
line-height: 1;
120
-
background-color: rgb(var(--gray), 0.125);
121
-
border-radius: 0.25em;
122
-
content: "↗";
123
-
vertical-align: text-top;
124
-
margin-left: 0.5ch;
125
-
padding-block: calc(var(--spacing-unit) / 6);
126
-
padding-inline: calc(var(--spacing-unit) / 8);
127
-
}
128
-
129
-
a[href*="arthr.me"]::after,
130
-
a[href*="localhost"]::after {
131
-
content: none;
132
-
}
133
-
134
-
/*
135
-
Headings
136
-
*/
137
-
138
-
h1, h2, h3, h4, h5, h6 {
139
-
font-family: var(--ui-font-family);
140
-
font-weight: 500;
141
-
line-height: 1.25;
142
-
margin-bottom: var(--spacing-unit);
143
-
}
144
-
145
-
h1 { font-size: 2rem; }
146
-
147
-
h2 { font-size: 1.75rem; }
148
-
149
-
h3 { font-size: 1.5rem; }
150
-
151
-
h4 { font-size: 1.25rem; }
152
-
153
-
h5 { font-size: 1rem; }
154
-
155
-
h6 { font-size: 0.75rem; }
156
-
157
-
/*
158
-
Lists
159
-
*/
160
-
161
-
ul { list-style: square; }
162
-
163
-
ul ul { list-style: disc; }
164
-
165
-
ol { list-style: decimal; }
166
-
167
-
ol ol { list-style: lower-alpha; }
168
-
169
-
170
-
ul, ol { margin-left: var(--spacing-unit); }
171
-
172
-
ul > li,
173
-
ol > li {
174
-
margin-top: calc(var(--spacing-unit) / 2);
175
-
margin-bottom: calc(var(--spacing-unit) / 2);
176
-
}
177
-
178
-
li::marker { color: rgb(var(--red)); }
179
-
180
-
li > :last-child { margin-bottom: 0; }
181
-
182
-
dl dt {
183
-
font-weight: 700;
184
-
color: rgb(var(--red));
185
-
}
186
-
187
-
dd + dt { margin-top: calc(var(--spacing-unit) / 2); }
188
-
189
-
/*
190
-
Code and pre-formatted text
191
-
*/
192
-
193
-
code, pre {
194
-
font-family: var(--code-font-family);
195
-
background-color: rgba(var(--gray), 0.125);
196
-
box-shadow: var(--box-shadow);
197
-
}
198
-
199
-
code {
200
-
font-size: 90%;
201
-
border-radius: 0.25em;
202
-
padding-inline: calc(var(--spacing-unit) / 4);
203
-
}
204
-
205
-
pre {
206
-
max-width: 100%;
207
-
border: 1px solid var(--color-border);
208
-
border-radius: var(--border-radius);
209
-
overflow-x: auto;
210
-
padding-block: calc(var(--spacing-unit) / 4);
211
-
padding-inline: calc(var(--spacing-unit) / 2);
212
-
}
213
-
214
-
pre code {
215
-
background: none;
216
-
box-shadow: none;
217
-
padding: 0;
218
-
}
219
-
220
-
.highlight table {
221
-
margin-bottom: 0;
222
-
}
223
-
224
-
.highlight pre pre,
225
-
.highlight tr:nth-child(odd) th,
226
-
.highlight tr:nth-child(odd) td {
227
-
background: none;
228
-
border: none;
229
-
box-shadow: none;
230
-
margin-bottom: 0;
231
-
}
232
-
233
-
.highlight tr:nth-child(odd) th,
234
-
.highlight tr:nth-child(odd) td {
235
-
box-shadow: none;
236
-
padding: 0;
237
-
}
238
-
239
-
.highlight pre.lineno {
240
-
box-shadow: none;
241
-
padding: 0;
242
-
}
243
-
244
-
/*
245
-
Blockquotes
246
-
*/
247
-
248
-
blockquote {
249
-
font-size: 0.875rem;
250
-
background-color: rgba(var(--gray), 0.125);
251
-
border-left: 2px solid rgb(var(--purple));
252
-
border-top-right-radius: var(--border-radius);
253
-
border-bottom-right-radius: var(--border-radius);
254
-
box-shadow: var(--box-shadow);
255
-
padding: calc(var(--spacing-unit) / 2);
256
-
}
257
-
258
-
@media screen and (min-width: 600px) {
259
-
blockquote {
260
-
padding-block: calc(var(--spacing-unit) / 2);
261
-
padding-inline: var(--spacing-unit);
262
-
}
263
-
}
264
-
265
-
blockquote > :last-child { margin-bottom: 0; }
266
-
267
-
/*
268
-
Tables
269
-
*/
270
-
271
-
table { box-shadow: var(--box-shadow); }
272
-
273
-
table th,
274
-
table td {
275
-
text-align: left;
276
-
border-bottom: 1px solid var(--color-border);
277
-
padding: calc(var(--spacing-unit) / 4);
278
-
}
279
-
280
-
tbody tr:nth-child(odd) th,
281
-
tbody tr:nth-child(odd) td {
282
-
background-color: rgba(var(--blue), 0.125);
283
-
}
284
-
285
-
/*
286
-
Horizontal rule
287
-
*/
288
-
289
-
hr {
290
-
width: 100%;
291
-
height: 1px;
292
-
background-color: var(--color-border);
293
-
margin-block: var(--spacing-unit);
294
-
}
295
-
296
-
/*
297
-
Media
298
-
*/
299
-
300
-
img, audio {
301
-
max-width: 100%;
302
-
}
303
-
304
-
img + em {
305
-
display: block;
306
-
max-width: 250px;
307
-
font-size: 0.75rem;
308
-
text-align: right;
309
-
border-top: 1px solid var(--color-border);
310
-
margin-top: calc(var(--spacing-unit) / 2);
311
-
margin-left: auto;
312
-
padding-top: calc(var(--spacing-unit) / 2);
313
-
}
314
-
315
-
@media screen and (min-width: 1200px) {
316
-
p:has(img) { position: relative; }
317
-
318
-
img + em {
319
-
position: absolute;
320
-
right: 100%;
321
-
top: 0;
322
-
width: 100%;
323
-
max-width: 150px;
324
-
border: 0;
325
-
border-right: 1px solid var(--color-border);
326
-
margin: 0;
327
-
margin-right: calc(var(--spacing-unit) / 2);
328
-
padding: 0;
329
-
padding-right: calc(var(--spacing-unit) / 2);
330
-
}
331
-
}
332
-
333
-
iframe[src*="youtube"],
334
-
iframe[src*="vimeo"],
335
-
video {
336
-
aspect-ratio: 4 / 3;
337
-
width: 100%;
338
-
height: auto;
339
-
}
340
-
341
-
/*
342
-
Footnotes
343
-
*/
344
-
345
-
sup .footnote::before { content: "["; }
346
-
347
-
sup .footnote::after { content: "]"; }
348
-
349
-
.footnotes {
350
-
font-size: 0.875rem;
351
-
border-top: 1px solid rgb(var(--gray));
352
-
padding-top: calc(var(--spacing-unit) / 2);
353
-
}
354
-
355
-
/*
356
-
Inputs, buttons and knobs
357
-
*/
358
-
359
-
.input-container {
360
-
display: flex;
361
-
flex-flow: column nowrap;
362
-
gap: calc(var(--spacing-unit) / 4);
363
-
margin-bottom: var(--spacing-unit);
364
-
}
365
-
366
-
label { font-weight: 500; }
367
-
368
-
input,
369
-
button,
370
-
textarea,
371
-
.as-button {
372
-
font-family: var(--ui-font-family);
373
-
font-size: var(--base-font-size);
374
-
color: var(--color-foreground);
375
-
line-height: var(--base-line-height);
376
-
background-color: transparent;
377
-
border-radius: var(--border-radius);
378
-
box-shadow: var(--box-shadow);
379
-
padding-block: calc(var(--spacing-unit) / 2);
380
-
padding-inline: var(--spacing-unit);
381
-
outline: 0 solid;
382
-
transition: outline var(--transition-duration);
383
-
}
384
-
385
-
input:hover,
386
-
input:focus,
387
-
button:hover,
388
-
button:focus,
389
-
textarea:hover,
390
-
textarea:focus,
391
-
.as-button:hover,
392
-
.as-button:focus {
393
-
outline: var(--outline);
394
-
}
395
-
396
-
input[type="text"],
397
-
input[type="url"],
398
-
input[type="email"],
399
-
textarea {
400
-
border: 1px solid var(--color-foreground);
401
-
}
402
-
403
-
button,
404
-
input[type="button"],
405
-
input[type="submit"],
406
-
input[type="reset"],
407
-
.as-button {
408
-
display: inline-block;
409
-
color: rgb(var(--light));
410
-
text-decoration: none;
411
-
background-color: rgb(var(--green));
412
-
border: none;
413
-
cursor: pointer;
414
-
transition: outline var(--transition-duration);
415
-
}
416
-
417
-
button:hover,
418
-
button:focus,
419
-
input[type="button"]:hover,
420
-
input[type="button"]:focus,
421
-
input[type="submit"]:hover,
422
-
input[type="submit"]:focus,
423
-
input[type="reset"]:hover,
424
-
input[type="reset"]:focus,
425
-
.as-button:hover,
426
-
.as-button:focus {
427
-
color: rgb(var(--light));
428
-
outline: var(--outline);
429
-
}
430
-
431
-
button:active,
432
-
input[type="button"]:active,
433
-
input[type="submit"]:active,
434
-
input[type="reset"]:active,
435
-
.as-button:active {
436
-
color: rgb(var(--light));
437
-
background-color: rgb(var(--purple));
438
-
outline: 0 solid transparent;
439
-
}
440
-
441
-
button:visited:hover,
442
-
button:visited:focus,
443
-
input[type="button"]:visited:hover,
444
-
input[type="button"]:visited:focus,
445
-
input[type="submit"]:visited:hover,
446
-
input[type="submit"]:visited:focus,
447
-
input[type="reset"]:visited:hover,
448
-
input[type="reset"]:visited:focus,
449
-
.as-button:visited:hover,
450
-
.as-button:visited:focus {
451
-
color: rgb(var(--light));
452
-
}
-336
assets/css/fonts.css
-336
assets/css/fonts.css
···
1
-
@font-face {
2
-
font-family: "IBM Plex Sans";
3
-
font-style: normal;
4
-
font-weight: 100;
5
-
src: url("/assets/fonts/sans-100.woff2") format("woff2");
6
-
}
7
-
8
-
@font-face {
9
-
font-family: "IBM Plex Sans";
10
-
font-style: italic;
11
-
font-weight: 100;
12
-
src: url("/assets/fonts/sans-100i.woff2") format("woff2");
13
-
}
14
-
15
-
@font-face {
16
-
font-family: "IBM Plex Sans";
17
-
font-style: normal;
18
-
font-weight: 200;
19
-
src: url("/assets/fonts/sans-200.woff2") format("woff2");
20
-
}
21
-
22
-
@font-face {
23
-
font-family: "IBM Plex Sans";
24
-
font-style: italic;
25
-
font-weight: 200;
26
-
src: url("/assets/fonts/sans-200i.woff2") format("woff2");
27
-
}
28
-
29
-
@font-face {
30
-
font-family: "IBM Plex Sans";
31
-
font-style: normal;
32
-
font-weight: 300;
33
-
src: url("/assets/fonts/sans-300.woff2") format("woff2");
34
-
}
35
-
36
-
@font-face {
37
-
font-family: "IBM Plex Sans";
38
-
font-style: italic;
39
-
font-weight: 300;
40
-
src: url("/assets/fonts/sans-300i.woff2") format("woff2");
41
-
}
42
-
43
-
@font-face {
44
-
font-family: "IBM Plex Sans";
45
-
font-style: normal;
46
-
font-weight: 400;
47
-
src: url("/assets/fonts/sans-400.woff2") format("woff2");
48
-
}
49
-
50
-
@font-face {
51
-
font-family: "IBM Plex Sans";
52
-
font-style: italic;
53
-
font-weight: 400;
54
-
src: url("/assets/fonts/sans-400i.woff2") format("woff2");
55
-
}
56
-
57
-
@font-face {
58
-
font-family: "IBM Plex Sans";
59
-
font-style: normal;
60
-
font-weight: 450;
61
-
src: url("/assets/fonts/sans-450.woff2") format("woff2");
62
-
}
63
-
64
-
@font-face {
65
-
font-family: "IBM Plex Sans";
66
-
font-style: italic;
67
-
font-weight: 450;
68
-
src: url("/assets/fonts/sans-450i.woff2") format("woff2");
69
-
}
70
-
71
-
@font-face {
72
-
font-family: "IBM Plex Sans";
73
-
font-style: normal;
74
-
font-weight: 500;
75
-
src: url("/assets/fonts/sans-500.woff2") format("woff2");
76
-
}
77
-
78
-
@font-face {
79
-
font-family: "IBM Plex Sans";
80
-
font-style: italic;
81
-
font-weight: 500;
82
-
src: url("/assets/fonts/sans-500i.woff2") format("woff2");
83
-
}
84
-
85
-
@font-face {
86
-
font-family: "IBM Plex Sans";
87
-
font-style: normal;
88
-
font-weight: 600;
89
-
src: url("/assets/fonts/sans-600.woff2") format("woff2");
90
-
}
91
-
92
-
@font-face {
93
-
font-family: "IBM Plex Sans";
94
-
font-style: italic;
95
-
font-weight: 600;
96
-
src: url("/assets/fonts/sans-600i.woff2") format("woff2");
97
-
}
98
-
99
-
@font-face {
100
-
font-family: "IBM Plex Sans";
101
-
font-style: normal;
102
-
font-weight: 700;
103
-
src: url("/assets/fonts/sans-700.woff2") format("woff2");
104
-
}
105
-
106
-
@font-face {
107
-
font-family: "IBM Plex Sans";
108
-
font-style: italic;
109
-
font-weight: 700;
110
-
src: url("/assets/fonts/sans-700i.woff2") format("woff2");
111
-
}
112
-
113
-
@font-face {
114
-
font-family: "IBM Plex Mono";
115
-
font-style: normal;
116
-
font-weight: 100;
117
-
src: url("/assets/fonts/mono-100.woff2") format("woff2");
118
-
}
119
-
120
-
@font-face {
121
-
font-family: "IBM Plex Mono";
122
-
font-style: italic;
123
-
font-weight: 100;
124
-
src: url("/assets/fonts/mono-100i.woff2") format("woff2");
125
-
}
126
-
127
-
@font-face {
128
-
font-family: "IBM Plex Mono";
129
-
font-style: normal;
130
-
font-weight: 200;
131
-
src: url("/assets/fonts/mono-200.woff2") format("woff2");
132
-
}
133
-
134
-
@font-face {
135
-
font-family: "IBM Plex Mono";
136
-
font-style: italic;
137
-
font-weight: 200;
138
-
src: url("/assets/fonts/mono-200i.woff2") format("woff2");
139
-
}
140
-
141
-
@font-face {
142
-
font-family: "IBM Plex Mono";
143
-
font-style: normal;
144
-
font-weight: 300;
145
-
src: url("/assets/fonts/mono-300.woff2") format("woff2");
146
-
}
147
-
148
-
@font-face {
149
-
font-family: "IBM Plex Mono";
150
-
font-style: italic;
151
-
font-weight: 300;
152
-
src: url("/assets/fonts/mono-300i.woff2") format("woff2");
153
-
}
154
-
155
-
@font-face {
156
-
font-family: "IBM Plex Mono";
157
-
font-style: normal;
158
-
font-weight: 400;
159
-
src: url("/assets/fonts/mono-400.woff2") format("woff2");
160
-
}
161
-
162
-
@font-face {
163
-
font-family: "IBM Plex Mono";
164
-
font-style: italic;
165
-
font-weight: 400;
166
-
src: url("/assets/fonts/mono-400i.woff2") format("woff2");
167
-
}
168
-
169
-
@font-face {
170
-
font-family: "IBM Plex Mono";
171
-
font-style: normal;
172
-
font-weight: 450;
173
-
src: url("/assets/fonts/mono-450.woff2") format("woff2");
174
-
}
175
-
176
-
@font-face {
177
-
font-family: "IBM Plex Mono";
178
-
font-style: italic;
179
-
font-weight: 450;
180
-
src: url("/assets/fonts/mono-450i.woff2") format("woff2");
181
-
}
182
-
183
-
@font-face {
184
-
font-family: "IBM Plex Mono";
185
-
font-style: normal;
186
-
font-weight: 500;
187
-
src: url("/assets/fonts/mono-500.woff2") format("woff2");
188
-
}
189
-
190
-
@font-face {
191
-
font-family: "IBM Plex Mono";
192
-
font-style: italic;
193
-
font-weight: 500;
194
-
src: url("/assets/fonts/mono-500i.woff2") format("woff2");
195
-
}
196
-
197
-
@font-face {
198
-
font-family: "IBM Plex Mono";
199
-
font-style: normal;
200
-
font-weight: 600;
201
-
src: url("/assets/fonts/mono-600.woff2") format("woff2");
202
-
}
203
-
204
-
@font-face {
205
-
font-family: "IBM Plex Mono";
206
-
font-style: italic;
207
-
font-weight: 600;
208
-
src: url("/assets/fonts/mono-600i.woff2") format("woff2");
209
-
}
210
-
211
-
@font-face {
212
-
font-family: "IBM Plex Mono";
213
-
font-style: normal;
214
-
font-weight: 700;
215
-
src: url("/assets/fonts/mono-700.woff2") format("woff2");
216
-
}
217
-
218
-
@font-face {
219
-
font-family: "IBM Plex Mono";
220
-
font-style: italic;
221
-
font-weight: 700;
222
-
src: url("/assets/fonts/mono-700i.woff2") format("woff2");
223
-
}
224
-
225
-
@font-face {
226
-
font-family: "IBM Plex Serif";
227
-
font-style: normal;
228
-
font-weight: 100;
229
-
src: url("/assets/fonts/serif-100.woff2") format("woff2");
230
-
}
231
-
232
-
@font-face {
233
-
font-family: "IBM Plex Serif";
234
-
font-style: italic;
235
-
font-weight: 100;
236
-
src: url("/assets/fonts/serif-100i.woff2") format("woff2");
237
-
}
238
-
239
-
@font-face {
240
-
font-family: "IBM Plex Serif";
241
-
font-style: normal;
242
-
font-weight: 200;
243
-
src: url("/assets/fonts/serif-200.woff2") format("woff2");
244
-
}
245
-
246
-
@font-face {
247
-
font-family: "IBM Plex Serif";
248
-
font-style: italic;
249
-
font-weight: 200;
250
-
src: url("/assets/fonts/serif-200i.woff2") format("woff2");
251
-
}
252
-
253
-
@font-face {
254
-
font-family: "IBM Plex Serif";
255
-
font-style: normal;
256
-
font-weight: 300;
257
-
src: url("/assets/fonts/serif-300.woff2") format("woff2");
258
-
}
259
-
260
-
@font-face {
261
-
font-family: "IBM Plex Serif";
262
-
font-style: italic;
263
-
font-weight: 300;
264
-
src: url("/assets/fonts/serif-300i.woff2") format("woff2");
265
-
}
266
-
267
-
@font-face {
268
-
font-family: "IBM Plex Serif";
269
-
font-style: normal;
270
-
font-weight: 400;
271
-
src: url("/assets/fonts/serif-400.woff2") format("woff2");
272
-
}
273
-
274
-
@font-face {
275
-
font-family: "IBM Plex Serif";
276
-
font-style: italic;
277
-
font-weight: 400;
278
-
src: url("/assets/fonts/serif-400i.woff2") format("woff2");
279
-
}
280
-
281
-
@font-face {
282
-
font-family: "IBM Plex Serif";
283
-
font-style: normal;
284
-
font-weight: 450;
285
-
src: url("/assets/fonts/serif-450.woff2") format("woff2");
286
-
}
287
-
288
-
@font-face {
289
-
font-family: "IBM Plex Serif";
290
-
font-style: italic;
291
-
font-weight: 450;
292
-
src: url("/assets/fonts/serif-450i.woff2") format("woff2");
293
-
}
294
-
295
-
@font-face {
296
-
font-family: "IBM Plex Serif";
297
-
font-style: normal;
298
-
font-weight: 500;
299
-
src: url("/assets/fonts/serif-500.woff2") format("woff2");
300
-
}
301
-
302
-
@font-face {
303
-
font-family: "IBM Plex Serif";
304
-
font-style: italic;
305
-
font-weight: 500;
306
-
src: url("/assets/fonts/serif-500i.woff2") format("woff2");
307
-
}
308
-
309
-
@font-face {
310
-
font-family: "IBM Plex Serif";
311
-
font-style: normal;
312
-
font-weight: 600;
313
-
src: url("/assets/fonts/serif-600.woff2") format("woff2");
314
-
}
315
-
316
-
@font-face {
317
-
font-family: "IBM Plex Serif";
318
-
font-style: italic;
319
-
font-weight: 600;
320
-
src: url("/assets/fonts/serif-600i.woff2") format("woff2");
321
-
}
322
-
323
-
@font-face {
324
-
font-family: "IBM Plex Serif";
325
-
font-style: normal;
326
-
font-weight: 700;
327
-
src: url("/assets/fonts/serif-700.woff2") format("woff2");
328
-
}
329
-
330
-
@font-face {
331
-
font-family: "IBM Plex Serif";
332
-
font-style: italic;
333
-
font-weight: 700;
334
-
src: url("/assets/fonts/serif-700i.woff2") format("woff2");
335
-
}
336
-
-258
assets/css/layout.css
-258
assets/css/layout.css
···
1
-
/*
2
-
Structure
3
-
*/
4
-
5
-
.site {
6
-
display: grid;
7
-
grid-template-columns: 1fr 1fr 200px;
8
-
grid-template-rows: auto auto 1fr;
9
-
grid-template-areas:
10
-
"content content menu"
11
-
"content content footer";
12
-
gap: var(--spacing-unit);
13
-
max-width: 960px;
14
-
min-height: 100vh;
15
-
margin-block: 5vh;
16
-
margin-inline: auto;
17
-
padding-inline: 2vw;
18
-
}
19
-
20
-
@media screen and (max-width: 600px) {
21
-
.site {
22
-
display: flex;
23
-
flex-flow: column nowrap;
24
-
}
25
-
}
26
-
27
-
.site-header {
28
-
grid-area: menu;
29
-
align-items: flex-start;
30
-
}
31
-
32
-
.site-content { grid-area: content; }
33
-
34
-
.site-footer {
35
-
grid-area: footer;
36
-
align-items: flex-start;
37
-
}
38
-
39
-
/*
40
-
Site Header
41
-
*/
42
-
43
-
.site-header {
44
-
display: flex;
45
-
flex-flow: column nowrap;
46
-
gap: var(--spacing-unit);
47
-
align-items: flex-end;
48
-
}
49
-
50
-
@media screen and (max-width: 600px) {
51
-
.site-header { align-items: center; }
52
-
}
53
-
54
-
.site-header .site-title { margin-bottom: 0; }
55
-
56
-
.site-header .site-title a {
57
-
display: block;
58
-
width: 64px;
59
-
height: 64px;
60
-
border-radius: 50%;
61
-
outline: 0 solid transparent;
62
-
overflow: hidden;
63
-
transition: outline var(--transition-duration);
64
-
}
65
-
66
-
.site-header .site-title a:hover,
67
-
.site-header .site-title a:focus {
68
-
outline: var(--outline);
69
-
}
70
-
71
-
.site-header .main-menu {
72
-
display: flex;
73
-
flex-flow: column nowrap;
74
-
gap: calc(var(--spacing-unit) / 2);
75
-
align-items: flex-end;
76
-
font-weight: 500;
77
-
font-size: 0.875rem;
78
-
}
79
-
80
-
@media screen and (max-width: 600px) {
81
-
.site-header .main-menu {
82
-
flex-flow: row nowrap;
83
-
align-items: center;
84
-
max-width: 100vw;
85
-
overflow-x: auto;
86
-
scrollbar-width: thin;
87
-
-webkit-overflow-scrolling: touch;
88
-
-ms-overflow-style: -ms-autohiding-scrollbar;
89
-
}
90
-
91
-
.main-menu a { flex: 0 0 auto; }
92
-
93
-
.main-menu::before,
94
-
.main-menu::after {
95
-
display: block;
96
-
content: " ";
97
-
padding: 1vw;
98
-
}
99
-
100
-
.main-menu::before { margin-left: auto; }
101
-
102
-
.main-menu::after { margin-right: auto; }
103
-
}
104
-
105
-
/*
106
-
Site footer
107
-
*/
108
-
109
-
.site-footer {
110
-
font-size: 0.75rem;
111
-
text-align: center;
112
-
}
113
-
114
-
@media screen and (min-width: 600px) {
115
-
.site-footer {
116
-
text-align: right;
117
-
align-self: flex-end;
118
-
}
119
-
}
120
-
121
-
/*
122
-
Home
123
-
*/
124
-
125
-
.home-page {
126
-
display: flex;
127
-
flex-flow: column nowrap;
128
-
gap: calc(var(--spacing-unit) * 2);
129
-
}
130
-
131
-
.section-title {
132
-
font-size: 0.75rem;
133
-
font-weight: 500;
134
-
text-transform: uppercase;
135
-
letter-spacing: 0.1em;
136
-
margin-bottom: var(--spacing-unit);
137
-
}
138
-
139
-
.home-section a { text-decoration-color: var(--color-theme); }
140
-
141
-
.home-section a:hover,
142
-
.home-section a:focus { color: var(--color-theme); }
143
-
144
-
.home-section > :last-child { margin-bottom: 0; }
145
-
146
-
._now {
147
-
--color-theme: rgb(var(--blue));
148
-
background-color: rgba(var(--gray), 0.125);
149
-
border: 1px solid var(--color-border);
150
-
border-radius: var(--border-radius);
151
-
box-shadow: var(--box-shadow);
152
-
padding: calc(var(--spacing-unit) / 2);
153
-
transition-property: background-color, border-color, transform;
154
-
transition-duration: var(--transition-duration);
155
-
transform-origin: center;
156
-
}
157
-
158
-
._now:hover { transform: scale(1.025) rotate(-2deg); }
159
-
160
-
._blog { --color-theme: rgb(var(--orange)); }
161
-
162
-
.home-section._content {
163
-
--color-theme: rgb(var(--yellow));
164
-
font-size: 125%;
165
-
}
166
-
167
-
.home-section._content h1 { margin-bottom: var(--spacing-unit); }
168
-
169
-
/*
170
-
The blog
171
-
*/
172
-
.blog-section {
173
-
border-top: 1px solid var(--color-theme);
174
-
margin-bottom: calc(var(--spacing-unit) * 2);
175
-
padding-top: calc(var(--spacing-unit) / 2);
176
-
}
177
-
178
-
.blog-section .post + .post {
179
-
margin-top: var(--spacing-unit);
180
-
}
181
-
182
-
.blog-section .section-title {
183
-
color: var(--color-theme);
184
-
margin-bottom: var(--spacing-unit);
185
-
}
186
-
187
-
.blog-section:nth-of-type(1n) { --color-theme: rgb(var(--blue)); }
188
-
189
-
.blog-section:nth-of-type(2n) { --color-theme: rgb(var(--yellow)); }
190
-
191
-
.blog-section:nth-of-type(3n) { --color-theme: rgb(var(--green)); }
192
-
193
-
.blog-section:nth-of-type(4n) { --color-theme: rgb(var(--pink)); }
194
-
195
-
.blog-section:nth-of-type(5n) { --color-theme: rgb(var(--orange)); }
196
-
197
-
.blog-section:nth-of-type(6n) { --color-theme: rgb(var(--purple)); }
198
-
199
-
.blog-section:nth-of-type(7n) { --color-theme: rgb(var(--red)); }
200
-
201
-
/*
202
-
The posts
203
-
*/
204
-
205
-
.post + .post { margin-top: calc(var(--spacing-unit) * 3.5); }
206
-
207
-
.post-header { margin-bottom: calc(var(--spacing-unit) / 2); }
208
-
209
-
.post-title { margin-bottom: 0; }
210
-
211
-
.post-meta {
212
-
font-family: var(--ui-font-family);
213
-
font-size: 0.75rem;
214
-
font-weight: 300;
215
-
}
216
-
217
-
.post-meta a {
218
-
text-decoration-color: transparent;
219
-
}
220
-
221
-
.post-meta > li {
222
-
margin-top: calc(var(--spacing-unit) / 4);
223
-
margin-bottom: calc(var(--spacing-unit) / 4);
224
-
}
225
-
226
-
.page-content,
227
-
.post-content {
228
-
font-family: var(--base-font-family);
229
-
}
230
-
231
-
.post-content > :last-child { margin-bottom: 0; }
232
-
233
-
.post-footer {
234
-
display: block;
235
-
max-width: max-content;
236
-
border-top: 1px solid rgb(var(--gray));
237
-
margin-top: var(--spacing-unit);
238
-
padding-top: calc(var(--spacing-unit) / 2);
239
-
}
240
-
241
-
.post-footer .post-meta {
242
-
display: flex;
243
-
flex-flow: column nowrap;
244
-
gap: calc(var(--spacing-unit) / 2);
245
-
list-style: none;
246
-
margin-left: 0;
247
-
}
248
-
249
-
.pagination {
250
-
display: flex;
251
-
flex-flow: row wrap;
252
-
gap: var(--spacing-unit);
253
-
justify-content: center;
254
-
}
255
-
256
-
.pagination a {
257
-
flex: 0 0 auto;
258
-
}
-42
assets/css/reset.css
-42
assets/css/reset.css
···
1
-
html { box-sizing: border-box; }
2
-
3
-
*,
4
-
*::before,
5
-
*::after {
6
-
box-sizing: inherit;
7
-
}
8
-
9
-
html, body { -webkit-font-smoothing: antialiased; }
10
-
11
-
body, h1, h2, h3, h4, h5, h6,
12
-
p, blockquote, pre, hr,
13
-
dl, dd, ol, ul, figure,
14
-
table, audio, video, iframe {
15
-
border: none;
16
-
margin: 0;
17
-
padding: 0;
18
-
}
19
-
20
-
img {
21
-
display: inline-block;
22
-
max-width: 100%;
23
-
}
24
-
25
-
table {
26
-
width: 100%;
27
-
border-collapse: collapse;
28
-
}
29
-
30
-
input, button { font: inherit; }
31
-
32
-
.a11y-helper {
33
-
position: absolute;
34
-
width: 1px;
35
-
height: 1px;
36
-
border: 0;
37
-
padding: 0;
38
-
margin: -1px;
39
-
overflow: hidden;
40
-
clip: rect(0, 0, 0, 0);
41
-
white-space: nowrap;
42
-
}
-1
assets/css/syntax.css
-1
assets/css/syntax.css
···
1
-
.highlight .hll{background-color: #ffc}.highlight .c{color: #999}.highlight .err{color: #a00;background-color: #faa}.highlight .k{color: #069}.highlight .o{color: #555}.highlight .cm{color: #09f;font-style: italic}.highlight .cp{color: #099}.highlight .c1{color: #999}.highlight .cs{color: #999}.highlight .gd{background-color: #fcc;border: 1px solid #c00}.highlight .ge{font-style: italic}.highlight .gr{color: #f00}.highlight .gh{color: #030}.highlight .gi{background-color: #cfc;border: 1px solid #0c0}.highlight .go{color: #aaa}.highlight .gp{color: #009}.highlight .gs{}.highlight .gu{color: #030}.highlight .gt{color: #9c6}.highlight .kc{color: #069}.highlight .kd{color: #069}.highlight .kn{color: #069}.highlight .kp{color: #069}.highlight .kr{color: #069}.highlight .kt{color: #078}.highlight .m{color: #f60}.highlight .s{color: #d44950}.highlight .na{color: #4f9fcf}.highlight .nb{color: #366}.highlight .nc{color: #0a8}.highlight .no{color: #360}.highlight .nd{color: #99f}.highlight .ni{color: #999}.highlight .ne{color: #c00}.highlight .nf{color: #c0f}.highlight .nl{color: #99f}.highlight .nn{color: #0cf}.highlight .nt{color: #2f6f9f}.highlight .nv{color: #033}.highlight .ow{color: #000}.highlight .w{color: #bbb}.highlight .mf{color: #f60}.highlight .mh{color: #f60}.highlight .mi{color: #f60}.highlight .mo{color: #f60}.highlight .sb{color: #c30}.highlight .sc{color: #c30}.highlight .sd{color: #c30;font-style: italic}.highlight .s2{color: #c30}.highlight .se{color: #c30}.highlight .sh{color: #c30}.highlight .si{color: #a00}.highlight .sx{color: #c30}.highlight .sr{color: #3aa}.highlight .s1{color: #c30}.highlight .ss{color: #fc3}.highlight .bp{color: #366}.highlight .vc{color: #033}.highlight .vg{color: #033}.highlight .vi{color: #033}.highlight .il{color: #f60}.css .o,.css .o .nt,.css .nt .nt{color: #999}@media (prefers-color-scheme: dark){.highlight,pre.highlight{background:#282c34;color:#abb2bf}.highlight pre{background:#282c34}.highlight .hll{background:#282c34}.highlight .c{color:#5c6370;font-style:italic}.highlight .err{color:#960050;background-color:#1e0010}.highlight .k{color:#c678dd}.highlight .l{color:#98c379}.highlight .n{color:#abb2bf}.highlight .o{color:#abb2bf}.highlight .p{color:#abb2bf}.highlight .cm{color:#5c6370;font-style:italic}.highlight .cp{color:#5c6370;font-style:italic}.highlight .c1{color:#5c6370;font-style:italic}.highlight .cs{color:#5c6370;font-style:italic}.highlight .ge{font-style:italic}.highlight .gs{font-weight:700}.highlight .kc{color:#c678dd}.highlight .kd{color:#c678dd}.highlight .kn{color:#c678dd}.highlight .kp{color:#c678dd}.highlight .kr{color:#c678dd}.highlight .kt{color:#c678dd}.highlight .ld{color:#98c379}.highlight .m{color:#d19a66}.highlight .s{color:#98c379}.highlight .na{color:#d19a66}.highlight .nb{color:#e5c07b}.highlight .nc{color:#e5c07b}.highlight .no{color:#e5c07b}.highlight .nd{color:#e5c07b}.highlight .ni{color:#e5c07b}.highlight .ne{color:#e5c07b}.highlight .nf{color:#abb2bf}.highlight .nl{color:#e5c07b}.highlight .nn{color:#abb2bf}.highlight .nx{color:#abb2bf}.highlight .py{color:#e5c07b}.highlight .nt{color:#e06c75}.highlight .nv{color:#e5c07b}.highlight .ow{font-weight:700}.highlight .w{color:#f8f8f2}.highlight .mf{color:#d19a66}.highlight .mh{color:#d19a66}.highlight .mi{color:#d19a66}.highlight .mo{color:#d19a66}.highlight .sb{color:#98c379}.highlight .sc{color:#98c379}.highlight .sd{color:#98c379}.highlight .s2{color:#98c379}.highlight .se{color:#98c379}.highlight .sh{color:#98c379}.highlight .si{color:#98c379}.highlight .sx{color:#98c379}.highlight .sr{color:#56b6c2}.highlight .s1{color:#98c379}.highlight .ss{color:#56b6c2}.highlight .bp{color:#e5c07b}.highlight .vc{color:#e5c07b}.highlight .vg{color:#e5c07b}.highlight .vi{color:#e06c75}.highlight .il{color:#d19a66}.highlight .gu{color:#75715e}.highlight .gd{color:#f92672}.highlight .gi{color:#a6e22e}}
assets/fonts/mono-100.woff2
assets/fonts/mono-100.woff2
This is a binary file and will not be displayed.
assets/fonts/mono-100i.woff2
assets/fonts/mono-100i.woff2
This is a binary file and will not be displayed.
assets/fonts/mono-200.woff2
assets/fonts/mono-200.woff2
This is a binary file and will not be displayed.
assets/fonts/mono-200i.woff2
assets/fonts/mono-200i.woff2
This is a binary file and will not be displayed.
assets/fonts/mono-300.woff2
assets/fonts/mono-300.woff2
This is a binary file and will not be displayed.
assets/fonts/mono-300i.woff2
assets/fonts/mono-300i.woff2
This is a binary file and will not be displayed.
assets/fonts/mono-400.woff2
assets/fonts/mono-400.woff2
This is a binary file and will not be displayed.
assets/fonts/mono-400i.woff2
assets/fonts/mono-400i.woff2
This is a binary file and will not be displayed.
assets/fonts/mono-450.woff2
assets/fonts/mono-450.woff2
This is a binary file and will not be displayed.
assets/fonts/mono-450i.woff2
assets/fonts/mono-450i.woff2
This is a binary file and will not be displayed.
assets/fonts/mono-500.woff2
assets/fonts/mono-500.woff2
This is a binary file and will not be displayed.
assets/fonts/mono-500i.woff2
assets/fonts/mono-500i.woff2
This is a binary file and will not be displayed.
assets/fonts/mono-600.woff2
assets/fonts/mono-600.woff2
This is a binary file and will not be displayed.
assets/fonts/mono-600i.woff2
assets/fonts/mono-600i.woff2
This is a binary file and will not be displayed.
assets/fonts/mono-700.woff2
assets/fonts/mono-700.woff2
This is a binary file and will not be displayed.
assets/fonts/mono-700i.woff2
assets/fonts/mono-700i.woff2
This is a binary file and will not be displayed.
assets/fonts/sans-100.woff2
assets/fonts/sans-100.woff2
This is a binary file and will not be displayed.
assets/fonts/sans-100i.woff2
assets/fonts/sans-100i.woff2
This is a binary file and will not be displayed.
assets/fonts/sans-200.woff2
assets/fonts/sans-200.woff2
This is a binary file and will not be displayed.
assets/fonts/sans-200i.woff2
assets/fonts/sans-200i.woff2
This is a binary file and will not be displayed.
assets/fonts/sans-300.woff2
assets/fonts/sans-300.woff2
This is a binary file and will not be displayed.
assets/fonts/sans-300i.woff2
assets/fonts/sans-300i.woff2
This is a binary file and will not be displayed.
assets/fonts/sans-400.woff2
assets/fonts/sans-400.woff2
This is a binary file and will not be displayed.
assets/fonts/sans-400i.woff2
assets/fonts/sans-400i.woff2
This is a binary file and will not be displayed.
assets/fonts/sans-450.woff2
assets/fonts/sans-450.woff2
This is a binary file and will not be displayed.
assets/fonts/sans-450i.woff2
assets/fonts/sans-450i.woff2
This is a binary file and will not be displayed.
assets/fonts/sans-500.woff2
assets/fonts/sans-500.woff2
This is a binary file and will not be displayed.
assets/fonts/sans-500i.woff2
assets/fonts/sans-500i.woff2
This is a binary file and will not be displayed.
assets/fonts/sans-600.woff2
assets/fonts/sans-600.woff2
This is a binary file and will not be displayed.
assets/fonts/sans-600i.woff2
assets/fonts/sans-600i.woff2
This is a binary file and will not be displayed.
assets/fonts/sans-700.woff2
assets/fonts/sans-700.woff2
This is a binary file and will not be displayed.
assets/fonts/sans-700i.woff2
assets/fonts/sans-700i.woff2
This is a binary file and will not be displayed.
assets/fonts/serif-100.woff2
assets/fonts/serif-100.woff2
This is a binary file and will not be displayed.
assets/fonts/serif-100i.woff2
assets/fonts/serif-100i.woff2
This is a binary file and will not be displayed.
assets/fonts/serif-200.woff2
assets/fonts/serif-200.woff2
This is a binary file and will not be displayed.
assets/fonts/serif-200i.woff2
assets/fonts/serif-200i.woff2
This is a binary file and will not be displayed.
assets/fonts/serif-300.woff2
assets/fonts/serif-300.woff2
This is a binary file and will not be displayed.
assets/fonts/serif-300i.woff2
assets/fonts/serif-300i.woff2
This is a binary file and will not be displayed.
assets/fonts/serif-400.woff2
assets/fonts/serif-400.woff2
This is a binary file and will not be displayed.
assets/fonts/serif-400i.woff2
assets/fonts/serif-400i.woff2
This is a binary file and will not be displayed.
assets/fonts/serif-450.woff2
assets/fonts/serif-450.woff2
This is a binary file and will not be displayed.
assets/fonts/serif-450i.woff2
assets/fonts/serif-450i.woff2
This is a binary file and will not be displayed.
assets/fonts/serif-500.woff2
assets/fonts/serif-500.woff2
This is a binary file and will not be displayed.
assets/fonts/serif-500i.woff2
assets/fonts/serif-500i.woff2
This is a binary file and will not be displayed.
assets/fonts/serif-600.woff2
assets/fonts/serif-600.woff2
This is a binary file and will not be displayed.
assets/fonts/serif-600i.woff2
assets/fonts/serif-600i.woff2
This is a binary file and will not be displayed.
assets/fonts/serif-700.woff2
assets/fonts/serif-700.woff2
This is a binary file and will not be displayed.
assets/fonts/serif-700i.woff2
assets/fonts/serif-700i.woff2
This is a binary file and will not be displayed.
assets/img/favicon.png
assets/img/favicon.png
This is a binary file and will not be displayed.
+1
-2
humans.txt
+1
-2
humans.txt