Skip to content

Commit ef1d9a8

Browse files
FerrorFerror
authored
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
1 parent 90df689 commit ef1d9a8

16 files changed

+69
-64
lines changed

‎grave-dark.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@
99
:root {
1010
--global-page-background-color: #36393e;
1111
--global-font-color: #a7a7a7;
12+
--global-font-family: "Times New Roman", Times, serif;
1213
--global-form-background-color: #ecf0f1;
1314
--global-form-background-color-active: #dce0e1;
1415
--global-form-background-color-valid: #ecf0f1;
1516
--global-form-font-color: #7f8c8d;
1617
--global-form-shadow-color: 0 3px 0 #7f8c8d;
1718
--global-form-shadow-color-active: 0 1px 0 #7f8c8d;
18-
--global-text-code-background-color: rgba(236, 240, 241, 0.1);
19+
--global-text-code-background-color: rgba(40, 43, 48, 1);
1920
--image-width: 20rem;
2021

2122
font-size: 16px;

‎grave-light.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
:root {
1010
--global-page-background-color: #fff;
1111
--global-font-color: #374252;
12+
--global-font-family: "Times New Roman", Times, serif;
1213
--global-form-background-color: #ecf0f1;
1314
--global-form-background-color-active: #dce0e1;
1415
--global-form-background-color-valid: #2ecc71a6;

‎grave.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,14 @@ body {
2626
:root {
2727
--global-page-background-color: #36393e;
2828
--global-font-color: #a7a7a7;
29+
--global-font-family: "Times New Roman", Times, serif;
2930
--global-form-background-color: #ecf0f1;
3031
--global-form-background-color-active: #dce0e1;
3132
--global-form-background-color-valid: #ecf0f1;
3233
--global-form-font-color: #7f8c8d;
3334
--global-form-shadow-color: 0 3px 0 #7f8c8d;
3435
--global-form-shadow-color-active: 0 1px 0 #7f8c8d;
35-
--global-text-code-background-color: rgba(236, 240, 241, 0.1);
36+
--global-text-code-background-color: rgba(40, 43, 48, 1);
3637
--image-width: 20rem;
3738
}
3839
}
@@ -41,6 +42,7 @@ body {
4142
:root {
4243
--global-page-background-color: #fff;
4344
--global-font-color: #374252;
45+
--global-font-family: "Times New Roman", Times, serif;
4446
--global-form-background-color: #ecf0f1;
4547
--global-form-background-color-active: #dce0e1;
4648
--global-form-background-color-valid: #2ecc71a6;

‎gulpfile.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,9 @@ gulp.task('stylelint', function () {
6060
'src/structure/*.css',
6161
'src/text/*.css',
6262
'src/vendor/*.css',
63-
'grave.css'
63+
'grave.css',
64+
'grave-dark.css',
65+
'grave-light.css'
6466
])
6567
.pipe(stylelint(reporters));
6668
});

‎index.html

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<meta name="keywords" content="">
88
<meta name="Description" content="">
99
<title>Grave UI</title>
10-
<link rel="stylesheet" href="grave.css">
10+
<link rel="stylesheet" href="grave-dark.css">
1111
<style>
1212
div {
1313
margin: 20px 0;
@@ -128,6 +128,16 @@ <h5>Random new header</h5>
128128
</p>
129129
</article>
130130
</section>
131+
132+
<section>
133+
<header>
134+
<h2>Texts</h2>
135+
</header>
136+
<article>
137+
<code>Some code or what?</code>
138+
</article>
139+
</section>
140+
131141
<temple>
132142
<column>
133143
<article>

‎package-lock.json

Lines changed: 19 additions & 35 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@
1919
},
2020
"homepage": "https://github.com/Ferror/grave",
2121
"devDependencies": {
22-
"gulp": "^4.0.2",
23-
"gulp-cssimport": "^7.0.0",
24-
"gulp-csso": "^2.0.0",
25-
"gulp-rename": "^1.4.0",
26-
"gulp-stylelint": "^9.0.0",
27-
"stylelint": "^10.1.0",
28-
"stylelint-config-standard": "^18.3.0"
22+
"gulp": "^4.0",
23+
"gulp-cssimport": "^7.0",
24+
"gulp-csso": "^2.0",
25+
"gulp-rename": "^1.4",
26+
"gulp-stylelint": "^9.0",
27+
"stylelint": "^10.1",
28+
"stylelint-config-standard": "^18.3"
2929
}
3030
}

‎src/form/input/checkbox.css

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,20 @@ input[type=checkbox]::after {
1313
content: '\2713';
1414
cursor: pointer;
1515
display: inline-block;
16-
font-size: 1.2rem;
17-
height: 24px;
16+
font-size: 1.4rem;
17+
height: 26px;
1818
left: -2px;
1919
position: relative;
2020
text-align: center;
21-
top: -2px;
21+
top: -3px;
2222
visibility: visible;
23-
width: 24px;
23+
width: 26px;
2424
}
2525

2626
input[type=checkbox]:checked::after {
2727
box-shadow: var(--global-form-shadow-color-active);
2828
color: var(--global-font-color);
2929
display: inline-block;
30-
font-weight: bold;
3130
opacity: 1;
3231
transform: translateY(2px);
3332
}

‎src/structure.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
@import 'structure/temple.css';
21
@import 'structure/about.css';
3-
@import 'structure/nav.css';
42
@import 'structure/footer.css';
3+
@import 'structure/nav.css';
4+
@import 'structure/section.css';
5+
@import 'structure/temple.css';

‎src/structure/about.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ about {
22
display: flex;
33
flex-wrap: wrap;
44
justify-content: space-between;
5+
margin-bottom: 3rem;
56
}
67

78
about > article {

‎src/structure/nav.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
nav {
22
display: flex;
33
flex-direction: column;
4-
margin-bottom: 1rem;
4+
margin-bottom: 3rem;
55
text-align: center;
66
width: 100%;
77
}

‎src/structure/section.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
section {
2+
margin-bottom: 3rem;
3+
}

‎src/structure/temple.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ temple {
22
display: flex;
33
flex-wrap: wrap;
44
justify-content: space-between;
5+
margin-bottom: 3rem;
56
}
67

78
column {

‎src/text.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@import 'text/figcaption.css';
66

77
code {
8+
color: var(--global-font-color);
89
padding: 0.25rem 0.4rem;
910
background-color: var(--global-text-code-background-color);
1011
border-radius: 4px;

‎src/text/header.css

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
11
h1 {
22
color: var(--global-font-color);
33
font-size: 2.7rem;
4-
margin-bottom: 1.6rem;
4+
margin-bottom: 2rem;
55
}
66

77
h2 {
88
color: var(--global-font-color);
99
font-size: 2.4rem;
10-
margin-bottom: 1.3rem;
10+
margin-bottom: 1.6rem;
11+
opacity: 0.7;
1112
}
1213

1314
h3 {
1415
color: var(--global-font-color);
1516
font-size: 2.1rem;
16-
margin-bottom: 1rem;
17+
margin-bottom: 1.2rem;
1718
}
1819

1920
h4 {
2021
color: var(--global-font-color);
2122
font-size: 1.8rem;
22-
margin-bottom: 0.7rem;
23+
margin-bottom: 0.8rem;
24+
opacity: 0.7;
2325
}
2426

2527
h5 {
@@ -32,4 +34,5 @@ h6 {
3234
color: var(--global-font-color);
3335
font-size: 1.2rem;
3436
margin-bottom: 0.1rem;
37+
opacity: 0.7;
3538
}

‎src/text/paragraph.css

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
p {
2-
/**
3-
* @todo Change paragraph font to Sherif -> times new roman
4-
*/
5-
62
color: var(--global-font-color);
73
font-size: 1.1rem;
8-
margin-bottom: 1.5rem;
4+
font-family: var(--global-font-family);
5+
margin-bottom: 1.2rem;
96
line-height: 1.5rem;
107
letter-spacing: 0.05rem;
118
word-spacing: 0.02rem;
12-
text-indent: 1.5rem;
139
text-align: justify;
1410
}

0 commit comments

Comments
 (0)