redis-developer · ajeetraina · Jan 27, 2021 · Jan 27, 2021
diff --git a/.gitignore b/.gitignore
@@ -18,3 +18,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+debug.log*
diff --git a/debug.log b/debug.log
diff --git a/docs/develop/golang/index-golang.mdx b/docs/develop/golang/index-golang.mdx
@@ -8,7 +8,7 @@ slug: /develop/golang/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RedisCard from '@site/src/components/RedisCard';
+import RedisCard from '@site/src/theme/RedisCard';
 
 Find tutorials, examples and technical articles that will help you to develop with Redis and Golang.
 
@@ -130,4 +130,4 @@ Find more information about Golang & Redis connections in the "[Redis Connect](h
 
 
   </TabItem>
-</Tabs>
+</Tabs>
diff --git a/docs/develop/java/index-java.mdx b/docs/develop/java/index-java.mdx
@@ -7,7 +7,7 @@ slug: /develop/java/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RedisCard from '@site/src/components/RedisCard';
+import RedisCard from '@site/src/theme/RedisCard';
 
 Find tutorials, examples and technical articles that will help you to develop with Redis and Java.
 

diff --git a/docs/develop/node/index-node.mdx b/docs/develop/node/index-node.mdx
@@ -8,7 +8,7 @@ slug: /develop/node/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RedisCard from '@site/src/components/RedisCard';
+import RedisCard from '@site/src/theme/RedisCard';
 
 Find tutorials, examples and technical articles that will help you to develop with Redis and Node.js/JavaScript.
 
@@ -162,4 +162,4 @@ Build full-fledged Redis applications with Node.js and Express.
 
 <div class="text--center">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/Ik1WXPX3WNU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
+</div>
diff --git a/docs/develop/python/index-python.mdx b/docs/develop/python/index-python.mdx
@@ -8,7 +8,7 @@ slug: /develop/python/
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RedisCard from '@site/src/components/RedisCard';
+import RedisCard from '@site/src/theme/RedisCard';
 
 Find Tutorials, Examples and Technical articles that will help you to develop with Redis and Python.
 
@@ -106,4 +106,4 @@ A complete introduction to Redis for Python developers.
 
 <div class="text--center">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/BxRJRNt7Qwc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
+</div>
diff --git a/docs/guides/import/index-import.mdx b/docs/guides/import/index-import.mdx
@@ -5,7 +5,7 @@ sidebar_label: Import
 slug: /guides/import/
 ---
 
-import RedisCard from '@site/src/components/RedisCard';
+import RedisCard from '@site/src/theme/RedisCard';
 
 
 

diff --git a/docs/guides/index.mdx b/docs/guides/index.mdx
@@ -5,7 +5,7 @@ sidebar_label: Guides
 slug: guides/index
 ---
 
-import RedisCard from '@site/src/components/RedisCard';
+import RedisCard from '@site/src/theme/RedisCard';
 
 
 

diff --git a/docs/tools/index.mdx b/docs/tools/index.mdx
@@ -4,7 +4,7 @@ title: Tools
 sidebar_label: Tools
 slug: /tools
 ---
-import RedisCard from '@site/src/components/RedisCard';
+import RedisCard from '@site/src/theme/RedisCard';
 
 
 ### GUI tools for Redis

diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -16,6 +16,7 @@ module.exports = {
         alt: 'Redis Developer',
         src: 'img/logo-1.png',
       },
+      hideOnScroll: true,
       items: [
         {
           to: '#',
@@ -103,15 +104,14 @@ module.exports = {
       ],
       copyright: `Copyright: © ${new Date().getFullYear()} Redis Labs. Redis and the cube logo are registered trademarks of Redis Labs Ltd.`,
     },
-
     colorMode: {
       // Hides the switch in the navbar
       // Useful if you want to support a single color mode
       disableSwitch: false,
     },
     announcementBar: {
       id: 'redisconf20201cfp', // Any value that will identify this message.
-      content: 'RedisConf 2021 - The Call for Paper is Open, Submit your Proposal <a href="https://redislabs.com/redisconf/">Learn more</a>',
+      content: '<p class="text">RedisConf 2021 - The Call for Paper is Open, Submit your Proposal</p> <a href="https://redislabs.com/redisconf/" target="_blank" rel="nofollow noopener" class="btn">Learn more</a>',
       backgroundColor: '#fff', // Defaults to `#fff`.
       textColor: '#000', // Defaults to `#000`.
       isCloseable: true, // Defaults to `true`.

diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "docusaurus-plugin-sass": "^0.1.11",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
+    "react-slick": "^0.28.0",
     "react-typed": "^1.2.0"
   },
   "browserslist": {

diff --git a/src/css/_article.scss b/src/css/_article.scss
@@ -96,37 +96,95 @@ blockquote {
   border-left: 5px solid #dbdada;
 }
 
+main:not(.home-main) {
+  a {
+    text-decoration: none;
+    transition: all .2s ease-in-out;
+
+    &:hover {
+      color: $purple-hover;
+    }
+  }
+
+  article {
+    header {
+      h1 {
+        line-height: 1.2;
+        font-size: 49px;
+
+        @include mobile {
+          font-size: 39px;
+        }
+      }
+    }
+  }
+}
+
 .markdown {
   color: $black;
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: $lato;
+    font-weight: 700;
+  }
+
   h1 {
     line-height: 1.2;
     font-size: 49px;
+
+    @include mobile {
+      font-size: 39px;
+    }
   }
 
   h2 {
     line-height: 1.2;
     font-size: 38px;
+
+    @include mobile {
+      font-size: 28px;
+    }
   }
 
   h3 {
     line-height: 1.2;
     font-size: 32px;
+
+    @include mobile {
+      font-size: 22px;
+    }
   }
 
   h4 {
     line-height: 1.5;
     font-size: 25px;
+
+    @include mobile {
+      font-size: 20px;
+    }
   }
 
   h5 {
     line-height: 1.45;
     font-size: 20px;
+
+    @include mobile {
+      font-size: 18px;
+    }
   }
 
   h6 {
     line-height: 1.6;
     font-size: 18px;
+
+    @include mobile {
+      font-size: 16px;
+    }
   }
 }
 
@@ -172,15 +230,80 @@ blockquote {
     border-radius: 0;
     line-height: 1;
     font-size: 17px;
+    transition: color .2s ease-in-out;
 
     &:not(:last-child) {
       margin-right: 10px;
     }
 
     &:hover {
       background-color: transparent;
+      color: $purple-hover;
+    }
+
+    &--active {
+      color: var(--ifm-tabs-color-active) !important;
+    }
+  }
+}
+
+.ri-container {
+  margin-bottom: 30px;
+  padding: 20px;
+  height: calc(100% - 30px);
+  border: 2px solid $grey-dark;
+
+  .ri-icon {
+    display: none;
+  }
+
+  .ri-detail {
+    width: 100%;
+  }
+
+  .ri-title {
+    text-align: left;
+    line-height: 1.6;
+    font-size: 18px;
+
+    a {
+      color: $black;
     }
+  }
+
+  .ri-description {
+    text-align: left;
+    line-height: 1.8;
+    font-size: 16px;
+    color: $black;
+
+    img {
+      margin-top: 15px;
+    }
+  }
+
+  img {
+    max-width: 50%;
+  }
+}
+
+code {
+  border-radius: 4px;
+  background-color: $purple-light;
+}
+
+iframe {
+  max-width: 100%;
+  box-shadow: 0 2px 20px rgba($black, .17);
+}
+
+.sidebar-logo {
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
+  height: 60px;
 
-    &--active {}
+  img {
+    height: 26px;
   }
 }
diff --git a/src/css/_config.scss b/src/css/_config.scss
@@ -8,6 +8,7 @@ $secondary-black: #2E2E2E;
 $zircon: #F8FAFF;
 $grey: #707070;
 $grey-light: #E0DFDF;
+$grey-dark: #C2C0C0;
 $purple: #5961FF;
 $purple-hover: #3F41A0;
 $purple-light: #F2F5FE;
@@ -30,8 +31,40 @@ monospace;
   --zircon: #F8FAFF;
   --grey: #707070;
   --grey-light: #E0DFDF;
+  --grey-dark: #C2C0C0;
   --purple: #5961FF;
   --purple-hover: #3F41A0;
   --purple-light: #F2F5FE;
   --purple-lighter: #F9FAFF;
 }
+
+/* media queries */
+@mixin desktop {
+  @media only screen and (min-width: 997px) {
+    @content;
+  }
+}
+
+@mixin desktop-tablet {
+  @media only screen and (min-width: 751px) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media only screen and (min-width: 751px) and (max-width: 996px) {
+    @content;
+  }
+}
+
+@mixin tablet-mobile {
+  @media only screen and (max-width: 996px) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media only screen and (max-width: 750px) {
+    @content;
+  }
+}
diff --git a/src/css/_typography.scss b/src/css/_typography.scss
@@ -15,9 +15,19 @@ h6 {
   font-size: 38px;
   font-weight: 600;
 
+  @include mobile {
+    font-size: 32px;
+  }
+
   &.white {
     color: $white;
   }
+
+  br {
+    @include desktop-tablet {
+      display: none;
+    }
+  }
 }
 
 // section-description
@@ -29,8 +39,17 @@ h6 {
   font-size: 18px;
   font-weight: 400;
 
+  @include mobile {
+    line-height: 1.6;
+    font-size: 16px;
+  }
+
   &:not(:first-child) {
     margin-top: 11px;
+
+    @include mobile {
+      margin-top: 14px;
+    }
   }
 
   &.white {
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,7 @@ sidebar_label: Import @@
     slug: /guides/import/
     ---
-    import RedisCard from '@site/src/components/RedisCard';
+    import RedisCard from '@site/src/theme/RedisCard';
@@ Expand Down @@