Fixed CodeBlock on Mobile Devices, Updated Background in About Us, Ad…

…ded Community Forum (#79) * Fixed codeblock on documentation for mobile devices, fixed background in about us page, and added community forum to footer * Mobile responsive on about us * Removed background color, fixed codeblock on dark mode and fixed cookiepopup dialog on docs * Fixed mobile responsive spacing * Fixed two column issue at 767px
neptune-mutual-blue · Apr 19, 2023 · 528b847 · 528b847
1 parent a38a5d6
commit 528b847
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 29 deletions.
diff --git a/src/data/footer.ts b/src/data/footer.ts
@@ -60,6 +60,7 @@ const getFooterData = async (): Promise<FooterData> => {
           badge: 'New!',
           badgeColor: 'success'
         },
+        { href: 'https://community.neptunemutual.com/', includeTheme: false, text: 'Community Forum', isExternal: false },
         { href: '/ecosystem/', text: 'Ecosystem', isExternal: false },
         { href: '/docs/', text: 'Documentation', isExternal: false },
         { href: '/web3-tools/', text: 'Web3 Tools', isExternal: false },

diff --git a/src/elements/content/Content.scss b/src/elements/content/Content.scss
@@ -428,6 +428,31 @@
       word-break: break-all;
     }
 
+    .hljs {
+      table th,
+      table td {
+        border: none !important;
+      }
+
+      table {
+        width: 100% !important;
+
+        tr:first-child {
+          background-color: transparent !important;
+
+          td {
+            background-color: transparent !important;
+
+          }
+        }
+      }
+
+      td.hljs-ln-line.hljs-ln-numbers {
+        width: 20px;
+        border-right: 1px solid colors.$gray-800 !important;
+      }
+    }
+
     table {
       tr:first-child {
         background-color: colors.$white;
@@ -768,6 +793,13 @@
       word-break: break-word;
     }
 
+    .hljs {
+      table th,
+      table td {
+        border: none !important;
+      }
+    }
+
     table {
       tr:first-child {
         background-color: colors.$gray-900;

diff --git a/src/pages/docs/index.scss b/src/pages/docs/index.scss
@@ -1,5 +1,11 @@
 @import "../../styles/global.scss";
 
+@import "../../elements/buttons/Button.scss";
+@import "../../elements/buttons/PrimaryButton.scss";
+@import "../../elements/buttons/_base/index.scss";
+@import "../../elements/buttons/LinkGrayButton.scss";
+@import "../../elements/buttons/SecondaryGrayButton.scss";
+
 @import "../../elements/Input.scss";
 @import "../../elements/Breadcrumb.scss";
 @import "../../elements/tooltip/Tooltip.scss";

diff --git a/src/views/about/Roadmap.scss b/src/views/about/Roadmap.scss
@@ -24,6 +24,10 @@
     margin-top: 96px;
     padding-top: 56px;
 
+    @media (max-width: 767px) {
+      margin-top: 0px;
+    }
+
     @include utils.full-width-container;
   }
 

diff --git a/src/views/about/Team.astro b/src/views/about/Team.astro
@@ -32,16 +32,14 @@ const t = (x: string): string => x;
     </p>
   </div>
   <div class="team members center">
-    <Slider gap={8}>
-      <div class="team member list container">
-        <div class="ui team member list">
-          {
-            team.map((member) => {
-              return <Member className="with slider" member={member} />;
-            })
-          }
-        </div>
+    <div class="team member list container">
+      <div class="ui team member list">
+        {
+          team.map((member) => {
+            return <Member className="with slider" member={member} />;
+          })
+        }
       </div>
-    </Slider>
+    </div>
   </div>
 </div>
diff --git a/src/views/about/Team.scss b/src/views/about/Team.scss
@@ -15,11 +15,9 @@
   flex-direction: column;
   gap: 64px;
 
-  background-color: colors.$white;
-
   @media screen and (max-width: 767px) {
     margin-top: 64px;
-    margin-bottom: 64px;
+    margin-bottom: 0;
     padding-bottom: 0;
   }
 
@@ -68,32 +66,22 @@
     .ui.team.member.list {
       display: inline-flex;
       flex-direction: row;
-      gap: 8px;
+      flex-wrap: wrap;
+
+      @media (max-width: 767px) {
+        gap: 32px;
+      }
     }  
   }
 
   .team.members.center {
     display: flex;
     flex-direction: column;
-  }
-
-  .slider.container {
-    max-width: 100%;
-    width: auto;
-    display: inline-flex;
-    flex-direction: column;
-    margin-left: auto;
-    margin-right: auto;
-    gap: 64px;
-
-    .arrows {
-      justify-content: center;
-    }    
+    align-items: center;
   }
 }
 
 .dark .about.us.section .team.full.width.container {
-  background-color: colors.$black;
 
   > .content {