mirror of
https://github.com/outbackdingo/firezone.git
synced 2026-01-27 18:18:55 +00:00
Docs style update (#674)
* improve text readability * title font weight * improve hover look * font size and colors * wip logo redo * site nav font size * Styled Docs Navigation * Styling Select Version * Custom Header Changes * Button Style Update * Build Correction * Major Styling Updates * Change Aux Link * Styling Updates * Changes * fix links in nav * inter -> Fira sans + mono * Pre Commit Run Co-authored-by: Chetan Verma <chetan61verma@gmail.com>
This commit is contained in:
Jason G
@@ -28,3 +28,5 @@ end
|
||||
|
||||
# Performance-booster for watching directories on Windows
|
||||
gem 'wdm', '~> 0.1.1', platforms: %i[mingw x64_mingw mswin]
|
||||
|
||||
gem 'webrick', '~> 1.7'
|
||||
|
||||
@@ -281,6 +281,7 @@ GEM
|
||||
unf_ext
|
||||
unf_ext (0.0.8.1)
|
||||
unicode-display_width (1.8.0)
|
||||
webrick (1.7.0)
|
||||
zeitwerk (2.5.4)
|
||||
|
||||
PLATFORMS
|
||||
@@ -296,6 +297,7 @@ DEPENDENCIES
|
||||
tzinfo (~> 1.2)
|
||||
tzinfo-data
|
||||
wdm (~> 0.1.1)
|
||||
webrick (~> 1.7)
|
||||
|
||||
BUNDLED WITH
|
||||
2.3.14
|
||||
|
||||
@@ -26,10 +26,10 @@ description: >- # this means to ignore newlines until "baseurl:"
|
||||
url: "https://docs.firezone.dev"
|
||||
permalink: pretty
|
||||
twitter_username: firezonehq
|
||||
github_username: firezone
|
||||
github_username: firezone
|
||||
|
||||
# Set a path/url to a logo that will be displayed instead of the title
|
||||
logo: "/assets/images/firezone-logo-wordmark-dark.svg"
|
||||
logo: "/assets/images/logo-main.svg"
|
||||
|
||||
# Build settings
|
||||
remote_theme: firezone/just-the-docs
|
||||
@@ -59,14 +59,13 @@ asset_urls:
|
||||
# Aux links for the upper right navigation
|
||||
aux_links:
|
||||
"Ask a Question":
|
||||
- "https://discourse.firez.one/new-topic?body=%23%23%20Describe%20the%20issue%0A%0AA%20clear%20and%20concise%20description%20of%20what%20the%20bug%20is.%20Code%20samples%20are%20helpful.%0A%0A%23%23%20Reproduction%20instructions%0A%0ATry%20to%20give%20as%20much%20context%20as%20you%20can!%20%0A%0A%23%23%20Expected%20behavior%0A%0ADescription%20of%20expected%20behavior.%0A%0A%23%23%20Screenshots%0A%0AIf%20applicable%2C%20add%20screenshots%20to%20help%20explain%20your%20problem.%0A%0A%23%23%20Environment%20Details%0A%0A-%20OS%3A%20%5Be.g.%20Ubuntu%2C%20Fedora%2C%20CentOS%5D%0A-%20VPC%3A%0A-%20Firebase%20Version%3A%20%0A%0A%23%23%20Other%20Info%0A%0AAdd%20any%20other%20context%20about%20the%20problem%20here.&category=category/subcategory&tags=docs"
|
||||
"Join the Beta":
|
||||
- "https://e04kusl9oz5.typeform.com/to/uD689MvN#source=docs"
|
||||
- "https://discourse.firez.one"
|
||||
"Join the Business Beta":
|
||||
- "https://e04kusl9oz5.typeform.com/to/ZPYb31sA#int=docs&source=nav"
|
||||
|
||||
# Plugins
|
||||
plugins:
|
||||
- jekyll-sitemap
|
||||
|
||||
# Exclude from processing.
|
||||
# The following items will not be processed, by default.
|
||||
# Any item listed under the `exclude:` key here will be automatically added to
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{%- if site.footer_content -%}
|
||||
<div class="text-small mb-0">
|
||||
<div class="mb-0">
|
||||
<p>
|
||||
WireGuard® is a registered trademark of Jason A. Donenfeld.
|
||||
</p>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | relative_url }}">
|
||||
|
||||
{% if site.search_enabled != false %}
|
||||
<script type="text/javascript" src="{{ '/assets/js/vendor/lunr.min.js' | relative_url }}"></script>
|
||||
<script type="text/javascript" src="{{ '/assets/js/vendor/lunr.min.js' | relative_url }}"></script>
|
||||
{% endif %}
|
||||
<script type="text/javascript" src="{{ '/assets/js/just-the-docs.js' | relative_url }}"></script>
|
||||
|
||||
|
||||
@@ -9,6 +9,6 @@
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
|
||||
|
||||
9
docs/_includes/title.html
Normal file
9
docs/_includes/title.html
Normal file
@@ -0,0 +1,9 @@
|
||||
{% if site.logo %}
|
||||
<div class="site-logo-wrapper">
|
||||
<div class="site-logo"></div>
|
||||
<h1>Documentation</h1>
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
{{ site.title }}
|
||||
{% endif %}
|
||||
@@ -5,37 +5,54 @@ layout: table_wrappers
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="{{ site.lang | default: 'en-US' }}">
|
||||
{% include head.html %}
|
||||
|
||||
|
||||
<body>
|
||||
{% include head.html %}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="svg-link" viewBox="0 0 24 24">
|
||||
<title>Link</title>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link">
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="feather feather-link">
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
|
||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
||||
</svg>
|
||||
</symbol>
|
||||
<symbol id="svg-search" viewBox="0 0 24 24">
|
||||
<title>Search</title>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
|
||||
<circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="feather feather-search">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
</svg>
|
||||
</symbol>
|
||||
<symbol id="svg-menu" viewBox="0 0 24 24">
|
||||
<title>Menu</title>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="feather feather-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</symbol>
|
||||
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
|
||||
<title>Expand</title>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="feather feather-chevron-right">
|
||||
<polyline points="9 18 15 12 9 6"></polyline>
|
||||
</svg>
|
||||
</symbol>
|
||||
<symbol id="svg-doc" viewBox="0 0 24 24">
|
||||
<title>Document</title>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
|
||||
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="feather feather-file">
|
||||
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
|
||||
<polyline points="13 2 13 9 20 9"></polyline>
|
||||
</svg>
|
||||
</symbol>
|
||||
</svg>
|
||||
@@ -44,166 +61,177 @@ layout: table_wrappers
|
||||
<div class="site-header">
|
||||
<a href="{{ '/' | absolute_url }}" class="site-title lh-tight">{% include title.html %}</a>
|
||||
<a href="#" id="menu-button" class="site-button">
|
||||
<svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-menu"></use></svg>
|
||||
<svg viewBox="0 0 24 24" class="icon">
|
||||
<use xlink:href="#svg-menu"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="select-version">
|
||||
<label>
|
||||
Select version:
|
||||
<select class="version-selector">
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
|
||||
<div class="select-version">
|
||||
<label>
|
||||
Select version:
|
||||
<select class="version-selector">
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
{% if site.just_the_docs.collections %}
|
||||
{% assign collections_size = site.just_the_docs.collections | size %}
|
||||
{% for collection_entry in site.just_the_docs.collections %}
|
||||
{% assign collection_key = collection_entry[0] %}
|
||||
{% assign collection_value = collection_entry[1] %}
|
||||
{% assign collection = site[collection_key] %}
|
||||
{% if collection_value.nav_exclude != true %}
|
||||
{% if collections_size > 1 %}
|
||||
<div class="nav-category">{{ collection_value.name }}</div>
|
||||
{% endif %}
|
||||
{% include nav.html pages=collection %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% assign collections_size = site.just_the_docs.collections | size %}
|
||||
{% for collection_entry in site.just_the_docs.collections %}
|
||||
{% assign collection_key = collection_entry[0] %}
|
||||
{% assign collection_value = collection_entry[1] %}
|
||||
{% assign collection = site[collection_key] %}
|
||||
{% if collection_value.nav_exclude != true %}
|
||||
{% if collections_size > 1 %}
|
||||
<div class="nav-category">{{ collection_value.name }}</div>
|
||||
{% endif %}
|
||||
{% include nav.html pages=collection %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% include nav.html pages=site.html_pages %}
|
||||
{% include nav.html pages=site.html_pages %}
|
||||
{% endif %}
|
||||
</nav>
|
||||
</div>
|
||||
<div class="main" id="top">
|
||||
<div id="main-header" class="main-header">
|
||||
{% if site.search_enabled != false %}
|
||||
<div class="search">
|
||||
<div class="search-input-wrap">
|
||||
<input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
|
||||
<label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>
|
||||
</div>
|
||||
<div id="search-results" class="search-results"></div>
|
||||
<div class="search">
|
||||
<div class="search-input-wrap">
|
||||
<input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search {{ site.title }}"
|
||||
aria-label="Search {{ site.title }}" autocomplete="off">
|
||||
<label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon">
|
||||
<use xlink:href="#svg-search"></use>
|
||||
</svg></label>
|
||||
</div>
|
||||
<div id="search-results" class="search-results"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% include header_custom.html %}
|
||||
{% if site.aux_links %}
|
||||
<nav aria-label="Auxiliary" class="aux-nav">
|
||||
<ul class="aux-nav-list">
|
||||
{% for link in site.aux_links %}
|
||||
<li class="aux-nav-list-item">
|
||||
<a href="{{ link.last }}" class="site-button"
|
||||
{% if site.aux_links_new_tab %}
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
{% endif %}
|
||||
>
|
||||
{{ link.first }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
<nav aria-label="Auxiliary" class="aux-nav">
|
||||
<ul class="aux-nav-list">
|
||||
{% for link in site.aux_links %}
|
||||
<li class="aux-nav-list-item">
|
||||
<a href="{{ link.last }}" class="site-button" {% if site.aux_links_new_tab %} target="_blank"
|
||||
rel="noopener noreferrer" {% endif %}>
|
||||
{{ link.first }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div id="main-content-wrap" class="main-content-wrap">
|
||||
{% unless page.url == "/" %}
|
||||
{% if page.parent %}
|
||||
{%- for node in pages_list -%}
|
||||
{%- if node.parent == nil -%}
|
||||
{%- if page.parent == node.title or page.grand_parent == node.title -%}
|
||||
{%- assign first_level_url = node.url | absolute_url -%}
|
||||
{%- endif -%}
|
||||
{%- if node.has_children -%}
|
||||
{%- assign children_list = pages_list | where: "parent", node.title -%}
|
||||
{%- for child in children_list -%}
|
||||
{%- if page.url == child.url or page.parent == child.title -%}
|
||||
{%- assign second_level_url = child.url | absolute_url -%}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
<nav aria-label="Breadcrumb" class="breadcrumb-nav">
|
||||
<ol class="breadcrumb-nav-list">
|
||||
{% if page.grand_parent %}
|
||||
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
|
||||
<li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
|
||||
{% else %}
|
||||
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
|
||||
{% endif %}
|
||||
<li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
|
||||
</ol>
|
||||
</nav>
|
||||
{% endif %}
|
||||
{% if page.parent %}
|
||||
{%- for node in pages_list -%}
|
||||
{%- if node.parent == nil -%}
|
||||
{%- if page.parent == node.title or page.grand_parent == node.title -%}
|
||||
{%- assign first_level_url = node.url | absolute_url -%}
|
||||
{%- endif -%}
|
||||
{%- if node.has_children -%}
|
||||
{%- assign children_list = pages_list | where: "parent", node.title -%}
|
||||
{%- for child in children_list -%}
|
||||
{%- if page.url == child.url or page.parent == child.title -%}
|
||||
{%- assign second_level_url = child.url | absolute_url -%}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
<nav aria-label="Breadcrumb" class="breadcrumb-nav">
|
||||
<ol class="breadcrumb-nav-list">
|
||||
{% if page.grand_parent %}
|
||||
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
|
||||
<li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
|
||||
{% else %}
|
||||
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
|
||||
{% endif %}
|
||||
<li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
|
||||
</ol>
|
||||
</nav>
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
<div id="main-content" class="main-content" role="main">
|
||||
<h1>{{ page.title }}</h1>
|
||||
|
||||
{% if site.heading_anchors != false %}
|
||||
{% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
|
||||
{% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\"
|
||||
aria-hidden=\"true\">
|
||||
<use xlink:href=\"#svg-link\"></use>
|
||||
</svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
|
||||
{% else %}
|
||||
{{ content }}
|
||||
{{ content }}
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if page.has_children == true and page.has_toc != false %}
|
||||
<hr>
|
||||
<h2 class="text-delta">Table of contents</h2>
|
||||
<ul>
|
||||
{%- assign children_list = pages_list | where: "parent", page.title | where: "grand_parent", page.parent -%}
|
||||
{% for child in children_list %}
|
||||
<li>
|
||||
<a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<hr>
|
||||
<h2 class="text-delta">Table of contents</h2>
|
||||
<ul>
|
||||
{%- assign children_list = pages_list | where: "parent", page.title | where: "grand_parent", page.parent -%}
|
||||
{% for child in children_list %}
|
||||
<li>
|
||||
<a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{%
|
||||
endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
{% capture footer_custom %}
|
||||
{%- include footer_custom.html -%}
|
||||
{%- include footer_custom.html -%}
|
||||
{% endcapture %}
|
||||
{% if footer_custom != "" or site.last_edit_timestamp or site.gh_edit_link %}
|
||||
<hr>
|
||||
<footer>
|
||||
{% if site.back_to_top %}
|
||||
<p><a href="#top" id="back-to-top">{{ site.back_to_top_text }}</a></p>
|
||||
{% endif %}
|
||||
<hr>
|
||||
<footer>
|
||||
{% if site.back_to_top %}
|
||||
<p><a href="#top" id="back-to-top">{{ site.back_to_top_text }}</a></p>
|
||||
{% endif %}
|
||||
|
||||
{{ footer_custom }}
|
||||
{{ footer_custom }}
|
||||
|
||||
{% if site.last_edit_timestamp or site.gh_edit_link %}
|
||||
<div class="d-flex mt-2">
|
||||
{% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %}
|
||||
<p class="text-small text-grey-dk-000 mb-0 mr-2">
|
||||
Page last modified: <span class="d-inline-block">{{ page.last_modified_date | date: site.last_edit_time_format }}</span>.
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if
|
||||
site.gh_edit_link and
|
||||
site.gh_edit_link_text and
|
||||
site.gh_edit_repository and
|
||||
site.gh_edit_branch and
|
||||
site.gh_edit_view_mode
|
||||
%}
|
||||
<p class="text-small text-grey-dk-000 mb-0">
|
||||
<a href="{{ site.gh_edit_repository }}/{{ site.gh_edit_view_mode }}/{{ site.gh_edit_branch }}{% if site.gh_edit_source %}/{{ site.gh_edit_source }}{% endif %}/{{ page.path }}" id="edit-this-page">{{ site.gh_edit_link_text }}</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if site.last_edit_timestamp or site.gh_edit_link %}
|
||||
<div class="d-flex mt-2">
|
||||
{% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %}
|
||||
<p class="text-small text-grey-dk-000 mb-0 mr-2">
|
||||
Page last modified: <span class="d-inline-block">{{ page.last_modified_date | date:
|
||||
site.last_edit_time_format }}</span>.
|
||||
</p>
|
||||
{% endif %}
|
||||
</footer>
|
||||
{% if
|
||||
site.gh_edit_link and
|
||||
site.gh_edit_link_text and
|
||||
site.gh_edit_repository and
|
||||
site.gh_edit_branch and
|
||||
site.gh_edit_view_mode
|
||||
%}
|
||||
<p class="text-small text-grey-dk-000 mb-0">
|
||||
<a href="{{ site.gh_edit_repository }}/{{ site.gh_edit_view_mode }}/{{ site.gh_edit_branch }}{% if site.gh_edit_source %}/{{ site.gh_edit_source }}{% endif %}/{{ page.path }}"
|
||||
id="edit-this-page">{{ site.gh_edit_link_text }}</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</footer>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if site.search_enabled != false %}
|
||||
{% if site.search.button %}
|
||||
<a href="#" id="search-button" class="search-button">
|
||||
<svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if site.search.button %}
|
||||
<a href="#" id="search-button" class="search-button">
|
||||
<svg viewBox="0 0 24 24" class="icon">
|
||||
<use xlink:href="#svg-search"></use>
|
||||
</svg>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="search-overlay"></div>
|
||||
<div class="search-overlay"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -15,28 +15,352 @@ $fz-purple-100: #3400c2;
|
||||
$fz-purple-200: #37007f;
|
||||
$fz-purple-300: #28005c;
|
||||
|
||||
$fz-orange: #FF7300;
|
||||
$fz-orange: #ff7300;
|
||||
|
||||
$link-color: $fz-purple-000;
|
||||
$link-color: $fz-purple-100;
|
||||
$btn-primary-color: $fz-purple-100;
|
||||
|
||||
$body-heading-color: $fz-purple-300;
|
||||
$body-text-color: $fz-grey-dk-200;
|
||||
|
||||
// Fonts
|
||||
|
||||
$body-font-family: "Fira Sans", sans-serif;
|
||||
$mono-font-family: "Fira Mono", monospace;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
.select-version {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 900 !important;
|
||||
margin-top: 20px !important;
|
||||
margin-bottom: 20px !important;
|
||||
font-weight: 600 !important;
|
||||
color: $fz-grey-dk-300 !important;
|
||||
}
|
||||
h1:first-child {
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0 !important;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 14px !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.main-content a {
|
||||
color: $fz-grey-dk-300 !important;
|
||||
border: 2px solid transparent;
|
||||
opacity: 1 !important;
|
||||
transition: all 0.2s ease-out;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.main-content a:not([class]) {
|
||||
background: none !important;
|
||||
opacity: 1 !important;
|
||||
border-bottom: 2px solid $fz-grey-dk-300;
|
||||
}
|
||||
|
||||
.main-content a:not([class]):hover {
|
||||
background: none !important;
|
||||
border-bottom: 2px solid $fz-grey-dk-300;
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
|
||||
// Anchor
|
||||
|
||||
.anchor-heading {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.anchor-heading:hover {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
// button
|
||||
|
||||
.btn {
|
||||
padding: 10px 20px !important;
|
||||
color: $fz-grey-dk-300 !important;
|
||||
background: $fz-grey-lt-300 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease-in-out;
|
||||
border: 2px solid transparent !important;
|
||||
}
|
||||
.btn:hover {
|
||||
background: $fz-grey-lt-100 !important;
|
||||
border: 2px solid transparent !important;
|
||||
}
|
||||
.btn > a:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.btn.btn-purple {
|
||||
background: $fz-purple-300 !important;
|
||||
color: white !important;
|
||||
border: 2px solid transparent !important;
|
||||
}
|
||||
.btn.btn-purple:hover {
|
||||
background: $fz-purple-100 !important;
|
||||
color: white !important;
|
||||
border: 2px solid transparent !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
// Code
|
||||
|
||||
.language-shell,
|
||||
.language-ruby,
|
||||
.language-bash {
|
||||
background-color: $fz-grey-dk-300 !important;
|
||||
margin: 2px !important;
|
||||
padding: 10px !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.language-plaintext,
|
||||
.language-text {
|
||||
background-color: $fz-grey-dk-300 !important;
|
||||
margin: 0px !important;
|
||||
padding: 2px !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: transparent !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
// Search Results
|
||||
.search-icon {
|
||||
color: $fz-grey-dk-300 !important;
|
||||
}
|
||||
.search-result-doc .search-result-icon {
|
||||
color: $fz-grey-dk-300 !important;
|
||||
}
|
||||
.search-result-title {
|
||||
color: $fz-grey-dk-300 !important;
|
||||
}
|
||||
.search-result-highlight {
|
||||
color: $fz-grey-dk-300 !important;
|
||||
}
|
||||
|
||||
// Other Styling
|
||||
|
||||
$header-height: 100px;
|
||||
|
||||
// Header
|
||||
.site-header {
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
.site-header .site-title {
|
||||
margin: 0px !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.site-header .site-title:hover {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.site-header .site-logo-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.site-header .site-logo-wrapper h1 {
|
||||
font-size: 1rem !important;
|
||||
margin-top: 5px !important;
|
||||
margin-bottom: 0px !important;
|
||||
color: $fz-grey-dk-300;
|
||||
}
|
||||
|
||||
.site-header .site-logo-wrapper a:hover {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.site-header .site-logo {
|
||||
height: 2rem !important;
|
||||
width: 2rem !important;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
// Auxalary Buttons
|
||||
.aux-nav-list {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.aux-nav-list-item {
|
||||
margin: 5px !important;
|
||||
border-radius: 6px !important;
|
||||
height: 30px !important;
|
||||
background: $fz-grey-lt-100;
|
||||
color: $fz-grey-dk-300 !important;
|
||||
}
|
||||
|
||||
.aux-nav-list a {
|
||||
color: $fz-grey-dk-300 !important;
|
||||
}
|
||||
.aux-nav-list a:hover {
|
||||
background: $fz-grey-lt-200;
|
||||
border-radius: 6px !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
// Select Version
|
||||
.select-version {
|
||||
width: 100% !important;
|
||||
margin: 0rem !important;
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
.select-version select {
|
||||
background-color: none;
|
||||
padding: 10px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
background-color: $fz-grey-lt-100;
|
||||
-moz-appearance: none; /* Firefox */
|
||||
-webkit-appearance: none; /* Safari and Chrome */
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select-version select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Site Nav
|
||||
|
||||
.site-nav {
|
||||
padding-top: 0 !important;
|
||||
margin-right: 20px !important;
|
||||
}
|
||||
.site-nav::-webkit-scrollbar {
|
||||
width: 0px !important;
|
||||
}
|
||||
|
||||
// Side Bar
|
||||
|
||||
.side-bar {
|
||||
border: none !important;
|
||||
background-color: inherit !important;
|
||||
}
|
||||
|
||||
// Nav List
|
||||
|
||||
.nav-list {
|
||||
padding-left: 0.25rem !important;
|
||||
}
|
||||
.nav-list:first-child {
|
||||
border-left: 0px;
|
||||
}
|
||||
|
||||
.site-nav > .nav-list .nav-list-item {
|
||||
margin-top: 1.25rem;
|
||||
font-weight: 500;
|
||||
color: $fz-grey-dk-300 !important;
|
||||
}
|
||||
|
||||
.site-nav > .nav-list .nav-list-item > .nav-list .nav-list-item {
|
||||
margin-top: 0px;
|
||||
font-weight: 400;
|
||||
color: $fz-grey-dk-200 !important;
|
||||
|
||||
.nav-list-link {
|
||||
min-height: 1.25rem;
|
||||
line-height: 1.25rem;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// Nav List Link
|
||||
|
||||
.nav-list-link {
|
||||
color: $fz-grey-dk-200 !important;
|
||||
border-radius: 6px !important;
|
||||
opacity: 0.7;
|
||||
transition: all 0.2s ease-out;
|
||||
border: 1px solid transparent;
|
||||
padding: 10px !important;
|
||||
}
|
||||
.nav-list-link:hover {
|
||||
background-color: $fz-grey-lt-200;
|
||||
background-image: none !important;
|
||||
border: 1px solid $fz-grey-dk-300;
|
||||
}
|
||||
|
||||
.nav-list-link.active {
|
||||
color: $fz-grey-dk-300 !important;
|
||||
background-color: $fz-grey-lt-100;
|
||||
background-image: none !important;
|
||||
opacity: 1 !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
// Nav List Expander
|
||||
|
||||
.nav-list-expander {
|
||||
color: #1b140e !important;
|
||||
border-radius: 6px !important;
|
||||
height: 2.8rem !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
// Main Content
|
||||
.main-content-wrap {
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
.main-content h1 {
|
||||
color: $fz-grey-dk-300 !important;
|
||||
}
|
||||
|
||||
// Floating Content Summary
|
||||
|
||||
.floating-content-summary {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $fz-grey-lt-100;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
top: 150px;
|
||||
right: 100px;
|
||||
display: flex;
|
||||
width: 200px;
|
||||
|
||||
h3 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 10px;
|
||||
margin-left: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
list-style-type: none;
|
||||
margin-left: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Borders
|
||||
|
||||
@@ -44,11 +368,49 @@ $border-color: $fz-grey-lt-200;
|
||||
|
||||
// Container
|
||||
|
||||
$content-width: 1100px;
|
||||
$media-queries: (
|
||||
xs: 620px,
|
||||
sm: 800px,
|
||||
md: $content-width,
|
||||
lg: $content-width + $nav-width,
|
||||
xl: 1700px,
|
||||
);
|
||||
$nav-width: 300px;
|
||||
|
||||
// Responsive Refinements
|
||||
|
||||
/* SMARTPHONES PORTRAIT */
|
||||
@media only screen and (max-width: 300px) {
|
||||
.site-header {
|
||||
min-height: 50px !important;
|
||||
}
|
||||
.site-header .site-title {
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
.nav-list .nav-list-item .nav-list-link {
|
||||
line-height: 1rem !important;
|
||||
}
|
||||
.main-header {
|
||||
background-color: transparent !important;
|
||||
padding-bottom: 20px !important;
|
||||
border-bottom: 1px solid $fz-grey-dk-300 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* SMARTPHONES LANDSCAPE */
|
||||
@media only screen and (max-width: 480px) {
|
||||
.site-header {
|
||||
min-height: 50px !important;
|
||||
}
|
||||
.site-header .site-title {
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
.nav-list .nav-list-item .nav-list-link {
|
||||
line-height: 1rem !important;
|
||||
}
|
||||
.main-header {
|
||||
background-color: transparent !important;
|
||||
padding-bottom: 20px !important;
|
||||
border-bottom: 1px solid $fz-grey-dk-300 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* TABLET LANDSCAPE / DESKTOP */
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.site-nav {
|
||||
margin-right: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
<svg width="400" height="110" viewBox="0 0 400 110" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.2377 14C98.1003 30.5361 77.5377 67.1849 84.794 81.9826C69.8827 60.5955 90.1987 42.2158 78.2377 14Z" fill="#EF7A30"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M89.2521 45.8288C102.235 54.2609 86.6506 74.0179 94.9473 79.0751C103.349 84.1971 102.399 62.9106 114 68.3713C101.921 64.2634 106.932 89.6066 91.9644 86.2339C74.836 82.3743 96.1375 55.1419 89.2521 45.8288Z" fill="#7F3900"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 74.7008C38.7272 55.0085 72.4085 86.6091 88.3027 88.5837C108.743 91.1227 103.298 67.4998 113.529 68.3799C104.102 69.5163 109.761 94.2219 88.6838 94.9854C65.7304 95.8169 42.83 60.8369 14 74.7008H14Z" fill="#331700"/>
|
||||
<path d="M124.96 84H140.38V77.88H136.78V59.46H148.24V77.88H144.64V84H160V77.88H154.48V53.34H136.78V50.88C136.78 48.24 139.12 47.28 141.88 47.28C144.22 47.28 146.41 47.46 148.24 47.67C148.99 48.54 150.07 49.08 151.3 49.08C153.64 49.08 155.44 47.22 155.44 44.94C155.44 42.66 153.64 40.86 151.3 40.86C149.92 40.86 148.72 41.52 147.97 42.54C145.45 41.82 143.35 41.28 140.38 41.28C135.7 41.28 130.54 42.72 130.54 49.56V53.34H124.96V59.46H130.54V77.88H124.96V84ZM158.033 84H179.993V77.94H171.413V68.04C171.413 62.46 174.353 58.98 181.913 58.98V65.58H188.633V54.24C187.073 53.4 184.673 52.62 181.613 52.62C176.513 52.62 172.463 54.99 170.933 58.26V53.34H158.033V59.4H164.513V77.94H158.033V84ZM205.085 84.72C209.825 84.72 213.485 82.8 216.065 79.98L211.925 75.6C210.005 77.7 207.845 78.6 205.145 78.6C200.885 78.6 198.125 75.81 197.345 71.34H218.165C218.405 69.78 218.405 68.22 218.405 67.14C218.405 57.18 212.465 52.62 205.085 52.62C196.145 52.62 190.445 58.68 190.445 68.64C190.445 78.36 195.965 84.72 205.085 84.72ZM205.085 58.68C208.265 58.68 211.205 60.72 211.625 65.46H197.345C198.065 61.2 200.465 58.68 205.085 58.68ZM222.798 84H247.938V77.82H231.618L247.998 58.44V53.34H223.938V59.52H239.178L222.798 78.78V84ZM266.371 84.72C275.491 84.72 281.071 78.54 281.071 68.7C281.071 58.86 275.491 52.62 266.371 52.62C257.311 52.62 251.671 58.92 251.671 68.7C251.671 78.6 257.311 84.72 266.371 84.72ZM266.371 78.12C261.391 78.12 258.631 74.4 258.631 68.7C258.631 62.94 261.391 59.16 266.371 59.16C271.471 59.16 274.111 63 274.111 68.7C274.111 74.4 271.411 78.12 266.371 78.12ZM283.903 84H290.803V66.6C290.803 60.9 293.923 59.16 297.583 59.16C301.063 59.16 303.943 61.08 303.943 66.72V84H310.843V65.28C310.843 55.86 305.623 52.62 299.503 52.62C295.633 52.62 292.333 54.33 290.803 56.28V53.34H283.903V84ZM328.976 84.72C333.716 84.72 337.376 82.8 339.956 79.98L335.816 75.6C333.896 77.7 331.736 78.6 329.036 78.6C324.776 78.6 322.016 75.81 321.236 71.34H342.056C342.296 69.78 342.296 68.22 342.296 67.14C342.296 57.18 336.356 52.62 328.976 52.62C320.036 52.62 314.336 58.68 314.336 68.64C314.336 78.36 319.856 84.72 328.976 84.72ZM328.976 58.68C332.156 58.68 335.096 60.72 335.516 65.46H321.236C321.956 61.2 324.356 58.68 328.976 58.68Z" fill="#331700"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.0 KiB |
5
docs/assets/images/logo-main.svg
Normal file
5
docs/assets/images/logo-main.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg width="228" height="184" viewBox="0 0 228 184" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M145.858 0C190.958 37.5635 144.268 120.815 160.744 154.43C126.887 105.847 173.016 64.0952 145.858 0Z" fill="#EF7A30"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M170.867 72.3025C200.346 91.4569 164.96 136.337 183.798 147.825C202.876 159.46 200.717 111.106 227.059 123.51C199.632 114.179 211.01 171.748 177.025 164.087C138.134 155.319 186.501 93.4581 170.867 72.3025Z" fill="#7F3900"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 137.888C56.1454 93.1552 132.622 164.939 168.711 169.425C215.123 175.192 202.76 121.53 225.99 123.53C204.585 126.111 217.433 182.233 169.576 183.967C117.459 185.856 65.4612 106.395 9.60305e-05 137.888H0Z" fill="#331700"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 821 B |
Reference in New Issue
Block a user