Better organize CSS rules

hgarciasoftware · Jan 31, 2022 · 486173e · 486173e
1 parent a23f539
commit 486173e
Showing 1 changed file with 27 additions and 29 deletions.
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
@@ -2,15 +2,6 @@
   box-sizing: border-box;
 }
 
-.pokemon-nav::-webkit-scrollbar {
-  width: .1875rem;
-}
-
-.pokemon-nav::-webkit-scrollbar-thumb {
-  background-color: #e94141;
-  border-radius: 4px;
-}
-
 body {
   margin: 0;
   font-family: sans-serif;
@@ -20,6 +11,12 @@ body {
   background-color: #f8e7e7;
 }
 
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
 header,
 footer {
   align-items: center;
@@ -53,40 +50,33 @@ main {
   padding: 1rem;
 }
 
+.about {
+  margin: 0 auto;
+  max-width: 37.875rem;
+  width: 100%;
+  overflow-y: auto;
+}
+
 h1 {
   margin: .3em 0;
   font-size: 1.802rem;
 }
 
+.about h1 {
+  font-size: 2.027rem;
+  text-align: center;
+}
+
 img {
   width: 100%;
 }
 
 figcaption {
-  font-size: 1rem;
   text-align: center;
 }
 
 p {
   margin-top: 0;
-  font-size: 1rem;
-}
-
-.container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-}
-
-.about {
-  margin: 0 auto;
-  max-width: 37.875rem;
-  width: 100%;
-  overflow-y: auto;
-}
-
-.about h1 {
-  text-align: center;
 }
 
 .pokemon-nav {
@@ -95,6 +85,15 @@ p {
   overflow-y: scroll;
 }
 
+.pokemon-nav::-webkit-scrollbar {
+  width: 4px;
+}
+
+.pokemon-nav::-webkit-scrollbar-thumb {
+  background-color: #e94141;
+  border-radius: 4px;
+}
+
 .pokemon-link {
   display: block;
   padding: .1rem 0;
@@ -121,7 +120,6 @@ p {
 }
 
 .pokemon-data {
-  display: inline-block;
   max-height: 100%;
   padding: 1rem 1.5rem;
   width: 14.85625rem;