Updated styles for footer, pages, post, content

about.html

@@ -88,8 +88,8 @@
     <main class="page container">
         <h1 class="visually-hidden">Wavelovers – Feedback</h1>
         <div class="wavelovers">
-            <div class="content">
+            <div class="content-item">
-                <h2 class="content__header">Feedback</h2>
+                <h2 class="content-item__header">Feedback</h2>
                 <p>Hi! I am the author and developer of Wavelovers app and I want to thank you for using this app. If you have any ideas or wishes, you can write to me.</p>
                 <br />
                 <span>Follow me on Twitter: </span>
@@ -98,8 +98,8 @@
                 <span>Mail me: </span>
                 <a href="mailto:eugene.serb@gmail.com" target="_blank">eugene.serb@gmail.com</a>
             </div>
-            <div class="content">
+            <div class="content-item">
-                <h2 class="content__header">Donate</h2>
+                <h2 class="content-item__header">Donate</h2>
                 <p>If you like this app, you can thank me and donate to me.</p>
                 <br />
                 <span>Bitcoin: </span>

css/styles.css

@@ -34,6 +34,7 @@
 
 @media (prefers-color-scheme: light) {
     :root {
+        /* Base colors */
         --color-border: var(--color-a);
         --color-background: var(--color-white);
         --color-text: var(--color-coal);
@@ -45,15 +46,16 @@
         --color-table-header-background: var(--color-b);
         --color-table-header-text: var(--color-white);
         --color-table-item: var(--color-c);
-        /**/
+        /* Components colors */
         --color-header-background: var(--color-b);
         --color-header-borderline: var(--color-a);
         --color-header-selection: var(--color-a);
         --color-header-logo: var(--color-white);
         --color-header-navigation-link: var(--color-white);
         --color-header-navigation-link-hover: var(--color-white);
+        --color-footer-borderline: var(--color-a);
+        --color-content-item-background: var(--color-milk);
         /**/
-        --color-content-background: var(--color-milk);
         --color-logo: var(--color-white);
         --color-header: var(--color-coal);
         --color-anotation: var(--color-coal);
@@ -64,6 +66,7 @@
 
 @media (prefers-color-scheme: dark) {
     :root {
+        /* Base colors */
         --color-border: var(--color-a);
         --color-background: var(--color-coal);
         --color-text: var(--color-coal);
@@ -75,15 +78,16 @@
         --color-table-header-background: var(--color-b);
         --color-table-header-text: var(--color-white);
         --color-table-item: var(--color-c);
-        /**/
+        /* Components colors */
-        --color-header-background: var(--color-a);
+        --color-header-background: var(--color-b);
-        --color-header-borderline: var(--color-b);
+        --color-header-borderline: var(--color-a);
         --color-header-selection: var(--color-b);
         --color-header-logo: var(--color-white);
         --color-header-navigation-link: var(--color-white);
         --color-header-navigation-link-hover: var(--color-white);
+        --color-footer-borderline: var(--color-a);
+        --color-content-item-background: var(--color-c);
         /**/
-        --color-content-background: var(--color-c);
         --color-logo: var(--color-white);
         --color-header: var(--color-coal);
         --color-anotation: var(--color-milk);
@@ -373,34 +377,12 @@ table, th, td {
     }
 }
 
-/* ----------------------------------- */
-/* MAIN, PAGE FLOW AND CONTENT SECTION */
-/* ----------------------------------- */
-
-.page {
-    flex-grow: 1;
-    margin-top: 64px;
-    margin-bottom: 64px;
-}
-
-.content {
-    margin-bottom: 16px;
-    padding: 32px;
-    border-radius: 8px;
-    background: var(--color-content-background);
-}
-
-.content__header {
-    text-align: center;
-}
-
 /* ------ */
 /* FOOTER */
 /* ------ */
 
 .footer {
-    border-top: 4px solid var(--color-a);
+    border-top: 4px solid var(--color-footer-borderline);
-    background: var(--color-background);
 }
 
 .footer-wrapper {
@@ -408,17 +390,13 @@ table, th, td {
     padding-bottom: 32px;
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
     flex-wrap: wrap;
+    justify-content: space-between;
     gap: 32px;
 }
 
-    .annotation__text {
-        color: var(--color-anotation);
-    }
-
 .created-by {
-        align-self: end;
+    align-self: flex-end;
 }
 
     .created-by > span {
@@ -429,12 +407,62 @@ table, th, td {
         font-size: 32px;
     }
 
-        .created-by > a:hover {
+/* ---- */
-            border: none;
+/* PAGE */
+/* ---- */
+
+.page {
+    flex-grow: 1;
+    margin-top: 64px;
+    margin-bottom: 64px;
+}
+
+/* ---- */
+/* POST */
+/* ---- */
+
+.post {
+    margin: 0 auto;
+}
+
+.post__header {
+    text-align: center;
+    margin-block-end: 32px;
+}
+
+/* ------- */
+/* CONTENT */
+/* ------- */
+
+
+.content {
+    margin-bottom: 64px;
+}
+
+.content__header {
+    margin-top: 0;
+    margin-bottom: 32px;
+    padding-left: 16px;
+    border: 2px solid var(--color-content-borderline);
+    border-radius: var(--number-border-radius);
+    color: var(--color-text-header);
+    font-size: 1.8em;
+}
+
+.content-item {
+    margin-bottom: 16px;
+    padding: 32px;
+    border-radius: var(--number-border-radius);
+    background: var(--color-content-item-background);
+}
+
+    .content-item__header {
+        margin-bottom: 16px;
+        text-align: center;
     }
 
 /* ----------- */
-/* WAVE MASTER */
+/* WAVELOVERS */
 /* ----------- */
 
 .wavelovers {