reorganize css

assets/css/main.css

@@ -22,8 +22,18 @@ body {
   margin: 0;
 }
 
-header {
-  background-color: var(--header);
+a {
+  color: var(--links);
+  text-decoration: none;
+}
+
+a:visited, a:hover {
+  color: var(--link-hover);
+  text-decoration: underline;
+}
+
+p {
+  margin-bottom: 1.5rem;
 }
 
 header div, main, footer {
@@ -32,6 +42,12 @@ header div, main, footer {
   padding: 1rem;
 }
 
+/* Header */
+header {
+  background-color: var(--header);
+  box-shadow: 0 5px 10px black;
+}
+
 header div {
   display: flex;
   align-items: baseline;
@@ -52,33 +68,43 @@ header li {
   margin-right: 8px;
 }
 
-footer {
-  border-top: 1px solid var(--light);
+/* Responsive */
+@media (max-width: 700px) {
+  aside.index-articles {
+    display: none;
+  }
 }
 
-section.index {
+/* Article Lists */
+.article-group {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
+  gap: 20px;
 }
 
-section.index aside { flex-shrink: 4; }
-
 .index-articles {
-  display: flex;
   justify-content: flex-end;
-  flex-wrap: wrap;
-  flex-direction: row;
-  gap: 20px;
 }
 
 .author-articles {
+  justify-content: center;
+}
+
+.index-articles aside {
+  flex-shrink: 4;
+}
+
+section.index {
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
-  gap: 20px;
-  justify-content: center;
 }
 
+section.index aside {
+  flex-shrink: 4;
+}
+
+/* Article Cards */
 article {
   background-color: #111;
   border-radius: 10px;
@@ -90,10 +116,6 @@ article.index {
   height: 414px;
 }
 
-@media(max-width: 700px) {
-  aside.index-articles { display: none; }
-}
-
 article.index img {
   height: 50%;
   width: 100%;
@@ -107,28 +129,30 @@ article.index h3 {
   text-overflow: ellipsis;
 }
 
-.float-on-hover{
-  transition: all .25s cubic-bezier(.2,.1,.47,1);
-}
-
-.float-on-hover:hover{
-  transform:translateY(-10px);
-}
-
-a {
-  color: var(--links);
-  text-decoration: none;
+article.alt {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: space-evenly;
+  align-items: center;
 }
 
-a:visited, a:hover {
-  color: var(--link-hover);
-  text-decoration: underline;
+article.alt img {
+  border-radius: 50%;
+  height: 256px;
+  width: 256px;
 }
 
-p {
-  margin-bottom: 1.5rem;
+/* Images */
+img.featured, img.author {
+  display: block;
+  border-radius: 8px;
+  margin: 12px 0;
+  object-fit: cover;
+  max-height: 500px;
 }
 
+/* Code Blocks */
 code {
   white-space: nowrap;
 }
@@ -148,26 +172,23 @@ pre code {
   overflow-x: auto;
   border-left: .3rem solid var(--beetbox-purple);
   border-radius: .4rem;
+  box-shadow: 0 4px 8px black;
 }
 
-article.alt {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    justify-content: space-evenly;
-    align-items: center;
+/* Effects */
+.float-on-hover {
+  transition: all .25s cubic-bezier(.2,.1,.47,1);
 }
 
-article.alt img {
-  border-radius: 50%;
-  height: 256px;
-  width: 256px;
+.float-on-hover:hover {
+  transform: translateY(-10px);
 }
 
-img.featured, img.author {
-    display: block;
-    border-radius: 8px;
-    margin: 12px 0;
-    object-fit: cover;
-    max-height: 500px;
+.shadow{
+  box-shadow: 0 4px 8px black;
+}
+
+/* Footer */
+footer {
+  border-top: 1px solid var(--light);
 }