i got it working finally

2022-07-12 11:33:13 +07:00 · 2022-07-12 11:33:13 +07:00 · 94eafc81d3
--- a/.gitignore
+++ b/.gitignore
@ -1,2 +1,3 @@
 www/
+gostatic
 sync.sh
--- a/about.html
+++ b/about.html
@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Home - VnPower</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="/static/css/main.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="container">
+      <header>
+        <!-- there is a hidden character in .flash -->
+        <p>$(<a href="/">vnpower</a>@about) ~: <span class="flash">⠀</span></p>
+        <nav>
+          <a href="/about.html">/about</a>
+          <a href="/posts.html">/posts</a>
+          <a href="/projects.html">/projects</a>
+          <a href="/misc.html">/misc</a>
+        </nav>
+      </header>
+      <main>
+        <h4>About me</h4>
+        <p>I am a Vietnamese who likes to dig deep.</p>
+      </main>
+      <hr>
+      <footer>
+         <p>@VnPower 2022 | MIT license</p>
+         <p>
+           Inspired by <a href="https://wrongthink.neocities.org/">Wrongthink's website</a> 
+           and <a href="https://www.nordtheme.com/">Nord's colorscheme</a>.
+         </p>
+      </footer>
+    </div> 
+  </body>
+</html>
--- a/4
+++ b/4
@ -1,9 +1,9 @@
 TEMPLATES = site.tmpl
 SOURCE = src
 OUTPUT = www
-TITLE = テクニカル諏訪子
+TITLE = VnPower
 URL = http://6qiatzlijtqo6giwvuhex5zgg3czzwrq5g6yick3stnn4xekw26zf7qd.onion
-AUTHOR = テクニカル諏訪子
+AUTHOR = VnPower

 blog/**/*.md:
 	config
--- a/site.tmpl
+++ b/site.tmpl
@ -1,88 +1,69 @@
-{{ define "header" }}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
-<head>
-  <meta content="text/html; charset=utf-8" http-equiv="content-type" />
-  <meta name="author" content="{{ html .Site.Other.Author }}" />
-  <meta name="description" content="デジタル自主のロリ神様" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="alternate" type="application/atom+xml" title="{{ html .Site.Other.Title }} feed" href="/blog.atom" />
-  <title>{{ .Site.Other.Title }}{{ if .Title }}: {{ .Title }}{{ end }}</title>
-  <link rel="stylesheet" type="text/css" href="/static/style.css" />
-</head>
-<body>
-  <div id="jswarning">JavaScriptが有効です。安全・安心の為、JavaScriptを無効にしてください。</div>
-  <script type="text/javascript">document.getElementById('jswarning').style.display = 'block';</script>
-  <div class="container">
-    <img src="/static/Eqjk_WgVQAE2psn-new.jpeg" class="header-img" alt="ヘッダー" />
+{{ define "header" }}
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <title>Home - VnPower</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="/static/css/main.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="container">
+      <header>
+        <!-- there is a hidden character in .flash -->
+        <p>$(<a href="/">vnpower</a>@about) ~: <span class="flash">⠀</span></p>
+        <nav>
+          <a href="/about.html">/about</a>
+          <a href="/posts.html">/posts</a>
+          <a href="/projects.html">/projects</a>
+          <a href="/misc.html">/misc</a>
+        </nav>
+      </header>
+      <main>
 {{ end }}

-{{ define "footer" }}    <hr />
-    <a href="https://github.com/piranha/gostatic">gostatic</a>で創作しました。
-    <a href="https://git.076.ne.jp/TechnicalSuwako/StaticSuwako">ページの<img class="icon" src="/static/git.png" alt="" />Gitリポジトリ</a>
-    <div class="emblems">
-      <a href="https://validator.w3.org/check?uri=https%3A%2F%2Ftechnicalsuwako.moe%2F">
-        <img src="/static/valid-xhtml11.png" alt="Valid XHTML 1.1" height="31" width="88" />
-      </a>
-      <a href="https://jigsaw.w3.org/css-validator/validator?lang=ja&amp;profile=none&amp;uri=https%3A%2F%2Ftechnicalsuwako.moe%2F&amp;usermedium=all&amp;vextwarning=&amp;warning=1">
-        <img style="border:0;width:88px;height:31px" src="/static/valid-css.png" alt="正当なCSSです！" />
-      </a>
-      <a href="https://anybrowser.org/campaign/images/button_enhanced.gif">
-        <img style="border:0;width:88px;height:31px" src="/static/any1.gif" alt="どのブラウザでも表示出来ます！" />
-      </a>
-      <a href="http://www.catb.org/hacker-emblem/">
-        <img src="/static/hacker.png" alt="hacker emblem" />
-      </a>
-    </div>
-  </div>
-</body>
+{{ define "footer" }}
+      </main>
+      <hr>
+      <footer>
+         <p>@VnPower 2022 | MIT license</p>
+         <p>
+           Inspired by <a href="https://wrongthink.neocities.org/">Wrongthink's website</a> 
+           and <a href="https://www.nordtheme.com/">Nord's colorscheme</a>.
+         </p>
+      </footer>
+    </div> 
+  </body>
 </html>
 {{ end }}

-{{ define "page" }}{{ template "header" . }}    <div class="header-links">
-      <a href="/">トップ</a> |
-      <a href="/about/">自己紹介</a> |
-      <a href="/contact/">連絡先</a> |
-      <a href="/skill/">スキル</a> |
-      <a href="/portfolio/">ポートフォリオ</a> |
-      <a href="/service/">サービス</a> |
-      <a href="/webring/">リング</a> |
-      <a href="/i2pabout/">I2Pについて</a>
-    </div>
-    <div class="header-links">
-      <a href="/blog.atom"><img class="icon" src="/static/rssa.png" alt="" />Atomで登録</a> |
-      <a href="https://social.076.ne.jp/TechnicalSuwako"><img class="icon" src="/static/mastodon.png" alt="" />Mastodon / <img class="icon" src="/static/pleroma.png" alt="" />Pleromaでフォロー</a> |
-      <a href="https://video.076.ne.jp/c/technicalsuwako"><img class="icon" src="/static/peertube.png" alt="" />PeerTubeで登録</a> |
-      <a href="https://technicalsuwako.moe/"><img class="icon" src="/static/clearnet.png" alt="" />一般ネット</a> |
-      <a href="http://6qiatzlijtqo6giwvuhex5zgg3czzwrq5g6yick3stnn4xekw26zf7qd.onion/"><img class="icon" src="/static/tor.png" alt="" />Tor</a> |
-      <a href="http://technicalsuwako.i2p/"><img class="icon" src="/static/i2p.png" alt="" />I2P</a>
-    </div>
-    <div>
-      支援♡ : <a href="/support/monero/"><img class="icon" src="/static/monero.png" alt="" />Monero</a>
-    </div>
-    <hr />
-{{ replace "<code>" "<code lang=\"\">" ( replace "<pre style=\"background-color:#f8f8f8;overflow-x: auto\">" "<pre>" .Content ) }}{{ template "footer" . }}{{ end }}
+{{ define "page" }}{{ template "header" . }}
+{{ .Content }}{{ template "footer" . }}{{ end }}

 {{ define "date" }}{{ .Format "2006年01月02日" }}{{ end }}

-{{ define "pagelist" }}{{ range . }}    <div class="mb5{{ if .Date.Year | changed "year" }} mt15{{ end }}">
-      <span>{{ template "date" .Date }}</span>
-      <span><a href="/{{ .Url }}">{{ .Title }}</a></span>
-    </div>
+{{ define "pagelist" }}{{ range . }}    
+<section class="post">
+  <div class="date">
+    {{ template "date" .Date }}
+  </div>
+  <div class="content">
+    <h4><a href="/{{ .Url }}">{{ .Title }}</a></h4>
+    Remember the old days when we used to make text-only webpages? I missed that time, 
+    and probably you too. Nowadays the "web standard" has rapidly changed, which made
+    us, "web developers", change.
+  </div>
+</section>
 {{ end }}{{ end }}

-{{ define "post" }}<div class="header">
-      <h1>{{ .Title }}</h1>
+{{ define "post" }}
+      <h4>{{ .Title }}</h4>
      <a href="/">トップページに戻る</a>
      <div class="info">
-        {{ .Other.Author }}、
-        {{ template "date" .Date }} &mdash;
        {{ range $i, $t := .Tags }}{{ if $i }},{{ end }}
        <a href="/tags/{{ $t }}/">{{ $t }}</a>{{ end }}
      </div>
-    </div>
-    <hr />
-    <div class="section">
-{{ .Content }}    </div>
+      {{ .Content }}    
 {{ end }}

 {{ define "tag" }}    <h1>{{ .Title }} のタグが付いているページ</h1>
--- a/src/index.html
+++ b/src/index.html
@ -1,4 +1,4 @@
-title: トップページ
+title: Main Page
 ----
    <p class="lead">ようこそ、あたしのウェブページへ！諏訪子です。</p>
 {{ template "pagelist" (((.Site.Pages.Children "blog/").Where "Url" "/$").WhereNot "Draft" "true") }}
--- a/src/static/css/main.css
+++ b/src/static/css/main.css
@ -0,0 +1,106 @@
+@import url("/static/font/font.css"); /* load the fonts */
+/* variables */
+:root {
+  /* Nord colorscheme */
+  --nord1: #2E3440;
+  --nord5: #D8DEE9;
+  --nord6: #E5E9F0;
+  --nord7: #ECEFF4;
+  --nord10: #81A1C1;
+  --nord11: #5E81AC;
+}
+/* default values */
+* {
+  box-sizing: border-box; 
+  text-rendering: geometricPrecision;
+}
+a {
+  text-decoration: none;
+  color: var(--nord10);
+}
+a:hover {
+  background: var(--nord11);
+  color: var(--nord7);
+}
+hr {
+  background: var(--nord5);
+  margin: 1.8em 0;
+}
+/* this part is complicated */
+h4 {
+  overflow: hidden;
+  position: relative;
+  display: table-cell;
+  padding: 20px 0;
+}
+h4::after {
+  content: "====================================================================================================";
+  position: absolute;
+  bottom: 5px;
+  left: 0;
+  color: var(--nord7);
+}
+/* main components */
+body {
+  margin: 0;
+  background: var(--nord1);
+  color: var(--nord7);
+  font-size: 16px;
+  font-family: "Roboto Mono", "JetBrains Mono", monospace;
+  word-wrap: break-word;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+}
+.container {
+  width: 65%;
+  min-width: 800px;
+}
+main {
+  line-height: 1.4em;
+}
+/* navbar components */
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 0;
+}
+nav {
+  display: flex;
+  column-gap: 22px;
+}
+nav a {
+  text-decoration: none;
+  color: var(--nord5);
+}
+nav a:hover {
+  background: none;
+  color: var(--nord7);
+}
+header .flash {
+  animation: flash 1s;
+  animation-iteration-count: infinite;
+  width: 5px;
+  height: 12px;
+}
+/* content-related components */
+.post {
+  padding: 1.4em 0;
+  display: flex;
+}
+section .date {
+  width: 14%;
+  display: flex;
+  justify-content: center;
+}
+section .content {
+  width: 86%;
+}
+/* keyframes for animations */
+@keyframes flash {
+  0% { background: none; }
+  49% { background: var(--nord11); }
+  50% { background: var(--nord11); }
+  100% { background: none; }
+}
--- a/src/static/style.css
+++ b/src/static/style.css
@ -1,123 +0,0 @@
-body {
-  background-color: #232629;
-  background-image: url('/static/stars.gif');
-  color: #fcfcfc;
-  font-family: sans-serif, sans-serif;
-  margin: 0;
-}
-
-table {
-  border: 1px solid #ea81e8;
-  border-spacing: 0;
-}
-
-th {
-  background-color: #a93da9;
-}
-
-td, th {
-  border: 1px solid #ea81e8;
-}
-
-#jswarning {
-  background-color: rgb(170, 170, 0);
-  color: rgb(252, 252, 252);
-  display: none;
-  padding: 10px;
-  border: 4px #dde22d ridge;
-  margin: 0;
-  text-align: center;
-}
-
-.container {
-  margin: 4px auto;
-  background-color: #170b15;
-  max-width: 840px;
-  border: 8px #a93da9 ridge;
-  padding: 1em;
-}
-
-@media screen and (max-width: 840px) {
-  body {
-    background-image: none;
-  }
-  .container {
-    padding: 0;
-    border: 0;
-    margin: 0 auto;
-  }
-}
-
-.header-img {
-  display: block;
-  max-width: 100%;
-  margin-bottom: 0.5em;
-}
-
-a {
-  color: #ea81e8;
-  text-decoration: none;
-}
-
-pre {
-  background-color: #4b364b;
-  padding: 8px;
-  border: 1px #ff61ff dashed;
-  overflow-x: auto;
-}
-
-pre, code {
-  font: 1rem monospace, monospace;
-}
-
-img {
-  max-width: min(600px, 100%);
-  max-height: 500px;
-}
-
-hr {
-  border: 4px #971195 outset;
-  border-color: #971195;
-}
-
-h1 {
-  font-size: 30px;
-  text-decoration: underline;
-}
-
-.header > h1 {
-  font-size: 1.5em;
-  text-decoration: none;
-}
-
-.warning, .danger {
-  padding: 4px;
-  border: 1px solid #eff0f1;
-  border-radius: 5px;
-}
-
-.warning {
-  background-color: #fdbc4b;
-  color: #232629;
-}
-
-.danger {
-  background-color: #da4453;
-}
-
-.mb5 {
-  margin-block: 0.5em;
-}
-
-.mb5 > span {
-  display: inline-block;
-}
-
-.icon {
-  height: 1em;
-  vertical-align: sub;
-}
-
-.emblems {
-  display: inline-block;
-}