Added some comments to CSS styling

1 files changed, 39 insertions, 25 deletions

diff --git a/src/styles.css b/src/styles.css
index 6fd2e3c..8ae4b3d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -5,16 +5,6 @@
   --link-tab-bg-hover-color: #d47408 !important;
 }
 
-::-moz-selection {
-  color: #ffeede;
-  background: #9fb7c6;
-}
-
-::selection {
-  color: #ffeede;
-  background: #9fb7c6;
-}
-
 * {
   color: #ffeede !important;
   border-color: #777 !important;
@@ -72,6 +62,20 @@ article > table tr:nth-child(2n) {
   --link-tab-bg-hover-color: #004080;
 }
 
+/* Custom text selection color */
+
+::-moz-selection {
+  color: #ffeede;
+  background: #9fb7c6;
+}
+
+::selection {
+  color: #ffeede;
+  background: #9fb7c6;
+}
+
+/* Custom scrollbar style */
+
 ::-webkit-scrollbar {
   width: 10px;
 }
@@ -88,26 +92,13 @@ article > table tr:nth-child(2n) {
   background: #555;
 }
 
+/* Global */
+
 body, td, th {
   font: 19px 'Open Sans', sans-serif;
   line-height: 1.5em;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  display: inline-block;
-  margin-block-end: 0.5em; /* Account for it being an inline block, as opposed to a normal block */
-}
-
-h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
-  display: inline;
-}
-
-h1 + p img, h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img {
-  height: 1.3em;
-  border: none;
-  vertical-align: text-top;
-}
-
 h2 {
   padding-bottom: 0.25em;
   border-bottom: 2px solid black;
@@ -136,6 +127,25 @@ article {
   overflow: auto;
 }
 
+/* Show link icon next to headings */
+
+h1, h2, h3, h4, h5, h6 {
+  display: inline-block;
+  margin-block-end: 0.5em; /* Account for it being an inline block, as opposed to a normal block */
+}
+
+h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
+  display: inline;
+}
+
+h1 + p img, h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img {
+  height: 1.3em;
+  border: none;
+  vertical-align: text-top;
+}
+
+/* Main elements: article, header, footer */
+
 .centered, article {
   margin-left: auto;
   margin-right: auto;
@@ -158,6 +168,8 @@ article {
   padding-top: 3px;
 }
 
+/* Header and footer rectangles (tabs) */
+
 .link-tab, code {
   white-space: nowrap;
 }
@@ -173,6 +185,8 @@ article {
   background-color: var(--link-tab-bg-hover-color);
 }
 
+/* OpenSans font */
+
 @font-face {
   font-family: 'Open Sans';
   src: url(/fonts/open-sans/OpenSans-Regular.ttf);