new changes

Zilliqa · Sep 13, 2024 · 63b3023 · 63b3023
1 parent 7ff1642
commit 63b3023
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 57 deletions.
diff --git a/zq2/docs/assets/img/favicon.png b/zq2/docs/assets/img/favicon.png
diff --git a/zq2/docs/endpoints.md b/zq2/docs/endpoints.md
@@ -1,17 +1,24 @@
 ---
 id: endpoints
-title: Endpoints, Block Explorer and Faucet
+title: Endpoints, Block Explorer & Faucet
 keywords:
   - api
   - introduction
   - endpoints
-description: Endpoints, Block Explorer and Faucet
+description: Endpoints, Block Explorer & Faucet
 ---
 
-# Endpoints, Block Explorer and Faucet
+# Endpoints, Block Explorer & Faucet
 
 As we introduce additional test networks for Zilliqa 2.0, their public RPC node URLs and chain IDs will be published on [ChainList](https://chainlist.org/?search=zilliqa&testnets=true) alongside existing chain information for Zilliqa 1.0.
-
+<br>
+<br>
+
+<span id="addZilliqaChainButton" class="metamask">
+Add Zilliqa 2 EVM proto-testnet
+</span>
+<br>
+<br>
 ## Networks
 
 Details for the current network versions of Zilliqa 2.0 are listed below.
@@ -37,7 +44,7 @@ The faucet sends an amount of 100 ZIL to the supplied address for use in testing
 Enter the hex address of your compatible EVM wallet into the field below to receive 100 ZIL on the Zilliqa 2.0 proto-testnet:
 
 <div class="fish">
- <iframe width="80%" height="200px" src="https://faucet.zq2-prototestnet.zilliqa.com/">
+ <iframe width="80%" height="200px" src="https://faucet.zq2-prototestnet.zilliqa.com/"></iframe>
  </div>
 
 _If you are unable to use the tool above, you can also [access the faucet here](https://faucet.zq2-prototestnet.zilliqa.com)._
diff --git a/zq2/docs/index.md b/zq2/docs/index.md
@@ -40,7 +40,7 @@ Zilliqa 2.0 is based on 2 years of research into cutting-edge blockchain technol
 <div markdown>
 
 ## Core protocol
-At the current stage of Zilliqa 2.0 development, the core protocol is available to test via the Jasper proto-testnet.To achieve the best possible performance, we decided to re-implement our entire protocol in Rust.
+At the current stage of Zilliqa 2.0 development, the core protocol is available to test via the Jasper proto-testnet. To achieve the best possible performance, we decided to re-implement our entire protocol in Rust.
 
 </div>
 <div markdown>

diff --git a/zq2/docs/stylesheets/extra.css b/zq2/docs/stylesheets/extra.css
@@ -21,7 +21,7 @@
   --md-default-fg-color: #ffffff;
   --md-default-fg-color--light: #ffffff;
   --md-default-fg-color--dark: #ffffff;
-  --md-default-fg-color--lightest: #808080;
+  --md-default-fg-color--lightest: #393939;
   --md-typeset-color: #ffffff;
   --md-typeset-a-color: #00d0c6;
   --md-accent-fg-color: #00d0c6;
@@ -35,7 +35,7 @@
   --md-code-fg-color: #ffffff;
   --md-code-fg-color--light: #ffffff;
   --md-code-hl-comment-color: #cccc00;
-  --md-typeset-table-color: #808080;
+  --md-typeset-table-color: #393939;
   --md-typeset-table-stripe-color: #303030;
   --md-code-hl-punctuation-color: #808080;
   --md-code-h1-name-color: #606060;
@@ -49,14 +49,14 @@
 
 .md-header {
   color: #ffffff;
-  box-shadow: 0px 0px 4px 0px #0000001A;
+  box-shadow: 0px 0px 4px 0px #0000001a;
 }
 
-[dir=ltr] .md-header__title {
-  margin-left: 0
+[dir="ltr"] .md-header__title {
+  margin-left: 0;
 }
 
-.md-search__input+.md-search__icon {
+.md-search__input + .md-search__icon {
   color: #ffffff;
 }
 
@@ -81,9 +81,9 @@ td {
   border-top: none;
 }
 
-.md-typeset__table {
+/* .md-typeset__table {
   line-height: 1;
-}
+} */
 
 .md-typeset__table table:not([class]) {
   font-size: 0.74rem;
@@ -151,9 +151,14 @@ td {
 }
 
 .md-typeset em {
-  color: var(--md-default-fg-color--lightest)
+  color: var(--md-default-fg-color--lightest);
 }
 
+@media screen and (max-width: 76.1875em) {
+  .md-nav--primary .md-nav__title[for="__drawer"] {
+    color: #ffffff;
+  }
+}
 /* Cre */
 p a {
   text-decoration: underline;
@@ -173,6 +178,7 @@ p a {
 
 .md-content__inner {
   padding-top: 4rem;
+  padding-bottom: 4rem;
 }
 
 .md-sidebar {
@@ -181,7 +187,7 @@ p a {
 }
 
 @supports selector(::-webkit-scrollbar) {
-  [dir=ltr] .md-sidebar__inner {
+  [dir="ltr"] .md-sidebar__inner {
     padding-right: calc(100% - 15rem);
   }
 }
@@ -190,10 +196,10 @@ p a {
   min-height: 400px;
   background: url("../assets/banner.webp");
   background-position: center;
+  background-repeat: no-repeat;
   padding: 4rem;
   position: relative;
   margin-bottom: 3rem;
-  margin-top: -4rem;
 }
 
 .md-typeset .md-zil-banner h1 {
@@ -210,36 +216,36 @@ p a {
   font-size: 31px;
   font-weight: 700;
   letter-spacing: -0.5px;
-  display: inline-block
+  display: inline-block;
 }
 
 .md-zil-banner .flex {
   display: flex;
 }
 
-.md-zil-banner .flex>div {
+.md-zil-banner .flex > div {
   width: 50%;
   line-height: 28px;
 }
 
-.md-zil-banner .flex>div:last-child a {
+.md-zil-banner .flex > div:last-child a {
   border: 1px solid var(--md-accent-fg-color);
-  line-height: 62px;
-  border-radius: 15px;
-  padding: 0 3rem;
+  line-height: 54px;
+  border-radius: 10px;
+  padding: 0 2rem;
   margin: 0.5rem 0 0 4rem;
   display: inline-block;
   font-weight: 700;
-  letter-spacing: -.5px;
+  letter-spacing: -0.5px;
   text-decoration: none;
 }
 
-.md-zil-banner .flex>div:last-child a:hover {
+.md-zil-banner .flex > div:last-child a:hover {
   background-color: var(--md-accent-fg-color);
   color: #ffffff;
 }
 
-.md-zil-banner>div {
+.md-zil-banner > div {
   position: relative;
   z-index: 1;
 }
@@ -252,7 +258,7 @@ p a {
   width: 100%;
   height: 100%;
   background: #000000;
-  opacity: .4;
+  opacity: 0.4;
   z-index: 0;
 }
 
@@ -278,12 +284,12 @@ p a {
 
 .md-zil-cards.cards ul li,
 .md-zil-cards > div {
-  border: 1px solid #3b3b3b;
-  border-radius: 15px;
+  border: 1px solid var(--md-typeset-table-color);
+  border-radius: 25px;
 }
 
 .md-zil-cards.cards ul li {
-  margin: 0
+  margin: 0;
 }
 
 .md-zil-cards.cards ul li a {
@@ -300,8 +306,11 @@ p a {
   background-position: calc(100% - 20px) 30px;
   background-size: 30px;
   padding-right: 70px;
+  transition: color 300ms ease-in-out;
+}
+.md-zil-cards.cards ul li a:hover {
+  color: rgba(255, 255, 255, 0.6);
 }
-
 .md-zil-cards > div {
   padding: 1.5rem 2rem;
   display: flex;
@@ -310,24 +319,28 @@ p a {
   justify-content: space-between;
 }
 
-.md-zil-cards>div h2 {
+.md-zil-cards > div h2 {
   margin: 0;
   margin-bottom: 1.5rem;
 }
 
-.md-zil-cards>div p {
+.md-zil-cards > div p {
   margin: 0;
-  color: rgba(255, 255, 255, .6);
+  color: rgba(255, 255, 255, 0.6);
   font-size: 14px;
+  transition: color 300ms ease-in-out;
 }
 
+.md-zil-cards > div:hover p {
+  color: #fff;
+}
 
 .metamask {
   font-size: 16px;
   font-weight: 600;
   padding: 14px 24px;
   padding-left: 50px;
-  background-color: #1D1D1D;
+  background-color: #1d1d1d;
   border-radius: 7px;
   background-image: url(../assets/metamask_fox.png);
   background-repeat: no-repeat;
@@ -341,45 +354,61 @@ p a {
   cursor: pointer;
 }
 
-
-
-
 @media screen and (max-width: 76.1875em) {
-  [dir=ltr] .md-sidebar {
+  [dir="ltr"] .md-sidebar {
     left: -15rem;
   }
 
-  [data-md-toggle=drawer]:checked~.md-container .md-side bar--primary {
+  [data-md-toggle="drawer"]:checked ~ .md-container .md-side bar--primary {
     box-shadow: var(--md-shadow-z3);
     transform: translateX(15rem);
   }
-  [data-md-toggle=drawer]:checked~.md-container .md-sidebar--primary {
+  [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary {
     box-shadow: var(--md-shadow-z3);
     transform: translateX(15rem);
-}
-  .md-zil-banner,.md-zil-wrapper{
-    padding:1.8rem;
+  }
+  .md-zil-banner,
+  .md-zil-wrapper {
+    padding: 1.8rem;
     background-position: 30% center;
-    margin: -3rem -0.8rem 1.2rem;
+    margin: -0rem -0.8rem 1.2rem;
+    background-size: auto 102%;
+  }
+  .md-zil-banner {
+    margin-top: -3rem;
   }
-  .md-typeset .md-zil-banner h1{
-    max-width:100%
+  .md-typeset .md-zil-banner h1 {
+    max-width: 100%;
   }
-  .md-zil-banner .flex{
-flex-direction: column;
+  .md-zil-banner .flex {
+    flex-direction: column;
   }
-  .md-zil-banner .flex >div{
+  .md-zil-banner .flex > div {
     width: 100%;
   }
-  .md-zil-banner .flex>div:last-child a{
-    margin-left:0;
+  .md-zil-banner .flex > div:last-child a {
+    margin-left: 0;
   }
-  .md-zil-cards,.md-zil-cards.cards ul{
+  .md-zil-cards,
+  .md-zil-cards.cards ul {
     gap: 1rem;
-    grid-template-columns: auto ;
+    grid-template-columns: auto;
   }
-  .md-zil-cards>div{
-    padding:1rem;
+  .md-zil-cards > div {
+    padding: 1rem;
     min-height: 0;
   }
 }
+
+@media screen and (max-width: 400px) {
+  .md-typeset .md-zil-banner h1 {
+    font-size: 28px;
+    line-height: 34px;
+  }
+  .md-zil-banner .flex > div:last-child a {
+    padding: 0 1.5rem;
+  }
+  .metamask {
+    font-size: 12px;
+  }
+}
diff --git a/zq2/mkdocs.in.yaml b/zq2/mkdocs.in.yaml
@@ -2,7 +2,7 @@ INHERIT: ./parent.yaml
 nav:
   - Welcome: index.md
   - What's new in Zilliqa 2.0: changes.md
-  - Endpoints, Block Explorer and Faucet: endpoints.md
+  - Endpoints, Block Explorer & Faucet: endpoints.md
   - Nodes & Validators:
       - Overview:
           - nodes/index.md