SUPA MAKEOVER
HumanoidSandvichDispenser
parent
3f0d96ba61
commit
426389c078
|
|
@ -18,4 +18,4 @@ markup:
|
|||
lineNos: true
|
||||
lineNumbersInTable: true
|
||||
tabWidth: 4
|
||||
style: "doom-one"
|
||||
style: "dracula"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
#+TITLE: Discord Sucks
|
||||
#+DATE: <2022-09-17 Sat>
|
||||
#+TAGS[]: software
|
||||
#+TAGS[]: software technology
|
||||
|
||||
I've been a long-time Discord user, but over the past few years, I have come to realize that Discord /really/ sucks.
|
||||
|
||||
|
|
@ -38,4 +38,4 @@ Discord probably will not go away anytime soon, and I do not see it being replac
|
|||
|
||||
One that I would really recommend is Matrix. It is an open protocol for decentralized real-time communication, and it is already being used by a lot of people and organizations. It has end-to-end encryption, and you can host your own server if you want. If you're already using Discord, you'll already be familiar with the Element client.
|
||||
|
||||
It's like Telegram but usable as a means of communication between your friends and connection between communities. It's like Discord but without the bad things that I do not like it for.
|
||||
It's like Telegram but scalable from small group chats to communities. It's like Discord but without the bad things that I do not like it for.
|
||||
|
|
|
|||
|
|
@ -60,4 +60,4 @@ Additional resources I found:
|
|||
|
||||
People will often see a problem and ask, "If I'm going to start using my own website, how am I going to be able to track what's going on with all of my friends and my favorite content creators without having to constantly check all of their websites or social media profiles?"
|
||||
|
||||
The solution is RSS feeds. Most websites, blogs, and social media have an RSS feed that you can subscribe to in order to stay up-to-date on their content. They allow you to present all of the content in one place in a consistent format, which is even easier than having to check all of the different places you contact your friends on.
|
||||
The solution is RSS feeds. Most websites, blogs, and social media already implement an RSS feed that you can subscribe to in order to stay up-to-date on their content. Some social media do not have RSS feeds, but there are third party services that can fetch information and deliver them in a simple feed. They allow you to present all of the content in one place in a consistent format, which is even easier than having to check all of the different places you contact your friends on.
|
||||
|
|
|
|||
|
|
@ -28,15 +28,15 @@ You would normally interpret it in English as:
|
|||
Marcus does not live by himself.
|
||||
#+end_quote
|
||||
|
||||
Because Latin is a highly inflected language, there would be many forms of the same word that would mean different things. The words "habitat" and "habitāre" and "habitō" and "habitāverītis" all mean "to live", but they each mean something different when put in context.
|
||||
(Note: I appreciate the effort the people developing the Latin course have put, but the lack of macrons to denote phonemic vowel length is a bit bothersome)
|
||||
|
||||
Because Latin is a highly inflected language, there would be many forms of the same word that would mean different things. The words "habitat" and "habitāre" and "habitō" and "habitāverītis" all mean something about "living", but they each mean something different when put in context.
|
||||
|
||||
Now if you were prompted to write the same sentence in Latin, you would have trouble trying to decide which inflection to use. Your head is still thinking in English.
|
||||
|
||||
Not only that, but how would you translate "by himself" in Latin? At this point, you're writing a Latin sentence with English constructions.
|
||||
|
||||
** You're only learning how to translate
|
||||
|
||||
After passing your first few lessons in German Duolingo, you would know that:
|
||||
Here's another example of this problem with German. After passing your first few lessons in German Duolingo, you would know that:
|
||||
|
||||
#+begin_quote
|
||||
"Mir geht es gut" = "I am fine"
|
||||
|
|
@ -54,12 +54,12 @@ Mir geht es gut, und du?
|
|||
|
||||
The word "du" (nominative) would be incorrect because it is not in the same grammatical case as "mir" (dative).
|
||||
|
||||
Duolingo wouldn't teach you this, but if you study the language's grammar, you would understand why it is not correct.
|
||||
But never in my hundred lessons of Duolingo has this issue been taught. Duolingo only teaches you how to translate
|
||||
|
||||
* What should I use Duolingo for then?
|
||||
|
||||
As stated before, Duolingo is a video game. You can learn the basics of a language, but you will never learn the grammar and semantics of your target language.
|
||||
As stated before, Duolingo is a video game. You can learn the basics of a language with it pretty fast. However, please do not rely on Duolingo to achieve fluency.
|
||||
|
||||
And for some languages, it will instead develop nasty translation habits that would hinder your progress if you continue to pursue learning it.
|
||||
And for some languages, it will instead develop nasty translation habits (looking at you, Latin) that would hinder your progress rather than help you grasp a good natural understanding of the language.
|
||||
|
||||
Depending on the language, it's best that you learn it in context, especially through the [[https://en.wikipedia.org/wiki/Direct_method_(education)][direct method]].
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
#+TITLE: Everyone should learn C
|
||||
#+DATE: <2022-09-12 Mon>
|
||||
#+TAGS[]: computer-science
|
||||
#+TAGS[]: computer-science technology
|
||||
|
||||
Everyone that is going into computer science should learn how to write C.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
#+TITLE: Images
|
||||
#+DATE: <2022-10-22 Sat>
|
||||
#+TAGS[]: misc
|
||||
|
||||
# more
|
||||
|
||||
* Boat
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
#+TITLE: Memory Quiz Practice
|
||||
#+DESCRIPTION: Memory quiz practice for my Calc BC class
|
||||
|
||||
#+begin_export html
|
||||
<div id="app">Vue app is loading. If it does not load, please enable JavaScript.</div>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,20 @@
|
|||
<div class="root">
|
||||
<div class="content">
|
||||
<h1>
|
||||
{{ .Title }}
|
||||
{{ if eq .Section "tags" }}
|
||||
Posts tagged with #
|
||||
{{- end }}
|
||||
{{- .Title }}
|
||||
</h1>
|
||||
{{ if eq .Section "tools" }}
|
||||
{{ range .Pages }}
|
||||
{{ partial "tool.html" . }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{ partial "post-list.html" .Pages }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<ul class="shortlist links">
|
||||
{{ partial "links.html" }}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -2,32 +2,17 @@
|
|||
{{ partial "header.html" }}
|
||||
<div class="root">
|
||||
<div class="content">
|
||||
<h1>
|
||||
<h1 class="MUGA">
|
||||
{{ .Title }}
|
||||
</h1>
|
||||
<table class="info-table">
|
||||
<tbody>
|
||||
<tr id="info-date">
|
||||
<td><i class="bi bi-clock"></i></td>
|
||||
<td>{{ dateFormat "2006-01-02" .Date }}</td>
|
||||
</tr>
|
||||
<tr id="info-reading-time">
|
||||
<td><i class="bi bi-hourglass"></i></td>
|
||||
<td>Reading time {{ .ReadingTime }} min.</td>
|
||||
</tr>
|
||||
<tr id="info-tags">
|
||||
<td><i class="bi bi-tags"></i></td>
|
||||
<td>
|
||||
{{ range $k, $v := .Params.tags }}
|
||||
{{ $url := printf "/tags/%s" (. | urlize) }}
|
||||
<a class="tag" href="{{ $url }}">{{ . }}</a>
|
||||
{{ if (eq .Section "posts") }}
|
||||
{{ partial "post-info.html" . }}
|
||||
{{ end }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{{ .Content }}
|
||||
{{ partial "remark42.html" . }}
|
||||
{{ partial "footer.html" }}
|
||||
</div>
|
||||
</div>
|
||||
<ul class="shortlist links">
|
||||
{{ partial "links.html" }}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
{{ partial "head.html" . }}
|
||||
{{ partial "header.html" }}
|
||||
<div class="root">
|
||||
<div class="content">
|
||||
<h1>
|
||||
{{ .Title }}
|
||||
</h1>
|
||||
<ul class="tag-list">
|
||||
{{ range .Data.Terms.ByCount }}
|
||||
<li>
|
||||
<a href="/tags/{{ .Name }}">{{ .Name }} ({{ .Count }})</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="shortlist links">
|
||||
{{ partial "links.html" }}
|
||||
</ul>
|
||||
|
|
@ -3,30 +3,61 @@
|
|||
<article class="main">
|
||||
<div class="root">
|
||||
<div class="content">
|
||||
<h1 class="rainbow">sandvich.xyz</h1>
|
||||
<center>
|
||||
<img src="/apuEZY.png" width="256">
|
||||
<div>
|
||||
<h1 class="MUGA">
|
||||
<span class="hidden">forsenLevel.xyz</span>
|
||||
<span class="muga">sandvich.xyz</span>
|
||||
</h1>
|
||||
<ul class="links">
|
||||
<li>
|
||||
<a href="https://github.com/humanoidsandvichdispenser">
|
||||
<i class="bi bi-github"></i>
|
||||
HumanoidSandvichDispenser
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="mailto:humanoidsandvichdispenser@gmail.com">
|
||||
<i class="bi bi-envelope-fill"></i>
|
||||
humanoidsandvichdispenser@gmail.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/sandvich.gpg">
|
||||
<i class="bi bi-key-fill"></i>
|
||||
Encrypt mail with GPG key
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/posts/index.xml">
|
||||
<i class="bi bi-rss-fill"></i>
|
||||
RSS Feed (posts only)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/contact">
|
||||
<i class="bi bi-three-dots"></i>
|
||||
Contact methods
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="offset-fix">
|
||||
<i class="bi bi-tools" style="margin-right: 0.5em;"></i>
|
||||
Tools
|
||||
</h2>
|
||||
<div class="post-list">
|
||||
{{ range (where .Site.RegularPages "Section" "tools") }}
|
||||
{{ partial "tool.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://github.com/humanoidsandvichdispenser">GitHub</a>
|
||||
</div>
|
||||
<div>
|
||||
<code>
|
||||
curl https://sandvich.xyz/sandvich.gpg | gpg --import
|
||||
</code>
|
||||
</div>
|
||||
<div>
|
||||
<code>
|
||||
1643 9496 7ED2 8385 A5FE DBCD 9A39 BE37 E602 B22D
|
||||
</code>
|
||||
</div>
|
||||
</center>
|
||||
<h2 class="offset-fix">Tools</h2>
|
||||
{{ partial "post-list.html" (where .Site.RegularPages "Section" "tools") }}
|
||||
<h2 class="offset-fix">Recent Posts</h2>
|
||||
{{ partial "post-list.html" (where .Site.RegularPages "Section" "posts") }}
|
||||
<h2 class="offset-fix">
|
||||
<i class="bi bi-pencil-square" style="margin-right: 0.5em;"></i>
|
||||
Recent Posts
|
||||
<a href="/posts" class="button">
|
||||
<button style="vertical-align: middle; margin-left: 8px;">
|
||||
view all
|
||||
</button>
|
||||
</a>
|
||||
</h2>
|
||||
{{ partial "post-list.html" (where .Site.RegularPages "Section" "posts" | first 5) }}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div id="footer">
|
||||
<hr>
|
||||
<center>
|
||||
who is he talking to <img src="/LULE.png">
|
||||
who is he talking to <img src="/LULE.png" style="vertical-align: middle;">
|
||||
</center>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<link rel="stylesheet" href="/css/info.css">
|
||||
<link rel="stylesheet" href="/css/navbar.css">
|
||||
<link rel="stylesheet" href="/css/post-list.css">
|
||||
<link rel="stylesheet" href="/css/links.css">
|
||||
<!--link rel="stylesheet" href="/css/syntax.css"-->
|
||||
<meta charset="UTF-8"/>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<nav class="navbar">
|
||||
<a href="/" class="home">sandvich.xyz</a>
|
||||
<!--a href="/" class="home">sandvich.xyz</a-->
|
||||
<a href="/">Home</a>
|
||||
<a href="/posts">Posts</a>
|
||||
<a href="/tools">Tools</a>
|
||||
<a href="/tags">Tags</a>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
<li>
|
||||
<a href="https://github.com/humanoidsandvichdispenser">
|
||||
<i class="bi bi-github"></i>
|
||||
<span class="more">
|
||||
HumanoidSandvichDispenser
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="mailto:humanoidsandvichdispenser@gmail.com">
|
||||
<i class="bi bi-envelope-fill"></i>
|
||||
<span class="more">
|
||||
humanoidsandvichdispenser@gmail.com
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/sandvich.gpg">
|
||||
<i class="bi bi-key-fill"></i>
|
||||
<span class="more">
|
||||
Encrypt mail with GPG key
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/posts/index.xml">
|
||||
<i class="bi bi-rss-fill"></i>
|
||||
<span class="more">
|
||||
RSS Feed (posts only)
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<div class="info info-small">
|
||||
<span class="info-date">
|
||||
<i class="bi bi-clock"></i>
|
||||
<span>{{ dateFormat "2006-01-02" .Date }}</span>
|
||||
</span>
|
||||
<span class="info-reading-time">
|
||||
<i class="bi bi-hourglass"></i>
|
||||
<span>Reading time {{ .ReadingTime }} min.</span>
|
||||
</span>
|
||||
<span class="info-tags">
|
||||
<i class="bi bi-tags"></i>
|
||||
<span>
|
||||
{{ range $k, $v := .Params.tags }}
|
||||
{{ $url := printf "/tags/%s" (. | urlize) }}
|
||||
<a class="tag" href="{{ $url }}">{{ . }}</a>
|
||||
{{ end }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<table class="info">
|
||||
<tbody>
|
||||
<tr class="info-date">
|
||||
<td><i class="bi bi-clock"></i></td>
|
||||
<td>{{ dateFormat "2006-01-02" .Date }}</td>
|
||||
</tr>
|
||||
<tr class="info-reading-time">
|
||||
<td><i class="bi bi-hourglass"></i></td>
|
||||
<td>Reading time {{ .ReadingTime }} min.</td>
|
||||
</tr>
|
||||
<tr class="info-tags">
|
||||
<td><i class="bi bi-tags"></i></td>
|
||||
<td>
|
||||
{{ range $k, $v := .Params.tags }}
|
||||
{{ $url := printf "/tags/%s" (. | urlize) }}
|
||||
<a class="tag" href="{{ $url }}">{{ . }}</a>
|
||||
{{ end }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -1,12 +1,5 @@
|
|||
<div class="post-list">
|
||||
{{ range . }}
|
||||
<a href="{{ .RelPermalink }}" class="post-item">
|
||||
<span class="date">
|
||||
{{ dateFormat "2006-01-02" .Date }}
|
||||
</span>
|
||||
<span>
|
||||
{{ .Title }}
|
||||
</span>
|
||||
</a>
|
||||
{{ partial "post.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<div class="post-item">
|
||||
<h1>
|
||||
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
|
||||
</h1>
|
||||
{{ if (eq .Section "posts") }}
|
||||
{{ partial "post-info-small.html" . }}
|
||||
{{ end }}
|
||||
{{ if (and .Truncated (gt (len .Summary) 0) .Truncated) }}
|
||||
<p>
|
||||
{{ .Summary }}
|
||||
<a href="{{ .RelPermalink }}">(read more)</a>
|
||||
</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
site_id: "sandvich",
|
||||
url: {{ .Permalink }},
|
||||
locale: {{ .Site.Language.Lang }},
|
||||
theme: "dark"
|
||||
//theme: "dark"
|
||||
};
|
||||
|
||||
(function(c) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
<ul class="tag-list">
|
||||
{{ range .Site.Taxonomies.tags.ByCount }}
|
||||
<li>
|
||||
<a href="/tags/{{ .Name }}">{{ .Name }} ({{ .Count }})</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<div class="post-item">
|
||||
<h1>
|
||||
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
|
||||
</h1>
|
||||
<p>
|
||||
{{ .Params.description }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
#! /bin/sh
|
||||
#
|
||||
# publish.sh
|
||||
# Copyright (C) 2022 sandvich <sandvich@archtop>
|
||||
#
|
||||
# Distributed under terms of the GPLv3 license.
|
||||
#
|
||||
|
||||
|
||||
hugo && rsync -r public/ pi:~/web/sandvich.xyz/
|
||||
|
|
@ -1,8 +1,21 @@
|
|||
.info-table {
|
||||
table.info, div.info {
|
||||
font-family: var(--monospace);
|
||||
font-size: 14px;
|
||||
color: var(--fg2);
|
||||
}
|
||||
|
||||
i.bi {
|
||||
div.info > span {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
table.info i.bi {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
div.info.info-small > span {
|
||||
border-right: 1px dotted;
|
||||
}
|
||||
|
||||
div.info.info-small > span:last-child {
|
||||
border-right: initial;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
.shortlist.links {
|
||||
position: fixed;
|
||||
left: 8px;
|
||||
bottom: 8px;
|
||||
}
|
||||
|
||||
.links, .links ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.links li {
|
||||
margin-bottom: 4px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.links a {
|
||||
color: var(--fg0);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.links .bi {
|
||||
font-size: 20px;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.links *:hover {
|
||||
color: var(--accent);
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.shortlist.links li .bi {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.shortlist.links a .bi::before {
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
|
||||
.shortlist.links a:hover .bi::before {
|
||||
transition-duration: 200ms;
|
||||
transform: scale(1.5, 1.5);
|
||||
}
|
||||
|
||||
.shortlist.links a .more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shortlist.links a:hover .more {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
.shortlist.links a:hover {
|
||||
color: unset;
|
||||
}
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Source+Sans+3:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
||||
/*@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Source+Sans+3:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');*/
|
||||
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
|
||||
|
||||
:root {
|
||||
/*
|
||||
--bg0: #282C34;
|
||||
--bg-dark: #21252b;
|
||||
--bg1: #31363f;
|
||||
|
|
@ -10,6 +12,7 @@
|
|||
--fg1: #99a2b2;
|
||||
--fg2: #6e7a91;
|
||||
--fg3: #4f5664;
|
||||
*/
|
||||
--red: #e06c75;
|
||||
--yellow: #e5c07b;
|
||||
--green: #98c379;
|
||||
|
|
@ -17,17 +20,38 @@
|
|||
--cyan: #56b6c2;
|
||||
--purple: #c678dd;
|
||||
--accent: #61afef;
|
||||
--bg0: #f3f3f3;
|
||||
--bg1: #ededed;
|
||||
--bg2: #dadada;
|
||||
--bg3: #afafaf;
|
||||
--fg0: #3a494e;
|
||||
--fg1: #4d6066;
|
||||
--fg2: #607880;
|
||||
--fg3: #98aab3;
|
||||
--accent: #38c997;
|
||||
/*
|
||||
remark42 color overrides
|
||||
--primary-color: 56, 201, 150!important;
|
||||
*/
|
||||
--sans-serif: "Source Sans 3", "Arial", sans-serif;
|
||||
--monospace: "JetBrains Mono", "Courier", monospace;
|
||||
--serif: "Merriweather", serif;
|
||||
--display: "Bree Serif", var(--serif);
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--fg0);
|
||||
background-color: var(--bg0);
|
||||
font-family: var(--sans-serif);
|
||||
/*font-family: var(--sans-serif);*/
|
||||
font-family: var(--serif);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
*::selection, *::selection {
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 768px;
|
||||
margin: auto;
|
||||
|
|
@ -37,66 +61,105 @@ h1, h2, h3, h4, h5, h6 {
|
|||
font-weight: 500;
|
||||
margin-bottom: 2em;
|
||||
margin-top: 2em;
|
||||
font-family: var(--monospace);
|
||||
font-family: var(--display);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
background: linear-gradient(120deg, var(--green) 60%, var(--cyan) 60%);
|
||||
color: var(--bg0);
|
||||
font-size: 24px;
|
||||
margin-bottom: 0;
|
||||
background-color: var(--bg0);
|
||||
/*background: linear-gradient(120deg, var(--green) 60%, var(--cyan) 60%);*/
|
||||
color: var(--accent);
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
/*
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
*/
|
||||
padding: 16px 16px 16px 0;
|
||||
}
|
||||
|
||||
h2:after {
|
||||
background-color: var(--fg3);
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 1px;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: var(--red);
|
||||
color: var(--red);
|
||||
}
|
||||
20% {
|
||||
background-color: var(--yellow);
|
||||
color: var(--yellow);
|
||||
}
|
||||
40% {
|
||||
background-color: var(--green);
|
||||
color: var(--green);
|
||||
}
|
||||
60% {
|
||||
background-color: var(--blue);
|
||||
color: var(--blue);
|
||||
}
|
||||
80% {
|
||||
background-color: var(--purple);
|
||||
color: var(--purple);
|
||||
}
|
||||
100% {
|
||||
background-color: var(--red);
|
||||
color: var(--red);
|
||||
}
|
||||
}
|
||||
|
||||
h1.rainbow {
|
||||
@keyframes shake {
|
||||
0% { transform: translate(1px, 1px) rotate(0deg); }
|
||||
10% { transform: translate(-1px, -2px) rotate(-1deg); }
|
||||
20% { transform: translate(-3px, 0px) rotate(1deg); }
|
||||
30% { transform: translate(3px, 2px) rotate(0deg); }
|
||||
40% { transform: translate(1px, -1px) rotate(1deg); }
|
||||
50% { transform: translate(-1px, 2px) rotate(-1deg); }
|
||||
60% { transform: translate(-3px, 1px) rotate(0deg); }
|
||||
70% { transform: translate(3px, 1px) rotate(-1deg); }
|
||||
80% { transform: translate(-1px, -1px) rotate(1deg); }
|
||||
90% { transform: translate(1px, 2px) rotate(0deg); }
|
||||
100% { transform: translate(1px, -2px) rotate(-1deg); }
|
||||
}
|
||||
|
||||
.MUGA:hover {
|
||||
background: none;
|
||||
animation-name: rainbow;
|
||||
animation-duration: 5s;
|
||||
animation-iteration-count: infinite;
|
||||
animation: shake 0.15s infinite, rainbow 1s infinite;
|
||||
}
|
||||
|
||||
.MUGA > .hidden {
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.MUGA:hover > .hidden {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.MUGA:hover > .muga {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
display: block;
|
||||
font-size: 32px;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 24px;
|
||||
color: var(--purple);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 2em;
|
||||
margin-top: 2em;
|
||||
line-height: 1.5em;
|
||||
font-size: 20px;
|
||||
line-height: 2.0em;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -105,10 +168,16 @@ a {
|
|||
}
|
||||
|
||||
a:hover {
|
||||
background-color: black;
|
||||
color: white;
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
|
||||
a.button:hover {
|
||||
background-color: unset;
|
||||
|
||||
}
|
||||
|
||||
a.tag {
|
||||
color: inherit;
|
||||
}
|
||||
|
|
@ -121,23 +190,62 @@ a.tag:hover {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
a.button button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: var(--display);
|
||||
background-color: var(--bg0);
|
||||
border: none;
|
||||
outline: 1px solid var(--fg0);
|
||||
border-radius: 4px;
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--fg0);
|
||||
color: var(--bg0);
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
|
||||
pre.example {
|
||||
font-size: 20px;
|
||||
background-color: var(--bg-dark);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
padding: 8px;
|
||||
.src > .highlight > div {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 2px 2px 16px #00000077;
|
||||
}
|
||||
|
||||
#footer hr {
|
||||
margin: 16px;
|
||||
border: 1px solid var(--fg3);
|
||||
background-color: var(--fg3);
|
||||
.src > .highlight pre {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
#footer {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background-color: var(--fg3);
|
||||
}
|
||||
|
||||
.tiny {
|
||||
display: inline;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.horizontal li {
|
||||
float: left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,32 @@
|
|||
nav {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
background-color: var(--bg-dark);
|
||||
font-family: var(--monospace);
|
||||
padding: 8px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
/*padding: 8px 0;*/
|
||||
/*position: sticky;*/
|
||||
z-index: 5;
|
||||
color: var(--fg3);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
height: 100%;
|
||||
padding: 8px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
border-right: 1px dotted var(--fg3);
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
nav a:last-child {
|
||||
border-right: initial;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
text-decoration: underline;
|
||||
color: unset;
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
nav a.home {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
div.post-list {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -9,22 +8,47 @@ div.post-list {
|
|||
width: 100%;
|
||||
text-decoration: none;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.post-item:hover {
|
||||
background-color: var(--bg-dark);
|
||||
border: 1px var(--fg0) solid;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.post-item > span {
|
||||
display: table-cell;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.post-item > span.date {
|
||||
.post-item > .date {
|
||||
color: var(--fg3);
|
||||
font-family: var(--monospace);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
a.post-item {
|
||||
.post-item h1 {
|
||||
position: relative;
|
||||
color: var(--fg1);
|
||||
padding: 0;
|
||||
padding-bottom: 8px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.post-item h1 a {
|
||||
text-decoration: none;
|
||||
color: var(--fg0);
|
||||
font-family: var(--display);
|
||||
}
|
||||
|
||||
.post-item p {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.post-item h1 a:hover {
|
||||
color: unset;
|
||||
background-color: unset;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.tag-list li {
|
||||
font-family: var(--monospace);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue