refactor: clean-up contents and themes

Author: caramis

assets/js/highlight.js

@@ -26,6 +26,42 @@ hljs.registerLanguage('go', go);
 hljs.registerLanguage('rust', rust);
 hljs.registerLanguage('typescript', typescript);
 hljs.registerLanguage('protobuf', protobuf);
+hljs.registerLanguage('url', function() {
+  return {
+    case_insensitive: true,
+    contains: [
+        hljs.HASH_COMMENT_MODE,
+        {
+            className: "code", // (protocol: http) color #397300
+            begin: /(https?|ftp|file)(?=(:\/\/))/,
+        },
+        {
+            className: "meta hljs-emphasis", // (hostname: api.someservice.io) color #1f7199 italic
+            begin: /(?<=((https?|ftp|file):\/\/))[^@:\/\?\n\r]+/,
+        },
+        {
+            className: "comment", // (authority: @www.example.com) color #697070
+            begin: /(?<=((https?|ftp|file):\/\/[^:\/@\n\r]+)@)[^:\/\n\r]+/,
+        },
+        {
+            className: "tag hljs-emphasis", // (port: 8000) color #444a italic
+            begin: /(?<=((https?|ftp|file):\/\/[^:\/\n\r]+):)[0-9]+/,
+        },
+        {
+            className: "symbol", // (pathname: path1/path2/dothis) color #ab5656
+            begin: /(?<=((https?|ftp|file):\/\/[^\/\n\r]+)\/)[^?\n\r]+/,
+        },
+        {
+            className: "literal", // (attribute) color #695
+            begin: /(?<=[?&])[^=?&\n\r]+/,
+        },
+        {
+            className: "meta", // (value) color #1f7199
+            begin: /(?<=\=)[^=?&\n\r]+/,
+        }
+    ],
+  }
+});
 
 document.addEventListener('DOMContentLoaded', () => {
   document.querySelectorAll('pre code:not(.language-mermaid)').forEach((block) => {

assets/scss/common/_variables.scss

@@ -33,9 +33,11 @@ $color-btn-text: $white;
 // STARFLEIT
 
 $starfleit: #642EFF;
-$starfleit-primary: #00ffd1;
-$starfleit-haze: #d4ceff;
-$starfleit-lighten: lighten($starfleit, 5%);
+$starfleit-primary: #80FFE8;
+$starfleit-haze: lighten($starfleit, 30%);
+$starfleit-lighten: lighten($starfleit, 10%);
+$starfleit-darken: darken($starfleit, 20%);
+$starfleit-primary-lighten: lighten($starfleit-primary, 20%);
 $primary: $starfleit-primary;
 
 // Options
@@ -228,30 +230,59 @@ body .docs-sidebar {
   border-right: 1px solid $starfleit-lighten;
 }
 
+body pre code {
+  scrollbar-width: thin;
+  scrollbar-color: $starfleit-primary transparent;
+}
+
+body pre code:hover {
+  scrollbar-width: thin;
+  scrollbar-color: $starfleit-primary transparent;
+}
+
+body pre code::-webkit-scrollbar-thumb {
+  background: $starfleit-primary;
+  border-radius: 30px;
+}
+
+body pre code::-webkit-scrollbar-thumb:hover {
+  background: $starfleit-primary;
+  border-radius: 30px;
+}
+
 body .docs-links,
 body .docs-toc {
   scrollbar-width: thin;
-  scrollbar-color: $starfleit;
+  scrollbar-color: $starfleit-primary transparent;
+}
+
+body .docs-links:hover,
+body .docs-toc:hover {
+  scrollbar-width: thin;
+  scrollbar-color: $starfleit-primary transparent;
 }
 
 body .docs-links::-webkit-scrollbar-track,
 body .docs-toc::-webkit-scrollbar-track {
-  background: $starfleit;
+  background: transparent;
 }
 
 body .docs-links::-webkit-scrollbar-thumb,
 body .docs-toc::-webkit-scrollbar-thumb {
-  background: $starfleit;
+  background: $starfleit-primary;
+  border-radius: 30px;
 }
 
 body .docs-links:hover::-webkit-scrollbar-thumb,
 body .docs-toc:hover::-webkit-scrollbar-thumb {
   background: $starfleit-primary;
+  border-radius: 30px;
 }
 
 body .docs-links::-webkit-scrollbar-thumb:hover,
 body .docs-toc::-webkit-scrollbar-thumb:hover {
   background: $starfleit-primary;
+  border-radius: 30px;
 }
 
 body .form-control.is-search {
@@ -261,6 +292,7 @@ body .form-control.is-search {
 body .card {
   background: $starfleit;
   color: $starfleit-primary;
+  border-color: $starfleit-lighten;
 }
 
 body code {
@@ -286,9 +318,38 @@ body .text-muted {
 }
 
 body .btn-toggle:before {
-  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280, 255, 209, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2380FFE8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
 }
 
 body .alert-doks {
   background-color: $starfleit-haze;
 }
+
+body .alert-doks a {
+  color: $starfleit;
+}
+
+body .alert-doks a:hover {
+  color: $starfleit-darken;
+}
+
+
+body .alert-info {
+  background-color: $starfleit-primary-lighten;
+}
+
+body .alert-info a {
+  color: $starfleit;
+}
+
+body .alert-info a:hover {
+  color: $starfleit-darken;
+}
+
+body .alert-warning a {
+  color: $starfleit;
+}
+
+body .alert-warning a:hover {
+  color: $starfleit-darken;
+}

content/en/docs/howto/_index.md content/en/docs/how-to/_index.mdcontent/en/docs/howto/_index.md renamed to content/en/docs/how-to/_index.md

@@ -3,7 +3,11 @@ title: Create Your Own Pair
 weight: 30
 ---
 
-PLEASE CHECK [HERE](#important) for additional action on Fetch.ai
+{{< alert context="warning" >}}
+**Important**
+
+If you want to register a brand-new Fetch.ai native or IBC token that are not listed yet, please find STARFLEIT team on [#STARFLEIT channel on Fetch.ai Discord](https://bit.ly/3ra5uMI) (for metadata)
+{{< /alert >}}
 
 ## Instantiation by Contract Address
 
@@ -40,10 +44,6 @@ This is a JSON constructor of pair contract.
 
 Then, you may execute the contract with the organized JSON above.
 
-## IMPORTANT
-
-- If you want to register a brand-new Fetch.ai native or IBC token that are not listed yet, please find STARFLEIT team on [#STARFLEIT channel on Fetch.ai Discord](https://bit.ly/3ra5uMI) (for metadata)
-
 ## Provide initial liquidity
 
 STARFLEIT pair contract knows the swap rate by the both of the remained assets on the pool. But if you have just created your own pair but no liquidity provided, The contract cannot calculate the rate and all swap & swap simulation raise fail. So, STARFLEIT UI does not list the pair unless the initial liquidity is provided. So, if you want finalize the listing, you should provide the initial liquidity and it should be done on CLI.

…nt/en/docs/howto/create-your-own-pair.md …t/en/docs/how-to/create-your-own-pair.mdcontent/en/docs/howto/create-your-own-pair.md renamed to content/en/docs/how-to/create-your-own-pair.md content/en/docs/howto/create-your-own-pair.md renamed to content/en/docs/how-to/create-your-own-pair.md

@@ -8,17 +8,16 @@ weight: 20
 This token contract is implemented under the CW20 standard and it fully supports STARFLEIT feature.
 Except for any function of your token itself contains more than an asset, we recommend minting your own token by **instantiating this binary**, rather than developing your own.
 
----
-> **NOTE**
->
-> We strongly encourage you to create by the pre-stored binary.\
-> There are some advantages below:
->
-> * These token, pair contract codes are well audited and continuously maintained. Don't have to audit for yours additionally.
-> * STARFLEIT only lists Token factory-created pairs.
-> * You don't have to migrate your contract whenever there is any major upgrade of Fetch.ai network. STARFLEIT will help you to migrate so that you don't have to take any action.
->
----
+{{< alert context="info" >}}
+**Note**
+
+We strongly encourage you to create by the pre-stored binary.\
+There are some advantages below:
+
+* These token, pair contract codes are well audited and continuously maintained. Don't have to audit for yours additionally.
+* STARFLEIT only lists Token factory-created pairs.
+* You don't have to migrate your contract whenever there is any major upgrade of Fetch.ai network. STARFLEIT will help you to migrate so that you don't have to take any action.
+{{< /alert >}}
 
 ## How to Mint
 

…n/docs/howto/frequently-used-messages.md …/docs/how-to/frequently-used-messages.mdcontent/en/docs/howto/frequently-used-messages.md renamed to content/en/docs/how-to/frequently-used-messages.md content/en/docs/howto/frequently-used-messages.md renamed to content/en/docs/how-to/frequently-used-messages.md

@@ -20,13 +20,13 @@ fetchd query wasm contract-state smart fetch1kmag3937lrl6dtsv29mlfsedzngl9egv5c3
 
 - RESTFul API
 
-```URL
+```url
 <light_clinet_address>/cosmwasm/wasm/v1/contract/<contract_address>/smart/<JSON_formed_message_with_base64>
 ```
 
 ex)
 
-```URL
+```url
 https://rest-dorado.fetch.ai/cosmwasm/wasm/v1/contract/fetch1xjn7ljgkzn8agscr8g6xnnhn3azu3kfkuga8uqufr36sc75f8s0sxyhnyq/smart/eyJwYWlycyI6e319
 ```
 

content/en/docs/howto/token.md …t/en/docs/how-to/mint-your-cw20-token.mdcontent/en/docs/howto/token.md renamed to content/en/docs/how-to/mint-your-cw20-token.md content/en/docs/howto/token.md renamed to content/en/docs/how-to/mint-your-cw20-token.md

@@ -27,7 +27,7 @@ fetchd tx wasm execute <contract-address> <handle-msg> <coins>
 - `handle-msg`: The method and parameters of the execution, which will be explained following lines
 - `coins`: Transaction execution fee
 
-To learn more about the general rules for `handle-msg`, please refer to this [link]({{< relref "/docs/howto/query" >}}).
+To learn more about the general rules for `handle-msg`, please refer to this [link]({{< relref "/docs/how-to/query" >}}).
 
 ```json
 {

content/en/docs/howto/query.md content/en/docs/how-to/query.mdcontent/en/docs/howto/query.md renamed to content/en/docs/how-to/query.md

@@ -24,10 +24,13 @@ A **liquidity provider** adds equal value of two assets to their corresponding S
 **STARFLEIT Web Application** is the official web front-end interface for swapping Fetch.ai native tokens and CW20 tokens. The web application is located [here](https://app.starfleit.io).
 
 A wallet is required to interact with STARFLEIT Web Application.
-> For web,
->
-> - [Fetch.ai network wallet](https://chrome.google.com/webstore/detail/fetchai-network-wallet/ellkdbaphhldpeajbepobaecooaoafpg?hl=en-GB)
->
-> And will be more
+
+{{< alert >}}
+For web,
+
+- [Fetch.ai network wallet](https://chrome.google.com/webstore/detail/fetchai-network-wallet/ellkdbaphhldpeajbepobaecooaoafpg?hl=en-GB)
+
+And will be more
+{{< /alert >}}
 
 Before executing a swap in the web application, your connected wallet must have source tokens and transaction fee. Once you generate a transaction in the proper format, it will prompt you to sign the transaction by entering your password.