Overhaul

.gitattributes

@@ -0,0 +1 @@
+hugo filter=lfs diff=lfs merge=lfs -text

config.yml

@@ -12,23 +12,19 @@ disableKinds:
   - taxonomy
   - term
 
-params:
-  description: "security, systems, hardware"
-  author: Morgan
-  homeLinks:
-    - label: /blog
-      url: /blog
-    - label: /archive
-      url: /archive
-    - label: /github
-      url: https://github.com/morgan9e
-    - label: /mirror
-      url: https://mirror2.morgan.kr
-    - label: /key
-      url: /pub.asc
-
-
 markup:
   highlight:
     codeFences: true
     style: github
+
+params:
+  author: Morgan
+  homeLinks:
+    - label: blog/
+      url: /blog
+    - label: github/
+      url: https://github.com/morgan9e
+    - label: mirror/
+      url: https://mirror2.morgan.kr
+    - label: pub.asc
+      url: /pub.asc

static/css/main.css

@@ -1,160 +1,172 @@
-/* Base */
+/* Reset */
-*,
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-*::before,
-*::after {
-    box-sizing: border-box;
-}
 
+/* Base */
 body {
-    font-family: "Source Sans 3", "Pretendard", sans-serif;
+    font-family: "IBM Plex Sans", "Pretendard", system-ui, sans-serif;
-    max-width: 720px;
+    max-width: 680px;
     margin: 0 auto;
-    padding: 32px 20px;
+    padding: 48px 24px;
-    line-height: 1.6;
+    line-height: 1.7;
-    color: #222;
+    color: #111;
-    background-color: #fafafa;
+    background: #fff;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 a {
-    text-decoration: none;
+    color: #111;
-    color: #0055aa;
+    text-decoration-color: #ccc;
+    text-underline-offset: 3px;
+    text-decoration-thickness: 1px;
+    transition: text-decoration-color 0.15s;
 }
 
 a:hover {
-    text-decoration: underline;
+    text-decoration-color: #111;
 }
 
 @media (max-width: 600px) {
-    body {
+    body { padding: 32px 18px; }
-        padding: 20px 16px;
-    }
 }
 
-/* Nav (back link) */
+/* Nav */
 nav.site-nav {
-    margin-bottom: 8px;
+    margin-bottom: 24px;
-    font-size: 14px;
 }
 
 nav.site-nav a {
+    font-size: 13px;
     color: #999;
+    text-decoration: none;
+    letter-spacing: 0.01em;
 }
 
 nav.site-nav a:hover {
-    color: #222;
+    color: #111;
-    text-decoration: none;
 }
 
 /* Homepage */
 .home {
-    font-family: monospace;
+    font-family: "IBM Plex Mono", "Cascadia Code", Consolas, monospace;
-    font-size: 18px;
+    font-size: 17px;
-    margin-top: 18vh;
+    margin-top: 28vh;
-    color: #222;
+    line-height: 1.9;
 }
 
-.home h1 {
+.home .prompt {
-    font-size: 24px;
+    margin-bottom: 8px;
-    font-weight: normal;
+    font-size: 19px;
-    margin: 0 0 4px 0;
 }
 
-.home .desc {
+.home .prompt .user { color: #22863a; font-weight: 500; }
-    color: #999;
+.home .prompt .at { color: #444; }
-    font-size: 14px;
+.home .prompt .host { color: #22863a; font-weight: 500; }
-    margin: 0;
+.home .prompt .sep { color: #444; }
+.home .prompt .path { color: #0366d6; }
+.home .prompt .dollar { color: #444; margin-left: 2px; }
+
+.home-nav {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    margin-left: 10px;
 }
 
-.home ul {
+.home-nav a {
-    margin-top: 36px;
+    color: #0366d6;
-    list-style-type: none;
-    padding: 0;
-}
-
-.home li {
-    padding: 5px 0;
-}
-
-.home a {
-    color: #222;
-}
-
-.home a:hover {
-    color: #0055aa;
     text-decoration: none;
+    transition: color 0.15s;
+}
+
+.home-nav a:hover {
+    color: #22863a;
 }
 
 /* Post list */
 .post-list {
-    margin-top: 12px;
+    font-family: "IBM Plex Mono", "Cascadia Code", Consolas, monospace;
+    font-size: 15px;
+    margin-top: 8px;
+    line-height: 1.8;
 }
 
-.post-list h1 {
+.post-list .prompt {
-    font-size: 24px;
+    margin-bottom: 4px;
-    font-weight: 400;
+}
-    margin: 16px 0 24px 0;
+
-    color: #222;
+.post-list .prompt .user { color: #22863a; font-weight: 500; }
+.post-list .prompt .at { color: #444; }
+.post-list .prompt .host { color: #22863a; font-weight: 500; }
+.post-list .prompt .sep { color: #444; }
+.post-list .prompt .path { color: #0366d6; }
+.post-list .prompt .dollar { color: #444; margin-left: 2px; }
+
+.post-list .ls-header {
+    color: #666;
+    margin-bottom: 4px;
 }
 
 .post-list ul {
-    list-style-type: none;
+    list-style: none;
-    padding: 0;
-    margin: 0;
 }
 
 .post-list li {
     display: flex;
     align-items: baseline;
-    gap: 12px;
+    gap: 10px;
-    padding: 6px 0;
+    padding: 1px 0;
-    font-size: 17px;
-}
-
-.post-list li a {
-    color: #222;
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
     white-space: nowrap;
 }
 
-.post-list li a:hover {
+.post-list .perms {
-    color: #0055aa;
+    color: #666;
-    text-decoration: none;
+    width: 11ch;
+    flex-shrink: 0;
 }
 
 .post-list time {
-    color: #bbb;
+    color: #666;
-    font-size: 13px;
+    width: 12ch;
-    font-variant-numeric: tabular-nums;
-    white-space: nowrap;
     flex-shrink: 0;
+    font-variant-numeric: tabular-nums;
+}
+
+.post-list li a {
+    color: #0366d6;
+    text-decoration: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.post-list li a:hover {
+    color: #22863a;
 }
 
 /* Single post */
 article header {
-    margin: 20px 0 28px 0;
+    margin: 12px 0 40px 0;
 }
 
 article header h1 {
-    font-size: 22px;
+    font-size: 28px;
     font-weight: 600;
-    margin: 0 0 6px 0;
+    letter-spacing: -0.02em;
-    line-height: 1.35;
+    line-height: 1.3;
     color: #111;
+    margin-bottom: 8px;
 }
 
 article header time {
     color: #999;
-    font-size: 15px;
+    font-size: 14px;
 }
 
 /* Post content */
 .post-content {
     font-size: 17px;
-    line-height: 2;
+    line-height: 1.9;
-    color: #333;
+    color: #111;
     overflow-wrap: break-word;
     word-break: break-word;
 }
@@ -163,92 +175,99 @@ article header time {
 .post-content h2,
 .post-content h3,
 .post-content h4 {
-    color: #222;
+    color: #111;
-    margin: 1.6em 0 0.5em 0;
+    letter-spacing: -0.01em;
     line-height: 1.35;
+    margin: 2em 0 0.6em 0;
 }
 
-.post-content h1 { font-size: 1.3em; }
+.post-content h1 { font-size: 1.4em; font-weight: 600; }
-.post-content h2 { font-size: 1.15em; }
+.post-content h2 { font-size: 1.2em; font-weight: 600; }
-.post-content h3 { font-size: 1.05em; }
+.post-content h3 { font-size: 1.05em; font-weight: 600; }
+.post-content h4 { font-size: 1em; font-weight: 600; }
 
 .post-content h1 code,
 .post-content h2 code,
 .post-content h3 code,
 .post-content h4 code {
-    font-size: 0.92em;
+    font-size: 0.9em;
     background: none;
     padding: 0;
-    margin: 0;
 }
 
 .post-content p {
-    margin: 0 0 1.15em 0;
+    margin: 0 0 1.2em 0;
 }
 
 .post-content a {
-    color: #0055aa;
+    color: #111;
+    text-decoration-color: #aaa;
+}
+
+.post-content a:hover {
+    text-decoration-color: #111;
 }
 
 .post-content img {
     max-width: 100%;
     height: auto;
+    border-radius: 4px;
 }
 
 /* Inline code */
 .post-content code {
-    font-family: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
+    font-family: "IBM Plex Mono", "Cascadia Code", Consolas, monospace;
     padding: 2px 6px;
-    margin: 0 1px;
+    background: #f4f4f4;
-    background-color: #e9e9e9;
     font-size: 0.85em;
     border-radius: 3px;
     word-break: break-all;
 }
 
-/* Code blocks — plain <pre><code> */
+/* Code blocks */
 .post-content pre {
-    margin: 1.4em 0;
+    margin: 1.6em 0;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
 }
 
 .post-content pre code {
     display: block;
-    background-color: #f0f0f0;
+    background: #f7f7f7;
-    padding: 16px 18px;
+    padding: 18px 20px;
     white-space: pre;
-    font-size: 13.5px;
+    font-size: 13px;
-    line-height: 1.6;
+    line-height: 1.65;
-    margin: 0;
+    border-radius: 6px;
-    border-radius: 4px;
     word-break: normal;
     tab-size: 4;
+    border: 1px solid #eee;
 }
 
-/* Code blocks — Hugo syntax-highlighted .highlight wrapper */
+/* Hugo syntax highlight */
 .post-content .highlight {
-    margin: 1.4em 0;
+    margin: 1.6em 0;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
 }
 
 .post-content .highlight pre {
     margin: 0;
-    border-radius: 4px;
+    border-radius: 6px;
-    background-color: #f0f0f0 !important;
+    background: #f7f7f7 !important;
+    border: 1px solid #eee;
 }
 
 .post-content .highlight code {
     display: block;
-    padding: 16px 18px;
+    padding: 18px 20px;
-    font-size: 13.5px;
+    font-size: 13px;
-    line-height: 1.6;
+    line-height: 1.65;
     background: none;
-    margin: 0;
     border-radius: 0;
     word-break: normal;
     tab-size: 4;
+    border: none;
 }
 
 .post-content .highlight span {
@@ -257,44 +276,47 @@ article header time {
 
 /* Blockquote */
 .post-content blockquote {
-    margin: 1.4em 0;
+    margin: 1.6em 0;
-    padding: 2px 0 2px 16px;
+    padding: 0 0 0 20px;
-    border-left: 2px solid #ddd;
+    border-left: 2px solid #e0e0e0;
-    color: #555;
+    color: #666;
 }
 
 .post-content blockquote p {
-    margin: 0.4em 0;
+    margin: 0.5em 0;
 }
 
 /* Tables */
 .post-content table {
     width: 100%;
     border-collapse: collapse;
-    margin: 1.4em 0;
+    margin: 1.6em 0;
-    font-size: 0.9em;
+    font-size: 14px;
     overflow-x: auto;
     display: block;
 }
 
 .post-content thead {
-    border-bottom: 2px solid #ddd;
+    border-bottom: 2px solid #eee;
 }
 
 .post-content th {
-    padding: 8px 12px;
+    padding: 10px 14px;
     text-align: left;
     font-weight: 600;
-    color: #222;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: #999;
 }
 
 .post-content td {
-    padding: 7px 12px;
+    padding: 10px 14px;
     text-align: left;
 }
 
 .post-content tbody tr {
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #f0f0f0;
 }
 
 .post-content tbody tr:last-child {
@@ -304,19 +326,19 @@ article header time {
 /* Horizontal rule */
 .post-content hr {
     border: none;
-    border-top: 1px solid #e0e0e0;
+    border-top: 1px solid #eee;
-    margin: 2em 0;
+    margin: 2.5em 0;
 }
 
 /* Lists */
 .post-content ul,
 .post-content ol {
-    padding-left: 1.5em;
+    padding-left: 1.4em;
-    margin: 0.8em 0;
+    margin: 0.8em 0 1.2em 0;
 }
 
 .post-content li {
-    margin: 0.2em 0;
+    margin: 0.3em 0;
 }
 
 .post-content li p {
@@ -330,5 +352,23 @@ article header time {
 /* Strong/emphasis */
 .post-content strong {
     font-weight: 600;
-    color: #222;
+    color: #111;
+}
+
+/* 404 */
+.not-found {
+    margin-top: 20vh;
+    text-align: center;
+}
+
+.not-found h1 {
+    font-size: 48px;
+    font-weight: 300;
+    color: #ddd;
+    margin-bottom: 8px;
+}
+
+.not-found p {
+    color: #999;
+    font-size: 15px;
 }

themes/plain/layouts/404.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
   {{- partial "nav.html" . -}}
-  <div class="home">
+  <div class="not-found">
     <h1>404</h1>
     <p>Page not found.</p>
   </div>

themes/plain/layouts/_default/list.html

@@ -1,15 +1,21 @@
 {{ define "main" }}
   {{- partial "nav.html" . -}}
 
+  {{ $section := .Section }}
+  {{ with .Title }}{{ $section = . }}{{ end }}
   {{ $pages := union .RegularPages .Sections }}
 
   <div class="post-list">
-    <h1>{{ with .Title }}{{ . }}{{ else }}{{ .Section }}{{ end }}</h1>
+    <div class="prompt">
+      <span class="user">morgan</span><span class="at">@</span><span class="host">morgan.kr</span><span class="sep">:</span><span class="path">~/{{ $section }}</span><span class="dollar">$</span> ls -l
+    </div>
+    <div class="ls-header">total {{ len $pages }}</div>
     <ul>
       {{ range $pages }}
         <li>
+          <span class="perms">-rw-r--r--</span>
+          {{ if gt .Date.Year 2000 }}<time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "Jan _2 2006" }}</time>{{ else }}<time>            </time>{{ end }}
           <a href="{{ .RelPermalink }}">{{ .Title }}</a>
-          {{ if gt .Date.Year 2000 }}<time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006-01-02" }}</time>{{ end }}
         </li>
       {{ end }}
     </ul>

themes/plain/layouts/index.html

@@ -1,11 +1,12 @@
 {{ define "main" }}
   <div class="home">
-    <h1>{{ .Site.Params.author }}</h1>
+    <div class="prompt">
-    {{ with .Site.Params.description }}<p class="desc">{{ . }}</p>{{ end }}
+      <span class="user">{{ .Site.Params.author | lower }}</span><span class="at">@</span><span class="host">{{ replace .Site.BaseURL "https://" "" }}</span><span class="sep">:</span><span class="path">~</span><span class="dollar">$</span> ls
-    <ul>
+    </div>
+    <nav class="home-nav">
       {{ range .Site.Params.homeLinks }}
-        <li><a href="{{ .url }}">{{ .label }}</a></li>
+        <a href="{{ .url }}">{{ .label }}</a>
       {{ end }}
-    </ul>
+    </nav>
   </div>
 {{ end }}

themes/plain/layouts/partials/head.html

@@ -9,6 +9,9 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="shortcut icon" href="/favicon.ico">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap">
 <link rel="stylesheet" href="/css/main.css">
 <title>{{ $title }}</title>
 <meta name="description" content="{{ $desc }}">