Improve documentation design #3
Some checks are pending
Publish / publish (push) Waiting to run
Some checks are pending
Publish / publish (push) Waiting to run
This commit is contained in:
parent
b199f75738
commit
7377a98fd1
@ -74,33 +74,6 @@
|
||||
margin-block-start: 2rem;
|
||||
}
|
||||
|
||||
summary,
|
||||
#go-to-top,
|
||||
#share,
|
||||
#issue {
|
||||
display: inline-block;
|
||||
transition: var(--transition);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 999px;
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 0.5rem;
|
||||
color: var(--fg-muted-4);
|
||||
line-height: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-2);
|
||||
color: var(--fg-muted-5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
.icon {
|
||||
transition: var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
position: relative;
|
||||
box-shadow: none;
|
||||
@ -246,3 +219,31 @@
|
||||
mask-image: var(--icon-bug);
|
||||
}
|
||||
}
|
||||
|
||||
summary,
|
||||
#go-to-top,
|
||||
#share,
|
||||
#issue,
|
||||
.toggle-label {
|
||||
display: inline-block;
|
||||
transition: var(--transition);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 999px;
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 0.5rem;
|
||||
color: var(--fg-muted-4);
|
||||
line-height: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-2);
|
||||
color: var(--fg-muted-5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
.icon {
|
||||
transition: var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
padding: 0.5em 1em;
|
||||
border-radius: var(--rounded-corner);
|
||||
min-width: 200px;
|
||||
margin: 0rem 1rem 0rem 1rem;
|
||||
margin: 1rem 1rem 0rem 1rem;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
@ -20,12 +20,12 @@
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background: var(--fg-muted-1-soft);
|
||||
background: var(--fg-muted-1-transparent);
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: var(--fg-muted-1);
|
||||
background: var(--fg-muted-1-transparent);
|
||||
color: var(--fg-muted-5);
|
||||
}
|
||||
|
||||
@ -36,29 +36,82 @@
|
||||
}
|
||||
|
||||
#docs-container {
|
||||
background-color: var(--fg-muted-1-soft);
|
||||
border-right: 1px solid var(--fg-muted-1);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
min-width: 15em;
|
||||
width: calc(50% - var(--container-width) / 2 - 6em);
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
scroll-behavior: smooth;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#docs {
|
||||
left: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
#sidebar-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
article {
|
||||
.toggle-label {
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
position: fixed;
|
||||
padding: 0.5em;
|
||||
margin: 1rem;
|
||||
z-index: 100;
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon-sidebar);
|
||||
mask-image: var(--icon-sidebar);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: var(--container-width);
|
||||
min-width: var(--min-container-width);
|
||||
}
|
||||
}
|
||||
|
||||
#toc-hidden {
|
||||
visibility: hidden;
|
||||
height: 0px;
|
||||
.toggle-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 5;
|
||||
display: none
|
||||
}
|
||||
|
||||
.expand-main {
|
||||
width: 100%;
|
||||
@media only screen and (max-width: calc(720px + 12em + 30em)) {
|
||||
.toggle-label {
|
||||
display: block;
|
||||
left: 0;
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.toggle-overlay {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
transition: background-color 0.5s;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#docs-container {
|
||||
left: -15em;
|
||||
transition: left 0.5s;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
#sidebar-toggle:checked ~ #docs-container {
|
||||
left: 0;
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
#sidebar-toggle:checked ~ .toggle-label {
|
||||
left: 15em;
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
#sidebar-toggle:checked ~ .toggle-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
transition: background-color 0.5s;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -72,10 +72,7 @@ body {
|
||||
|
||||
main {
|
||||
margin: 4.25rem auto 4rem;
|
||||
max-width: var(--max-container-width)
|
||||
}
|
||||
|
||||
.restricted-width {
|
||||
max-width: var(--max-container-width);
|
||||
width: min(var(--container-width), 90%);
|
||||
}
|
||||
|
||||
|
||||
@ -21,9 +21,10 @@
|
||||
--bg-overlay: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
|
||||
--fg-color: rgb(255 255 255);
|
||||
--fg-contrast: rgb(0 0 0 / 0.8);
|
||||
--fg-muted-1-soft: rgb(255 255 255 / 0.03);
|
||||
--fg-muted-1: rgb(255 255 255 / 0.05);
|
||||
--fg-muted-2: rgb(255 255 255 / 0.1);
|
||||
--fg-muted-1-soft: #252525;
|
||||
--fg-muted-1-transparent: rgb(255 255 255 / 0.05);
|
||||
--fg-muted-1: #292929;
|
||||
--fg-muted-2: #353535;
|
||||
--fg-muted-3: rgb(255 255 255 / 0.2);
|
||||
--fg-muted-4: rgb(255 255 255 / 0.5);
|
||||
--fg-muted-5: rgb(255 255 255 / 0.6);
|
||||
@ -46,9 +47,10 @@
|
||||
--fg-color: rgb(0 0 0 / 0.8);
|
||||
--fg-contrast: rgb(255 255 255);
|
||||
--fg-contrast-soft: rgb(255 255 255);
|
||||
--fg-muted-1-soft: var(--fg-muted-1);
|
||||
--fg-muted-1: rgb(0 0 0 / 0.05);
|
||||
--fg-muted-2: rgb(0 0 0 / 0.1);
|
||||
--fg-muted-1-soft: #EDEDED;
|
||||
--fg-muted-1-transparent: rgb(0 0 0 / 0.05);
|
||||
--fg-muted-1: #E9E9E9;
|
||||
--fg-muted-2: #DCDCDC;
|
||||
--fg-muted-3: rgb(0 0 0 / 0.2);
|
||||
--fg-muted-4: rgb(0 0 0 / 0.5);
|
||||
--fg-muted-5: rgb(0 0 0 / 0.6);
|
||||
@ -192,6 +194,7 @@
|
||||
--icon-poop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8.963 1.514A4 4 0 0 1 5 5H4c-1.108 0-2 .892-2 2s.892 2 2 2H3c-1.662 0-3 1.338-3 3s1.338 3 3 3h10c1.662 0 3-1.338 3-3s-1.338-3-3-3h-1c1.108 0 2-.892 2-2s-.892-2-2-2h-1a4 4 0 0 0-2.037-3.486'/%3E%3C/svg%3E");
|
||||
--icon-previous: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m9.293 13.707-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 1 1 1.414 1.414L6.414 8l4.293 4.293a1 1 0 1 1-1.414 1.414m0 0'/%3E%3C/svg%3E");
|
||||
--icon-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m5.707 1.293 6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 1 1-1.414-1.414L9.586 8 4.293 2.707a1 1 0 1 1 1.414-1.414m0 0'/%3E%3C/svg%3E");
|
||||
--icon-sidebar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 3h12c.554 0 1-.446 1-1s-.446-1-1-1H2c-.554 0-1 .446-1 1s.446 1 1 1zm0 6h12c.554 0 1-.446 1-1s-.446-1-1-1H2c-.554 0-1 .446-1 1s.446 1 1 1zm0 6h12c.554 0 1-.446 1-1s-.446-1-1-1H2c-.554 0-1 .446-1 1s.446 1 1 1z'/%3E%3C/svg%3E");
|
||||
--icon-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 1a1 1 0 0 0-.5.135 1 1 0 0 0-.207.158l-3 3a1 1 0 0 0 0 1.414 1 1 0 0 0 1.414 0L7 4.414V10a1 1 0 0 0 1 1 1 1 0 0 0 1-1V4.414l1.293 1.293a1 1 0 0 0 1.414 0 1 1 0 0 0 0-1.414L8.738 1.326 8.7 1.287a1 1 0 0 0-.195-.15l-.008-.004a1 1 0 0 0-.236-.098h-.004A1 1 0 0 0 8 1M4 7c-1.645 0-3 1.355-3 3v2c0 1.645 1.355 3 3 3h8c1.645 0 3-1.355 3-3v-2c0-1.645-1.355-3-3-3a1 1 0 0 0 0 2c.564 0 1 .436 1 1v2c0 .564-.436 1-1 1H4c-.564 0-1-.436-1-1v-2c0-.564.436-1 1-1a1 1 0 0 0 0-2'/%3E%3C/svg%3E");
|
||||
--icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0a1 1 0 0 0-.95.684l-1.448 4.34-4.59-.016C.032 5.004-.371 6.266.43 6.828l3.625 2.555-1.5 4.285c-.317.902.687 1.691 1.492 1.172l4.004-2.594 3.894 2.586c.801.531 1.817-.258 1.5-1.16l-1.504-4.29 3.645-2.577c.789-.563.394-1.809-.574-1.813l-4.66-.015L8.949.69A1 1 0 0 0 8 0m0 0'/%3E%3C/svg%3E");
|
||||
--icon-theme-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M.918 8.004a7.072 7.072 0 0 0 14.102.793 1.01 1.01 0 0 0-.457-.957 1 1 0 0 0-1.063-.004 3.9 3.9 0 0 1-2.031.578 3.89 3.89 0 0 1-3.883-3.883c0-.715.203-1.422.578-2.031a1 1 0 0 0-.004-1.062c-.207-.32-.578-.5-.957-.458A7.07 7.07 0 0 0 .918 8.004M5.586 4.53a5.877 5.877 0 0 0 8.965 5.004l-1.52-.96a5.09 5.09 0 0 1-5.035 4.507 5.09 5.09 0 0 1-5.078-5.078 5.09 5.09 0 0 1 4.508-5.035l-.961-1.52a5.9 5.9 0 0 0-.88 3.082m0 0'/%3E%3C/svg%3E");
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{% extends "restricted_base.html" %}
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
{%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{% extends "restricted_base.html" %}
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
{%- set date_format = macros_translate::translate(key="date_format", default="%B %d, %Y", language_strings=language_strings) -%}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{% extends "restricted_base.html" %}
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
{%- set date_format = macros_translate::translate(key="date_format", default="%B %d, %Y", language_strings=language_strings) -%}
|
||||
|
||||
@ -12,10 +12,11 @@
|
||||
{% include "partials/head.html" %}
|
||||
<body>
|
||||
{% block body %}
|
||||
{% block aside %}{% endblock aside %}
|
||||
{%- if config.extra.nav.links %}
|
||||
{% include "partials/nav.html" %}
|
||||
{%- endif %}
|
||||
<main id="main-content" class="{% block classes %}{% endblock classes %}">
|
||||
<main id="main-content">
|
||||
{% block custom %}{% endblock custom %}
|
||||
{% block content %}{% endblock content %}
|
||||
{% include "partials/extra_features.html" %}
|
||||
|
||||
@ -1,8 +1,14 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block classes %}
|
||||
expand-main
|
||||
{% endblock classes %}
|
||||
{% block aside %}
|
||||
{%- set section = get_section(path=page.ancestors | last) -%}
|
||||
<input type="checkbox" id="sidebar-toggle">
|
||||
<label for="sidebar-toggle" class="toggle-label"><i class="icon"></i></label>
|
||||
<label for="sidebar-toggle" class="toggle-overlay"></label>
|
||||
<aside id="docs-container">
|
||||
{% include "partials/docs_toc.html" %}
|
||||
</aside>
|
||||
{% endblock aside %}
|
||||
|
||||
{% block content %}
|
||||
{%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%}
|
||||
@ -13,19 +19,9 @@ expand-main
|
||||
{%- set list_element = "ul" -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- set section = get_section(path=page.ancestors | last) -%}
|
||||
|
||||
<div id="docs-container">
|
||||
{% include "partials/docs_toc.html" %}
|
||||
|
||||
<article>
|
||||
{% include "partials/article_content.html" %}
|
||||
</article>
|
||||
|
||||
<div id="toc-hidden">
|
||||
{% include "partials/docs_toc.html" %}
|
||||
</div>
|
||||
</div>
|
||||
<article>
|
||||
{% include "partials/article_content.html" %}
|
||||
</article>
|
||||
|
||||
{%- if page.extra.comments.id -%}
|
||||
{%- include "partials/comments.html" -%}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{% extends "restricted_base.html" %}
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
{{ section.content | safe }}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{% extends "restricted_base.html" %}
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<h1>{{ page.title }}</h1>
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block classes %}
|
||||
restricted-width
|
||||
{% endblock classes %}
|
||||
@ -1,4 +1,4 @@
|
||||
{% extends "restricted_base.html" %}
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<h1>{{ section.title }}</h1>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{% extends "restricted_base.html" %}
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
{%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{% extends "restricted_base.html" %}
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{% extends "restricted_base.html" %}
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
{%- set number_of_tags = terms | length -%}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{% extends "restricted_base.html" %}
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
{%- set date_format = macros_translate::translate(key="date_format", default="%B %d, %Y", language_strings=language_strings) -%}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user