fix todos heading

iotaledger · Jul 19, 2024 · 122f5c4 · 122f5c4
1 parent fd4c2c7
commit 122f5c4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git 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
@@ -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;
+                }
             }
         }