0.3.10

src/newsreader/scss/components/body/_body.scss

@@ -3,6 +3,7 @@
   padding: 0;
 
   font-family: Rubik, sans-serif;
+  font-size: $font-size;
 }
 
 body {

src/newsreader/scss/components/navbar/_navbar.scss

@@ -21,7 +21,7 @@
     & a {
       @extend .button;
 
-      font-size: 18px !important;
+      font-size: 0.9em !important;
       font-weight: 600;
     }
   }

src/newsreader/scss/components/post/_post.scss

@@ -32,6 +32,8 @@
   }
 
   &__title {
+    font-size: $header-size;
+
     &--read {
       color: var(--read-color);
     }

src/newsreader/scss/components/posts/_posts.scss

@@ -25,13 +25,6 @@
       padding: 0 10px 10px 10px;
     }
 
-    & span {
-      font-size: small;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
     & .badge {
       background-color: var(--lightest-accent-color);
     }
@@ -45,7 +38,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: 16px;
+    font-size: $header-size;
 
     &--read {
       color: var(--read-color);

src/newsreader/scss/elements/button/_button.scss

@@ -15,7 +15,7 @@
   }
 
   &--success, &--confirm {
-    color: $white !important;
+    color: var(--confirm-button-font-color) !important;
     background-color: var(--confirm-color);
   }
 

src/newsreader/scss/elements/button/_read-button.scss

@@ -1,8 +1,7 @@
 .read-button {
   @extend .button;
 
-  color: var(--font-color);
-
+  color: var(--confirm-button-font-color);
   background-color: var(--confirm-color);
 
   & i {

src/newsreader/scss/partials/_colors.scss

@@ -30,6 +30,7 @@ $background-color: $white;
 $font-color: rgba(83, 87, 91, 1);
 $link-color: darken($azureish-white, 30%);
 $read-color: darken($gainsboro, 10%);
+$confirm-button-font-color: rgba(255, 255, 255, 1);
 
 $accent-color: $gainsboro;
 $lighter-accent-color: $gainsboro;
@@ -46,6 +47,7 @@ $dark-background-color: rgba(29, 45, 80, 1);
 $dark-font-color: darken($gray, 10%);
 $dark-link-color: $link-color;
 $dark-read-color: darken($dark-font-color, 20%);
+$dark-confirm-button-font-color: $dark-font-color;
 
 $dark-accent-color: rgba(19, 59, 92, 1);
 $dark-lighter-accent-color: rgba(30, 95, 116, 1);

src/newsreader/scss/partials/_root.scss

@@ -4,6 +4,7 @@
   --font-color: #{$font-color};
   --link-color: #{$link-color};
   --read-color: #{$read-color};
+  --confirm-button-font-color: #{$confirm-button-font-color};
 
   --accent-color: #{$accent-color};
   --lighter-accent-color: #{$lighter-accent-color};
@@ -20,6 +21,7 @@
     --font-color: #{$dark-font-color};
     --link-color: #{$dark-link-color};
     --read-color: #{$dark-read-color};
+    --confirm-button-font-color: #{$dark-confirm-button-font-color};
 
     --accent-color: #{$dark-accent-color};
     --lighter-accent-color: #{$dark-lighter-accent-color};

src/newsreader/scss/partials/_variables.scss

@@ -1 +1,4 @@
 $fa-padding: 7px;
+
+$header-size: 1.2em;
+$font-size: 1.1em;