Optimize the style, enable webkit overflow rules, reduce margins to fix text placement

1 files changed, 51 insertions, 41 deletions

diff --git a/src/app.css b/src/app.css
index f99121b..6334a7a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -16,15 +16,27 @@
   }
 }
 
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  border: 0;
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 1.125rem;
+  line-height: 1.8;
+  background: var(--bg-color);
+  color: var(--text-color);
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  overflow: auto;
+
+  /* Hide scrollbar, preserve scroll */
+  -ms-overflow-style: none;  /* IE/Edge */
+  scrollbar-width: none;     /* Firefox */
+}
+
+body::-webkit-scrollbar {
+  width: 0;
+  height: 0;
 }
 
 a {
@@ -32,8 +44,8 @@ a {
   font-weight: 700;
   text-decoration: underline;
   text-decoration-color: transparent;
-  text-underline-offset: 4px;
-  text-decoration-thickness: 2px;
+  text-underline-offset: 0.25em;
+  text-decoration-thickness: 0.125em;
   transition: color 0.3s, text-decoration-color 0.3s;
 }
 
@@ -44,9 +56,20 @@ a:focus {
 }
 
 a:focus-visible {
-  outline: 3px solid var(--accent-color);
-  outline-offset: 4px;
-  border-radius: 3px;
+  outline: 0.2rem solid var(--accent-color);
+  outline-offset: 0.25rem;
+  border-radius: 0.2rem;
+}
+
+.sr-only {
+  position: absolute;
+  width: 0.0625rem;
+  height: 0.0625rem;
+  margin: -0.0625rem;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  border: 0;
 }
 
 .highlight {
@@ -54,20 +77,6 @@ a:focus-visible {
   color: #fcfdfe;
 }
 
-body {
-  margin: 0;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  font-size: 1.125rem;
-  line-height: 1.8;
-  background: var(--bg-color);
-  color: var(--text-color);
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  overflow-x: hidden;
-}
-
 h1 {
   font-size: 1.75rem;
 }
@@ -79,17 +88,12 @@ h2 {
   font-size: 2rem;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 48em) {
   h1, h2 {
     font-size: 1.75rem;
   }
 }
 
-section {
-  margin-bottom: 3em;
-  padding: 0 2%;
-}
-
 header {
   padding: 0.5em;
   text-align: center;
@@ -108,7 +112,7 @@ header h1 {
   gap: 2rem;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 48em) {
   .header-top {
     justify-content: space-between;
     text-align: left;
@@ -146,7 +150,7 @@ nav a {
   color: var(--text-color); 
 }
 
-@media (max-width: 768px) {
+@media (max-width: 48em) {
   .menu-toggle {
     display: block;
   }
@@ -165,17 +169,23 @@ nav a {
 
 main {
   flex-grow: 1;
-  max-width: 900px;
-  margin: 0 auto;
-  padding: 2em;
+  width: 100%;
+  max-width: none;
+  margin: 0;
+  padding: 1em;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 48em) {
   main {
-    padding: 1.5em;
+    padding: 1em;
   }
 }
 
+section {
+  margin-bottom: 2em;
+  padding: 0 2%;
+}
+
 footer {
   padding: 0.5em;
   text-align: center;