Initial redesign

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

@@ -1,9 +1,8 @@
 .body {
   margin: 0;
   padding: 0;
-  background-color: $gainsboro;
 
-  font-family: $default-font;
+  font-family: Rubik, sans-serif;
   color: $default-font-color;
 }
 

src/newsreader/scss/components/form/_form.scss

@@ -7,7 +7,6 @@
   width: 70%;
   border-radius: 5px;
 
-  font-family: $form-font;
   background-color: $white;
 
   &__section {

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

@@ -16,26 +16,13 @@
     list-style-type: none;
   }
 
-  a {
-    color: $nickel;
-    text-decoration: none;
-  }
-
   &__item {
     margin: 0px 10px;
 
     border: none;
-    border-radius: 2px;
-
-    background-color: darken($azureish-white, 20%);
-
-    &:hover{
-      background-color: lighten($azureish-white, +5%);
-    }
 
     & a {
       @extend .button;
-      color: $white;
     }
   }
 

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

@@ -6,7 +6,5 @@
   width: 70%;
   margin: 0 0 2% 0;
 
-  font-family: $article-font;
-
   border-radius: 2px;
 }

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

@@ -8,7 +8,6 @@
   height: 80vh;
   border-radius: 2px;
 
-  font-family: $article-font;
   background-color: $white;
 
   &__message {

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

@@ -22,8 +22,6 @@
     flex-direction: column;
     padding: 20px 0 10px 0;
     width: 75%;
-
-    font-family: $article-header-font;
   }
 
   &__title {
@@ -56,7 +54,6 @@
     width: 75%;
 
     line-height: 1.5;
-    font-family: $article-font;
     font-size: 18px;
 
     & p {
@@ -105,7 +102,6 @@
     top: 25%;
     width: 10%;
 
-    font-family: $button-font;
     color: lighten($default-font-color, +10%);
 
     & h5 {

src/newsreader/scss/components/sidebar/_sidebar.scss

@@ -17,8 +17,6 @@
     list-style: none;
     border-radius: 5px;
 
-    font-family: $sidebar-font;
-
     &__item {
       padding: 2px 10px 5px 10px;
     }

src/newsreader/scss/elements/badge/_badge.scss

@@ -3,12 +3,10 @@
 
   padding-left: 8px;
   padding-right: 8px;
-  border-radius: 2px;
 
   text-align: center;
 
   background-color: lighten($pewter-blue, +20%);
 
-  font-family: $button-font;
   font-size: small;
 }

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

@@ -9,9 +9,7 @@
   @include button-padding;
 
   border: none;
-  border-radius: 2px;
 
-  font-family: $button-font;
   font-size: 16px;
 
   &:hover {

src/newsreader/scss/elements/h1/_h1.scss

@@ -1,3 +1,3 @@
 .h1 {
-  font-family: $header-font;
+  font-size: 20px;
 }

src/newsreader/scss/elements/h2/_h2.scss

@@ -1,3 +1,2 @@
 .h2 {
-  font-family: $header-font;
 }

src/newsreader/scss/elements/h3/_h3.scss

@@ -1,3 +1,2 @@
 .h3 {
-  font-family: $header-font;
 }

src/newsreader/scss/fonts/METADATA.pb

@@ -0,0 +1,101 @@
+name: "Rubik"
+designer: "Hubert and Fischer, Meir Sadan, Cyreal"
+license: "OFL"
+category: "SANS_SERIF"
+date_added: "2015-07-22"
+fonts {
+  name: "Rubik"
+  style: "normal"
+  weight: 300
+  filename: "Rubik-Light.ttf"
+  post_script_name: "Rubik-Light"
+  full_name: "Rubik Light"
+  copyright: "Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)"
+}
+fonts {
+  name: "Rubik"
+  style: "italic"
+  weight: 300
+  filename: "Rubik-LightItalic.ttf"
+  post_script_name: "Rubik-LightItalic"
+  full_name: "Rubik Light Italic"
+  copyright: "Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)"
+}
+fonts {
+  name: "Rubik"
+  style: "normal"
+  weight: 400
+  filename: "Rubik-Regular.ttf"
+  post_script_name: "Rubik-Regular"
+  full_name: "Rubik Regular"
+  copyright: "Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)"
+}
+fonts {
+  name: "Rubik"
+  style: "italic"
+  weight: 400
+  filename: "Rubik-Italic.ttf"
+  post_script_name: "Rubik-Italic"
+  full_name: "Rubik Italic"
+  copyright: "Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)"
+}
+fonts {
+  name: "Rubik"
+  style: "normal"
+  weight: 500
+  filename: "Rubik-Medium.ttf"
+  post_script_name: "Rubik-Medium"
+  full_name: "Rubik Medium"
+  copyright: "Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)"
+}
+fonts {
+  name: "Rubik"
+  style: "italic"
+  weight: 500
+  filename: "Rubik-MediumItalic.ttf"
+  post_script_name: "Rubik-MediumItalic"
+  full_name: "Rubik Medium Italic"
+  copyright: "Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)"
+}
+fonts {
+  name: "Rubik"
+  style: "normal"
+  weight: 700
+  filename: "Rubik-Bold.ttf"
+  post_script_name: "Rubik-Bold"
+  full_name: "Rubik Bold"
+  copyright: "Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)"
+}
+fonts {
+  name: "Rubik"
+  style: "italic"
+  weight: 700
+  filename: "Rubik-BoldItalic.ttf"
+  post_script_name: "Rubik-BoldItalic"
+  full_name: "Rubik Bold Italic"
+  copyright: "Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)"
+}
+fonts {
+  name: "Rubik"
+  style: "normal"
+  weight: 900
+  filename: "Rubik-Black.ttf"
+  post_script_name: "Rubik-Black"
+  full_name: "Rubik Black"
+  copyright: "Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)"
+}
+fonts {
+  name: "Rubik"
+  style: "italic"
+  weight: 900
+  filename: "Rubik-BlackItalic.ttf"
+  post_script_name: "Rubik-BlackItalic"
+  full_name: "Rubik Black Italic"
+  copyright: "Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)"
+}
+subsets: "cyrillic"
+subsets: "cyrillic-ext"
+subsets: "hebrew"
+subsets: "latin"
+subsets: "latin-ext"
+subsets: "menu"

src/newsreader/scss/fonts/index.scss

@@ -0,0 +1,10 @@
+@font-face {
+  font-family: Rubik;
+  src: url("./fonts/Rubik-Regular.ttf");
+}
+
+@font-face {
+  font-family: Rubik;
+  src: url("./fonts/Rubik-Bold.ttf");
+  font-weight: bold;
+}

src/newsreader/scss/index.scss

@@ -1,5 +1,6 @@
 @import "lib/index";
 @import "partials/index";
+@import "fonts/index";
 @import "components/index";
 @import "elements/index";
 

src/newsreader/scss/partials/_fonts.scss

@@ -1,17 +0,0 @@
-@import url("https://fonts.googleapis.com/css?family=Barlow&display=swap");
-@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
-@import url("https://fonts.googleapis.com/css?family=Nunito&display=swap");
-@import url("https://fonts.googleapis.com/css?family=Noto+Sans&display=swap");
-@import url("https://fonts.googleapis.com/css?family=Noto+Serif&display=swap");
-@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:600&display=swap");
-
-$default-font: "Noto Serif", serif;
-
-$button-font: "IBM Plex Sans", sans-serif;
-$form-font: "Barlow", sans-serif;
-
-$article-font: "Noto Serif", serif;
-$article-header-font: "Oswald", sans-serif;
-
-$header-font: "Noto Sans", sans-serif;
-$sidebar-font: "Nunito", sans-serif;

src/newsreader/scss/partials/index.scss

@@ -1,2 +1 @@
-@import "fonts";
 @import "colors";