From bed1ba7cd8e2d344ec145c13db6b075f4c31d940 Mon Sep 17 00:00:00 2001
From: Frederik Riewerts <frederik.riewerts@gmail.com>
Date: Wed, 21 Feb 2024 08:05:53 +0100
Subject: [PATCH] chore(pv-stylemark): optimize example styles

---
 .../tasks/templates/lsg-component.hbs         |  2 +-
 packages/pv-stylemark/tasks/templates/lsg.hbs |  2 +-
 .../dds-component/dds-component.scss          | 23 ++++++++++++++++++-
 .../components/dds-example/dds-example.scss   |  7 +++---
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/packages/pv-stylemark/tasks/templates/lsg-component.hbs b/packages/pv-stylemark/tasks/templates/lsg-component.hbs
index 846515d..9f82ad4 100644
--- a/packages/pv-stylemark/tasks/templates/lsg-component.hbs
+++ b/packages/pv-stylemark/tasks/templates/lsg-component.hbs
@@ -1,6 +1,6 @@
 <section class="dds-component" id="{{componentName}}">
   <h2 class="dds-component__name">{{options.name}}</h2>
   <div class="dds-component__description">
-    {{{description}}}
+{{{description}}}
   </div>
 </section>
diff --git a/packages/pv-stylemark/tasks/templates/lsg.hbs b/packages/pv-stylemark/tasks/templates/lsg.hbs
index 4c76cb5..6cc82b8 100644
--- a/packages/pv-stylemark/tasks/templates/lsg.hbs
+++ b/packages/pv-stylemark/tasks/templates/lsg.hbs
@@ -25,7 +25,7 @@
     <main class="dds-page__main">
       {{#each lsgData}}
         {{#each categoryItems}}
-          {{> lsg-component }}
+{{> lsg-component }}
         {{/each}}
       {{/each}}
     </main>
diff --git a/packages/pv-stylemark/ui/components/dds-component/dds-component.scss b/packages/pv-stylemark/ui/components/dds-component/dds-component.scss
index 1f87f69..ea8573b 100644
--- a/packages/pv-stylemark/ui/components/dds-component/dds-component.scss
+++ b/packages/pv-stylemark/ui/components/dds-component/dds-component.scss
@@ -49,6 +49,19 @@
       margin: 0 0 16px;
     }
 
+    a {
+      color: $dds-color__black-070;
+      text-underline-offset: 2px;
+      transition: color 0.3s ease-in-out, text-underline-offset 0.3s ease-in-out;
+
+      @media (hover: hover) {
+        &:hover {
+          color: $dds-color__black-090;
+          text-underline-offset: 3px;
+        }
+      }
+    }
+
     dds-example {
       margin: 24px 0 40px;
 
@@ -62,8 +75,16 @@
     }
 
     code {
-      background: $dds-color__black-010;
+      display: inline-block;
+      padding: 2px 8px;
+      margin-bottom: 4px;
+      background: $dds-color__black-020;
+      color: $dds-color__black-070;
       border-radius: 4px;
     }
+
+    pre code {
+      background: $dds-color__black-010;
+    }
   }
 }
diff --git a/packages/pv-stylemark/ui/components/dds-example/dds-example.scss b/packages/pv-stylemark/ui/components/dds-example/dds-example.scss
index 2d848bf..ad0be8d 100644
--- a/packages/pv-stylemark/ui/components/dds-example/dds-example.scss
+++ b/packages/pv-stylemark/ui/components/dds-example/dds-example.scss
@@ -2,10 +2,8 @@ dds-example {
   display: flex;
   flex-direction: column;
   gap: 8px;
-}
 
-.dds-example {
-  &__example-link {
+  .dds-example__example-link {
     display: inline-block;
     margin-left: auto;
     color: inherit;
@@ -21,10 +19,13 @@ dds-example {
     @media (hover: hover) {
       &:hover {
         background: $dds-color__black-080;
+        color: $dds-color__white;
       }
     }
   }
+}
 
+.dds-example {
   &__example-box {
     height: 50vh;
     border: 1px solid #d0d0d0;