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;