Update CSS to fix IOTA theme for: featured posts, article headings & …

…other minor details

.gitignore

@@ -9,3 +9,5 @@ node_modules
 
 .DS_Store
 .idea
+
+.vscode

.prettierrc.json

@@ -0,0 +1,9 @@
+{
+    "arrowParens": "always",
+    "trailingComma": "none",
+    "semi": false,
+    "bracketSpacing": true,
+    "singleQuote": true,
+    "printWidth": 130,
+    "tabWidth": 4
+}

index.hbs

@@ -67,7 +67,7 @@ into the {body} of the default.hbs template --}}
                             <div id="featured-bg-{{id}}"></div>
                           {{/if}}
                         </div>
-                        <div class="m-featured-article__meta">
+                        {{!-- <div class="m-featured-article__meta">
                           <a href="{{primary_author.url}}" class="m-featured-article__author js-tooltip" aria-label="{{primary_author.name}}" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}">
                             {{#if primary_author.profile_image}}
                               <div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div>
@@ -78,12 +78,17 @@ into the {body} of the default.hbs template --}}
                           {{#if primary_tag}}
                             <a href="{{primary_tag.url}}" class="m-featured-article__tag">{{primary_tag.name}}</a>
                           {{/if}}
-                        </div>
+                        </div> --}}
                         <div class="m-featured-article__ribbon">
                           <span class="icon-star"></span>
                           <span>{{t "Featured"}}</span>
                         </div>
                         <a href="{{url}}" class="m-featured-article__content">
+                          {{#if primary_tag}}
+                            <a href="{{primary_tag.url}}" class="m-featured-article__tag">
+                              {{primary_tag.name}}
+                            </a>
+                          {{/if}}
                           <h2 class="m-featured-article__title js-featured-article-title" title="{{title}}">
                             {{title}}
                           </h2>

src/sass/common/_global.scss

@@ -11,7 +11,7 @@ body {
     font-family: 'Inter', sans-serif;
     font-display: swap;
     overflow-x: hidden;
-    background-color: var(--background-color);
+    background-color: var(--page-bg-color);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 

src/sass/common/_themes.scss

@@ -8,6 +8,7 @@
 :root,
 [data-theme='light'] {
     --background-color: #fff;
+    --page-bg-color: #F6F8FC;
     --secondary-background-color: #fff;
     --menu-list-color: #8493ad;
     --primary-foreground-color: #4a4a4a;
@@ -36,6 +37,7 @@
 
 [data-theme='dark'] {
     --background-color: #131f37;
+    --page-bg-color: #131f37;
     --secondary-background-color: #243352;
     --menu-list-color: #8493ad;
     --primary-foreground-color: #ccc;
@@ -65,6 +67,7 @@
 @media (prefers-color-scheme: dark) {
     :root:not([data-theme='light']) {
         --background-color: #131f37;
+        --page-bg-color: #131f37;
         --secondary-background-color: #243352;
         --menu-list-color: #8493ad;
         --primary-foreground-color: #ccc;

src/sass/components/articles/_featured-article.scss

@@ -2,8 +2,9 @@
     position: relative;
     height: 100%;
     overflow: hidden;
-    background-color: var(--primary-subtle-color);
     z-index: 1;
+    background: none;
+    visibility: visible;
 
     &:hover {
         .m-featured-article__author {
@@ -24,16 +25,16 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: $black;
     z-index: 1;
+    background: none;
 
     div {
         width: 100%;
         height: 100%;
         background-repeat: no-repeat;
         background-position: center;
         background-size: cover;
-        opacity: 0.7;
+        opacity: 1;
     }
 }
 
@@ -84,11 +85,25 @@
 
 .m-featured-article__tag {
     font-family: 'Metropolis Bold';
-    color: var(--primary-subtle-color);
     letter-spacing: 0.3px;
     font-size: 1rem;
     line-height: 1.5;
     text-transform: uppercase;
+    background: #00e0ca;
+    box-shadow: 0px 4px 30px rgba(132, 147, 173, 0.1);
+    border-radius: 0px 0px 0px 10px;
+    padding: 14px 20px;
+    text-align: center;
+    letter-spacing: 0.04em;
+    color: #f6f8fc;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 3;
+
+    @include respond-to('medium') {
+        border-radius: 0px 10px;
+    }
 }
 
 .m-featured-article__ribbon {

src/sass/components/articles/_featured-slider.scss

@@ -1,52 +1,53 @@
 .m-featured-slider {
-  position: relative;
-  overflow: hidden !important;
-  height: 350px;
-  margin: -40px -#{$mobile-space} 40px;
-  @include transition(all .25s cubic-bezier(.02,.01,.47,1));
+    position: relative;
+    overflow: hidden !important;
+    height: 350px;
+    margin: -40px -#{$mobile-space} 40px;
+    @include transition(all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1));
+    @include bs(var(--article-shadow-normal));
+
+    &:hover {
+        @include respond-to('medium') {
+            @include transform(translateY(-5px));
+            @include bs(var(--article-shadow-hover));
+        }
+    }
 
-  &:hover {
     @include respond-to('medium') {
-      @include transform(translateY(-5px));
-      @include bs(var(--article-shadow-hover));
+        width: 100%;
+        height: 420px;
+        margin: -40px 10px 20px 10px;
+        border-radius: 10px;
+    }
+
+    @include respond-to('large') {
+        width: calc(100% - (100% / 3) - 40px);
+        margin: 0 20px 40px 20px;
+        overflow: unset;
     }
-  }
-
-  @include respond-to('medium') {
-    width: 100%;
-    height: 420px;
-    margin: -40px 10px 20px 10px;
-    border-radius: 10px;
-  }
-
-  @include respond-to('large') {
-    width: calc(100% - (100% / 3) - 40px);
-    margin: 0 20px 40px 20px;
-    overflow: unset;
-  }
 }
 
 .m-featured-slider:not(:root:root) {
-  overflow: hidden !important;
+    overflow: hidden !important;
 }
 
 .m-featured-slider__list {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  height: 100%;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    height: 100%;
 
-  @include respond-to('medium') {
-    border-radius: 10px;
-    overflow: hidden;
-  }
+    @include respond-to('medium') {
+        border-radius: 10px;
+        overflow: hidden;
+    }
 }
 
 .m-featured-slider__list__item {
-  height: 100%;
-  overflow: hidden;
+    height: 100%;
+    overflow: hidden;
 
-  @include respond-to('medium') {
-    border-radius: 10px;
-  }
+    @include respond-to('medium') {
+        border-radius: 10px;
+    }
 }

src/sass/post.scss

@@ -17,6 +17,10 @@
 @import 'components/articles/recommended-articles';
 @import 'components/articles/recommended-slider';
 
+.post-template{
+    background-color: var(--background-color) !important;
+}
+
 .post-template .m-hero.with-picture {
     min-height: unset;
     padding: 0;