chore: add styles to WP blocks

5 files changed, 262 insertions, 15 deletions

diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index 7dfc720..c232f9c 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -152,13 +152,14 @@ $color_blue: hsl(206, 75%, 31%);
 $color_blue-bright: hsl(206, 77%, 36%);
 $color_blue-brighter: hsl(200, 75%, 45%);
 $color_blue-dark: hsl(206, 76%, 25%);
+$color_blue-darker: hsl(206, 60%, 20%);
 $color_grey: hsl(206, 15%, 80%);
+$color_grey-bright: hsl(206, 20%, 86%);
+$color_grey-brighter: hsl(206, 20%, 92%);
 $color_grey-dark: hsla(206, 10%, 25%);
 $color_grey-dark-o70: hsla(206, 10%, 25%, 0.7);
 $color_grey-dark-o40: hsla(206, 10%, 25%, 0.4);
 $color_grey-dark-o20: hsla(206, 10%, 25%, 0.2);
-$color_orange: hsl(32, 100%, 55%);
+$color_orange: hsl(34, 100%, 24%);
 $color_white: hsl(206, 15%, 97%);
 $color_white-o90: hsl(206, 15%, 97%, 0.9);
-$test: hsl(206, 54%, 95%);
-$test2: hsl(210, 40%, 96%);
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;
+}
diff --git a/src/styles/components/_wp-blocks.scss b/src/styles/components/_wp-blocks.scss
new file mode 100644
index 0000000..4d21893
--- /dev/null
+++ b/src/styles/components/_wp-blocks.scss
@@ -0,0 +1,159 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+@use "@styles/abstracts/placeholders";
+
+.wp-block-quote {
+  margin: var(--spacing-sm) 0;
+  padding: var(--spacing-sm);
+  position: relative;
+  border: fun.convert-px(1) solid var(--color-primary-lighter);
+  border-left: fun.convert-px(5) solid var(--color-primary-lighter);
+  box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light),
+    fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
+      var(--color-shadow-lighter),
+    fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
+      var(--color-shadow-lighter);
+  font-style: italic;
+
+  > *:last-child {
+    margin: 0;
+  }
+
+  cite {
+    font-size: var(--font-size-sm);
+    font-style: normal;
+    font-weight: 600;
+  }
+}
+
+.wp-block-code,
+.wp-block-preformatted {
+  margin: 0 auto var(--spacing-md);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--color-bg-secondary);
+  border: fun.convert-px(1) solid var(--color-border-lighter);
+  color: var(--color-primary-darker);
+}
+
+.wp-block-code[class*="language-"] {
+  margin: var(--spacing-sm) 0;
+  padding: 0 var(--spacing-sm);
+}
+
+.wp-block-columns {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--spacing-md);
+  margin: var(--spacing-md) 0;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  &.are-vertically-aligned-center {
+    align-items: center;
+  }
+}
+
+.wp-block-column {
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.wp-block-gallery {
+  .blocks-gallery-grid {
+    @extend %reset-list;
+
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--spacing-sm);
+  }
+
+  .blocks-gallery-item {
+    figure {
+      margin: 0;
+    }
+
+    a {
+      display: block;
+      box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light),
+        fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
+          var(--color-shadow-lighter),
+        fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
+          var(--color-shadow-lighter);
+
+      &:hover,
+      &:focus {
+        transform: scale(1.05);
+        box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light),
+          fun.convert-px(3) fun.convert-px(3) fun.convert-px(2) 0
+            var(--color-shadow-lighter),
+          fun.convert-px(5) fun.convert-px(5) fun.convert-px(8) 0
+            var(--color-shadow-lighter);
+      }
+
+      &:focus {
+        outline: solid var(--color-primary-light);
+      }
+
+      &:active {
+        transform: scale(0.95);
+        box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light),
+          fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
+            var(--color-shadow-lighter),
+          0 0 0 0 var(--color-shadow-lighter);
+        outline: none;
+      }
+    }
+  }
+
+  &.aligncenter {
+    .blocks-gallery-grid {
+      align-items: center;
+    }
+  }
+
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      &.columns-2 {
+        .blocks-gallery-grid {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+      }
+
+      &.columns-3 {
+        .blocks-gallery-grid {
+          grid-template-columns: repeat(3, minmax(0, 1fr));
+        }
+      }
+    }
+  }
+}
+
+.wp-block-image {
+  img {
+    display: block;
+    margin: auto;
+    box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light),
+      fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
+        var(--color-shadow-lighter),
+      fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
+        var(--color-shadow-lighter);
+    text-align: center;
+  }
+}
+
+.wp-block-video {
+  box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow-light),
+    fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
+      var(--color-shadow-lighter),
+    fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
+      var(--color-shadow-lighter);
+}
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 8a3daca..ec40a35 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -18,3 +18,10 @@
 @use "base/helpers";
 @use "base/spacings";
 @use "base/typography";
+
+/**
+ * 3.0. Components
+ *
+ * Define styles for external components (like WordPress blocks).
+ */
+@use "components/wp-blocks";