Match voussoirkit common.css.

frontends/etiquette_flask/static/css/common.css

@@ -3,6 +3,8 @@ This file contains styles that I want on almost all webpages that I make,
 not specific to one project.
 */
 
+/* SCREEN SIZE CAPTURE ****************************************************************************/
+
 /*
 These properties are used by javascript functions in common.js.
 See common.is_narrow_mode, is_wide_mode.
@@ -23,6 +25,8 @@ getComputedStyle(document.documentElement).getPropertyValue("--narrow").trim() =
     }
 }
 
+/**************************************************************************************************/
+
 html
 {
     height: 100vh;
@@ -46,6 +50,8 @@ body
 
     min-height: 100%;
     margin: 0;
+    padding: 8px;
+    grid-row-gap: 8px;
 
     background-color: var(--color_primary);
 }
@@ -68,21 +74,14 @@ textarea:disabled
     background-color: var(--color_text_placeholder);
 }
 
-input::placeholder, textarea::placeholder
+input::placeholder,
+textarea::placeholder
 {
     color: var(--color_text_placeholder);
     opacity: 1;
 }
 
-.hidden
-{
-    display: none !important;
-}
-
-.bold
-{
-    font-weight: bold;
-}
+/* ELEMENTS I USE OFTEN ***************************************************************************/
 
 #header
 {
@@ -91,8 +90,7 @@ input::placeholder, textarea::placeholder
     flex-direction: row;
 
     height: 18px;
-    margin: 8px;
-    margin-bottom: 0;
+    margin: 0;
     background-color: var(--color_transparency);
 }
 #header button
@@ -106,10 +104,7 @@ input::placeholder, textarea::placeholder
     flex: 1;
     display: flex;
     justify-content: center;
-}
-.header_element:hover
-{
-    background-color: var(--color_transparency);
+    align-items: center;
 }
 
 #content_body
@@ -118,8 +113,6 @@ input::placeholder, textarea::placeholder
     display: grid;
     grid-auto-rows: min-content;
     grid-gap: 8px;
-
-    padding: 8px;
 }
 
 .panel
@@ -129,6 +122,20 @@ input::placeholder, textarea::placeholder
     padding: 8px;
 }
 
+/* NONSEMANTICS ***********************************************************************************/
+
+.hidden
+{
+    display: none !important;
+}
+
+.bold
+{
+    font-weight: bold;
+}
+
+/* BUTTONS ****************************************************************************************/
+
 button,
 button *
 {
@@ -169,6 +176,8 @@ button:active
     background-color: #ffea57;
 }
 
+/* TABBED CONTAINER *******************************************************************************/
+
 .tabbed_container
 {
     display: flex;
@@ -220,6 +229,8 @@ button:active
     /*border-top-color: transparent;*/
 }
 
+/* MESSAGE BUBBLES ********************************************************************************/
+
 #message_area
 {
     display: grid;