theme changes to operators

documentation/operators/book.toml

@@ -3,7 +3,7 @@ title = "Nym Operators Guide"
 authors = ["Max Hampshire, Serinko, Alexia Lorenza Martinel"]
 description = "Everything needed to run Nym Mixnet components"
 language = "en"
-multilingual = false # for the moment - ideally work on chinese, brazillian portugese, spanish next
+multilingual = false                                           # for the moment - ideally work on chinese, brazillian portugese, spanish next
 src = "src"
 
 [rust]
@@ -14,17 +14,18 @@ edition = "2018"
 #################
 
 [preprocessor.theme]
-sidebar-width             = "280px"
-content-max-width         = "70%"
-content-main-margin-left  = "5%"
-content-main-margin-right = "5%"
-root-font-size            = "70%"
-# DO NOT CHANGE or you might overwrite the custom hbs file
+pagetoc = true
+sidebar-width = "280px"
+content-max-width = "80%"
+root-font-size = "70%"
+# if you need to change anything in the index.hbs file you need to turn this to `false`, rebuild the book, 
+# probably remove the additional `comment` that gets appended to the header, and then change this back to `true`. 
+# this is because of a bug in the `mdbook-theme` plugin
 turn-off = true
 
 [preprocessor.admonish]
 command = "mdbook-admonish"
-assets_version = "3.0.2" # do not edit: managed by `mdbook-admonish install`
+assets_version = "3.0.2"    # do not edit: managed by `mdbook-admonish install`
 
 # https://gitlab.com/tglman/mdbook-variables/
 [preprocessor.variables.variables]
@@ -55,53 +56,57 @@ renderer = ["html"]
 #########
 
 [build]
-build-dir = "book"                # the directory where the output is placed
-create-missing = true             # whether or not to create missing pages
-use-default-preprocessors = true  # use the default preprocessors
-extra-watch-dirs = []             # directories to watch for triggering builds
+build-dir = "book"               # the directory where the output is placed
+create-missing = true            # whether or not to create missing pages
+use-default-preprocessors = true # use the default preprocessors
+extra-watch-dirs = []            # directories to watch for triggering builds
 
 ##########
 # OUTPUT #
 ##########
 
 [output.html]
-theme         = "nym_themes"
+theme = "themes"
 default-theme = "coal"
 preferred-dark-theme = "coal"
 #curly-quotes = true
 smart-punctuation = true
 copy-fonts = true
 no-section-label = false
-additional-css = ["./nym_themes/custom.css", "./nym_themes/mdbook-admonish.css", "./nym_themes/pagetoc.css"]
-additional-js  = ["./nym_themes/pagetoc.js"]
+additional-css = [
+  "./themes/custom.css",
+  "./themes/mdbook-admonish.css",
+  "./themes/pagetoc.css",
+]
+additional-js = ["./themes/pagetoc.js"]
 git-repository-url = "https://github.com/nymtech/nym"
 git-repository-icon = "fa-github"
 input-404 = "not-found.md"
 
 [output.html.fold]
-enable = true    # whether or not to enable section folding
-level = 0        # the depth to start folding
+enable = true # whether or not to enable section folding
+level = 0     # the depth to start folding
 
 # controlling rust sample code blocks
 [output.html.playground]
-editable = false         # allows editing the source code
-copyable = true          # include the copy button for copying code snippets
-copy-js = true           # includes the JavaScript for the code editor
-line-numbers = true      # displays line numbers for editable code
-runnable = true          # displays a run button for rust code
+editable = false    # allows editing the source code
+copyable = true     # include the copy button for copying code snippets
+copy-js = true      # includes the JavaScript for the code editor
+line-numbers = true # displays line numbers for editable code
+runnable = true     # displays a run button for rust code
 
 # options for the built in text search
 [output.html.search]
-enable = true            # enables the search feature
-limit-results = 30       # maximum number of search results
-teaser-word-count = 30   # number of words used for a search result teaser
-use-boolean-and = true   # multiple search terms must all match
-boost-title = 2          # ranking boost factor for matches in headers
-boost-hierarchy = 1      # ranking boost factor for matches in page names
-boost-paragraph = 1      # ranking boost factor for matches in text
-expand = true            # partial words will match longer terms
-heading-split-level = 3  # link results to heading levels
-copy-js = true           # include Javascript code for search
+enable = true           # enables the search feature
+limit-results = 30      # maximum number of search results
+teaser-word-count = 30  # number of words used for a search result teaser
+use-boolean-and = true  # multiple search terms must all match
+boost-title = 2         # ranking boost factor for matches in headers
+boost-hierarchy = 1     # ranking boost factor for matches in page names
+boost-paragraph = 1     # ranking boost factor for matches in text
+expand = true           # partial words will match longer terms
+heading-split-level = 3 # link results to heading levels
+copy-js = true          # include Javascript code for search
 
 [output.linkcheck]
 warning-policy = "warn"

documentation/operators/nym_themes/css/variables.css → documentation/operators/themes/css/variables.css

@@ -6,7 +6,7 @@
     --sidebar-resize-indicator-width: 8px;
     --sidebar-resize-indicator-space: 2px;
     --page-padding: 15px;
-    --content-max-width: 70%;
+    --content-max-width: 80%;
     --menu-bar-height: 40px;
     --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
     --code-font-size: 0.875em /* please adjust the ace font size accordingly in editor.js */

documentation/operators/nym_themes/custom.css → documentation/operators/themes/custom.css

@@ -8,10 +8,12 @@
   --sidebar-active: #fb6e4e;
   --icons-hover: #fb6e4e;
   --links: #fb6e4e;
+
   ::selection {
     color: #121726;
     background-color: #c5573d;
   }
+
   select option {
     background-color: #121726;
   }
@@ -21,17 +23,18 @@
   --sidebar-active: #fb6e4e;
   --icons-hover: #fb6e4e;
   --links: #fb6e4e;
+
   ::selection {
-    color:#f2f2f2;
+    color: #f2f2f2;
     background-color: #c5573d;
   }
 }
 
 /*properly centering the title given the additional header items*/
 .menu-title {
-  position: absolute;
-  left: 50%;
+  left: 45%;
 }
+
 .menu-bar .a:hover,
 
 /*necessary because of ^*/

documentation/operators/nym_themes/index.hbs → documentation/operators/themes/index.hbs

@@ -159,20 +159,14 @@
                         </ul>
 
                         <!-- CUSTOM -->
-                        <select id="dropdown-menu3" class="icon-button">
-                            <option value="">Network Protocol</option>
+                        <select id="dropdown-menu" class="icon-button">
                             <option value="https://nymtech.net/docs">Network Docs</option>
                             <option value="https://nymtech.net/learn/papers">Academic Papers</option>
-                        </select>
-
-                        <select id="dropdown-menu" class="icon-button">
-                            <option value="">Developer Docs</option>
+                            <option value="">--------</option>
                             <option value="https://nymtech.net/developers">Dev Portal</option>
                             <option value="https://nymtech.net/docs/sdk/rust/rust.html">Rust SDK</option>
                             <option value="https://sdk.nymtech.net">Typescript SDK</option>
-                        </select>
-
-                        <select id="dropdown-menu2" class="icon-button">
+                            <option value="">--------</option>
                             <option value="">Setup Guides</option>
                             <option value="https://nymtech.net/operators">Operators</option>
                             <option value="https://nymtech.net/developers/nymvpn/intro.html">NymVPN Testing</option>
@@ -186,24 +180,7 @@
                                 }
                             });
                         </script>
-
-                        <script>
-                            document.getElementById('dropdown-menu2').addEventListener('change', function() {
-                                const selected = this.options[this.selectedIndex];
-                                if (selected.value !== '') {
-                                    window.location.href = selected.value;
-                                }
-                            });
-                        </script>
-
-                        <script>
-                            document.getElementById('dropdown-menu3').addEventListener('change', function() {
-                                const selected = this.options[this.selectedIndex];
-                                if (selected.value !== '') {
-                                    window.location.href = selected.value;
-                                }
-                            });
-                        </script>
+
                         <!-- END CUSTOM -->
                     </div>
 
@@ -263,7 +240,8 @@
                                 <nav class="pagetoc"></nav>
                             </div>
                             <div class="content-wrap">
-                                {{{ content }}}
+
+                        {{{ content }}}
                             </div>
                         </main>
                     </main>