From 528b8476b20ef71716f4ef0bbe945c4c4c13a150 Mon Sep 17 00:00:00 2001
From: Ankit Kumar Karna
Date: Wed, 19 Apr 2023 18:42:03 +0545
Subject: [PATCH] Fixed CodeBlock on Mobile Devices, Updated Background in
About Us, Added 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
---
src/data/footer.ts | 1 +
src/elements/content/Content.scss | 32 +++++++++++++++++++++++++++++++
src/pages/docs/index.scss | 6 ++++++
src/views/about/Roadmap.scss | 4 ++++
src/views/about/Team.astro | 18 ++++++++---------
src/views/about/Team.scss | 26 +++++++------------------
6 files changed, 58 insertions(+), 29 deletions(-)
diff --git a/src/data/footer.ts b/src/data/footer.ts
index b6fbf9fd..a841fef4 100644
--- a/src/data/footer.ts
+++ b/src/data/footer.ts
@@ -60,6 +60,7 @@ const getFooterData = async (): Promise => {
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
index 2902a7cf..b3343c0e 100644
--- 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
index 28595924..323b7dde 100644
--- 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
index 23e50ff6..ca819e6f 100644
--- 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
index b920802a..b1a48216 100644
--- a/src/views/about/Team.astro
+++ b/src/views/about/Team.astro
@@ -32,16 +32,14 @@ const t = (x: string): string => x;
-
-
-
- {
- team.map((member) => {
- return ;
- })
- }
-
+
+
+ {
+ team.map((member) => {
+ return ;
+ })
+ }
-
+
diff --git a/src/views/about/Team.scss b/src/views/about/Team.scss
index f3384c75..ece363a3 100644
--- 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 {