Improve page CSS

michaeldoylecs · Dec 2, 2024 · 5235c40 · 5235c40
1 parent 918efd6
commit 5235c40
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 6 deletions.
diff --git a/public/github-mark.svg b/public/github-mark.svg
diff --git a/src/App.css b/src/App.css
@@ -14,8 +14,15 @@
 }
 
 header {
-  height: 50px;
-  background-color: blue;
+  height: 75px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+header h2 {
+  color: black;
+  font-size: 1.75rem;
 }
 
 main {
@@ -29,5 +36,24 @@ main {
 
 footer {
   height: 50px;
-  background-color: yellow;
-}
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+footer a {
+  color: black;
+  font-size: 0.8rem;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  gap: 3px;
+}
+
+footer a:hover {
+  color: #2e2e2e
+}
+
+footer a:hover img {
+  filter: brightness(150%);
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,13 +5,18 @@ function App() {
   return (
     <div className="app">
       <header>
-
+        <h2>
+          Daily Minesweeper
+        </h2>
       </header>
       <main>
         <Minesweeper />
       </main>
       <footer>
-
+        <a href="https://github.com/michaeldoylecs" target="_blank">
+          <img src="github-mark.svg" width="20px" height="20px"></img>
+          Michael Doyle
+        </a>
       </footer>
     </div>
   )