-
{`${post.title} `}
+
{`${post.title} `}
diff --git a/src/newsreader/js/pages/homepage/components/sidebar/RuleItem.js b/src/newsreader/js/pages/homepage/components/sidebar/RuleItem.js
index 879745f..df8da94 100644
--- a/src/newsreader/js/pages/homepage/components/sidebar/RuleItem.js
+++ b/src/newsreader/js/pages/homepage/components/sidebar/RuleItem.js
@@ -31,9 +31,9 @@ class RuleItem extends React.Component {
this.handleSelect()}>
{favicon}
-
+
{this.props.rule.name}
-
+
{this.props.rule.unread}
diff --git a/src/newsreader/scss/components/body/_body.scss b/src/newsreader/scss/components/body/_body.scss
index 266d82b..fed260b 100644
--- a/src/newsreader/scss/components/body/_body.scss
+++ b/src/newsreader/scss/components/body/_body.scss
@@ -3,7 +3,7 @@
padding: 0;
font-family: Rubik, sans-serif;
- color: $default-font-color;
+ color: $font-color;
}
body {
diff --git a/src/newsreader/scss/components/category/_category.scss b/src/newsreader/scss/components/category/_category.scss
index 9d8451f..cbea865 100644
--- a/src/newsreader/scss/components/category/_category.scss
+++ b/src/newsreader/scss/components/category/_category.scss
@@ -4,8 +4,6 @@
padding: 5px;
- border-radius: 5px;
-
&__info {
display: flex;
justify-content: space-between;
diff --git a/src/newsreader/scss/components/navbar/_navbar.scss b/src/newsreader/scss/components/navbar/_navbar.scss
index c3584f1..60c9f48 100644
--- a/src/newsreader/scss/components/navbar/_navbar.scss
+++ b/src/newsreader/scss/components/navbar/_navbar.scss
@@ -6,8 +6,6 @@
padding: 10px 0;
width: 100%;
- background-color: $white;
-
ol {
display: flex;
justify-content: flex-start;
@@ -19,10 +17,11 @@
&__item {
margin: 0px 10px;
- border: none;
-
& a {
@extend .button;
+
+ font-size: 18px !important;
+ font-weight: 600;
}
}
diff --git a/src/newsreader/scss/components/post/_post.scss b/src/newsreader/scss/components/post/_post.scss
index 7a7fe67..e803b1b 100644
--- a/src/newsreader/scss/components/post/_post.scss
+++ b/src/newsreader/scss/components/post/_post.scss
@@ -25,8 +25,6 @@
}
&__title {
- line-height: 1;
-
&--read {
color: $gainsboro;
}
@@ -42,7 +40,6 @@
}
&__date {
- align-self: center;
font-size: small;
}
@@ -53,9 +50,6 @@
padding: 10px 0 30px 0;
width: 75%;
- line-height: 1.5;
- font-size: 18px;
-
& p {
padding: 10px 0;
}
@@ -79,6 +73,7 @@
position: relative;
margin: 1% 2% 0 0;
align-self: flex-end;
+ background-color: $gainsboro;
&:hover {
background-color: lighten($gainsboro, +1%);
@@ -102,7 +97,7 @@
top: 25%;
width: 10%;
- color: lighten($default-font-color, +10%);
+ color: lighten($font-color, +10%);
& h5 {
margin: 10px 0 0 0;
diff --git a/src/newsreader/scss/components/rules/_rules.scss b/src/newsreader/scss/components/rules/_rules.scss
index 92427da..73f54da 100644
--- a/src/newsreader/scss/components/rules/_rules.scss
+++ b/src/newsreader/scss/components/rules/_rules.scss
@@ -8,8 +8,6 @@
padding: 5px 5px 5px 20px;
- border-radius: 5px;
-
& * {
padding: 0 2px 0 2px;
}
diff --git a/src/newsreader/scss/elements/badge/_badge.scss b/src/newsreader/scss/elements/badge/_badge.scss
index 8dd5d99..efdd1b7 100644
--- a/src/newsreader/scss/elements/badge/_badge.scss
+++ b/src/newsreader/scss/elements/badge/_badge.scss
@@ -6,7 +6,7 @@
text-align: center;
- background-color: lighten($pewter-blue, +20%);
+ background-color: $gainsboro;
font-size: small;
}
diff --git a/src/newsreader/scss/elements/button/_button.scss b/src/newsreader/scss/elements/button/_button.scss
index 691fa91..2e97d6b 100644
--- a/src/newsreader/scss/elements/button/_button.scss
+++ b/src/newsreader/scss/elements/button/_button.scss
@@ -37,10 +37,10 @@
&--primary {
color: $white !important;
- background-color: darken($azureish-white, +20%);
+ background-color: $button-blue;
&:hover {
- background-color: $azureish-white;
+ background-color: lighten($button-blue, 5%);
}
}
}
diff --git a/src/newsreader/scss/elements/h1/_h1.scss b/src/newsreader/scss/elements/h1/_h1.scss
index 0e5632e..6ddee05 100644
--- a/src/newsreader/scss/elements/h1/_h1.scss
+++ b/src/newsreader/scss/elements/h1/_h1.scss
@@ -1,3 +1,8 @@
.h1 {
+ color: $header-color;
font-size: 20px;
}
+
+h1 {
+ @extend .h1;
+}
diff --git a/src/newsreader/scss/elements/h2/_h2.scss b/src/newsreader/scss/elements/h2/_h2.scss
index 4d7d5a2..9f77ad8 100644
--- a/src/newsreader/scss/elements/h2/_h2.scss
+++ b/src/newsreader/scss/elements/h2/_h2.scss
@@ -1,2 +1,7 @@
.h2 {
+ color: $header-color;
+}
+
+h2 {
+ @extend .h2;
}
diff --git a/src/newsreader/scss/elements/h3/_h3.scss b/src/newsreader/scss/elements/h3/_h3.scss
index 8b5653e..7394bd7 100644
--- a/src/newsreader/scss/elements/h3/_h3.scss
+++ b/src/newsreader/scss/elements/h3/_h3.scss
@@ -1,2 +1,7 @@
.h3 {
+ color: $header-color;
+}
+
+h3 {
+ @extend .h3;
}
diff --git a/src/newsreader/scss/elements/h4/_h4.scss b/src/newsreader/scss/elements/h4/_h4.scss
new file mode 100644
index 0000000..ab24888
--- /dev/null
+++ b/src/newsreader/scss/elements/h4/_h4.scss
@@ -0,0 +1,7 @@
+.h4 {
+ color: $header-color;
+}
+
+h4 {
+ @extend .h4;
+}
diff --git a/src/newsreader/scss/elements/h4/index.scss b/src/newsreader/scss/elements/h4/index.scss
new file mode 100644
index 0000000..4c735ff
--- /dev/null
+++ b/src/newsreader/scss/elements/h4/index.scss
@@ -0,0 +1 @@
+@import './h4';
diff --git a/src/newsreader/scss/elements/h5/_h5.scss b/src/newsreader/scss/elements/h5/_h5.scss
new file mode 100644
index 0000000..5efa58e
--- /dev/null
+++ b/src/newsreader/scss/elements/h5/_h5.scss
@@ -0,0 +1,7 @@
+.h5 {
+ color: $header-color;
+}
+
+h5 {
+ @extend .h5;
+}
diff --git a/src/newsreader/scss/elements/h5/index.scss b/src/newsreader/scss/elements/h5/index.scss
new file mode 100644
index 0000000..70e496a
--- /dev/null
+++ b/src/newsreader/scss/elements/h5/index.scss
@@ -0,0 +1 @@
+@import "./h5";
diff --git a/src/newsreader/scss/elements/index.scss b/src/newsreader/scss/elements/index.scss
index 3e2a01c..d3e8fe0 100644
--- a/src/newsreader/scss/elements/index.scss
+++ b/src/newsreader/scss/elements/index.scss
@@ -1,11 +1,13 @@
-@import "badge/index";
-@import "button/index";
-@import "help-text/index";
-@import "input/index";
-@import "label/index";
-@import "link/index";
-@import "h1/index";
-@import "h2/index";
-@import "h3/index";
-@import "small/index";
-@import "select/index";
+@import './badge/index';
+@import './button/index';
+@import './help-text/index';
+@import './input/index';
+@import './label/index';
+@import './link/index';
+@import './h1/index';
+@import './h2/index';
+@import './h3/index';
+@import './h4/index';
+@import './h5/index';
+@import './small/index';
+@import './select/index';
diff --git a/src/newsreader/scss/partials/_colors.scss b/src/newsreader/scss/partials/_colors.scss
index 8e776a2..524880e 100644
--- a/src/newsreader/scss/partials/_colors.scss
+++ b/src/newsreader/scss/partials/_colors.scss
@@ -22,7 +22,7 @@ $light-green: rgba(230, 247, 185, 1);
$light-orange: rgba(237, 212, 178, 1);
$light-red: rgba(255, 118, 117, 1);
-$success-green: rgba(46,204,113, 1);
+$success-green: rgba(89, 181, 128, 1);
$error-red: lighten(rgba(231, 76, 60, 1), 10%);
$confirm-green: $success-green;
@@ -30,8 +30,10 @@ $cancel-red: $error-red;
$border-gray: rgba(227, 227, 227, 1);
+$button-blue: rgba(111, 164, 196, 1);
$focus-blue: darken($azureish-white, +10%);
-$default-font-color: rgba(48, 51, 53, 1);
+$font-color: rgba(48, 51, 53, 1);
+$header-color: rgba(100, 101, 102, 1);
$white: rgba(255, 255, 255, 1);
$black: rgba(0, 0, 0, 1);