Fixed a issue with the app name

Also made the logo in header a link to home page.
derveydylan · Aug 6, 2024 · 92fc085 · 92fc085
1 parent 7f3832f
commit 92fc085
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 14 deletions.
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
@@ -1,5 +1,5 @@
 <header>
-    <p id="logo">Togglight</p>
+    <a routerLink="/"><p id="logo">Togglight</p></a>
 
     @if(isMenuOpen)
     {

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -1,9 +1,9 @@
 <div class="home">
     <div class="logo">
-        <img src="assets/logo/Logo_black_bg.svg" alt="Togglight logo">
+        <p id="logo">Togglight</p>
     </div>
 
-    <p>Puzzle Game</p>
+    <p class="home-subtitle">Puzzle Game</p>
 
     <nav>
         <a class="btn btn-primary" (click)="onPlay()">Play</a>

diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
@@ -11,14 +11,9 @@
         justify-content: center;
         align-items: center;
         margin-bottom: 40px;
-
-        img 
-        {
-            width: 350px;
-        }
     }
 
-    p 
+    .home-subtitle
     {
         font-size: 40px;
         font-style: italic;
@@ -50,8 +45,8 @@
 
 @media (max-width: 600px)
 {
-    img
+    #logo
     {
-        width: 275px !important;
+        font-size: 75px !important;
     }
 }
diff --git a/src/styles.scss b/src/styles.scss
@@ -63,12 +63,23 @@ body
 {
     font-family: 'Lobster';
     color: var(--white);
+    font-size: 100px;
+    user-select: none;
+    margin: 5px 0 0 0;
+}
+
+header #logo
+{
     font-size: 38px;
     width: 150px;
     height: 60px;
-    user-select: none;
-    margin: 5px 0 0 0;
-    align-self: center;
+}
+
+header a:has(#logo)
+{
+    width: max-content;
+    box-shadow: none;
+    color: var(--white);
 }
 
 // --------------------------------------------------------------------------------