Some responsiveness improvements

hopperelec · Jun 8, 2024 · 2cc4c16 · 2cc4c16
1 parent abb69fa
commit 2cc4c16
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 8 deletions.
diff --git a/src/lib/components/monaco-viewer/MonacoViewer.svelte b/src/lib/components/monaco-viewer/MonacoViewer.svelte
@@ -233,6 +233,7 @@ h3, span {
   background-color: var(--editor-color);
   overflow-y: auto; /* Could be replaced with Monaco scrollbar */
   user-select: text;
+  font-size: 14px;
 
   /*
     22px on top for breadcrumbs

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -20,4 +20,8 @@ import Projects from "./Projects.svelte";
 :global(body) {
   overflow-x: hidden;
 }
+
+main {
+  font-size: max(14px, min(2vw, 2vh));
+}
 </style>
diff --git a/src/routes/Contact.svelte b/src/routes/Contact.svelte
@@ -96,7 +96,6 @@ section {
 
 p {
   padding: 1em;
-  font-size: 1.5em;
   text-align: center;
 }
 
@@ -132,7 +131,6 @@ li {
 img {
   width: 2em;
   height: 2em;
-  padding-right: .5em;
 }
 
 a {

diff --git a/src/routes/Hero.svelte b/src/routes/Hero.svelte
@@ -62,9 +62,9 @@ setInterval(changeRollingText, 6000);
   <style>
     /* HopperIcon */
     section > svg {
-        max-width: 50%;
-        max-height: 50%;
-        padding-bottom: 20px;
+      max-width: 33%;
+      max-height: 33%;
+      padding-bottom: min(20px, 3%);
     }
   </style>
 </svelte:head>
@@ -80,7 +80,7 @@ section {
   flex-direction: column;
   filter: drop-shadow(0 0 32px black);
   font-family: "Courier New", Courier, monospace;
-  font-size: 3.5em;
+  font-size: 1.5em;
   font-weight: bold;
   text-align: center;
 }

diff --git a/src/routes/NavBar.svelte b/src/routes/NavBar.svelte
@@ -23,7 +23,9 @@ a {
 }
 
 nav {
-  border-bottom: 5px solid white;
+  --nav-border: 0.2em solid white;
+
+  border-bottom: var(--nav-border);
   background-color: #646464;
   font-size: 1.5em;
   font-weight: bold;
@@ -70,7 +72,7 @@ li {
   }
 
   nav {
-    border: 5px solid white;
+    border: var(--nav-border);
     border-top: none;
     border-radius: 0 0 1em 1em;
   }