git: f46f0f22f0 - main - Improve user experience in Documentation Portal

Sergio Carlavilla Delgado <[email protected]> Wed, 22 Jun 2022 19:49:16 GMT
Newsgroups	gmane.os.freebsd.devel.cvs.doc
Message-ID	<[email protected]>
The branch main has been updated by carlavilla:

URL: https://cgit.FreeBSD.org/doc/commit/?id=f46f0f22f07fa76f52112cd6b5c227e4f160da8d

commit f46f0f22f07fa76f52112cd6b5c227e4f160da8d
Author:     Sergio Carlavilla Delgado <[email protected]>
AuthorDate: 2022-06-22 19:48:40 +0000
Commit:     Sergio Carlavilla Delgado <[email protected]>
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>&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>