Move things around

_layouts/post.html

@@ -58,7 +58,7 @@ <h2 class="post-title">{{ page.title }}</h2>
         {{ content }}
       {% endif %}
     </main>
-    <footer class="footer">
+    <footer class="footer" contenteditable autofocus tabindex="-1">
       That's all.
     </footer>
     <script src="/assets/stuff.js" type="text/javascript"></script>

assets/new.scss

@@ -54,8 +54,9 @@ body {
   color: {{ page.modes.light.foreground }};
   padding: 1em;
   line-height: 1.8em;
+  letter-spacing: -0.01em;
   font-family: Cousine, monospace;
-  font-size: 13px;
+  font-size: 14px;
   -webkit-font-smoothing: antialiased;
   word-wrap: break-word;
 }
@@ -64,6 +65,10 @@ body {
   outline: none;
 }
 
+::selection {
+  background-color: #79d688;
+}
+
 .keydown *:focus {
   outline: 1px solid #79d688;
   outline-offset: 4px;
@@ -126,7 +131,7 @@ div, a, img, header, footer, main {
 .footer,
 .wrapper {
   width: 100%;
-  margin: 0 0 30px;
+  margin: 0 auto 30px;
   max-width: 50em;
   padding-left: 15px;
   padding-right: 15px;
@@ -152,13 +157,15 @@ article img:not(.emoji) {
 }
 
 .list-notes {
+  opacity: 0.85;
   margin-left: 1em;
   margin-top: 0;
   padding-left: 0;
   list-style: none;
 }
 
 .list {
+  opacity: 0.85;
   margin-left: 2.5em;
   margin-top: 0.8em;
   padding-left: 0;
@@ -197,8 +204,8 @@ blockquote {
 }
 
 button {
-  padding: 2px 3px;
-  border-radius: 0;
+  padding: 5px 6px 3px;
+  border-radius: 2px;
   border: 0;
   background: transparent;
   color: {{ page.modes.light.foreground }};
@@ -235,5 +242,15 @@ button {
 }
 
 .small {
-  font-size: 0.8em;
+  font-size: 0.9em;
+}
+
+blink {
+  // color: blue;
+  animation: 1s linear infinite condemned_blink_effect;
+}
+@keyframes condemned_blink_effect {
+  0% { visibility: hidden; }
+  50% { visibility: hidden; }
+  100% { visibility: visible; }
 }

assets/stuff.js

@@ -26,10 +26,18 @@ function switchMode () {
   }
 }
 
-document.addEventListener('mousedown', setIntent)
-document.addEventListener('keydown', setIntent)
+var activeElement = document.activeElement
+var nextIntent = 'mousedown'
 
-function setIntent(event) {
-  document.body.classList.toggle('mousedown', 'mousedown' === event.type)
-  document.body.classList.toggle('keydown', 'keydown' === event.type)
+document.addEventListener('mousedown', setNextIntent)
+document.addEventListener('keydown', setNextIntent)
+document.addEventListener('focusout', setIntent)
+
+function setIntent() {
+  document.body.classList.toggle('mousedown', 'mousedown' === nextIntent)
+  document.body.classList.toggle('keydown', 'keydown' === nextIntent)
+}
+
+function setNextIntent(event) {
+  nextIntent = event.type
 }

index.html

@@ -2,7 +2,7 @@
 layout: post
 ---
 
-<details open>
+<details>
   <summary><h2 class="as-text">Right now</h2></summary>
   <ul class="list list-items">
     <li>2013 ~ Web Systems Engineer at <mark><a href="https://github.com/">GitHub</a></mark>, previously Product Designer</li>
@@ -21,42 +21,7 @@
   </ul>
 </details>
 <details>
-  <summary><h2 class="as-text">Open source projects</h2></summary>
-  <ul class="list list-items">
-    <li>
-      <a href="https://muan.github.io/sq">sq</a> is a web app for making non-square pictures square. Works on iOS.
-    </li>
-    <li>
-      <a href="https://github.com/muan/romanize-names">romanize-names</a> romanizes Traditional Chinese / Taiwanese names. This is useful because in Taiwan there are 4 different officially recognized spellings for my surname.
-    </li>
-    <li>
-      <a href="https://github.com/muan/emojilib">emojilib</a> is an emoji keyword library because no one remembers what 🔪 is called.
-    </li>
-    <li>
-      <a href="http://github.com/muan/mojibar">mojibar</a> is an emoji search menubar app.
-    </li>
-    <li>
-      <a href="http://muan.co/emoji-minesweeper">emoji-minesweeper</a> 💣 is self-explanatory.
-    </li>
-    <li>
-      <a href="https://github.com/muan/github-gmail">github-gmail</a> is a Chrome/Firefox extension that adds shortcuts for GitHub links in Gmail.
-    </li>
-    <li>
-      <a href="http://emoji.muan.co">emoji.muan.co</a> is an emoji search website.
-    </li>
-    <li>
-      <a href="http://github.com/muan/confetti">confetti</a> is a menubar app that serves as the single source of truth for a question the humankind has been asking for centuries – who's awesome?
-    </li>
-    <li>
-      <a href="http://megamoji.muan.co">megamoji</a> is like Microsoft Paint but with emoji.
-    </li>
-    <li>
-      <a href="https://github.com/muan/submarine">submarine</a> is a node module that generates index and content HTML pages from a directory of markdown files.
-    </li>
-  </ul>
-</details>
-<details>
-  <summary><h2 class="as-text">Social~*</h2></summary>
+  <summary><h2 class="as-text">Hyperlinks &amp; contact</h2></summary>
   <ul class="list list-items">
     <li>
       By level of activity: