Improve component rendering styles

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2025-09-08 17:30:45 +01:00
parent d9dcea0e41
commit 53705dcd34
14 changed files with 585 additions and 8 deletions
--- a/assets/sass/blockquote.scss
+++ b/assets/sass/blockquote.scss
@@ -0,0 +1,21 @@
+blockquote {
+  border-left: 0.15rem solid
+    color-mix(in srgb, var(--text) 30%, var(--background));
+
+  .alert-heading {
+    font-weight: bold;
+    margin: 0 0 0.5rem 0;
+  }
+
+  .alert-emoji {
+    margin-right: 0.5rem;
+  }
+
+  p {
+    margin: 0 0 0.5rem 0;
+  }
+
+  p:last-child {
+    margin: 0;
+  }
+}
--- a/assets/sass/code.scss
+++ b/assets/sass/code.scss
@@ -0,0 +1,417 @@
+/* PreWrapper */
+.chroma {
+  color: var(--text);
+  background-color: var(--background-50);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+}
+
+/* Error */
+.chroma .err {
+  color: var(--accent-500);
+}
+
+/* LineLink */
+.chroma .lnlinks {
+  outline: none;
+  text-decoration: none;
+  color: inherit;
+}
+
+/* LineTableTD */
+.chroma .lntd {
+  vertical-align: top;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+/* LineTable */
+.chroma .lntable {
+  border-spacing: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+/* LineHighlight */
+.chroma .hl {
+  background-color: var(--background-200);
+}
+
+/* LineNumbersTable */
+.chroma .lnt {
+  white-space: pre;
+  -webkit-user-select: none;
+  user-select: none;
+  margin-right: 0.4em;
+  padding: 0 0.4em 0 0.4em;
+}
+
+/* LineNumbers */
+.chroma .ln {
+  white-space: pre;
+  -webkit-user-select: none;
+  user-select: none;
+  margin-right: 0.4em;
+  padding: 0 0.4em 0 0.4em;
+  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+}
+
+/* Line */
+.chroma .line {
+  display: flex;
+}
+
+/* Keyword */
+.chroma .k {
+  color: var(--secondary-600);
+}
+
+/* KeywordConstant */
+.chroma .kc {
+  color: var(--primary-500);
+}
+
+/* KeywordDeclaration */
+.chroma .kd {
+  color: var(--secondary-600);
+}
+
+/* KeywordNamespace */
+.chroma .kn {
+  color: var(--secondary-600);
+}
+
+/* KeywordPseudo */
+.chroma .kp {
+  color: var(--primary-500);
+}
+
+/* KeywordReserved */
+.chroma .kr {
+  color: var(--secondary-600);
+}
+
+/* KeywordType */
+.chroma .kt {
+  color: var(--secondary-600);
+}
+
+/* Name */
+.chroma .nc {
+  color: var(--accent-600);
+  font-weight: bold;
+}
+
+/* NameConstant */
+.chroma .no {
+  color: var(--primary-500);
+  font-weight: bold;
+}
+
+/* NameDecorator */
+.chroma .nd {
+  color: var(--secondary-700);
+  font-weight: bold;
+}
+
+/* NameEntity */
+.chroma .ni {
+  color: var(--accent-600);
+}
+
+/* NameException */
+.chroma .ne {
+  color: var(--accent-600);
+  font-weight: bold;
+}
+
+/* NameLabel */
+.chroma .nl {
+  color: var(--primary-500);
+  font-weight: bold;
+}
+
+/* NameNamespace */
+.chroma .nn {
+  color: var(--secondary-600);
+}
+
+/* NameProperty */
+.chroma .py {
+  color: var(--primary-500);
+}
+
+/* NameTag */
+.chroma .nt {
+  color: var(--primary-600);
+}
+
+/* NameVariable */
+.chroma .nv {
+  color: var(--primary-500);
+}
+
+/* NameVariableClass */
+.chroma .vc {
+  color: var(--primary-500);
+}
+
+/* NameVariableGlobal */
+.chroma .vg {
+  color: var(--primary-500);
+}
+
+/* NameVariableInstance */
+.chroma .vi {
+  color: var(--primary-500);
+}
+
+/* NameVariableMagic */
+.chroma .vm {
+  color: var(--primary-500);
+}
+
+/* NameFunction */
+.chroma .nf {
+  color: var(--secondary-700);
+  font-weight: bold;
+}
+
+/* NameFunctionMagic */
+.chroma .fm {
+  color: var(--secondary-700);
+  font-weight: bold;
+}
+
+/* Literal */
+.chroma .l {
+  color: var(--primary-600);
+}
+
+/* LiteralDate */
+.chroma .ld {
+  color: var(--primary-500);
+}
+
+/* LiteralString */
+.chroma .s {
+  color: var(--primary-600);
+}
+
+/* LiteralStringAffix */
+.chroma .sa {
+  color: var(--primary-500);
+}
+
+/* LiteralStringBacktick */
+.chroma .sb {
+  color: var(--primary-600);
+}
+
+/* LiteralStringChar */
+.chroma .sc {
+  color: var(--primary-600);
+}
+
+/* LiteralStringDelimiter */
+.chroma .dl {
+  color: var(--primary-500);
+}
+
+/* LiteralStringDoc */
+.chroma .sd {
+  color: var(--primary-600);
+}
+
+/* LiteralStringDouble */
+.chroma .s2 {
+  color: var(--primary-600);
+}
+
+/* LiteralStringEscape */
+.chroma .se {
+  color: var(--primary-500);
+}
+
+/* LiteralStringHeredoc */
+.chroma .sh {
+  color: var(--primary-500);
+}
+
+/* LiteralStringInterpol */
+.chroma .si {
+  color: var(--primary-600);
+}
+
+/* LiteralStringOther */
+.chroma .sx {
+  color: var(--primary-600);
+}
+
+/* LiteralStringRegex */
+.chroma .sr {
+  color: var(--primary-500);
+}
+
+/* LiteralStringSingle */
+.chroma .s1 {
+  color: var(--primary-600);
+}
+
+/* LiteralStringSymbol */
+.chroma .ss {
+  color: var(--primary-600);
+}
+
+/* LiteralNumber */
+.chroma .m {
+  color: var(--primary-600);
+}
+
+/* LiteralNumberBin */
+.chroma .mb {
+  color: var(--primary-600);
+}
+
+/* LiteralNumberFloat */
+.chroma .mf {
+  color: var(--primary-600);
+}
+
+/* LiteralNumberHex */
+.chroma .mh {
+  color: var(--primary-600);
+}
+
+/* LiteralNumberInteger */
+.chroma .mi {
+  color: var(--primary-600);
+}
+
+/* LiteralNumberIntegerLong */
+.chroma .il {
+  color: var(--primary-600);
+}
+
+/* LiteralNumberOct */
+.chroma .mo {
+  color: var(--primary-600);
+}
+
+/* Operator */
+.chroma .o {
+  color: var(--secondary-600);
+  font-weight: bold;
+}
+
+/* OperatorWord */
+.chroma .ow {
+  color: var(--secondary-600);
+  font-weight: bold;
+}
+
+/* Comment */
+.chroma .c {
+  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+  font-style: italic;
+}
+
+/* CommentHashbang */
+.chroma .ch {
+  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+  font-style: italic;
+}
+
+/* CommentMultiline */
+.chroma .cm {
+  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+  font-style: italic;
+}
+
+/* CommentSingle */
+.chroma .c1 {
+  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+  font-style: italic;
+}
+
+/* CommentSpecial */
+.chroma .cs {
+  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+  font-weight: bold;
+  font-style: italic;
+}
+
+/* CommentPreproc */
+.chroma .cp {
+  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+  font-weight: bold;
+  font-style: italic;
+}
+
+/* CommentPreprocFile */
+.chroma .cpf {
+  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
+  font-weight: bold;
+  font-style: italic;
+}
+
+/* GenericDeleted */
+.chroma .gd {
+  color: var(--accent-900);
+  background-color: var(--accent-300);
+}
+
+/* GenericEmph */
+.chroma .ge {
+  font-style: italic;
+}
+
+/* GenericError */
+.chroma .gr {
+  color: var(--accent-500);
+}
+
+/* GenericHeading */
+.chroma .gh {
+  color: var(--primary-500);
+  font-weight: bold;
+}
+
+/* GenericInserted */
+.chroma .gi {
+  color: var(--primary-800);
+  background-color: var(--primary-200);
+}
+
+/* GenericOutput */
+.chroma .go {
+  color: color-mix(in srgb, var(--text) 70%, var(--background-50));
+}
+
+/* GenericPrompt */
+.chroma .gp {
+  color: color-mix(in srgb, var(--text) 70%, var(--background-50));
+}
+
+/* GenericStrong */
+.chroma .gs {
+  font-weight: bold;
+}
+
+/* GenericSubheading */
+.chroma .gu {
+  color: var(--primary-500);
+}
+
+/* GenericTraceback */
+.chroma .gt {
+  color: var(--secondary-600);
+}
+
+/* GenericUnderline */
+.chroma .gl {
+  text-decoration: underline;
+}
--- a/assets/sass/common.scss
+++ b/assets/sass/common.scss
@@ -13,7 +13,17 @@ a {
 }

 a:hover {
-  color: var(--text-700);
+  color: var(--text-800);
+}
+
+sup,
+sub {
+  color: var(--text-600);
+}
+
+sup:hover,
+sub:hover {
+  color: var(--text-800);
 }

 h1,
@@ -22,14 +32,25 @@ h3,
 h4,
 h5,
 h6 {
-  margin: 0;
  font-weight: 500;
 }

+hr {
+  margin: 1rem 0 1rem 0;
+  border: none;
+  height: 0.15rem;
+  background-color: color-mix(in srgb, var(--text) 30%, var(--background));
+}
+
 figure {
  margin: 0;
 }

+blockquote {
+  margin: 1rem 0 1rem 0;
+  padding: 0.5rem 1rem 0.5rem 1rem;
+}
+
 body {
  margin: 0.5rem;
  min-height: calc(100vh - 1rem);
--- a/assets/sass/hero.scss
+++ b/assets/sass/hero.scss
@@ -1,9 +1,10 @@
 .hero {
  max-width: $width-content;
  margin: 0 auto;
-  padding: 2rem 2rem 0 2rem;
+  padding: 2rem;

-  h1 {
+  .title {
+    margin: 0;
    font-size: 2.5rem;
  }

@@ -30,6 +31,6 @@

@media (max-width: $width-mobile) {
  .hero {
-    padding: 1rem 1em 0 1rem;
+    padding: 1rem;
  }
 }
--- a/assets/sass/list.scss
+++ b/assets/sass/list.scss
@@ -62,10 +62,16 @@ main.with-meta {
    }

    .title {
+      margin: 0;
      font-size: 2.25rem;
    }

+    .summary {
+      margin-top: 0.5rem;
+    }
+
    .meta {
+      margin-top: 1rem;
      font-size: 0.8rem;

      .date {
@@ -76,6 +82,10 @@ main.with-meta {
        color: color-mix(in srgb, var(--text) 50%, var(--background));
      }
    }
+
+    .heading-anchor {
+      display: none;
+    }
  }

  .post:hover .title,
@@ -90,6 +100,10 @@ main.with-meta {
      &:not(:first-child) {
        margin-top: 2rem;
      }
+
+      .title {
+        font-size: 1.5rem;
+      }
    }
  }
 }
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -8,6 +8,9 @@ $width-wide: 75rem;

@import "heading";
@import "image";
+@import "blockquote";
+@import "code";
+@import "table";

@import "list";
@import "gallery";
--- a/assets/sass/table.scss
+++ b/assets/sass/table.scss
@@ -0,0 +1,30 @@
+.table-wrapper {
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+
+  thead th {
+    border-bottom: 0.1rem solid
+      color-mix(in srgb, var(--text) 20%, var(--background));
+  }
+
+  tr + tr td {
+    border-top: 0.1rem solid
+      color-mix(in srgb, var(--text) 10%, var(--background));
+  }
+
+  th,
+  td {
+    padding: 0.5rem;
+    border-right: 0.1rem solid
+      color-mix(in srgb, var(--text) 10%, var(--background));
+  }
+
+  th:last-child,
+  td:last-child {
+    border-right: none;
+  }
+}
--- a/layouts/_default/_markup/render-blockquote.html
+++ b/layouts/_default/_markup/render-blockquote.html
@@ -0,0 +1,26 @@
+{{ $emoji := dict
+  "caution" ":exclamation:"
+  "warning" ":warning:"
+  "important" ":information_source:"
+  "tip" ":bulb:"
+}}
+{{- if eq .Type "alert" -}}
+  <blockquote class="alert alert-{{ .AlertType }}">
+    <p class="alert-heading">
+      <span class="alert-emoji">
+        {{- transform.Emojify (index $emoji .AlertType) -}}
+      </span>
+      {{ if .AlertTitle }}
+        {{- .AlertTitle -}}
+      {{ else }}
+        {{- .AlertType | title -}}
+      {{ end }}
+    </p>
+    {{- .Text -}}
+  </blockquote>
+{{- else -}}
+  <blockquote>
+    {{- .Text -}}
+  </blockquote>
+{{- end -}}
+{{- /* chomp trailing newline */ -}}
--- a/layouts/_default/_markup/render-heading.html
+++ b/layouts/_default/_markup/render-heading.html
@@ -2,3 +2,4 @@
  {{ .Text | safeHTML }}
  <a href="#{{- .Anchor | safeURL -}}" class="heading-anchor">#</a>
 </h{{ .Level }}>
+{{- /* chomp trailing newline */ -}}
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -4,3 +4,4 @@
  "alt" .Title
  )
 }}
+{{- /* chomp trailing newline */ -}}
--- a/layouts/_default/_markup/render-link.html
+++ b/layouts/_default/_markup/render-link.html
@@ -5,5 +5,6 @@
    target="_blank" rel="noopener"
  {{ end }}
 >
-  {{ .Text | safeHTML }}
+  {{- .Text -}}
 </a>
+{{- /* chomp trailing newline */ -}}
--- a/layouts/_default/_markup/render-table.html
+++ b/layouts/_default/_markup/render-table.html
@@ -0,0 +1,41 @@
+<div class="table-wrapper">
+  <table
+    {{- range $k, $v := .Attributes }}
+      {{- if $v }}
+        {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+      {{- end }}
+    {{- end }}
+  >
+    <thead>
+      {{- range .THead }}
+        <tr>
+          {{- range . }}
+            <th
+              {{- with .Alignment }}
+                {{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
+              {{- end -}}
+            >
+              {{- .Text -}}
+            </th>
+          {{- end }}
+        </tr>
+      {{- end }}
+    </thead>
+    <tbody>
+      {{- range .TBody }}
+        <tr>
+          {{- range . }}
+            <td
+              {{- with .Alignment }}
+                {{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
+              {{- end -}}
+            >
+              {{- .Text -}}
+            </td>
+          {{- end }}
+        </tr>
+      {{- end }}
+    </tbody>
+  </table>
+</div>
+{{- /* chomp trailing newline */ -}}
--- a/layouts/partials/components/hero/default.html
+++ b/layouts/partials/components/hero/default.html
@@ -1,5 +1,5 @@
 <section class="hero">
-  <h1>{{ .Title }}</h1>
+  <h1 class="title">{{ .Title }}</h1>
  <div class="meta">
    <span class="date">{{ .Date | time.Format ":date_medium" }}</span>
    &middot;
--- a/layouts/partials/posts/list.html
+++ b/layouts/partials/posts/list.html
@@ -3,7 +3,7 @@
    {{ if not .Params.private }}
      <a href="{{- .RelPermalink -}}" class="post">
        <h1 class="title">{{ .Title }}</h1>
-        <div class="summary">{{ .Summary }}</div>
+        <div class="summary">{{ .Summary | plainify }}</div>
        <div class="meta">
          <span class="date">{{ .Date | time.Format ":date_medium" }}</span>
          &middot;