feat: add styles for abbr, sub, sup, kbd, mark HTML elements(tags)

hugo-sid · Mar 15, 2023 · 5efbd28 · 5efbd28
1 parent dca0a53
commit 5efbd28
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 24 deletions.
diff --git a/assets/sass/_base.scss b/assets/sass/_base.scss
@@ -91,23 +91,6 @@ hr {
   border-color: $light;
 }
 
-// kbd tag
-kbd {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border: 1px solid $light;
-  border-radius: 2px;
-  color: $black;
-  display: inline-block;
-  font-size: $small-font-size;
-  line-height: 1.4;
-  font-family: $mono-family;
-  margin: 0 0.1em;
-  font-weight: $bold-weight;
-  padding: 0.01em 0.4em;
-  text-shadow: 0 1px 0 $white;
-}
-
 // Image
 img {
   max-width: 100%;

diff --git a/assets/sass/_dark.scss b/assets/sass/_dark.scss
@@ -67,9 +67,8 @@ body[data-theme="dark"] {
 
   // kbd tag
   kbd {
-    border-color: $dark-light;
-    color: $dark-white;
-    text-shadow: 0 1px 0 $dark-black;
+    color: $dark-inline-code-text;
+    background-color: $dark-inline-code-bg;
   }
 
   // horizontal rule

diff --git a/assets/sass/_layout.scss b/assets/sass/_layout.scss
@@ -216,8 +216,43 @@
   }
 }
 
-.rss {
+
+/* Add styles for abbr, sub, sup, kbd, mark */
+
+abbr {
+  text-decoration: none;
+  border-bottom: 1px dotted #000;
+}
+
+sub, sup {
+  font-size: 79%;
+  line-height: 0;
   position: relative;
-  bottom: -3px;
-  outline: none;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+kbd {
+  font-size: 85%;
+  border-radius: 3px;
+  color: $inline-code-text;
+  background: $inline-code-bg;
+  display: inline-block;
+  font-family: Consolas, monaco, monospace;
+  line-height: 1;
+  padding: 2px 4px;
+  white-space: nowrap;
+}
+
+mark {
+  background: #ff0;
+  color: #000;
+  border-radius: 3px;
 }
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -15,6 +15,8 @@ enableEmoji = true
 [markup]
   [markup.highlight]
     noClasses = false
+  [markup.goldmark.renderer]
+    unsafe = true
 
 [menu]
   [[menu.main]] 

diff --git a/exampleSite/content/posts/markdown-syntax/index.md b/exampleSite/content/posts/markdown-syntax/index.md
@@ -159,6 +159,6 @@ H<sub>2</sub>O
 
 X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
 
-Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
+Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.
 
 Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.