refactor: reconfigure landmark and content

adamalston · Dec 10, 2023 · 6f914bf · 6f914bf
1 parent f20142d
commit 6f914bf
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/src/App/App.tsx b/src/App/App.tsx
@@ -37,13 +37,13 @@ export const App = () => {
 
   return isReady ? (
     <AppProvider config={config} isMobile={isMobile}>
-      <div className="app">
+      <main className="app">
         <Toggle />
         <Content />
         <Buttons />
         <Footer />
         <Particles />
-      </div>
+      </main>
     </AppProvider>
   ) : (
     <></>

diff --git a/src/components/Content.tsx b/src/components/Content.tsx
@@ -12,15 +12,16 @@ const sharedStyles = css`
 `;
 
 const C = {
-  Name: styled.div<{ $theme: Theme }>`
+  Name: styled.h1<{ $theme: Theme }>`
     ${sharedStyles};
     font-size: 6rem;
+    margin: 0;
     color: ${({ $theme }) => $theme.primaryTextColor};
     @media only screen and (max-device-width: 820px) and (-webkit-min-device-pixel-ratio: 2) {
       font-size: 4.5rem;
     }
   `,
-  Title: styled.div<{ $theme: Theme }>`
+  Title: styled.h2<{ $theme: Theme }>`
     ${sharedStyles};
     font-size: 3.5rem;
     margin: 4rem 0;

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -19,8 +19,11 @@ const F = {
   `,
   Link: styled.a<{ $theme: Theme }>`
     transition: color 0.5s linear;
-    text-decoration: none;
     color: ${({ $theme }) => $theme.secondaryTextColor};
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
   `,
 };
 

diff --git a/src/components/Toggle.tsx b/src/components/Toggle.tsx
@@ -6,7 +6,7 @@ import { Moon, Sun } from 'icons';
 import { Theme } from 'types';
 
 const T = {
-  Container: styled.main`
+  Container: styled.div`
     position: fixed;
     z-index: 1;
     top: 1rem;