FreeBSD
/
doc
mirror of https://git.freebsd.org/doc.git
1
0
Fork 0
Code Releases Activity
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
ed02196a27
commit
f46f0f22f0
6 changed files with 123 additions and 87 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save