Browse Source

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
main
Sergio Carlavilla Delgado 2 weeks ago
parent
commit
f46f0f22f0
  1. 36
      documentation/themes/beastie/assets/styles/documentation.scss
  2. 13
      documentation/themes/beastie/assets/styles/footer.scss
  3. 30
      documentation/themes/beastie/assets/styles/global.scss
  4. 9
      documentation/themes/beastie/assets/styles/header.scss
  5. 4
      documentation/themes/beastie/assets/styles/variables.scss
  6. 118
      documentation/themes/beastie/layouts/partials/site-footer.html

36
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 {

13
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 {

30
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;
}

9
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;
}
}

4
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;

118
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>&copy; 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>&copy; 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>

Loading…
Cancel
Save