Button css

hmallen99 · Aug 4, 2023 · 5a826f1 · 5a826f1
1 parent f12333b
commit 5a826f1
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 32 deletions.
diff --git a/src/Home.tsx b/src/Home.tsx
@@ -1,23 +1,18 @@
 import * as React from "react";
 import PlainLink from "./PlainLink";
-import PlatformContext, { FormFactor } from "./Platform/PlatformContext";
 
 export default function Home() {
-    const platformInfo = React.useContext(PlatformContext)
-
-    const buttonStyle = platformInfo.formFactor === FormFactor.Wide ? "button" : "button-compact"
-
     return (
         <>
             <div className="container">
                 <div className="title">henry.allen</div>
                 <div className="navigator">
                     <div className="columns">
                         <PlainLink to="/pages/projects">
-                            <div className={buttonStyle}>Projects</div>
+                            <div className="button">Projects</div>
                         </PlainLink>
                         <PlainLink to="/pages/resume">
-                            <div className={buttonStyle}>Resume</div>
+                            <div className="button">Resume</div>
                         </PlainLink>
                     </div>
                 </div>

diff --git a/src/index.css b/src/index.css
@@ -68,31 +68,14 @@ body {
   font-family: "Roboto", sans-serif;
 }
 
-.button-compact {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  border-radius: 25px;
-  box-shadow: 1px 4px 6px 0px rgba(0, 0, 0, 0.20000000298023224);
-  padding-top: 1em;
-  padding-right: 5em;
-  padding-bottom: 1em;
-  padding-left: 5em;
-  border-color: rgba(255, 255, 255, 1);
-  border-width: 1px;
-  border-style: solid;
-  background-color: rgba(255, 255, 255, 1);
-  color: rgba(111, 111, 111, 1);
-  font-size: 1.5em;
-  letter-spacing: 0%;
-  text-align: left;
-  font-family: "Roboto", sans-serif;
-}
-
-.button-compact:hover {
-  background-color: rgb(183, 213, 255);
-  border-color: rgb(183, 213, 255);
+@media (max-width: 50em) {
+  .button {
+    padding-top: 1em;
+    padding-right: 5em;
+    padding-bottom: 1em;
+    padding-left: 5em;
+    font-size: 1.5em;
+  }
 }
 
 input[type="text"] {