chore: update minor styles

nmerget · nmerget · commit 7a0b5c0638e2 · 2024-02-19T11:32:10.000+01:00
diff --git a/assets/custom/peace-in-a-box.svg b/assets/custom/peace-in-a-box.svg
@@ -7,6 +7,6 @@
 >
     <path
             d="M80.8 20.4L58.8 7.6C50.8 2.8 45.2 2.8 37.2 7.6C30.4 11.6 15.2 20.4 15.2 20.4C9.2 23.6 8 28 8 31.2V64C8 68.4 10.4 72 15.2 74.8L37.2 87.6C42.4 90.4 45.2 92 48 92C50.8 92 54 90.4 58.8 87.6C67.6 82.4 80.8 74.8 80.8 74.8C85.6 72 88 68.4 88 64V31.2C88 28 86.8 23.6 80.8 20.4ZM41.2 14.4C46.8 11.2 49.2 11.2 54.8 14.4L76.4 26.8C73.6 28.4 62.8 34.8 55.2 39.2C50.4 42 46 42 41.6 39.2C34.8 35.6 25.6 30 19.6 26.8C22.8 25.2 35.2 18 41.2 14.4ZM41.2 80.8L19.2 68C16.4 66.4 16 65.2 16 64V34C21.6 37.2 30.8 42.8 37.2 46C44 50 44 50 44 57.6V58V60V82C43.2 82 42.4 81.2 41.2 80.8ZM76.8 68C76.8 68 63.6 75.6 54.8 80.8C53.6 81.6 52.8 82 52 82.4V60.4V58.4V58C52 50.4 52 50.4 58.8 46.4C64.8 42.8 74 37.6 80 34.4V64C80 65.2 79.6 66.4 76.8 68Z"
-            fill="#595E67"
+            fill="#1A1C1F"
     />
 </svg>
diff --git a/db-ux-design-system.html b/db-ux-design-system.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -49,25 +49,15 @@
       </div>
     </header>
     <main class="landing-main">
-      <h1>Hello World</h1>
+      <section id="section-header">
+        <h1>
+          DB UX<br />
+          Design System
+        </h1>
+        <h3 data-variant="light">By all, for all</h3>
+      </section>
       <section id="section-contact" class="section-with-max-width">
-        <h2>insert Gif here</h2>
-        <h2>
-          By all, for all:<br />
-          The DB UX Design System
-        </h2>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="96"
-          height="96"
-          viewBox="0 0 96 96"
-          fill="none"
-        >
-          <path
-            d="M80.8 20.4L58.8 7.6C50.8 2.8 45.2 2.8 37.2 7.6C30.4 11.6 15.2 20.4 15.2 20.4C9.2 23.6 8 28 8 31.2V64C8 68.4 10.4 72 15.2 74.8L37.2 87.6C42.4 90.4 45.2 92 48 92C50.8 92 54 90.4 58.8 87.6C67.6 82.4 80.8 74.8 80.8 74.8C85.6 72 88 68.4 88 64V31.2C88 28 86.8 23.6 80.8 20.4ZM41.2 14.4C46.8 11.2 49.2 11.2 54.8 14.4L76.4 26.8C73.6 28.4 62.8 34.8 55.2 39.2C50.4 42 46 42 41.6 39.2C34.8 35.6 25.6 30 19.6 26.8C22.8 25.2 35.2 18 41.2 14.4ZM41.2 80.8L19.2 68C16.4 66.4 16 65.2 16 64V34C21.6 37.2 30.8 42.8 37.2 46C44 50 44 50 44 57.6V58V60V82C43.2 82 42.4 81.2 41.2 80.8ZM76.8 68C76.8 68 63.6 75.6 54.8 80.8C53.6 81.6 52.8 82 52 82.4V60.4V58.4V58C52 50.4 52 50.4 58.8 46.4C64.8 42.8 74 37.6 80 34.4V64C80 65.2 79.6 66.4 76.8 68Z"
-            fill="#595E67"
-          />
-        </svg>
+        <img src="/assets/custom/peace-in-a-box.svg" alt="DB UX Icon" />
         <p>
           Every bit in our world is designed & coded with the primal human
           desire to connect with one another while
@@ -78,9 +68,9 @@ <h2>
           consistent, efficient, and user-centric digital solutions – shaping
           the mobility of the future.
         </p>
-        <a class="db-button" data-variant="primary" href="mailto:"
-          >Meet the team</a
-        >
+        <a class="db-button" data-variant="primary" href="mailto:db-ux-designsystem@deutschebahn.com">
+          Contact Us
+        </a>
       </section>
       <section id="section-main-features" class="section-with-max-width">
         <h2>How it works</h2>
diff --git a/styles/styles.css b/styles/styles.css
@@ -71,27 +71,21 @@ h6 {
       position: absolute;
       border-radius: var(--db-border-radius-md);
       border-inline-start: none;
-      border-block-end: var(--db-border-height-lg) solid
-        var(--db-brand-origin-enabled);
-      inset-block-end: calc(-1 * var(--db-spacing-fixed-xs));
+      border-block-end: 8px solid var(--db-brand-origin-enabled);
+      inset-block-end: calc(-1 * var(--db-spacing-fixed-xl));
       inline-size: 72px;
       block-size: auto;
       inset-inline-start: 50%;
       inset-block-start: auto;
       transform: translate(-50%, 0);
     }
-
-    &::after {
-      content: " ❤️";
-    }
   }
 
   > section {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-items: center;
-    gap: var(--db-spacing-fixed-xl);
 
     p {
       /* 45rem are ~768 px for tablet*/
