enhancement(app): Sort CSS; Other minor improvements

djsiddz · Feb 7, 2024 · a94f3b2 · a94f3b2
1 parent a414158
commit a94f3b2
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 20 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -13,12 +13,12 @@ const currentYear = new Date().getFullYear();
 </footer>
 <style>
   footer {
-    display: flex;
-    padding: 1rem 0;
     color: whitesmoke;
+    display: flex;
+    flex-wrap: wrap;
     font-size: 0.75rem;
     gap: 1.5rem;
-    flex-wrap: wrap;
+    padding: 1rem 0;
   }
   @media (orientation: portrait) {
     footer {

diff --git a/src/components/Nav.astro b/src/components/Nav.astro
@@ -9,13 +9,13 @@
 </nav>
 <style>
   nav {
-    border: 2px solid whitesmoke;
     border-radius: 2rem;
-    font-size: 1rem;
+    border: 2px solid whitesmoke;
     display: flex;
+    font-size: 1rem;
     gap: 4rem;
-    padding: 0.25rem 3rem;
     margin-top: 1rem;
+    padding: 0.25rem 3rem;
   }
   nav > a {
   color: whitesmoke;

diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -33,19 +33,19 @@ const hobbies = ["Space Exploration", "Writing", "Space Photography"];
 </MainLayout>
 <style>
   .pageContent {
-    text-align: center;
     padding: 2rem 0;
+    text-align: center;
   }
   .hobbies {
-    list-style-position: inside;
     display: inline-flex;
     flex-wrap: wrap;
     gap: 1rem;
+    list-style-position: inside;
     margin-top: 0;
   }
-  /* .hobbies li {
+  .hobbies li {
     padding: 0 0 0 1rem;
-  } */
+  }
   .hobbies li::marker {
     content: "🚀";
   }
@@ -57,8 +57,11 @@ const hobbies = ["Space Exploration", "Writing", "Space Photography"];
   }
   @media (orientation: portrait) {
     .pageContent {
-      text-align: left;
       padding: 2rem 0;
+      text-align: left;
+    }
+    .hobbies li {
+      padding: 0;
     }
   }
 </style>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -49,9 +49,9 @@
 html, body {
   font-size: 24px;
   height: 100%;
-  width: 100%;
   margin: 0;
   padding: 0;
+  width: 100%;
 }
 
 a {
@@ -75,19 +75,18 @@ a:hover {
 }
 
 body {
-  background: rgb(22,1,59);
   background: radial-gradient(at bottom, rgba(22,1,59,1) 55%, rgba(251,99,131,1) 72%, rgba(229,210,90,1) 80%, rgba(0,0,0,1) 90%);
-  background-repeat: no-repeat;
+  background-attachment: fixed;
   background-position: 0 100%;
+  background-repeat: no-repeat;
   color: whitesmoke;
-  background-attachment: fixed;
 }
 section {
-  min-height: 90%;
+  align-items: center;
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: space-between;
+  min-height: 90%;
   padding: 1rem;
 }
 h1 {
@@ -101,15 +100,15 @@ p {
 @media (orientation: portrait) {
   body {
     background: radial-gradient(at left, rgba(22,1,59,1) 60%, rgba(251,99,131,1) 70%, rgba(229,210,90,1) 77%, rgba(0,0,0,1) 87%);
-    background-repeat: no-repeat;
+    background-attachment: fixed;
     background-position: 0 100%;
+    background-repeat: no-repeat;
     color: whitesmoke;
-    background-attachment: fixed;
   }
   section {
+    align-items: start;
     display: flex;
     justify-content: space-between;
-    align-items: start;
   }
   h1 {
     font-size: 2.5rem;