Merge pull request #15 from hmallen99/fix-scrolling

Update CSS with em values
hmallen99 · Aug 5, 2023 · 40f89e6 · 40f89e6
2 parents d4eea23 + 2fc6718
commit 40f89e6
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 60 deletions.
diff --git a/src/FilterNavigator/FilterNavigator.css b/src/FilterNavigator/FilterNavigator.css
@@ -3,15 +3,14 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
-    gap: 10px;
+    gap: 1em;
+    padding: 1em;
 }
 
 .filter-list-container {
     display: flex;
     flex-direction: column;
-    padding: 10px;
-    padding-bottom: 15px;
-    min-width: 250px;
+    min-width: 17em;
     border-radius: 12px;
     background-color: white;
     box-shadow: 1px 4px 6px 0px rgba(0, 0, 0, 0.20000000298023224);
@@ -23,8 +22,8 @@
 .search-cell {
     display: flex;
     flex-direction: column;
-    padding: 10px;
-    min-width: 250px;
+    padding: 0.5em;
+    min-width: 16em;
     border-radius: 12px;
     background-color: white;
     box-shadow: 1px 4px 6px 0px rgba(0, 0, 0, 0.20000000298023224);
@@ -37,7 +36,7 @@
     border-radius: 12px;
     background-color: white;
     box-shadow: 1px 4px 6px 0px rgba(0, 0, 0, 0.20000000298023224);
-    padding: 5px;
+    padding: 0.5em;
     border-color: rgb(80, 80, 80);
 }
 
@@ -48,14 +47,12 @@
 
 .filter-list-cell {
     width: 90%;
-    padding-top: 10px;
-    padding-bottom: 10px;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
     border-top: 1px solid rgba(111, 111, 111, 1);
     font-family: "Roboto", sans-serif;
     font-size: 20px;
     border-radius: 12px;
-    padding-left: 10px;
-    padding-right: 10px;
     color: rgba(111, 111, 111, 1);
     margin: 0 auto;
 }

diff --git a/src/Loading/Loading.css b/src/Loading/Loading.css
@@ -1,10 +1,9 @@
 .loading-container {
-    display: flex;
-    flex-direction: row;
-    width: calc(100% - 30px);
-    padding: 10px;
-    gap: 10px;
-    max-height: 85vh;
-    justify-content: center;
-    overflow-x: hidden;
-  }
+  display: flex;
+  flex-direction: row;
+  width: calc(100% - 2em);
+  padding: 0.5em;
+  gap: 0.5em;
+  justify-content: center;
+  overflow-x: hidden;
+}
diff --git a/src/Projects/Projects.css b/src/Projects/Projects.css
@@ -1,19 +1,16 @@
 .projects-container {
     display: flex;
     flex-direction: row;
-    width: calc(100% - 30px);
-    padding: 10px;
-    gap: 10px;
-    max-height: 85vh;
     justify-content: center;
     overflow-x: hidden;
+    width: 100%;
 }
 
 .project-list-content {
     display: flex;
     flex-direction: column;
-    padding: 10px;
-    gap: 10px;
+    padding: 1em;
+    gap: 0.5em;
     border-radius: 12px;
     overflow-y: scroll;
     flex-grow: 1;
@@ -22,14 +19,14 @@
 .projects-list-cell {
     display: flex;
     flex-direction: row;
-    padding: 10px;
-    gap: 10px;
+    padding: 0.5em;
+    gap: 0.5em;
     border-top: 1px solid rgba(111, 111, 111, 1);
     font-family: "Roboto", sans-serif;
     font-size: 20px;
     border-radius: 12px;
-    padding-left: 10px;
-    padding-right: 10px;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
     color: rgba(111, 111, 111, 1);
     margin: 0 auto;
     background-color: rgb(255, 255, 255);
@@ -45,7 +42,7 @@
 }
 
 .project-list-title {
-    max-width: 300px;
+    max-width: 15em;
     color: rgba(111, 111, 111, 1);
     font-size: 20px;
     letter-spacing: 0%;
@@ -64,8 +61,8 @@
 .project-content {
     display: flex;
     flex-direction: column;
-    padding: 10px;
-    gap: 10px;
+    padding: 0.5em;
+    gap: 0.5em;
     border-radius: 12px;
     background-color: white;
     box-shadow: 1px 4px 6px 0px rgba(0, 0, 0, 0.20000000298023224);
@@ -85,7 +82,7 @@
 }
 
 .project-thumbnail {
-    width: 100px;
-    height: 100px;
+    width: 5em;
+    height: 5em;
     border-radius: 12px;
 }
diff --git a/src/Resume/Resume.css b/src/Resume/Resume.css
@@ -1,11 +1,10 @@
 .resume-container {
     display: flex;
     flex-direction: row;
-    width: calc(100% - 30px);
+    width: calc(100% - 2em);
     height: 100vh;
-    padding: 10px;
-    gap: 10px;
-    max-height: 85vh;
+    padding: 1em;
+    gap: 1em;
     justify-content: center;
     overflow-x: hidden;
 }

diff --git a/src/TopBarContainer.css b/src/TopBarContainer.css
@@ -5,24 +5,17 @@
     align-items: flex-start;
 }
 
-
 .top-bar {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
     padding-top: 1em;
     padding-left: 1em;
+    padding-right: 1em;
     padding-bottom: 1em;
     gap: 1em;
-    width: 100%;
-}
-
-@media (max-width: 50em) {
-    .top-bar {
-        justify-content: center;
-        align-items: center;
-    }
+    /* width: 100%; */
 }
 
 .top-bar-title {

diff --git a/src/TopBarContainer.tsx b/src/TopBarContainer.tsx
@@ -7,21 +7,17 @@ import PlatformContext, { FormFactor } from "./Platform/PlatformContext";
 export default function TopBarContainer() {
     const platformInfo = React.useContext(PlatformContext)
 
-    const isWideMode = platformInfo.formFactor === FormFactor.Wide
+    const titleContent = platformInfo.formFactor === FormFactor.Wide ? "henry.allen" : "h.a"
 
     return (
         <>
             <div className="top-bar-container">
                 <div className="top-bar">
-                    {
-                        isWideMode ?
-                            <PlainLink to="/">
-                                <div className="top-bar-title">
-                                    henry.allen
-                                </div>
-                            </PlainLink>
-                            : null
-                    }
+                    <PlainLink to="/">
+                        <div className="top-bar-title">
+                            {titleContent}
+                        </div>
+                    </PlainLink>
                     <PlainLink to="/pages/projects">
                         <div className="top-bar-button">
                             Projects
@@ -33,8 +29,6 @@ export default function TopBarContainer() {
                         </div>
                     </PlainLink>
                 </div>
-
-
                 <Outlet />
             </div>
         </>