From ef1d9a884de19ea480c4dab501dba10ffe72eae0 Mon Sep 17 00:00:00 2001
From: Zbigniew Malcherczyk <zmalcherczyk@gmail.com>
Date: Fri, 13 Nov 2020 00:06:56 +0100
Subject: [PATCH] Improve readability (#18)

*Change the paragraph font family to Times New Roman
*Improve code tag on dark mode
*Minor checkbox fixes
*Increasing margin bottom
*Make header 2, 4, and 6 with opacity 0.8
---
 grave-dark.css              |  3 ++-
 grave-light.css             |  1 +
 grave.css                   |  4 ++-
 gulpfile.js                 |  4 ++-
 index.html                  | 12 ++++++++-
 package-lock.json           | 54 +++++++++++++------------------------
 package.json                | 14 +++++-----
 src/form/input/checkbox.css |  9 +++----
 src/structure.css           |  5 ++--
 src/structure/about.css     |  1 +
 src/structure/nav.css       |  2 +-
 src/structure/section.css   |  3 +++
 src/structure/temple.css    |  1 +
 src/text.css                |  1 +
 src/text/header.css         | 11 +++++---
 src/text/paragraph.css      |  8 ++----
 16 files changed, 69 insertions(+), 64 deletions(-)
 create mode 100644 src/structure/section.css

diff --git a/grave-dark.css b/grave-dark.css
index 30d8663..527fe1b 100644
--- a/grave-dark.css
+++ b/grave-dark.css
@@ -9,13 +9,14 @@
 :root {
     --global-page-background-color: #36393e;
     --global-font-color: #a7a7a7;
+    --global-font-family: "Times New Roman", Times, serif;
     --global-form-background-color: #ecf0f1;
     --global-form-background-color-active: #dce0e1;
     --global-form-background-color-valid: #ecf0f1;
     --global-form-font-color: #7f8c8d;
     --global-form-shadow-color: 0 3px 0 #7f8c8d;
     --global-form-shadow-color-active: 0 1px 0 #7f8c8d;
-    --global-text-code-background-color: rgba(236, 240, 241, 0.1);
+    --global-text-code-background-color: rgba(40, 43, 48, 1);
     --image-width: 20rem;
 
     font-size: 16px;
diff --git a/grave-light.css b/grave-light.css
index 2a01202..622b2b1 100644
--- a/grave-light.css
+++ b/grave-light.css
@@ -9,6 +9,7 @@
 :root {
     --global-page-background-color: #fff;
     --global-font-color: #374252;
+    --global-font-family: "Times New Roman", Times, serif;
     --global-form-background-color: #ecf0f1;
     --global-form-background-color-active: #dce0e1;
     --global-form-background-color-valid: #2ecc71a6;
diff --git a/grave.css b/grave.css
index 90fbd91..76de378 100644
--- a/grave.css
+++ b/grave.css
@@ -26,13 +26,14 @@ body {
     :root {
         --global-page-background-color: #36393e;
         --global-font-color: #a7a7a7;
+        --global-font-family: "Times New Roman", Times, serif;
         --global-form-background-color: #ecf0f1;
         --global-form-background-color-active: #dce0e1;
         --global-form-background-color-valid: #ecf0f1;
         --global-form-font-color: #7f8c8d;
         --global-form-shadow-color: 0 3px 0 #7f8c8d;
         --global-form-shadow-color-active: 0 1px 0 #7f8c8d;
-        --global-text-code-background-color: rgba(236, 240, 241, 0.1);
+        --global-text-code-background-color: rgba(40, 43, 48, 1);
         --image-width: 20rem;
     }
 }
@@ -41,6 +42,7 @@ body {
     :root {
         --global-page-background-color: #fff;
         --global-font-color: #374252;
+        --global-font-family: "Times New Roman", Times, serif;
         --global-form-background-color: #ecf0f1;
         --global-form-background-color-active: #dce0e1;
         --global-form-background-color-valid: #2ecc71a6;
diff --git a/gulpfile.js b/gulpfile.js
index 4d65647..a8d8063 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -60,7 +60,9 @@ gulp.task('stylelint', function () {
             'src/structure/*.css',
             'src/text/*.css',
             'src/vendor/*.css',
-            'grave.css'
+            'grave.css',
+            'grave-dark.css',
+            'grave-light.css'
         ])
         .pipe(stylelint(reporters));
 });
diff --git a/index.html b/index.html
index 0b968e9..8a7c585 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
         <meta name="keywords" content="">
         <meta name="Description" content="">
         <title>Grave UI</title>
-        <link rel="stylesheet" href="grave.css">
+        <link rel="stylesheet" href="grave-dark.css">
         <style>
             div {
                 margin: 20px 0;
@@ -128,6 +128,16 @@ <h5>Random new header</h5>
                     </p>
                 </article>
             </section>
+
+            <section>
+                <header>
+                    <h2>Texts</h2>
+                </header>
+                <article>
+                    <code>Some code or what?</code>
+                </article>
+            </section>
+
             <temple>
                 <column>
                     <article>
diff --git a/package-lock.json b/package-lock.json
index fe7e932..e84fe3c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1343,9 +1343,9 @@
       }
     },
     "dot-prop": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz",
-      "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.1.tgz",
+      "integrity": "sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==",
       "dev": true,
       "requires": {
         "is-obj": "^1.0.0"
@@ -2539,6 +2539,15 @@
         "sparkles": "^1.0.0"
       }
     },
+    "gonzales-pe": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.3.0.tgz",
+      "integrity": "sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
     "graceful-fs": {
       "version": "4.1.15",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
@@ -3968,9 +3977,9 @@
       }
     },
     "minimist": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
       "dev": true
     },
     "minimist-options": {
@@ -4005,20 +4014,12 @@
       }
     },
     "mkdirp": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
       "dev": true,
       "requires": {
-        "minimist": "0.0.8"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
-        }
+        "minimist": "^1.2.5"
       }
     },
     "ms": {
@@ -4585,23 +4586,6 @@
       "requires": {
         "gonzales-pe": "^4.2.3",
         "postcss": "^7.0.1"
-      },
-      "dependencies": {
-        "gonzales-pe": {
-          "version": "4.2.4",
-          "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.2.4.tgz",
-          "integrity": "sha512-v0Ts/8IsSbh9n1OJRnSfa7Nlxi4AkXIsWB6vPept8FDbL4bXn3FNuxjYtO/nmBGu7GDkL9MFeGebeSu6l55EPQ==",
-          "dev": true,
-          "requires": {
-            "minimist": "1.1.x"
-          }
-        },
-        "minimist": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz",
-          "integrity": "sha1-O+39kaktOQFvz6ocaB6Pqhoe/ag=",
-          "dev": true
-        }
       }
     },
     "postcss-scss": {
diff --git a/package.json b/package.json
index 52d1171..2f2542d 100644
--- a/package.json
+++ b/package.json
@@ -19,12 +19,12 @@
     },
     "homepage": "https://github.com/Ferror/grave",
     "devDependencies": {
-        "gulp": "^4.0.2",
-        "gulp-cssimport": "^7.0.0",
-        "gulp-csso": "^2.0.0",
-        "gulp-rename": "^1.4.0",
-        "gulp-stylelint": "^9.0.0",
-        "stylelint": "^10.1.0",
-        "stylelint-config-standard": "^18.3.0"
+        "gulp": "^4.0",
+        "gulp-cssimport": "^7.0",
+        "gulp-csso": "^2.0",
+        "gulp-rename": "^1.4",
+        "gulp-stylelint": "^9.0",
+        "stylelint": "^10.1",
+        "stylelint-config-standard": "^18.3"
     }
 }
diff --git a/src/form/input/checkbox.css b/src/form/input/checkbox.css
index 2c813a2..f200add 100644
--- a/src/form/input/checkbox.css
+++ b/src/form/input/checkbox.css
@@ -13,21 +13,20 @@ input[type=checkbox]::after {
     content: '\2713';
     cursor: pointer;
     display: inline-block;
-    font-size: 1.2rem;
-    height: 24px;
+    font-size: 1.4rem;
+    height: 26px;
     left: -2px;
     position: relative;
     text-align: center;
-    top: -2px;
+    top: -3px;
     visibility: visible;
-    width: 24px;
+    width: 26px;
 }
 
 input[type=checkbox]:checked::after {
     box-shadow: var(--global-form-shadow-color-active);
     color: var(--global-font-color);
     display: inline-block;
-    font-weight: bold;
     opacity: 1;
     transform: translateY(2px);
 }
diff --git a/src/structure.css b/src/structure.css
index 2df9ed6..1af7f50 100644
--- a/src/structure.css
+++ b/src/structure.css
@@ -1,4 +1,5 @@
-@import 'structure/temple.css';
 @import 'structure/about.css';
-@import 'structure/nav.css';
 @import 'structure/footer.css';
+@import 'structure/nav.css';
+@import 'structure/section.css';
+@import 'structure/temple.css';
diff --git a/src/structure/about.css b/src/structure/about.css
index fd96d67..ebfda41 100644
--- a/src/structure/about.css
+++ b/src/structure/about.css
@@ -2,6 +2,7 @@ about {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
+    margin-bottom: 3rem;
 }
 
 about > article {
diff --git a/src/structure/nav.css b/src/structure/nav.css
index fc8e24e..a51b741 100644
--- a/src/structure/nav.css
+++ b/src/structure/nav.css
@@ -1,7 +1,7 @@
 nav {
     display: flex;
     flex-direction: column;
-    margin-bottom: 1rem;
+    margin-bottom: 3rem;
     text-align: center;
     width: 100%;
 }
diff --git a/src/structure/section.css b/src/structure/section.css
new file mode 100644
index 0000000..42e5ca8
--- /dev/null
+++ b/src/structure/section.css
@@ -0,0 +1,3 @@
+section {
+    margin-bottom: 3rem;
+}
diff --git a/src/structure/temple.css b/src/structure/temple.css
index 72b33c7..056c57d 100644
--- a/src/structure/temple.css
+++ b/src/structure/temple.css
@@ -2,6 +2,7 @@ temple {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
+    margin-bottom: 3rem;
 }
 
 column {
diff --git a/src/text.css b/src/text.css
index 89c3954..3659d8d 100644
--- a/src/text.css
+++ b/src/text.css
@@ -5,6 +5,7 @@
 @import 'text/figcaption.css';
 
 code {
+    color: var(--global-font-color);
     padding: 0.25rem 0.4rem;
     background-color: var(--global-text-code-background-color);
     border-radius: 4px;
diff --git a/src/text/header.css b/src/text/header.css
index 2be40f9..88995b4 100644
--- a/src/text/header.css
+++ b/src/text/header.css
@@ -1,25 +1,27 @@
 h1 {
     color: var(--global-font-color);
     font-size: 2.7rem;
-    margin-bottom: 1.6rem;
+    margin-bottom: 2rem;
 }
 
 h2 {
     color: var(--global-font-color);
     font-size: 2.4rem;
-    margin-bottom: 1.3rem;
+    margin-bottom: 1.6rem;
+    opacity: 0.7;
 }
 
 h3 {
     color: var(--global-font-color);
     font-size: 2.1rem;
-    margin-bottom: 1rem;
+    margin-bottom: 1.2rem;
 }
 
 h4 {
     color: var(--global-font-color);
     font-size: 1.8rem;
-    margin-bottom: 0.7rem;
+    margin-bottom: 0.8rem;
+    opacity: 0.7;
 }
 
 h5 {
@@ -32,4 +34,5 @@ h6 {
     color: var(--global-font-color);
     font-size: 1.2rem;
     margin-bottom: 0.1rem;
+    opacity: 0.7;
 }
diff --git a/src/text/paragraph.css b/src/text/paragraph.css
index 6b9dd85..2f69f3c 100644
--- a/src/text/paragraph.css
+++ b/src/text/paragraph.css
@@ -1,14 +1,10 @@
 p {
-    /**
-     * @todo Change paragraph font to Sherif -> times new roman
-     */
-
     color: var(--global-font-color);
     font-size: 1.1rem;
-    margin-bottom: 1.5rem;
+    font-family: var(--global-font-family);
+    margin-bottom: 1.2rem;
     line-height: 1.5rem;
     letter-spacing: 0.05rem;
     word-spacing: 0.02rem;
-    text-indent: 1.5rem;
     text-align: justify;
 }