Skip to content

Commit

Permalink
theme changes to docs
Browse files Browse the repository at this point in the history
  • Loading branch information
mfahampshire committed Jul 3, 2024
1 parent 50b36f2 commit 084b75f
Show file tree
Hide file tree
Showing 16 changed files with 1,887 additions and 176 deletions.
17 changes: 8 additions & 9 deletions documentation/docs/book.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ edition = "2018"
[preprocessor.theme]
pagetoc = true
sidebar-width = "280px"
content-max-width = "70%"
content-main-margin-left = "5%"
content-main-margin-right = "5%"
content-max-width = "80%"
root-font-size = "70%"
# DO NOT CHANGE or you might overwrite the custom hbs file
# 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]
Expand Down Expand Up @@ -67,15 +67,14 @@ curly-quotes = true
copy-fonts = true
no-section-label = false
additional-css = [
"./theme/custom.css",
"./theme/mdbook-admonish.css",
"./theme/pagetoc.css",
"./themes/custom.css",
"./themes/mdbook-admonish.css",
"./themes/pagetoc.css",
]
additional-js = ["./theme/pagetoc.js"]
additional-js = ["./themes/pagetoc.js"]
git-repository-url = "https://github.com/nymtech/nym/documentation/"
git-repository-icon = "fa-github"
input-404 = "not-found.md"
cname = "nymtech.net"

[output.html.fold]
enable = true # whether or not to enable section folding
Expand Down
2 changes: 0 additions & 2 deletions documentation/docs/theme/css/chrome.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,6 @@ a > .hljs {
}

.menu-title {
position: absolute;
left: 50%;
display: inline-block;
font-weight: 200;
font-size: 2.4rem;
Expand Down
2 changes: 1 addition & 1 deletion documentation/docs/theme/css/variables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
75 changes: 35 additions & 40 deletions documentation/docs/theme/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,11 @@
{{#each additional_css}}
<link rel="stylesheet" href="{{ ../path_to_root }}{{ this }}">
{{/each}}

{{#if mathjax_support}}
<!-- MathJax -->
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
{{/if}}
</head>
<body class="sidebar-visible no-js">
<div id="body-container">
Expand Down Expand Up @@ -144,48 +149,26 @@
<label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
<i class="fa fa-bars"></i>
</label>

<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
<i class="fa fa-paint-brush"></i>
</button>
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
<li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
<li role="none"><button role="menuitem" class="theme" id="coal">Dark</button></li>
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
</ul>

<!-- CUSTOM -->
<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>
<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>
<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>
</select>

<script>
document.getElementById('dropdown-menu').addEventListener('change', function() {
const selected = this.options[this.selectedIndex];
if (selected.value !== '') {
window.location.href = selected.value;
}
});
</script>
<!-- END CUSTOM -->
{{#if search_enabled}}
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
<i class="fa fa-search"></i>
</button>
{{/if}}
</div>

<h1 class="menu-title"> {{ book_title }}</h1>
<h1 class="menu-title">{{ book_title }}</h1>

<div class="right-buttons">
{{#if search_enabled}}
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
<i class="fa fa-search"></i>
</button>
{{/if}}
{{#if print_enable}}
<a href="{{ path_to_root }}print.html" title="Print this book" aria-label="Print this book">
<i id="print-button" class="fa fa-print"></i>
Expand Down Expand Up @@ -229,16 +212,10 @@

<div id="content" class="content">
<main>
<main>
<div class="sidetoc">
<nav class="pagetoc"></nav>
</div>
<div class="content-wrap">
{comment}
<div class="sidetoc"><nav class="pagetoc"></nav></div>

{{{ content }}}
</div>
</main>
</main>

<nav class="nav-wrapper" aria-label="Page navigation">
Expand Down Expand Up @@ -295,6 +272,25 @@
</script>
{{/if}}

{{#if google_analytics}}
<!-- Google Analytics Tag -->
<script>
var localAddrs = ["localhost", "127.0.0.1", ""];
// make sure we don't activate google analytics if the developer is
// inspecting the book locally...
if (localAddrs.indexOf(document.location.hostname) === -1) {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', '{{google_analytics}}', 'auto');
ga('send', 'pageview');
}
</script>
{{/if}}

{{#if playground_line_numbers}}
<script>
window.playground_line_numbers = true;
Expand Down Expand Up @@ -348,7 +344,6 @@
{{/if}}
{{/if}}


</div>
</body>
</html>
104 changes: 42 additions & 62 deletions documentation/docs/theme/pagetoc.css
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,47 @@
/* src: https://github.com/JorelAli/mdBook-pagetoc */

@media only screen and (max-width:1439px) {
.sidetoc {
display: none;
}
.sidetoc {
display: none;
}
}

@media only screen and (min-width:1440px) {
main {
position: relative;
}

.sidetoc {
margin-left: auto;
margin-right: auto;
left: calc(100% + (var(--content-max-width))/4 - 140px);
position: absolute;
}

.pagetoc {
position: fixed;
width: 200px;
height: calc(100vh - var(--menu-bar-height) - 0.67em * 4);
overflow: auto;
}

.pagetoc a {
border-left: 1px solid var(--sidebar-bg);
color: var(--fg) !important;
display: block;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 10px;
text-align: left;
text-decoration: none;
}

.pagetoc a:hover,
.pagetoc a.active {
background: var(--sidebar-bg);
color: var(--sidebar-fg) !important;
}

.pagetoc .active {
background: var(--sidebar-bg);
color: var(--sidebar-fg);
}

.pagetoc .pagetoc-H2 {
padding-left: 20px;
}

.pagetoc .pagetoc-H3 {
padding-left: 40px;
}

.pagetoc .pagetoc-H4 {
padding-left: 60px;
}

.pagetoc .pagetoc-H5 {
display: none;
}

.pagetoc .pagetoc-H6 {
display: none;
}
main {
position: relative;
}
.sidetoc {
margin-left: auto;
margin-right: auto;
/* left: calc(90% + (var(--content-min-width))/4 - 110px); */
left: 101%;
position: absolute;
font-size: var(--pagetoc-fontsize);
}
.pagetoc {
position: fixed;
width: var(--pagetoc-width);
}
.pagetoc a {
border-left: 1px solid var(--sidebar-bg);
/* color: var(--fg); */
/* color: var(--sidebar-fg); */
color: var(--links);
display: block;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 10px;
text-align: left;
text-decoration: none;
font-weight: normal;
background: var(--sidebar-bg);
}
.pagetoc a:hover,
.pagetoc a.active {
background: var(--sidebar-bg);
/* color: var(--sidebar-fg); */
color: var(--sidebar-active);
font-weight: bold;
font-size: var(--pagetoc-fontsize);
}
}
Loading

0 comments on commit 084b75f

Please sign in to comment.