From 122f5c4abbb9b5d045153d7b48207f5b7bc79a09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eike=20Ha=C3=9F?= <eike-hass@web.de>
Date: Fri, 19 Jul 2024 18:38:27 +0200
Subject: [PATCH] fix todos heading

---
 web/src/pages/IntroShowTodos.tsx |  2 +-
 web/src/styles/pages/demo.scss   | 19 ++++++++++---------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/web/src/pages/IntroShowTodos.tsx b/web/src/pages/IntroShowTodos.tsx
index 151b6566..d3d6fb0e 100644
--- a/web/src/pages/IntroShowTodos.tsx
+++ b/web/src/pages/IntroShowTodos.tsx
@@ -40,7 +40,7 @@ const IntroShowTodos: React.FC = () => {
                 </div>
                 <div className='demo-intro' id='app'>
                     <div className='todos'>
-                        <span className='heading'><h2>{t("pages.demo.introShowTodos.welcomeToThe")}</h2>&nbsp;&nbsp;&nbsp;<h2 className='highlight'>{t("pages.demo.introShowTodos.selvDemo")}</h2></span>
+                        <span className='heading'><h2>{t("pages.demo.introShowTodos.welcomeToThe")}&nbsp;</h2><h2 className='highlight'>{t("pages.demo.introShowTodos.selvDemo")}</h2></span>
                         <Trans i18nKey="pages.demo.introShowTodos.hereIsTodo">
                             <h3>Here is <strong>your to-do list</strong> for today:</h3>
                         </Trans>
diff --git a/web/src/styles/pages/demo.scss b/web/src/styles/pages/demo.scss
index e416a1ae..ac2f9342 100644
--- a/web/src/styles/pages/demo.scss
+++ b/web/src/styles/pages/demo.scss
@@ -78,12 +78,6 @@
         }
         h2 {
             font-size: 32px;
-
-            &.highlight {
-                line-height: 6px;
-                margin-top: 12px;
-                border-bottom: 20px solid #B5F3D8;
-            }
         }
         h4 {
             font-size: 14px;
@@ -145,10 +139,17 @@
 
         h2 {
             &.highlight {
-                border-bottom: 24px solid #B5F3D8;
-                line-height: 6px;
-                margin-top: 24px;
+                position: relative;
                 font-weight: 900;
+                &::after{
+                    content: '';
+                    position: absolute;
+                    width: 100%;
+                    left: 0;
+                    bottom: -8px;
+                    z-index: -1;
+                    border-bottom: 24px solid #B5F3D8;
+                }
             }
         }