[chore] update package-lock.json

LOL, I'm still using 1.22.x

README.md

@@ -159,10 +159,6 @@ languageCode = "en-us"
 theme = "terminal"
 pagination.pagerSize = 5
 
-# Required for Chroma and the custom syntax highlighting.
-[markup.highlight]
-  noClasses = false
-
 [params]
   # dir name of your main content (default is `content/posts`).
   # the list of set content will show up on your index page (baseurl).

assets/css/buttons.css

@@ -14,6 +14,7 @@ a.button {
   padding: 8px 18px;
   text-decoration: none;
   text-align: center;
+  border-radius: 8;
   font: inherit;
   font-weight: bold;
   appearance: none;
@@ -40,13 +41,13 @@ button.link,
 .button.link,
 a.button.link {
   background: none;
-  font-size: var(--font-size);
+  font-size: 1rem;
 }
 
 button.small,
 .button.small,
 a.button.small {
-  font-size: calc(var(--font-size) * 0.8);
+  font-size: 0.8rem;
 }
 
 button.wide,
@@ -71,6 +72,22 @@ a.button.inline:hover {
   background: none;
 }
 
+a.button.inline::before {
+  content: "["
+}
+
+a.button.inline::after {
+  content: "]"
+}
+
+a.button.inline.prev::before {
+  content: "< ["
+}
+
+a.button.inline.next::after {
+  content: "] >"
+}
+
 a.read-more,
 a.read-more:hover,
 a.read-more:active {
@@ -82,3 +99,20 @@ a.read-more:active {
   max-width: 100%;
   text-decoration: none;
 }
+
+.copy-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3px 8px;
+  margin-bottom: 5px;
+  text-decoration: none;
+  text-align: center;
+  font-size: 13px;
+  font-weight: 500;
+  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
+  appearance: none;
+  cursor: pointer;
+  outline: none;
+}

assets/css/code.css

@@ -24,6 +24,7 @@ code {
 
 .highlight {
   position: relative;
+  padding-top: 30px;
   margin: 20px 0;
   border: 1px solid var(--code-border);
 }
@@ -32,48 +33,25 @@ code {
   border: none;
 }
 
-.code-title {
+.chroma code[data-lang]:before {
+  content: attr(data-lang);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: auto;
+  height: 30px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
   background: color-mix(in srgb, var(--foreground) 5%, transparent);
   border-bottom: 1px solid var(--code-border);
   color: var(--comment);
   text-transform:uppercase;
-  font-size: calc(var(--font-size) * 0.8);
-  padding: 6px 10px;
+  font-size: .8em;
+  padding: 0 10px;
   line-height: 1;
 }
 
-.copy-button {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 3px 8px;
-  text-decoration: none;
-  text-align: center;
-  font-size: 13px;
-  font-weight: 500;
-  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
-  appearance: none;
-  cursor: pointer;
-  outline: none;
-}
-
-.code-title .copy-button {
-  z-index: 1;
-  background: color-mix(in srgb, var(--foreground) 5%, var(--background));
-}
-
-.code-title:hover .copy-button {
-  display: inline-block;
-}
-
-.code-title .copy-button:hover {
-  background: color-mix(in srgb, var(--accent) 10%, var(--background));
-}
-
 .collapsable-code {
   position: relative;
   width: 100%;
@@ -91,7 +69,7 @@ code {
   flex: 1;
   color: var(--accent);
   padding: 3px 10px;
-  font-size: calc(var(--font-size) * 0.9);
+  font-size: .9em;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -115,6 +93,16 @@ code {
   background: color-mix(in srgb, var(--accent) 10%, transparent);
 }
 
+.collapsable-code summary::marker {
+  /* content: "+"; */
+  font-weight: bold;
+}
+
+.collapsable-code[open] summary::marker {
+  /* content: "-"; */
+}
+
+
 .collapsable-code pre {
   margin-top: 0;
 }
@@ -122,3 +110,21 @@ code {
 .collapsable-code pre::first-line {
   line-height: 0;
 }
+
+.chroma .copy-button {
+  display: none;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  margin: .5em;
+  z-index: 1;
+  background: color-mix(in srgb, var(--foreground) 5%, var(--background));
+}
+
+.chroma:hover .copy-button {
+  display: inline-block;
+}
+
+.chroma .copy-button:hover {
+  background: color-mix(in srgb, var(--accent) 10%, var(--background));
+}

assets/css/footer.css

@@ -1,7 +1,7 @@
 .footer {
   padding: 40px 0;
   flex-grow: 0;
-  opacity: 0.65;
+  opacity: 0.5;
 }
 
 .footer__inner {
@@ -9,6 +9,7 @@
   align-items: center;
   justify-content: space-between;
   margin: 0;
+  width: 760px;
   max-width: 100%;
 }
 
@@ -21,6 +22,7 @@
   flex-flow: row wrap;
   flex: 1;
   align-items: center;
+  font-size: 1rem;
   justify-content: center;
 }
 

assets/css/main.css

@@ -66,7 +66,7 @@ img,
 figure,
 video,
 table {
-  margin: 25px 0;
+  margin: calc(var(--line-height) * 1.2) 0;
 }
 
 a {
@@ -238,7 +238,7 @@ figure figcaption {
   background: var(--accent);
   color: var(--background);
   text-align: center;
-  font-size: var(--font-size);
+  font-size: 1rem;
   font-weight: normal;
   margin-top: -8px;
   padding: 0 8px;
@@ -284,7 +284,7 @@ kbd {
   border: 1px solid var(--code-border);
   padding: 1px 6px;
   margin: 0 2px;
-  font-size: calc(var(--font-size) * 0.95);
+  font-size: 0.95rem;
 }
 
 kbd {
@@ -306,7 +306,7 @@ pre {
   background: color-mix(in srgb, var(--foreground) 5%, transparent) !important;
   color: var(--foreground);
   padding: 20px 10px;
-  font-size: calc(var(--font-size) * 0.95) !important;
+  font-size: 0.95rem !important;
   overflow: auto;
   border-radius: var(--radius);
   border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
@@ -316,6 +316,7 @@ pre code {
   background: none !important;
   margin: 0;
   padding: 0;
+  font-size: inherit;
   border: none;
 }
 
@@ -415,6 +416,8 @@ hr {
   margin-top: 20px;
 }
 
+
+
 blockquote.twitter-tweet {
   position: relative;
   background: var(--background);
@@ -466,31 +469,8 @@ blockquote.twitter-tweet::before {
 }
 
 .__h_video {
-  position: relative;
+  padding-bottom: 58.23% !important;
   overflow: visible !important;
-  height: auto !important;
-  padding-bottom: 0 !important;
-}
-
-.__h_video a {
-  position: relative;
-  display: block;
-  width: 100%;
-}
-
-.__h_video a img {
-  width: 100%;
-}
-
-.__h_video a .play {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  width: 60px;
-  height: 60px;
 }
 
 iframe[src*="youtube.com"] {
@@ -499,13 +479,18 @@ iframe[src*="youtube.com"] {
 }
 
 @media (max-width: 684px) {
-  :root {
-    --font-size: 0.95rem;
+  body {
+    font-size: 1rem;
   }
 
   .container {
     padding: 20px;
   }
+
+  ul,
+  ol {
+    margin-left: 20px;
+  }
 }
 
 @media print {

assets/css/pagination.css

@@ -15,7 +15,7 @@
   padding: 5px 10px;
   background: var(--background);
   color: color-mix(in srgb var(--foreground) 30%, transparent);
-  font-size: calc(var(--font-size) * 0.8);
+  font-size: 0.8rem;
   text-transform: uppercase;
   text-decoration: none;
   letter-spacing: 0.1em;
@@ -53,7 +53,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: inherit;
+  font-size: 1rem;
   padding: 0;
   appearance: none;
 }
@@ -63,6 +63,10 @@
   justify-content: center;
   flex: 1;
   padding: 8px 16px;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .button__text {
@@ -79,6 +83,12 @@
   margin-right: 8px;
 }
 
+@media (max-width: 684px) {
+  .button {
+    flex: 1;
+  }
+}
+
 @media print {
   .pagination {
     display: none;

assets/css/post.css

@@ -1,5 +1,5 @@
 .index-content {
-  margin: 25px 0;
+  margin-top: 20px;
 }
 
 .framed {
@@ -22,7 +22,7 @@
 .post {
   width: 100%;
   text-align: left;
-  padding: 30px 0;
+  padding: 40px 0;
 }
 
 .post:not(:last-of-type) {
@@ -30,9 +30,9 @@
 }
 
 .post-meta {
-  font-size: inherit;
+  font-size: 1rem;
   margin-bottom: 10px;
-  color: color-mix(in srgb, var(--foreground) 65%, transparent);
+  color: color-mix(in srgb, var(--foreground) 50%, transparent);
 }
 
 .post-meta > *:not(:first-child)::before {
@@ -67,7 +67,7 @@
 .post-tags {
   display: block;
   margin-bottom: 20px;
-  font-size: inherit;
+  font-size: 1rem;
   color: var(--accent);
 }
 
@@ -76,11 +76,11 @@
 }
 
 .post-content {
-  margin-top: 25px;
+  margin-top: 30px;
 }
 
 .post-cover {
-  margin: 25px 0;
+  margin: 40px 0;
 }
 
 .post ul {

assets/js/code.js

@@ -1,32 +0,0 @@
-const blockcodes = document.querySelectorAll(".chroma code[data-lang]");
-
-for (const bc of blockcodes) {
-  const parent = bc.parentElement;
-  const content = bc.innerText.split("\n").filter(Boolean).join("\n");
-
-  // Code title
-  const title = document.createElement("div");
-  const lang = bc.dataset.lang;
-  title.classList.add("code-title");
-  title.innerText = lang;
-
-  // Copy to clipboard
-  if (navigator.clipboard !== undefined) {
-    const cpbutton = document.createElement("button");
-    cpbutton.classList.add("copy-button");
-    cpbutton.innerText = "Copy";
-
-    cpbutton.addEventListener("click", () => {
-      cpbutton.innerText = "Copied";
-      setTimeout(() => {
-        cpbutton.innerText = "Copy";
-      }, 1000);
-
-      navigator.clipboard.writeText(content);
-    });
-
-    title.append(cpbutton);
-  }
-
-  parent.closest(".highlight").prepend(title);
-}

assets/js/copy-to-clipboard.js

@@ -0,0 +1,20 @@
+const blockcodes = document.querySelectorAll(".chroma code[data-lang]");
+
+for (const bc of blockcodes) {
+  const parent = bc.parentElement;
+  const content = bc.innerText.split("\n").filter(Boolean).join("\n");
+  const cpbutton = document.createElement("button");
+  cpbutton.classList.add("copy-button");
+  cpbutton.innerText = "Copy";
+
+  cpbutton.addEventListener("click", () => {
+    cpbutton.innerText = "Copied";
+    setTimeout(() => {
+      cpbutton.innerText = "Copy";
+    }, 1000);
+
+    navigator.clipboard.writeText(content);
+  });
+
+  parent.prepend(cpbutton);
+}

layouts/_default/index.html

@@ -55,7 +55,7 @@
 
         {{ if not .Params.showFullContent }}
           <div>
-            <a class="read-more button inline" href="{{ .RelPermalink }}">[{{ $.Site.Params.ReadMore }}]</a>
+            <a class="read-more button inline" href="{{ .RelPermalink }}">{{ $.Site.Params.ReadMore }}</a>
           </div>
         {{ end }}
       </article>

layouts/_default/list.html

@@ -45,7 +45,7 @@
 
         {{ if not .Params.showFullContent }}
            <div>
-            <a class="read-more button inline" href="{{ .RelPermalink }}">[{{ $.Site.Params.ReadMore }}]</a>
+            <a class="read-more button inline" href="{{ .RelPermalink }}">{{ $.Site.Params.ReadMore }}</a>
           </div>
         {{ end }}
       </article>

layouts/_default/term.html

@@ -46,7 +46,7 @@
 
         {{ if not .Params.showFullContent }}
           <div>
-            <a class="read-more button inline" href="{{ .RelPermalink }}">[{{ $.Site.Params.ReadMore }}]</a>
+            <a class="read-more button inline" href="{{ .RelPermalink }}">{{ $.Site.Params.ReadMore }}</a>
           </div>
         {{ end }}
       </article>

layouts/partials/footer.html

@@ -13,7 +13,7 @@
 </footer>
 
 {{ $menu := resources.Get "js/menu.js" | js.Build }}
-{{ $cp := resources.Get "js/code.js" | js.Build }}
+{{ $cp := resources.Get "js/copy-to-clipboard.js" | js.Build }}
 
 {{ $bundle := slice $menu $cp | resources.Concat "bundle.js" | resources.Minify }}
 

layouts/partials/pagination.html

@@ -2,15 +2,12 @@
   <div class="pagination__buttons">
     {{ if .Paginator.HasPrev }}
       <a href="{{ .Paginator.Prev.URL }}" class="button inline prev">
-        &lt; [<span class="button__text">{{ $.Site.Params.newerPosts | default "Newer posts" }}</span>]
+        <span class="button__text">{{ $.Site.Params.newerPosts | default "Newer posts" }}</span>
       </a>
     {{ end }}
-    {{ if and .Paginator.HasPrev .Paginator.HasNext }}
-      ::
-    {{ end }}
     {{ if .Paginator.HasNext }}
       <a href="{{ .Paginator.Next.URL }}" class="button inline next">
-        [<span class="button__text">{{ $.Site.Params.olderPosts | default "Older posts" }}</span>] &gt;
+        <span class="button__text">{{ $.Site.Params.olderPosts | default "Older posts" }}</span>
       </a>
     {{ end }}
   </div>

layouts/partials/posts_pagination.html

@@ -7,7 +7,7 @@
   <div class="pagination__buttons">
     {{ if .NextInSection }}
       <a href="{{ .NextInSection.Permalink }}" class="button inline prev">
-        &lt; [<span class="button__text">{{ .NextInSection.Title }}</span>]
+        {{ .NextInSection.Title }}
       </a>
     {{ end }}
     {{ if and .NextInSection .PrevInSection }}
@@ -15,7 +15,7 @@
     {{ end }}
     {{ if .PrevInSection }}
       <a href="{{ .PrevInSection.Permalink }}" class="button inline next">
-         [<span class="button__text">{{ .PrevInSection.Title }}</span>] &gt;
+        {{ .PrevInSection.Title }}
       </a>
     {{ end }}
   </div>