Fix various stylings

i18n/tl.toml

@@ -28,7 +28,7 @@ other = "Mga pagsasalin"
 
 # General
 [and]
-other = "At"
+other = "at"
 
 [back_to_home]
 other = "Balik sa homepage"

layouts/_default/single.html

@@ -8,7 +8,7 @@
         {{- with .Params.author }}
         {{- $names := slice }}
         {{- range . }}{{ $names = $names | append .name }}{{ end }}
-        <p class="author">{{ i18n "published_by" }}: {{ delimit $names ", " (printf ", %s " (i18n "and")) }}</p>
+        <p class="author">{{ i18n "published_by" }}: {{ delimit $names ", " (printf " %s " (i18n "and")) }}</p>
         {{- end }}
 
         <!-- Only show the creation date if the `date` field is valid. -->
@@ -24,13 +24,9 @@
 
         <!-- Link the translated versions if the article has at least one translated page. -->
         {{- if .IsTranslated }}
-        <p>
-        {{- i18n "available_translations" }}: 
-        |
-        {{ range .Translations }}
-        <a href="{{ .Permalink }}">{{ with .Language.LanguageName }}{{ . }}{{ else }}{{ .Lang }}{{ end }}</a> |
-        {{- end }}
-        </p>
+        {{ $langs := slice }}
+        {{ range .Translations }}{{ $langs = $langs | append (printf "<a href=%s>%s</a>" .Permalink (cond (ne .Language.LanguageName nil) .Language.LanguageName .Lang)) }}{{ end }}
+        <p>{{ i18n "available_translations" }}: {{ delimit $langs "," (printf " %s " (i18n "and")) }}</p>
         {{- end }}
     </div>
 </header>

static/css/main.css

@@ -19,10 +19,10 @@
 }
 
 [data-theme="dark"]:root {
-    --foreground: #FAFAFA;
-    --foreground-light: #E1E1E1;
     --background: #000000;
     --background-light: #363537;
+    --foreground: #FAFAFA;
+    --foreground-light: #E1E1E1;
     --grey: #919191;
 }
 
@@ -72,6 +72,10 @@ a:visited {
     color: #AC5A82;
 }
 
+code {
+    font-size: 0.9em;
+}
+
 dd, li, p, td {
     line-height: 1.5;
 }
@@ -81,7 +85,7 @@ p {
     margin-bottom: 1rem;
 }
 
-dd{
+dd {
     margin-top: 0.5rem;
     margin-bottom: 1.5rem;
 }
@@ -182,6 +186,7 @@ aside {
     border: 1px solid var(--grey);
     border-left: 3px solid var(--grey);
     font-size: calc(1rem * (1 - var(--vertical-rhythm-reduction)));
+    font-family: var(--header-family);
     line-height: calc(1rem * (1 + var(--vertical-rhythm-reduction)));
     margin: 1rem 0;
     padding: 0.5rem;
@@ -243,9 +248,9 @@ footer {
 
 
 /* Mobile styles */
-@media (max-width: 860px) {
+@media all and (max-width: 860px) {
     html:root {
-        --font-size: 18px;
+        --font-size: 17px;
     }
 
     .post {