Update styling

README.md

@@ -38,7 +38,7 @@
 - **`code`** (prop required: **`language`**; props optional: **`title`**, **`id`**, **`expand`** (default "△"), **`collapse`** (default "▽"), **`isCollapsed`**)
   - eg:
   ```go
-  {{< code language="CSS" title="Really cool snippet" id="1" expand="Show" collapse="Hide" isCollapsed="true" >}}
+  {{< code language="css" title="Really cool snippet" id="1" expand="Show" collapse="Hide" isCollapsed="true" >}}
   pre {
     background: #1a1a1d;
     padding: 20px;

layouts/_default/index.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
-{{ with .Content }}
-  <div class="index-content">
-    {{ . }}
+{{ if .Content }}
+  <div class="index-content {{ if .Params.framed -}}framed{{- end -}}">
+    {{ .Content }}
   </div>
 {{ end }}
 <div class="posts">

layouts/shortcodes/code.html

@@ -8,7 +8,7 @@
       {{ if .Get "title" }}<span class="collapsable-code__title">{{ .Get "title" | markdownify }}</span>{{ end }}
       <span class="collapsable-code__toggle" data-label-expand="{{ .Get "expand" | default "△" }}" data-label-collapse="{{ .Get "collapse" | default "▽" }}"></span>
     </label>
-    <pre {{ if .Get "language" }}class="language-{{ .Get "language" }}" {{ end }}><code>{{ .Inner }}</code></pre>
+    <pre {{ if .Get "language" }}class="language-{{ .Get "language" }}" {{ end }}><code>{{ .Inner | string }}</code></pre>
   </div>
 {{ else }}
   {{ errorf "If you want to use the \"collapsable code\" shortcode, you need to pass a mandatory \"language\" param. The issue occured in %q (%q)" .Page.File .Page.Permalink }}

layouts/shortcodes/prismjs.html

@@ -1,4 +1,4 @@
-{{ $inner := replaceRE "^\n" "" .Inner }}
+{{ $inner := replaceRE "^\n" "" .Inner | string }}
 {{ if len .Params | eq 0 }}
   <pre><code>{{ $inner }}</code></pre>
 {{ else }}

source/css/main.css

@@ -29,7 +29,6 @@ body {
   }
 }
 
-
 .headings--one-size {
   h1,
   h2,
@@ -59,6 +58,11 @@ body {
 
 a {
   color: inherit;
+
+  /* Waiting for a better times... */
+  /* &:has(code) {
+    text-decoration-color: var(--accent);
+  } */
 }
 
 img {
@@ -123,7 +127,7 @@ figure {
   }
 }
 
-code {
+code, kbd {
   font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace;
   font-feature-settings: normal;
   background: color-mod(var(--accent) a(20%));
@@ -131,6 +135,12 @@ code {
   padding: 1px 6px;
   margin: 0 2px;
   font-size: .95rem;
+
+  code, kbd {
+    background: transparent;
+    padding: 0;
+    margin: 0;
+  }
 }
 
 pre {
@@ -183,13 +193,38 @@ blockquote {
     position: relative;
   }
 
-  p:before {
+  p:first-of-type:before {
     content: '>';
     display: block;
     position: absolute;
     left: -25px;
     color: var(--accent);
   }
+
+  &.twitter-tweet {
+    position: relative;
+    background: color-mod(var(--accent) a(10%));
+    font: inherit;
+    color: inherit;
+    border: 1px solid var(--accent);
+    padding-top: 60px;
+
+    p:before {
+      content: '';
+    }
+
+    &:before {
+      content: '> From Twitter:';
+      position: absolute;
+      top: 20px;
+      color: var(--accent);
+      font-weight: bold;
+    }
+
+    a {
+      color: var(--accent);
+    }
+  }
 }
 
 table {
@@ -224,10 +259,33 @@ ol {
   }
 }
 
+ol {
+  list-style: none;
+  counter-reset: li;
+
+  li {
+    counter-increment: li;
+  }
+
+  li:before {
+    content: counter(li);
+    position: absolute;
+    right: calc(100% + 10px);
+    color: var(--accent);
+    display: inline-block;
+    text-align: right;
+  }
+}
+
 ol ol {
   list-style-type: lower-alpha;
 }
 
+mark {
+  background: var(--accent);
+  color: var(--background);
+}
+
 .container {
   display: flex;
   flex-direction: column;

source/css/post.css

@@ -1,3 +1,20 @@
+.index-content {
+  margin-top: 20px;
+}
+
+.framed {
+  border: 1px solid var(--accent);
+  padding: 20px;
+
+  *:first-child {
+    margin-top: 0;
+  }
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+}
+
 .posts {
   width: 100%;
 }
@@ -74,7 +91,7 @@
   ul {
     list-style: none;
 
-    li:before {
+    li:not(:empty):before {
       content: '-';
       position: absolute;
       left: -20px;
@@ -109,3 +126,7 @@
 h1:hover a, h2:hover a, h3:hover a, h4:hover a {
   visibility: visible;
 }
+
+.footnotes {
+  color: color-mod(var(--color) alpha(50%));
+}