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
Ferror · Nov 12, 2020 · ef1d9a8 · ef1d9a8
1 parent 90df689
commit ef1d9a8
Show file tree

Hide file tree

Showing 16 changed files with 69 additions and 64 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,3 @@
+section {
+    margin-bottom: 3rem;
+}
diff --git 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
@@ -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
@@ -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
@@ -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;
 }