git.iko.soy/urbit.org
on master help sign in
Nested docs navigation
3b50debMatilde Park
sass/_main.scss+30
compare with master
unifiedsplit
@@ -418,6 +418,36 @@ body.page-indiced {
418 }
418 }
419}
419}
420
420
421+// doc-specific chevrons
422+
423+nav.docs:not(.mobile) {
424+ height: 100vh;
425+ position: fixed;
426+ overflow-y: scroll;
427+ width: 25vw;
428+}
429+nav.docs details {
430+ summary {
431+ @extend .fw4, .black;
432+ }
433+ & > summary::before {
434+ content: "› ";
435+ display: inline-block;
436+ transform: rotate(90deg);
437+ vertical-align: middle;
438+ margin-right: 0.5rem;
439+ @extend .gray1;
440+ font-family: "Inter", sans-serif;
441+ font-weight: 400;
442+ font-size: 1.5rem;
443+ }
444+ &[open] > summary::before {
445+ content: "› ";
446+ display: inline-block;
447+ transform: rotate(-90deg);
448+ }
449+}
450+
421// youtube
451// youtube
422
452
423.video-container {
453.video-container {
templates/doc.html+1−1
@@ -4,7 +4,7 @@
4<!-- header -->
4<!-- header -->
5<!-- content -->
5<!-- content -->
6 {% include "partials/navigation-docs.html" %}
6 {% include "partials/navigation-docs.html" %}
7− <article class="mt4 c5-10 c4-10-lg">
7+ <article class="mt4 full c5-10-md c4-10-lg">
8 <!-- header -->
8 <!-- header -->
9 <h1>{{ page.title }}</h1>
9 <h1>{{ page.title }}</h1>
10 <!-- body -->
10 <!-- body -->
templates/partials/navigation-docs.html+38−50
@@ -1,5 +1,6 @@
1+<!-- First nav is desktop-specific. Second nav is dropdown version for mobile. -->
1{% block content %}
2{% block content %}
2−<nav class="bg-gray5 pt4 full-left no-break docs pr4 fourth-1-md fourth-1-lg">
3+<nav class="bg-gray5 dn db-l db-xl pt4 full-left no-break docs pr4">
3 <a class="gray3" href="{{config.base_url}}">Urbit</a>
4 <a class="gray3" href="{{config.base_url}}">Urbit</a>
4 <span class="gray3"> / </span>
5 <span class="gray3"> / </span>
5 <a href="{{config.base_url}}/docs/">
6 <a href="{{config.base_url}}/docs/">
@@ -8,77 +9,64 @@
8 <button id="js-search-window-toggle" class="mt4 mb4" type="button" style="outline:none">
9 <button id="js-search-window-toggle" class="mt4 mb4" type="button" style="outline:none">
9 <span id="search-icon" class="f3 gray3">⚲</span><span class="ml3 gray2">Search</span>
10 <span id="search-icon" class="f3 gray3">⚲</span><span class="ml3 gray2">Search</span>
10 </button>
11 </button>
12+ <ul class="mb3">
13+ <li class="mt1"><a href="/try/#install">Install</a> ↗</li>
14+ <li class="mt1"><a href="/operations/">Operations</a> ↗</li>
15+ <li class="mt1"><a href="/develop/">Developer Guide</a> ↗</li>
16+ <li class="mt1"><a href="https://azimuth.network">Azimuth</a> ↗</li>
17+ </ul>
11 <ul>
18 <ul>
12− {% block menu %}
19+ {% block menu %}
13− {% set index = get_section(path="docs/_index.md") %}
20+ {% set index = get_section(path="docs/_index.md") %}
14− {% for s in index.subsections %}
21+ {% for s in index.subsections %}
15 {% set subsection = get_section(path=s) %}
22 {% set subsection = get_section(path=s) %}
16− <li class="mt3">
23+ <details class="mt2">
17− <a href="{{ subsection.permalink }}">
18− {{ subsection.title }}
24+ <summary>{{ subsection.title }}</summary>
19− </a>
20 {% if subsection.pages %}
25 {% if subsection.pages %}
21− <!-- level 1 -->
22− <ul>
23 {% for page in subsection.pages %}
26 {% for page in subsection.pages %}
24− <li>
27+ <li class="mt1">
25− <a href="{{ page.permalink }}">
28+ <a href="{{ page.permalink}}">
26 {{ page.title }}
29 {{ page.title }}
27 </a>
30 </a>
28 </li>
31 </li>
29 {% endfor %}
32 {% endfor %}
30−
31 {% for y in subsection.subsections %}
33 {% for y in subsection.subsections %}
32 {% set subsubsection = get_section(path=y) %}
34 {% set subsubsection = get_section(path=y) %}
33− <ul>
35+ <details class="ml2 mt1">
34− <li>
35− <a href="{{ subsubsection.permalink }}">
36− {{ subsubsection.title }}
36+ <summary>{{ subsubsection.title }}</summary>
37− </a>
38− <!-- level 2 -->
39 {% if subsubsection.pages %}
37 {% if subsubsection.pages %}
40− <ul>
41 {% for page in subsubsection.pages %}
38 {% for page in subsubsection.pages %}
42− <li>
43− <a href="{{ page.permalink }}">
39+ <li class="mt1"><a href="{{ page.permalink }}">{{ page.title }}</a></li>
44− {{ page.title }}
45− </a>
46− </li>
47 {% endfor %}
40 {% endfor %}
48−
49 {% for x in subsubsection.subsections %}
41 {% for x in subsubsection.subsections %}
50− {% set subsubsubsection = get_section(path=x) %}
42+ {% set subsubsubsection = get_section(path=x) %}
51− <ul>
43+ <details class="ml2 mt1">
52− <li>
53− <a href="{{ subsubsubsection.permalink }}">
54− {{ subsubsubsection.title }}
44+ <summary>{{ subsubsubsection.title }}</summary>
55− </a>
56 {% if subsubsubsection.pages %}
45 {% if subsubsubsection.pages %}
57− <!-- level 3 -->
58− <ul>
59 {% for page in subsubsubsection.pages %}
46 {% for page in subsubsubsection.pages %}
60− <li>
61− <a href="{{ page.permalink }}">
47+ <li class="mt1"><a href="{{ page.permalink }}">{{ page.title }}</a></li>
62− {{ page.title }}
63− </a>
64− </li>
65 {% endfor %}
48 {% endfor %}
66− </ul>
67 {% endif %}
49 {% endif %}
68− </li>
50+ </details>
69− </ul>
70 {% endfor %}
51 {% endfor %}
71−
72− </ul>
73 {% endif %}
52 {% endif %}
74− </li>
53+ </details>
75− </ul>
76 {% endfor %}
54 {% endfor %}
77− </ul>
78 {% endif %}
55 {% endif %}
79− </li>
56+ </details>
80− {% endfor %}
57+ {% endfor %}
81− {% endblock menu %}
58+ {% endblock menu %}
82 </ul>
59 </ul>
83</nav>
60</nav>
61+
62+<nav class="dn-l mobile dn-xl db pt4 no-break docs full">
63+ <a class="gray3" href="{{config.base_url}}">Urbit</a>
64+ <span class="gray3"> / </span>
65+ <a href="{{config.base_url}}/docs/">
66+ Documentation
67+ </a>
68+ <button id="js-search-window-toggle" class="mt4 mb4" type="button" style="outline:none">
69+ <span id="search-icon" class="f3 gray3">⚲</span><span class="ml3 gray2">Search</span>
70+ </button>
71+</nav>
84{% endblock content %}
72{% endblock content %}
templates/sections/docs.html+1−1
@@ -4,7 +4,7 @@
4<!-- header -->
4<!-- header -->
5<!-- content -->
5<!-- content -->
6 {% include "partials/navigation-docs.html" %}
6 {% include "partials/navigation-docs.html" %}
7− <article class="mt4 c5-10 c4-10-lg">
7+ <article class="mt4 full c5-10-md c4-10-lg">
8 <!-- header -->
8 <!-- header -->
9 <h1>{{ section.title }}</h1>
9 <h1>{{ section.title }}</h1>
10 <!-- body -->
10 <!-- body -->
templates/sections/docs/chapters.html+1−1
@@ -4,7 +4,7 @@
4<!-- header -->
4<!-- header -->
5<!-- content -->
5<!-- content -->
6 {% include "partials/navigation-docs.html" %}
6 {% include "partials/navigation-docs.html" %}
7− <article class="mt4 c5-10 c4-10-lg">
7+ <article class="mt4 full c5-10-md c4-10-lg">
8 <!-- header -->
8 <!-- header -->
9 <h1>{{ section.title }}</h1>
9 <h1>{{ section.title }}</h1>
10 <!-- body -->
10 <!-- body -->