From 5a826f103074fda5880d7c1338d8c01388cd95a8 Mon Sep 17 00:00:00 2001
From: Henry <hmallen99@gmail.com>
Date: Thu, 3 Aug 2023 23:45:46 -0700
Subject: [PATCH 1/2] Button css

---
 src/Home.tsx  |  9 ++-------
 src/index.css | 33 ++++++++-------------------------
 2 files changed, 10 insertions(+), 32 deletions(-)

diff --git a/src/Home.tsx b/src/Home.tsx
index 95e5745..367bdb1 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -1,12 +1,7 @@
 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">
@@ -14,10 +9,10 @@ export default function Home() {
                 <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
index dac3d07..0a4b4df 100644
--- 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"] {

From 2d4bc670a001ff52ff037ad06f6873d346528865 Mon Sep 17 00:00:00 2001
From: Henry <hmallen99@gmail.com>
Date: Thu, 3 Aug 2023 23:58:01 -0700
Subject: [PATCH 2/2] top bar compact

---
 src/TopBarContainer.css | 39 +++++++++++++++++++--------------------
 src/TopBarContainer.tsx |  3 +--
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/TopBarContainer.css b/src/TopBarContainer.css
index 4b9f454..8b4db1f 100644
--- a/src/TopBarContainer.css
+++ b/src/TopBarContainer.css
@@ -11,29 +11,23 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
-    padding-top: 10px;
-    padding-left: 10px;
-    padding-bottom: 10px;
-    gap: 20px;
+    padding-top: 1em;
+    padding-left: 1em;
+    padding-bottom: 1em;
+    gap: 1em;
     width: 100%;
 }
 
-.top-bar-compact {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    padding-top: 10px;
-    padding-left: 10px;
-    padding-bottom: 10px;
-    gap: 20px;
-    width: 100%;
+@media (max-width: 50em) {
+    .top-bar {
+        justify-content: center;
+        align-items: center;
+    }
 }
 
 .top-bar-title {
     display: flex;
     flex-direction: column;
-    max-width: 574px;
     color: rgb(94, 161, 255);
     font-size: 32px;
     letter-spacing: 0%;
@@ -44,15 +38,14 @@
 .top-bar-button {
     display: flex;
     flex-direction: row;
-    max-width: 80px;
     justify-content: center;
     align-items: center;
     border-radius: 12px;
     box-shadow: 1px 4px 6px 0px rgba(0, 0, 0, 0.20000000298023224);
-    padding-top: 5px;
-    padding-right: 20px;
-    padding-bottom: 5px;
-    padding-left: 20px;
+    padding-top: 0.25em;
+    padding-right: 1em;
+    padding-bottom: 0.25em;
+    padding-left: 1em;
     border-color: rgba(255, 255, 255, 1);
     border-width: 1px;
     border-style: solid;
@@ -67,4 +60,10 @@
 .top-bar-button:hover {
     background-color: rgb(183, 213, 255);
     border-color: rgb(183, 213, 255);
+}
+
+.more-posts {
+    font-size: 18px;
+    color: rgba(111, 111, 111, 1);
+    font-family: "Roboto", sans-serif;
 }
\ No newline at end of file
diff --git a/src/TopBarContainer.tsx b/src/TopBarContainer.tsx
index 0ab0517..23faa5f 100644
--- a/src/TopBarContainer.tsx
+++ b/src/TopBarContainer.tsx
@@ -8,12 +8,11 @@ export default function TopBarContainer() {
     const platformInfo = React.useContext(PlatformContext)
 
     const isWideMode = platformInfo.formFactor === FormFactor.Wide
-    const topBarContainerStyle = isWideMode ? "top-bar" : "top-bar-compact"
 
     return (
         <>
             <div className="top-bar-container">
-                <div className={topBarContainerStyle}>
+                <div className="top-bar">
                     {
                         isWideMode ?
                             <PlainLink to="/">