git: f46f0f22f0 - main - Improve user experience in Documentation Portal
- Go to: [ bottom of page ] [ top of archives ] [ this month ]
Date: Wed, 22 Jun 2022 19:49:16 UTC
The branch main has been updated by carlavilla:
URL: https://cgit.FreeBSD.org/doc/commit/?id=f46f0f22f07fa76f52112cd6b5c227e4f160da8d
commit f46f0f22f07fa76f52112cd6b5c227e4f160da8d
Author: Sergio Carlavilla Delgado <carlavilla@FreeBSD.org>
AuthorDate: 2022-06-22 19:48:40 +0000
Commit: Sergio Carlavilla Delgado <carlavilla@FreeBSD.org>
CommitDate: 2022-06-22 19:48:40 +0000
Improve user experience in Documentation Portal
* Remove scrollbar thin
* Increase fonts size in books menu and TOC
* Improve fonts using system font stack as fallback
* Improve UI in big screens
* Add some margin in trademarks section
* Change background color in light theme
---
.../beastie/assets/styles/documentation.scss | 36 ++++---
.../themes/beastie/assets/styles/footer.scss | 13 ++-
.../themes/beastie/assets/styles/global.scss | 30 +++---
.../themes/beastie/assets/styles/header.scss | 9 +-
.../themes/beastie/assets/styles/variables.scss | 4 +-
.../beastie/layouts/partials/site-footer.html | 118 +++++++++++----------
6 files changed, 123 insertions(+), 87 deletions(-)
diff --git a/documentation/themes/beastie/assets/styles/documentation.scss b/documentation/themes/beastie/assets/styles/documentation.scss
index 28e15c5544..7826480db8 100644
--- a/documentation/themes/beastie/assets/styles/documentation.scss
+++ b/documentation/themes/beastie/assets/styles/documentation.scss
@@ -48,6 +48,11 @@
.main-wrapper-article {
display: flex;
margin-top: var(--header-height);
+ justify-content: center;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 1440px;
+ width: 100%;
.article {
flex-grow: 1;
@@ -66,6 +71,11 @@
.main-wrapper-book {
display: flex;
margin-top: var(--header-height);
+ justify-content: center;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 1440px;
+ width: 100%;
.book-menu {
flex: 0 0 16rem;
@@ -84,12 +94,12 @@
h3 {
margin: 1rem 0;
- border-bottom: none;
padding-left: .5rem;
+ border-bottom: none;
}
#search-book {
- margin: 0 0 .75rem .75rem;
+ margin-bottom: .75rem;
border: 1px solid #CCC;
border-radius: 4px;
box-shadow: inset 0 1px 3px #DDD;
@@ -97,6 +107,7 @@
background-color: #FCFCFD;
color: #444;
width: 95%;
+ margin-left: .5rem;
}
input.toggle ~ .icon::after {
@@ -128,8 +139,9 @@
line-height: 2;
ul {
- margin: 0 0 0 .75rem;
+ margin: 0;
padding: 0;
+ padding-left: .5rem;
li {
list-style: none;
@@ -138,12 +150,15 @@
label {
position: absolute;
cursor: pointer;
+ font-size: 0.875rem;
}
a {
color: var(--global-font-color);
display: block;
padding-left: 1rem;
+ padding-right: .5rem;
+ font-size: 0.875rem;
}
}
}
@@ -156,8 +171,7 @@
padding: var(--documentation-padding);
width: 90vw;
min-width: 20rem;
- margin-left: auto;
- margin-right: auto;
+ max-width: 1440px;
padding-left: 1.5rem;
padding-right: 1.5rem;
transition-duration: 0.2s;
@@ -259,16 +273,13 @@
a {
color: var(--global-font-color);
display: inline-block;
- padding: .25rem 0 .25rem .5rem;
+ padding: .25rem .5rem .25rem .5rem;
margin-left: .5rem;
+ font-size: 0.875rem;
text-decoration: none;
- i {
- margin-right: .5rem;
- }
-
&:hover {
- font-weight: 500;
+ text-decoration: underline;
}
}
}
@@ -291,7 +302,8 @@
a {
color: var(--global-font-color);
display: inline-block;
- padding: .25rem 0 .25rem .5rem;
+ padding: .25rem .5rem .25rem .5rem;
+ font-size: 0.875rem;
}
i {
diff --git a/documentation/themes/beastie/assets/styles/footer.scss b/documentation/themes/beastie/assets/styles/footer.scss
index 97981c93a7..aece947208 100644
--- a/documentation/themes/beastie/assets/styles/footer.scss
+++ b/documentation/themes/beastie/assets/styles/footer.scss
@@ -34,6 +34,13 @@ footer {
background-color: var(--footer-background);
border-top: 1px solid var(--footer-border-color);
align-items: center;
+ justify-content: center;
+
+ .container {
+ display: flex;
+ max-width: 1440px;
+ flex-flow: row wrap;
+ }
> * {
flex: 1 100%;
@@ -59,7 +66,6 @@ footer {
select {
border: 1px solid #CCC;
border-radius: 4px;
- //box-shadow: inset 0 1px 3px #DDD;
box-sizing: border-box;
background-color: #FCFCFD;
color: #444;
@@ -129,9 +135,14 @@ footer {
}
}
+ .footer-nav > li {
+ margin-bottom: 2rem;
+ }
+
.copyright {
display: flex;
flex-wrap: wrap;
+ width: 100%;
color: var(--global-font-color);
.love {
diff --git a/documentation/themes/beastie/assets/styles/global.scss b/documentation/themes/beastie/assets/styles/global.scss
index 157cfd669c..c6e2bbaf6d 100644
--- a/documentation/themes/beastie/assets/styles/global.scss
+++ b/documentation/themes/beastie/assets/styles/global.scss
@@ -27,21 +27,14 @@
*/
html {
- font-family: 'Inter', sans-serif;
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
scroll-padding-top: var(--header-height);
scroll-behavior: auto;
}
@supports (font-variation-settings: normal) {
html {
- font-family: 'Inter var', sans-serif;
- }
-}
-
-@supports (scrollbar-width:thin) {
- body * {
- scrollbar-width: thin;
- scrollbar-color: #D9D9D9 transparent;
+ font-family: 'Inter var', -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
}
}
@@ -56,7 +49,7 @@ body {
color: var(--global-font-color);
padding: 0;
margin: 0;
- font-size: 16px;
+ font-size: 100%;
font-weight: 400;
font-style: normal;
cursor: auto;
@@ -67,11 +60,20 @@ body {
.main-wrapper {
display: flex;
flex-direction: column;
- padding: 0rem 2rem 2rem 2rem;
margin-top: var(--header-height);
+ justify-content: center;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 1440px;
transition: padding .15s;
background-color: var(--global-background-color);
+ .article {
+ .paragraph {
+ padding-left: .5rem;
+ }
+ }
+
.welcome-container {
display: flex;
width: 100%;
@@ -407,7 +409,7 @@ figcaption {
pre {
border-radius: 0.25rem;
- font-family: monospace;
+ font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
background-color: var(--pre-background-color);
font-size: 1rem;
color: var(--pre-font-color);
@@ -708,7 +710,7 @@ table.stretch {
}
code {
- font-family: "DejaVu Sans Mono", monospace;
+ font-family: "DejaVu Sans Mono", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
font-size: 0.75rem;
}
@@ -717,6 +719,8 @@ code {
}
details {
+ margin: 1rem 0;
+
summary {
cursor: pointer;
}
diff --git a/documentation/themes/beastie/assets/styles/header.scss b/documentation/themes/beastie/assets/styles/header.scss
index bdc53aeb2f..04c953103e 100644
--- a/documentation/themes/beastie/assets/styles/header.scss
+++ b/documentation/themes/beastie/assets/styles/header.scss
@@ -33,6 +33,14 @@ header {
width: 100%;
z-index: 9999;
+ nav {
+ display: block;
+ max-width: 1440px;
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
ul {
margin: 0;
padding: 0;
@@ -162,5 +170,4 @@ header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
header .menu-icon {
display: none;
}
-
}
diff --git a/documentation/themes/beastie/assets/styles/variables.scss b/documentation/themes/beastie/assets/styles/variables.scss
index 48a87f7c14..717f154347 100644
--- a/documentation/themes/beastie/assets/styles/variables.scss
+++ b/documentation/themes/beastie/assets/styles/variables.scss
@@ -49,14 +49,14 @@
--global-font-color: #444;
--header-background: #9F0E0F;
--header-font-color: #FFF;
- --global-background-color: #FCFCFD;
+ --global-background-color: #FFF;
--card-background-color: #F0F1F5;
--card-border-color: #F0F1F5;
--table-header-background-color: #F1F3F1;
--table-header-font-color: #444;
--footer-background: #F0F1F5;
--footer-border-color: #F0F1F5;
- --lines-color: #E6ECF1;
+ --lines-color: #DDD;
--links-color: #0645AD;
--pre-background-color: #F4F4F4;
--pre-font-color: #444;
diff --git a/documentation/themes/beastie/layouts/partials/site-footer.html b/documentation/themes/beastie/layouts/partials/site-footer.html
index 7e00948dd1..06099138e9 100755
--- a/documentation/themes/beastie/layouts/partials/site-footer.html
+++ b/documentation/themes/beastie/layouts/partials/site-footer.html
@@ -1,65 +1,67 @@
<footer>
- <div class="footer-project-language">
- <h1>
- {{ i18n "freebsd-project" }}
- </h1>
- <div class="options-container">
- {{ if $.Site.Params.isOnline }}
- <div class="language-container">
- <a id="languages" href="{{ "languages" | absLangURL }}">
- <img src="{{ absLangURL ($.Site.BaseURL ) }}images/language.png" class="language-image" alt="{{ i18n "choose-language" }}">
- <span>{{ .Site.Language.LanguageName }}</span>
- </a>
+ <div class="container">
+ <div class="footer-project-language">
+ <h1>
+ {{ i18n "freebsd-project" }}
+ </h1>
+ <div class="options-container">
+ {{ if $.Site.Params.isOnline }}
+ <div class="language-container">
+ <a id="languages" href="{{ "languages" | absLangURL }}">
+ <img src="{{ absLangURL ($.Site.BaseURL ) }}images/language.png" class="language-image" alt="{{ i18n "choose-language" }}">
+ <span>{{ .Site.Language.LanguageName }}</span>
+ </a>
+ </div>
+ {{ end }}
+ <div class="theme-container">
+ <select id="theme-chooser">
+ <option value="theme-light">{{ i18n "light" }}</option>
+ <option value="theme-dark">{{ i18n "dark" }}</option>
+ <option value="theme-high-contrast">{{ i18n "high-contrast" }}</option>
+ </select>
</div>
- {{ end }}
- <div class="theme-container">
- <select id="theme-chooser">
- <option value="theme-light">{{ i18n "light" }}</option>
- <option value="theme-dark">{{ i18n "dark" }}</option>
- <option value="theme-high-contrast">{{ i18n "high-contrast" }}</option>
- </select>
</div>
</div>
- </div>
- <ul class="footer-nav">
- <li>
- <h2 class="title">{{ i18n "documentation" }}</h2>
- <ul>
- <li>
- <a href="https://docs-legacy.freebsd.org/doc/">{{ i18n "previous-versions" }}</a>
- </li>
- <li>
- <a href="https://docs-legacy.freebsd.org/44doc/">{{ i18n "4-4bsd-documents" }}</a>
- </li>
- </ul>
- </li>
- <li>
- <h2 class="title">{{ i18n "about" }}</h2>
- <ul>
- <li>
- <a href="https://www.FreeBSD.org/">{{ i18n "freebsd-project" }}</a>
- </li>
- <li>
- <a href="https://freebsdfoundation.org/">{{ i18n "freebsd-foundation" }}</a>
- </li>
- </ul>
- </li>
- <li>
- <h2 class="title">{{ i18n "legal" }}</h2>
- <ul>
- <li>
- <a href="https://freebsdfoundation.org/donate/">{{ i18n "donations" }}</a>
- </li>
- <li>
- <a href="https://www.freebsd.org/copyright/">{{ i18n "legal-notices" }}</a>
- </li>
- </ul>
- </li>
- </ul>
- <div class="copyright">
- <p>© 1995-{{ now.Format "2006" }} {{ i18n "freebsd-project" }} {{ i18n "copyright" }}
- <div class="love">
- <span>{{ i18n "made-with" }} <span class="heart">♥</span> {{ i18n "by-freebsd-community" }}</span>
+ <ul class="footer-nav">
+ <li>
+ <h2 class="title">{{ i18n "documentation" }}</h2>
+ <ul>
+ <li>
+ <a href="https://docs-legacy.freebsd.org/doc/">{{ i18n "previous-versions" }}</a>
+ </li>
+ <li>
+ <a href="https://docs-legacy.freebsd.org/44doc/">{{ i18n "4-4bsd-documents" }}</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <h2 class="title">{{ i18n "about" }}</h2>
+ <ul>
+ <li>
+ <a href="https://www.FreeBSD.org/">{{ i18n "freebsd-project" }}</a>
+ </li>
+ <li>
+ <a href="https://freebsdfoundation.org/">{{ i18n "freebsd-foundation" }}</a>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <h2 class="title">{{ i18n "legal" }}</h2>
+ <ul>
+ <li>
+ <a href="https://freebsdfoundation.org/donate/">{{ i18n "donations" }}</a>
+ </li>
+ <li>
+ <a href="https://www.freebsd.org/copyright/">{{ i18n "legal-notices" }}</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <div class="copyright">
+ <p>© 1995-{{ now.Format "2006" }} {{ i18n "freebsd-project" }} {{ i18n "copyright" }}
+ <div class="love">
+ <span>{{ i18n "made-with" }} <span class="heart">♥</span> {{ i18n "by-freebsd-community" }}</span>
+ </div>
</div>
</div>
</footer>