chore: add styles to WP blocks

2 files changed, 92 insertions, 12 deletions

diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss
index 441b20c..f33ff00 100644
--- a/src/styles/base/_colors.scss
+++ b/src/styles/base/_colors.scss
@@ -3,6 +3,7 @@
 :root {
   --color-bg: #{var.$color_white};
   --color-bg-opacity: #{var.$color_white-o90};
+  --color-bg-secondary: #{var.$color_grey-brighter};
   --color-fg: #{var.$color_black};
   --color-fg-light: #{var.$color_grey-dark};
   --color-fg-inverted: #{var.$color_white};
@@ -10,8 +11,11 @@
   --color-primary-light: #{var.$color_blue-bright};
   --color-primary-lighter: #{var.$color_blue-brighter};
   --color-primary-dark: #{var.$color_blue-dark};
+  --color-primary-darker: #{var.$color_blue-darker};
+  --color-secondary: #{var.$color_orange};
   --color-border: #{var.$color_grey-dark};
   --color-border-light: #{var.$color_grey};
+  --color-border-lighter: #{var.$color_grey-bright};
   --color-shadow: #{var.$color_grey-dark-o70};
   --color-shadow-light: #{var.$color_grey-dark-o40};
   --color-shadow-lighter: #{var.$color_grey-dark-o20};
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 39f0bfa..21f0e73 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -1,4 +1,6 @@
-.greetings,
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/variables" as var;
+
 h1 {
   font-size: var(--font-size-3xl);
 }
@@ -24,7 +26,6 @@ h6 {
   font-size: var(--font-size-md);
 }
 
-.greetings,
 h1,
 h2,
 h3,
@@ -34,15 +35,9 @@ h6 {
   color: var(--color-primary-dark);
   font-family: var(--font-family-secondary);
   font-weight: 500;
+  letter-spacing: 0.01ex;
   margin: 0 0 var(--spacing-sm);
-}
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
   * + {
     h2,
     h3,
@@ -94,6 +89,10 @@ ol {
       margin-bottom: 0;
     }
   }
+
+  ::marker {
+    color: var(--color-secondary);
+  }
 }
 
 ul {
@@ -103,7 +102,7 @@ ul {
 dl {
   display: flex;
   flex-flow: row wrap;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-2xs);
 }
 
 ul,
@@ -122,22 +121,80 @@ dt {
 }
 
 dd {
-  flex: 1 1 auto;
+  flex: 0 0 auto;
   margin: 0;
 }
 
 a {
+  background: linear-gradient(
+      to top,
+      var(--color-primary) 50%,
+      var(--color-bg) 50%
+    )
+    0 0 / 100% 200% no-repeat;
   color: var(--color-primary);
-  text-decoration-thickness: 15%;
+  text-decoration-thickness: 13%;
   text-underline-offset: 20%;
+  transition: all 0.3s linear 0s, text-decoration 0.18s ease-in-out 0s;
 
   &:hover {
     color: var(--color-primary-light);
+    text-decoration-thickness: 23%;
+  }
+
+  &:focus {
+    background-position: 0 100%;
+    color: var(--color-fg-inverted);
   }
 
   &:active {
+    background-position: 0 0;
     color: var(--color-primary-dark);
+    text-decoration-thickness: 18%;
+  }
+
+  &[hreflang],
+  &.external {
+    grid-template-columns: minmax(0, 1fr) fun.convert-px(50);
+
+    &::after {
+      display: inline-flex;
+      flex-flow: row nowrap;
+      width: fun.convert-px(14);
+      margin-right: 0.5ex;
+      font-size: var(--font-size-sm);
+    }
+  }
+
+  &.external {
+    &::after {
+      content: "\0000a0"url(fun.encode-svg('<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+    }
   }
+
+  &[hreflang] {
+    &::after {
+      content: "\0000a0["attr(hreflang) "]";
+      text-decoration: none;
+    }
+
+    &.external {
+      &::after {
+        content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg(
+            '<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
+          ));
+        margin-right: 4.5ex;
+      }
+    }
+  }
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  line-height: var(--line-height);
 }
 
 code,
@@ -147,6 +204,15 @@ var {
   font-family: var(--font-family-mono);
 }
 
+:not(pre) > code {
+  background: var(--color-bg-secondary);
+  border: fun.convert-px(1) solid var(--color-border-lighter);
+  border-radius: fun.convert-px(3);
+  color: var(--color-primary-darker);
+  padding: fun.convert-px(2) fun.convert-px(5) fun.convert-px(1)
+    fun.convert-px(5);
+}
+
 pre {
   display: block;
   max-width: 100%;
@@ -156,3 +222,13 @@ pre {
   word-break: normal;
   word-wrap: normal;
 }
+
+figure {
+  margin: var(--spacing-md) 0;
+}
+
+figcaption {
+  margin-top: var(--spacing-xs);
+  font-size: var(--font-size-sm);
+  text-align: center;
+}