0.3.12

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.3.12
+
+- Update light theme
+- Sticky navbar
+- Sticky post modal header
+
 ## 0.3.11
 
 - Add saved posts section

package.json

@@ -1,6 +1,6 @@
 {
   "name": "newsreader",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "description": "Application for viewing RSS feeds",
   "main": "index.js",
   "scripts": {

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "newsreader"
-version = "0.3.11"
+version = "0.3.12"
 description = "Webapplication for reading RSS feeds"
 authors = ["Sonny <sonnyba871@gmail.com>"]
 license = "GPL-3.0"

src/newsreader/js/pages/homepage/components/PostModal.js

@@ -73,10 +73,14 @@ class PostModal extends React.Component {
     return (
       <div className="modal post-modal">
         <div className="post">
+          <div className="post__header">
             <div className="post__actions">
               <button
-              className={`button read-button ${readButtonDisabled && 'button--disabled'}`}
-              onClick={() => !readButtonDisabled && this.props.markPostRead(post, token)}
+                className={`button read-button ${readButtonDisabled &&
+                  'button--disabled'}`}
+                onClick={() =>
+                  !readButtonDisabled && this.props.markPostRead(post, token)
+                }
               >
                 <i className="fas fa-check" /> Mark as read
               </button>
@@ -87,7 +91,7 @@ class PostModal extends React.Component {
                 <i className="fas fa-times"></i> Close
               </button>
             </div>
-          <div className="post__header">
+            <div className="post__heading">
               <h2 className={titleClassName}>{`${post.title} `}</h2>
               <div className="post__meta-info">
                 <span className="post__date">
@@ -124,6 +128,7 @@ class PostModal extends React.Component {
                 />
               </div>
             </div>
+          </div>
 
           {/* HTML is sanitized by the collectors */}
           <div className="post__body" dangerouslySetInnerHTML={{ __html: post.body }} />

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

@@ -3,10 +3,14 @@
   justify-content: center;
   align-items: center;
 
-  margin: 0 0 5px 0;
   padding: 10px 0;
   width: 100%;
 
+  position: sticky;
+  top: 0;
+
+  background-color: var(--lightest-accent-color);
+
   ol {
     display: flex;
     justify-content: flex-start;
@@ -28,5 +32,7 @@
 
   &__item:last-child {
     margin: 0 10px 0 auto;
+
+    border-right: 2px solid var(--lighter-accent-color);
   }
 }

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

@@ -15,6 +15,17 @@
 
   cursor: initial;
 
+  &__header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    position: sticky;
+    top: 0;
+
+    width: 100%;
+  }
+
   &__actions {
     display: flex;
     justify-content: flex-end;
@@ -24,10 +35,11 @@
     gap: 20px;
   }
 
-  &__header {
+  &__heading {
     display: flex;
     flex-direction: column;
     padding: 20px 0 10px 0;
+
     width: 75%;
   }
 
@@ -51,7 +63,7 @@
     background-color: var(--lightest-accent-color) !important;
 
     & a {
-      color: $black;
+      color: var(--font-color);
     }
   }
 

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

@@ -10,8 +10,8 @@
   }
 
   & .badge {
-    & a {
-      color: $black;
+    & .link {
+      color: var(--font-color);
     }
   }
 }

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

@@ -5,7 +5,7 @@
   align-self: start;
 
   position: sticky;
-  top: 5%;
+  top: 50px;
 
   width: 20%;
 

src/newsreader/scss/partials/_colors.scss

@@ -25,18 +25,18 @@ $focus-blue: darken($azureish-white, +10%);
 $checkbox-blue: rgba(34, 170, 253, 1);
 
 // White theme
-$background-color: $white;
+$background-color: rgba(255, 249, 176, 1);
 
 $font-color: rgba(83, 87, 91, 1);
-$link-color: darken($azureish-white, 30%);
+$link-color: rgba(45, 142, 202, 1);
 $read-color: darken($gainsboro, 10%);
 $confirm-button-font-color: rgba(255, 255, 255, 1);
 
-$accent-color: $gainsboro;
-$lighter-accent-color: $gainsboro;
-$lightest-accent-color: $orange;
+$accent-color: rgba(255, 171, 115, 1);
+$lighter-accent-color: rgba(255, 211, 132, 1);
+$lightest-accent-color: rgba(255, 174, 192, 1);
 
-$confirm-color: rgba(89, 181, 128, 1);
+$confirm-color: rgba(117, 207, 184, 1);
 $danger-color: rgba(237, 118, 105, 1);
 $warning-color: rgba(255, 218, 119, 1);
 $info-color: rgba(162, 213, 242, 1);
@@ -51,7 +51,7 @@ $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);
-$dark-lightest-accent-color: rgba(252, 218, 183, 1);
+$dark-lightest-accent-color: rgba(88, 61, 114, 1);
 
 $dark-confirm-color: rgba(0, 121, 101, 1);
 $dark-danger-color: rgba(175, 45, 45, 1);