Update navigation style and update max-width for body

Author: menghif

src/components/Navigation.astro

@@ -20,7 +20,7 @@ const pages = [
   }
 </div>
 
-<style is:global>
+<style>
   .nav-links {
     display: flex;
     flex-wrap: wrap;
@@ -37,4 +37,8 @@ const pages = [
   .active {
     background-color: var(--surface4);
   }
+
+  .nav-links > :not(.active) {
+    opacity: 80%;
+  }
 </style>

src/styles/global.css

@@ -91,7 +91,7 @@ body {
 #body-content {
   margin: 0 auto;
   width: 100%;
-  max-width: 48rem;
+  max-width: 54rem;
 }
 
 main {