Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 2861571

Browse files
author
Lars Bekkema
committed
Color and typography fixes
1 parent 20eeed6 commit 2861571

File tree

12 files changed

+70
-31
lines changed

12 files changed

+70
-31
lines changed

‎src/components/article_select/article_select.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import '../../css/variables';
22

33
.article-select {
4-
background: #fff;
4+
background: $daisy-white;
55
border-radius: 4px;
66
margin-bottom: 24px;
77

‎src/components/footer/footer.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import '../../css/variables';
2+
13
.footer {
24
max-width: 1200px;
35
padding-left: 20px;
@@ -7,9 +9,9 @@
79
}
810

911
.footer__inner {
10-
border-top: 1px solid #e9e9e9;
12+
border-top: 1px solid $daisy-whisper;
1113
padding: 16px 0;
1214
font-size: 14px;
1315
line-height: 20px;
14-
color: #9e9e9e;
16+
color: $daisy-nobel;
1517
}

‎src/components/header/header.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
@import '../../css/variables';
2+
13
.header {
2-
background: #585858;
4+
background: $daisy-zambezi;
35
position: fixed;
46
width: 100%;
57
height: 60px;

‎src/components/navigation/navigation.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,20 @@
1111
margin-right: 24px;
1212
border-bottom: 3px solid transparent;
1313
line-height: 57px;
14-
color: #fff;
14+
color: $daisy-white;
1515
text-decoration: none;
1616

1717
&:hover {
1818
text-decoration: none;
19-
color: #ff5064;
19+
color: $daisy-pink;
2020
}
2121

2222
&--active {
2323
background-color: #676767;
24-
border-bottom-color: #ff5064;
24+
border-bottom-color: $daisy-pink;
2525

2626
&:hover {
27-
color: #fff;
27+
color: $daisy-white;
2828
}
2929
}
3030
}

‎src/components/search/search.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@
1616

1717
.search__input {
1818
appearance: none;
19-
background: #fff;
19+
background: $daisy-white;
2020
border: 0;
2121
border-radius: 4px;
2222
width: 200px;
2323
font-size: 16px;
24-
font-weight: 300;
24+
font-weight: 400;
2525
font-family: inherit;
2626
position: relative;
2727
padding: 8px 16px;

‎src/components/sidebar/sidebar.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,13 @@ import classNames from 'classnames'
44
import './sidebar.scss'
55

66
const Section = props => {
7+
const titleClasses = classNames("sidebar__title", {
8+
"sidebar__title--active": props.isSectionActive
9+
});
10+
711
return (
812
<div className="sidebar__section">
9-
<h3 className="sidebar__title" onClick={props.onSectionTitleClick}>
13+
<h3 className={titleClasses} onClick={props.onSectionTitleClick}>
1014
{props.title}
1115
</h3>
1216
<SectionLinks {...props} title={props.title} />

‎src/components/sidebar/sidebar.scss

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ $sidebar-tablet-width: 240px;
2020
.sidebar__wrapper {
2121
margin-left: -999px;
2222
padding-left: 999px;
23-
background-color: #f9f9f9;
23+
background-color: $daisy-snow;
2424
height: calc(100vh - 60px);
2525
overflow-y: auto;
2626
display: flex;
@@ -39,7 +39,6 @@ $sidebar-tablet-width: 240px;
3939
@media (min-width: $desktop-breakpoint) {
4040
width: $sidebar-desktop-width;
4141
}
42-
4342
}
4443

4544
.sidebar__section {
@@ -72,14 +71,14 @@ $sidebar-tablet-width: 240px;
7271

7372
.sidebar__link {
7473
text-decoration: none;
75-
color: #3e3e3e;
74+
color: $daisy-eclipse;
7675

7776
&:hover {
78-
color: #2d68f4;
77+
color: $daisy-blue;
7978
}
8079

8180
&--active {
82-
color: #2d68f4;
81+
color: $daisy-blue;
8382
}
8483

8584
&--disabled {
@@ -89,10 +88,16 @@ $sidebar-tablet-width: 240px;
8988
}
9089

9190
.sidebar__title {
92-
font-size: 16px;
93-
color: #9e9e9e;
91+
font-size: 14px;
92+
color: $daisy-nobel;
9493
text-transform: uppercase;
9594
margin: 0 0 8px;
96-
letter-spacing: 1px;
95+
letter-spacing: 1.2px;
9796
cursor: pointer;
97+
transition: color .15s ease-in-out;
98+
99+
&--active,
100+
&:hover {
101+
color: $daisy-eclipse;
102+
}
98103
}

‎src/components/topic/topic.scss

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
1+
@import '../../css/variables';
2+
13
.topics {
24
display: block;
35

4-
@media (min-width: 640px) {
6+
@media (min-width: $mobile-breakpoint) {
57
display: flex;
68
}
79
}
810

911
.topic {
10-
background: #fff;
11-
border: 1px solid #e9e9e9;
12+
background: $daisy-white;
13+
border: 1px solid $daisy-whisper;
1214
padding: 24px;
1315
border-radius: 4px;
1416
box-shadow: 0 1px 3px rgba(201, 201, 201, .33);
1517
transition: box-shadow .25s ease-in-out, border-color .25s ease-in-out;
16-
color: #585858;
18+
color: $daisy-zambezi;
1719
text-decoration: none;
1820
display: block;
1921

‎src/css/_variables.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
$daisy-eclipse: #3e3e3e;
2+
$daisy-zambezi: #585858;
3+
$daisy-nobel: #9e9e9e;
4+
$daisy-whisper: #e9e9e9;
5+
$daisy-snow: #f9f9f9;
6+
$daisy-white: #fff;
7+
18
$daisy-blue: #2d68f4;
9+
$daisy-pink: #ff5064;
10+
211
$tablet-breakpoint: 800px;
312
$desktop-breakpoint: 940px;
13+
$mobile-breakpoint: 640px;

‎src/css/main.scss

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,38 @@
22
@import 'variables';
33

44
body {
5-
background: #fff;
5+
background: $daisy-white;
66
font-family: "Effra", sans-serif;
77
font-size: 16px;
88
line-height: 24px;
9+
color: $daisy-zambezi;
910
}
1011

1112
a {
1213
color: $daisy-blue;
14+
transition: color .15s ease-in-out;
1315

1416
&:hover {
1517
text-decoration: none;
1618
}
1719
}
1820

21+
h1,
22+
h2,
23+
h3,
24+
h4,
25+
h5,
26+
h6 {
27+
color: $daisy-eclipse;
28+
}
29+
1930
.wrapper {
2031
padding-top: 60px;
2132
}
2233

2334
.hero {
2435
background-color: #676767;
25-
color: #fff;
36+
color: $daisy-white;
2637
}
2738

2839
.hero__wrapper {

‎src/fonts/effra.scss

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
@font-face {
22
font-family: "Effra";
33
font-style: normal;
4-
font-weight: 600;
4+
font-weight: 300;
5+
src: local("#"), url("./effra-regular.woff") format("woff");
56
}
67

78
@font-face {
89
font-family: "Effra";
910
font-style: normal;
10-
font-weight: 300;
11-
src: local("#"), url("./effra-light.woff") format("woff");
11+
font-weight: 400;
12+
src: local("#"), url("./effra-regular.woff") format("woff");
1213
}
1314

1415
@font-face {
@@ -21,6 +22,6 @@
2122
@font-face {
2223
font-family: "Effra";
2324
font-style: normal;
24-
font-weight: 400;
25-
src: local("#"), url("./effra-regular.woff") format("woff");
25+
font-weight: 600;
26+
src: local("#"), url("./effra-medium.woff") format("woff");
2627
}

‎src/pages/changelog/changelog.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1+
@import '../../css/variables';
2+
13
.changelog {
24
h4 {
35
margin-bottom: 0;
46
}
57
}
68

79
.changelog__wrapper {
8-
border-top: 1px solid #e9e9e9;
10+
border-top: 1px solid $daisy-whisper;
911
padding-top: 24px;
1012
position: relative;
1113
}

0 commit comments

Comments
 (0)