Blog Page Redesign and Console Launch Button (#232)

* Refactored code to update the page title and banner link. Applied light color to the header and paragraph description( 3 groups ) for improved visibility on mobile screens in dark mode.

* Style: Applied light color to the header text and paragraph description( 3 groups ) for improved visibility on larger  screens in dark mode.

Style:  added hovers to Buttons in GPU-Testnet Page and refactored some of the css ro make it readable.

* 1. Reduced width of the main titles to prevent text overlaps.

2.Updated the top-level red link banner to open a new tab when the user clicks.

* Style: refactored the css file to make it organize and readable.

* GPU-Testnet Page Update: Date updated from "June 12, 2023 - Ends: July 3rd, 2023" to "June 20th, 2023 - Ends: July 11th, 2023 "
1. GPU docs links added successfuly,
2. kyc guideline button removed. 3. Gpu table caption and horizontal line  removed.
4.Updated the introductory text to provide a clearer description of the open-source marketplace for GPU compute.

* Style: Space added  around the GPU Models (top, left, bottom).

* 1. Fixed font issue on the community page for dark mode
2. Updated GPU docs link

* Styles: Refactored the css in dark mode to make it readable

* Updated Token page: added SVG illustrations and implemented new design layout

* merge remote tracking

* Updated Hugo image processor and increased blog image quality by 95. Added styling to blog header

* update

* Blog page improved, update on homepage blog section cards

* Refactored the css to make it readable

* Style: added  a font-size to bog-title

* feat(section): Added scroll interactions to the 3 groups sections

* a click event added to 3 groups

* Feat:  fixed scrolling error on 3 groups section

* Data labelling error fixed on small screen

* refactored css to make it readable

* Feat: Red bar announcement alert removed

* Feat: Arrow added to nav menus that open a new a tab, Launch console button successfully added

* Feat: Code cleanup and improvement on mobile and tablet devices

* Feat: three groups functionality improved

* Feat: 3 groups scroll error fixed

* Feat: Refactored css to make it readable

* update

* update

* Feat: Homepage code refactored to make it readable

* Feat: refactored token page

* Feat: pagination error fixed

* Feat: Blog page hero section added

* Feat: pagination errors fixed

* Feat: main blog details page styles changed and refactored

* Feat: share blog on twitter added

* Feat: new styles and card implememted on contributors, categories and tags page.
Error: animated gif error fixed

* Feat: cards image optimized

* Feat: Lazyload added to blog cards

* update

* Feat: blog card image optimization

* update on card optimization

* update

* Feat: card optimization

* update

* update

* Feat: blog cards responsiveness fixed

* Feat: Blog page responsiveness improve

* Feat: Homescreen cards width fixed and responsiveness improved

* Feat: newsletter section text updated

* Feat:  darkmode svg colors added

* Feat: pagination width fixed on mobile screen

* Feat: three dotten horizontal removed from navbar

* update

* Feat: ecosystem tools on dark mode color changed to white

* Feat: newsletter width fixed

* update

* Feat: css file created for newsletter styles

* Feat: data and time font-weight  change to 500 newsletter covers full width

* Feat: social icons added

* Feat: testing social links

* Feat: Linkedin url added

* Style: dark mode style added for social svgs

* update

---------

Signed-off-by: Arthur Emmanuel <86601468+ArthurEmma2@users.noreply.github.com>

.gitignore

@@ -4,3 +4,6 @@ public
 .hugo_build.lock
 .env
 .DS_Store
+
+# Local Netlify folder
+.netlify

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.mouseWheelZoom": true
+}

assets/scss/app.scss

@@ -32,7 +32,8 @@
 @import "layouts/header";
 @import "layouts/pages";
 @import "layouts/posts";
-@import "layouts/gpuTestnet";
+@import "layouts/blog";
+@import "layouts/gpu";
 @import "layouts/sidebar";
 @import "layouts/token";
-@import "layouts/blog";
+@import "layouts/newsletter";

assets/scss/common/_dark.scss

@@ -51,17 +51,10 @@ $navbar-dark-active-color: $link-color-dark;
   color: #f0f0f0;
 }
 
-[data-dark-mode] body table {
-  color: #f0f0f0;
-}
 [data-dark-mode] body .table_data_link a {
   color: #f0f0f0;
 }
 
-[data-dark-mode] body .metrics_border {
-  border-right-color: #515559 !important;
-}
-
 [data-dark-mode]
   body
   div.col-md-12.col-lg-13
@@ -87,45 +80,23 @@ $navbar-dark-active-color: $link-color-dark;
   color: $body-bg-dark;
 }
 
-[data-dark-mode] body .no-border {
-  color: #f0f0f0;
-}
-[data-dark-mode] body .community__text {
-  color: #f0f0f0 !important;
-}
-
-[data-dark-mode] body .s_d-btns {
-  background-color: #f0f0f0;
-}
-
-[data-dark-mode] body .token_eco_desc {
+[data-dark-mode] body .ecosystem-tool-desc {
   color: #f0f0f0;
 }
 
 [data-dark-mode] body .form_desc2 {
   color: #f0f0f0;
 }
 
-[data-dark-mode] body .gpu_text {
-  color: #f0f0f0;
-}
-
 [data-dark-mode] body .table__border {
   border: 1px solid #f0f0f0;
 }
 
-[data-dark-mode] body .dates_text {
-  color: #f0f0f0 !important;
-}
-[data-dark-mode] body .gpu_sub_text {
-  color: #f0f0f0 !important;
-}
 [data-dark-mode] body .group-1_header,
 .group-2_header,
 .group-3_header {
   color: #f0f0f0;
 }
-
 [data-dark-mode] body .highlight_header::after {
   background-color: #f0f0f0;
 }
@@ -190,17 +161,7 @@ $navbar-dark-active-color: $link-color-dark;
 [data-dark-mode] body .btn-menu svg {
   color: $body-color-dark;
 }
-[data-dark-mode] body .d-wrap_dark a .disc {
-  display: flex !important;
-  color: $body-color-dark;
-  position: relative;
-  right: 10px;
-  top: 3px;
-}
-[data-dark-mode] body .d-wrap a .disc {
-  display: none !important;
-  color: $body-color-dark;
-}
+
 [data-dark-mode] body .horizontal-line_table {
   border-top: 1px solid #515559;
 }
@@ -224,6 +185,55 @@ $navbar-dark-active-color: $link-color-dark;
 }
 */
 
+// Blog page section
+[data-dark-mode] .hero-content {
+  border: 1px solid #515559;
+}
+
+[data-dark-mode] .blog-hero-header a:hover {
+  color: #fff;
+}
+
+[data-dark-mode] .blog-hero-header a {
+  color: #fff;
+}
+
+[data-dark-mode] .blog-card-body .blog-card-title a {
+  color: #fff;
+}
+[data-dark-mode] .separator {
+  background-color: #fff;
+}
+
+[data-dark-mode] .blog-card {
+  border: 1px solid #515559;
+}
+
+[data-dark-mode] .tag-button {
+  border: 1px solid #515559;
+  color: #fff;
+}
+
+[data-dark-mode] .prev-pagination-button,
+[data-dark-mode] .next-pagination-button {
+  border: 1px solid #515559;
+  color: #fff;
+}
+
+[data-dark-mode] body .twitter-svg svg path:first-of-type {
+  stroke: #ccc;
+}
+[data-dark-mode] body .linkedin-svg svg path{
+  stroke: #ccc;
+}
+[data-dark-mode] body .facebook-svg svg path:first-of-type {
+  stroke: #ccc;
+}
+[data-dark-mode] body .related-blog-name a {
+  color: #ccc;
+}
+// Blog page section End
+
 [data-dark-mode] body .navbar,
 [data-dark-mode] body .doks-subnavbar {
   background-color: rgba(33, 37, 41, 0.95);
@@ -234,24 +244,30 @@ $navbar-dark-active-color: $link-color-dark;
   border-bottom: 0;
 }
 
-section.d-xs-block.d-sm-block.d-md-none > div.row > div > div > svg {
-  fill: #ccc;
+[data-dark-mode] body .svg-icon .arrow-path {
   stroke: #ddd;
 }
+[data-dark-mode] body .console-btn {
+  background-color: #ffb2b2;
+  color: black;
+}
 
-[data-dark-mode] .svg-container svg,
+[data-dark-mode] body .svg-container svg {
+  stroke: #ddd;
+  fill: #ccc;
+}
+
+[data-dark-mode] .svg-arrow-icon-wrapper svg path {
+  stroke: #000 !important;
+}
+
+[data-dark-mode] body > .svg-container svg,
 [data-dark-mode] .token_svg svg,
 [data-dark-mode] .token_svg2 svg,
 [data-dark-mode] .token_svg_ex svg {
   fill: #ccc;
   stroke: #ddd;
 }
-
-// [data-dark-mode] .arrow_svg svg {
-//   fill: #dee2e6;
-//   stroke: #dee2e6;
-// }
-
 [data-dark-mode] body .offcanvas-header {
   border-bottom: 1px solid $gray-800;
 }
@@ -260,15 +276,20 @@ section.d-xs-block.d-sm-block.d-md-none > div.row > div > div > svg {
   color: $body-color-dark;
 }
 
+[data-dark-mode] body .metrics_border {
+  border-right-color: #515559;
+}
+
+[data-dark-mode] body .sm-hand-coin svg {
+  stroke: #fff;
+}
+
 [data-dark-mode] #ecosystem-tools > div div > div > p > a {
   color: #fff;
 }
 
-[data-dark-mode] body .offcanvas .discords {
-  color: #fff !important;
-}
 [data-dark-mode] body .table_data_link .svg_mode svg path,
-[data-dark-mode] body .sm_data_link .svg_mode svg path,
+[data-dark-mode] body .tools-link .svg_mode svg path,
 [data-dark-mode] body .table_data_link .arrow_svg svg path {
   stroke: #fff;
 }
@@ -285,6 +306,16 @@ section.d-xs-block.d-sm-block.d-md-none > div.row > div > div > svg {
 [data-dark-mode] body .table_data_link .arrow_svg svg path:first-of-type {
   fill: #fff;
 }
+[data-dark-mode] body .table_data_link .token-arrow-svg svg path:first-of-type,
+[data-dark-mode]
+  body
+  .table_data_link
+  .token-arrow-svg-sm
+  svg
+  path:first-of-type,
+[data-dark-mode] body .table_data_link .arrow_svg svg path:first-of-type {
+  fill: #fff;
+}
 
 [data-dark-mode] body table {
   border-bottom-color: #515559;
@@ -293,6 +324,12 @@ section.d-xs-block.d-sm-block.d-md-none > div.row > div > div > svg {
 [data-dark-mode] div > p.mx-auto.metrics_border_bottom {
   border-bottom-color: #515559 !important;
 }
+[data-dark-mode] .second-metrics-border,
+[data-dark-mode] .first-metrics-border,
+[data-dark-mode] .third-metrics-border,
+[data-dark-mode] .forth-metrics-border {
+  border-right-color: #515559;
+}
 
 [data-dark-mode] body .table_data_link {
   border-bottom-color: #515559 !important;
@@ -456,13 +493,6 @@ section.d-xs-block.d-sm-block.d-md-none > div.row > div > div > svg {
   background: $body-overlay-dark;
   border: 1px solid transparent;
   color: $gray-300;
-
-  /*
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right calc(0.375em + 0.1875rem) center;
-  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
-  */
 }
 
 [data-dark-mode] body .form-control.is-search:focus {
@@ -478,13 +508,6 @@ section.d-xs-block.d-sm-block.d-md-none > div.row > div > div > svg {
   color: $body-color-dark !important;
 }
 
-/*
-[data-dark-mode] body .navbar-form::after {
-  color: $gray-600;
-  border: 1px solid $gray-800;
-}
-*/
-
 [data-dark-mode] body .form-control {
   color: $gray-300;
 }
@@ -798,12 +821,3 @@ section.d-xs-block.d-sm-block.d-md-none > div.row > div > div > svg {
     fill: $body-color-dark;
   }
 }
-
-@media (max-width: 576px) {
-  [data-dark-mode] body .d-wrap_dark a .disc {
-    display: flex !important;
-    position: relative;
-    margin-left: 10px;
-    top: 3px;
-  }
-}