From 5da7f48449680519281f74450c19bf94b0be9323 Mon Sep 17 00:00:00 2001 From: Jason G <52545545+gongjason@users.noreply.github.com> Date: Wed, 8 Jun 2022 11:43:35 -0700 Subject: [PATCH] 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 --- docs/Gemfile | 2 + docs/Gemfile.lock | 2 + docs/_config.yml | 11 +- docs/_includes/footer_custom.html | 2 +- docs/_includes/head.html | 2 +- docs/_includes/head_custom.html | 4 +- docs/_includes/title.html | 9 + docs/_layouts/default.html | 278 ++++++------ docs/_sass/color_schemes/fz.scss | 400 +++++++++++++++++- .../images/firezone-logo-wordmark-dark.svg | 6 - docs/assets/images/logo-main.svg | 5 + 11 files changed, 561 insertions(+), 160 deletions(-) create mode 100644 docs/_includes/title.html delete mode 100644 docs/assets/images/firezone-logo-wordmark-dark.svg create mode 100644 docs/assets/images/logo-main.svg diff --git a/docs/Gemfile b/docs/Gemfile index 9896d8b86..0a87f4dbd 100644 --- a/docs/Gemfile +++ b/docs/Gemfile @@ -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' diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock index 5e87e9103..30892c67d 100644 --- a/docs/Gemfile.lock +++ b/docs/Gemfile.lock @@ -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 diff --git a/docs/_config.yml b/docs/_config.yml index 36347e784..7eaab7d98 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -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 diff --git a/docs/_includes/footer_custom.html b/docs/_includes/footer_custom.html index fbbbfcba9..874fe76f0 100644 --- a/docs/_includes/footer_custom.html +++ b/docs/_includes/footer_custom.html @@ -1,5 +1,5 @@ {%- if site.footer_content -%} -
+

WireGuard® is a registered trademark of Jason A. Donenfeld.

diff --git a/docs/_includes/head.html b/docs/_includes/head.html index f04d3ba0c..c480b9fb8 100644 --- a/docs/_includes/head.html +++ b/docs/_includes/head.html @@ -7,7 +7,7 @@ {% if site.search_enabled != false %} - + {% endif %} diff --git a/docs/_includes/head_custom.html b/docs/_includes/head_custom.html index 1169d9866..35525eafc 100644 --- a/docs/_includes/head_custom.html +++ b/docs/_includes/head_custom.html @@ -9,6 +9,6 @@ - + - + diff --git a/docs/_includes/title.html b/docs/_includes/title.html new file mode 100644 index 000000000..6e75eacf3 --- /dev/null +++ b/docs/_includes/title.html @@ -0,0 +1,9 @@ +{% if site.logo %} +
+ +

Documentation

+
+ +{% else %} +{{ site.title }} +{% endif %} diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 964baf74c..a36bbc49b 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -5,37 +5,54 @@ layout: table_wrappers -{% include head.html %} + + + {% include head.html %} Link - - + + + Search - - + + + Menu - - + + + + Expand - + Document - - + + + @@ -44,166 +61,177 @@ layout: table_wrappers
{% include title.html %} - + + +
-
- -
{% if site.search_enabled != false %} -
-
- - -
-
+
+
+ +
+
+
{% endif %} {% include header_custom.html %} {% if site.aux_links %} - + {% endif %}
{% 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 -%} - - {% 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 -%} + + {% endif %} {% endunless %}

{{ page.title }}

{% if site.heading_anchors != false %} - {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %} + {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody=" + + " anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %} {% else %} - {{ content }} + {{ content }} {% endif %} {% if page.has_children == true and page.has_toc != false %} -
-

Table of contents

-
    - {%- assign children_list = pages_list | where: "parent", page.title | where: "grand_parent", page.parent -%} - {% for child in children_list %} -
  • - {{ child.title }}{% if child.summary %} - {{ child.summary }}{% endif %} -
    • - {% endfor %} -
+
+

Table of contents

+
    + {%- assign children_list = pages_list | where: "parent", page.title | where: "grand_parent", page.parent -%} + {% for child in children_list %} +
  • + {{ child.title }}{% if child.summary %} - {{ child.summary }}{% + endif %} +
    • + {% endfor %} +
{% 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 %} -
-
- {% if site.back_to_top %} -

{{ site.back_to_top_text }}

- {% endif %} +
+
+ {% if site.back_to_top %} +

{{ site.back_to_top_text }}

+ {% endif %} - {{ footer_custom }} + {{ footer_custom }} - {% if site.last_edit_timestamp or site.gh_edit_link %} -
- {% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %} -

- Page last modified: {{ page.last_modified_date | date: site.last_edit_time_format }}. -

- {% 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 - %} -

- {{ site.gh_edit_link_text }} -

- {% endif %} -
+ {% if site.last_edit_timestamp or site.gh_edit_link %} +
+ {% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %} +

+ Page last modified: {{ page.last_modified_date | date: + site.last_edit_time_format }}. +

{% 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 + %} +

+ {{ site.gh_edit_link_text }} +

+ {% endif %} +
+ {% endif %} + {% endif %}
{% if site.search_enabled != false %} - {% if site.search.button %} - - - - {% endif %} + {% if site.search.button %} + + + + + + {% endif %} -
+
{% endif %}
+ diff --git a/docs/_sass/color_schemes/fz.scss b/docs/_sass/color_schemes/fz.scss index a1db0e327..cc148700e 100644 --- a/docs/_sass/color_schemes/fz.scss +++ b/docs/_sass/color_schemes/fz.scss @@ -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; + } +} diff --git a/docs/assets/images/firezone-logo-wordmark-dark.svg b/docs/assets/images/firezone-logo-wordmark-dark.svg deleted file mode 100644 index 3d7b990a9..000000000 --- a/docs/assets/images/firezone-logo-wordmark-dark.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/docs/assets/images/logo-main.svg b/docs/assets/images/logo-main.svg new file mode 100644 index 000000000..bc3b35c7c --- /dev/null +++ b/docs/assets/images/logo-main.svg @@ -0,0 +1,5 @@ + + + + +