git: e987b56919 - main - Use new header and footer for the Documentation Portal

From: Sergio Carlavilla Delgado <carlavilla_at_FreeBSD.org>
Date: Fri, 23 Sep 2022 14:46:23 UTC
The branch main has been updated by carlavilla:

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

commit e987b569194a4a0a8c3042c239aaaf5e91f83669
Author:     Sergio Carlavilla Delgado <carlavilla@FreeBSD.org>
AuthorDate: 2022-09-23 14:45:10 +0000
Commit:     Sergio Carlavilla Delgado <carlavilla@FreeBSD.org>
CommitDate: 2022-09-23 14:46:13 +0000

    Use new header and footer for the Documentation Portal
    
    Use the new header and footer for the Documentation Portal.
    Upgrade the SVG logos to display the (R) icon required by the
    FreeBSD Foundation
    
    Approved by:    doceng
---
 documentation/themes/beastie/LICENSE               |   2 +-
 .../themes/beastie/assets/js/copy-clipboard.js     |   2 +-
 documentation/themes/beastie/assets/js/search.js   |   2 +-
 .../themes/beastie/assets/js/theme-chooser.js      |   2 +-
 .../beastie/assets/styles/documentation.scss       |  11 +-
 .../themes/beastie/assets/styles/footer.scss       | 267 ++++++++-------
 .../themes/beastie/assets/styles/global.scss       |   5 +-
 .../themes/beastie/assets/styles/header.scss       | 377 +++++++++++++++------
 .../themes/beastie/assets/styles/main.scss         |   2 +-
 .../themes/beastie/assets/styles/variables.scss    |  84 +++--
 documentation/themes/beastie/i18n/en.toml          | 156 ++++++++-
 .../themes/beastie/layouts/books/list.html         |   1 -
 .../themes/beastie/layouts/books/single.html       |   1 -
 .../beastie/layouts/partials/site-footer.html      | 138 +++++---
 .../beastie/layouts/partials/site-header.html      | 118 ++++++-
 .../beastie/static/images/FreeBSD-colors.svg       |  92 +++++
 .../static/images/FreeBSD-monochromatic.svg        |  82 +++++
 17 files changed, 969 insertions(+), 373 deletions(-)

diff --git a/documentation/themes/beastie/LICENSE b/documentation/themes/beastie/LICENSE
index e94c3e41c7..dba716913c 100644
--- a/documentation/themes/beastie/LICENSE
+++ b/documentation/themes/beastie/LICENSE
@@ -1,4 +1,4 @@
-Copyright (c) 2020-2022, The FreeBSD Project
+Copyright (c) 1994-2022, The FreeBSD Project
 Copyright (c) 2020-2022, Sergio Carlavilla <carlavilla@FreeBSD.org>
 
 
diff --git a/documentation/themes/beastie/assets/js/copy-clipboard.js b/documentation/themes/beastie/assets/js/copy-clipboard.js
index 126f2bf8b1..8038e96141 100644
--- a/documentation/themes/beastie/assets/js/copy-clipboard.js
+++ b/documentation/themes/beastie/assets/js/copy-clipboard.js
@@ -1,7 +1,7 @@
 /*
 BSD 2-Clause License
 
-Copyright (c) 2001-2022, The FreeBSD Documentation Project
+Copyright (c) 1994-2022, The FreeBSD Documentation Project
 Copyright (c) 2021-2022, Sergio Carlavilla
 All rights reserved.
 
diff --git a/documentation/themes/beastie/assets/js/search.js b/documentation/themes/beastie/assets/js/search.js
index 0cf9a29bb2..f2f1584ab6 100644
--- a/documentation/themes/beastie/assets/js/search.js
+++ b/documentation/themes/beastie/assets/js/search.js
@@ -1,7 +1,7 @@
 /*
 BSD 2-Clause License
 
-Copyright (c) 2001-2022, The FreeBSD Documentation Project
+Copyright (c) 1994-2022, The FreeBSD Documentation Project
 Copyright (c) 2021-2022, Sergio Carlavilla
 All rights reserved.
 
diff --git a/documentation/themes/beastie/assets/js/theme-chooser.js b/documentation/themes/beastie/assets/js/theme-chooser.js
index cc52d7084b..40e4cd898f 100644
--- a/documentation/themes/beastie/assets/js/theme-chooser.js
+++ b/documentation/themes/beastie/assets/js/theme-chooser.js
@@ -1,7 +1,7 @@
 /*
 BSD 2-Clause License
 
-Copyright (c) 2001-2022, The FreeBSD Documentation Project
+Copyright (c) 1994-2022, The FreeBSD Documentation Project
 Copyright (c) 2021-2022, Sergio Carlavilla
 All rights reserved.
 
diff --git a/documentation/themes/beastie/assets/styles/documentation.scss b/documentation/themes/beastie/assets/styles/documentation.scss
index 7826480db8..39d4c1d27f 100644
--- a/documentation/themes/beastie/assets/styles/documentation.scss
+++ b/documentation/themes/beastie/assets/styles/documentation.scss
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2001-2022, The FreeBSD Documentation Project
+ * Copyright (c) 1994-2022, The FreeBSD Documentation Project
  * Copyright (c) 2021-2022, Sergio Carlavilla <carlavilla@FreeBSD.org>
  * All rights reserved.
  *
@@ -47,11 +47,10 @@
 
 .main-wrapper-article {
   display: flex;
-  margin-top: var(--header-height);
   justify-content: center;
   margin-left: auto;
   margin-right: auto;
-  max-width: 1440px;
+  max-width: var(--max-width);
   width: 100%;
 
   .article {
@@ -70,11 +69,10 @@
 
 .main-wrapper-book {
   display: flex;
-  margin-top: var(--header-height);
   justify-content: center;
   margin-left: auto;
   margin-right: auto;
-  max-width: 1440px;
+  max-width: var(--max-width);
   width: 100%;
 
   .book-menu {
@@ -99,6 +97,7 @@
       }
 
       #search-book {
+        margin-top: 1.5rem;
         margin-bottom: .75rem;
         border: 1px solid #CCC;
         border-radius: 4px;
@@ -171,7 +170,7 @@
     padding: var(--documentation-padding);
     width: 90vw;
     min-width: 20rem;
-    max-width: 1440px;
+    max-width: var(--max-width);
     padding-left: 1.5rem;
     padding-right: 1.5rem;
     transition-duration: 0.2s;
diff --git a/documentation/themes/beastie/assets/styles/footer.scss b/documentation/themes/beastie/assets/styles/footer.scss
index aece947208..947687c4fe 100644
--- a/documentation/themes/beastie/assets/styles/footer.scss
+++ b/documentation/themes/beastie/assets/styles/footer.scss
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2001-2022, The FreeBSD Documentation Project
+ * Copyright (c) 1994-2022, The FreeBSD Documentation Project
  * Copyright (c) 2021-2022, Sergio Carlavilla <carlavilla@FreeBSD.org>
  * All rights reserved.
  *
@@ -27,159 +27,156 @@
  */
 
 footer {
-  display: flex;
-  flex-flow: row wrap;
-  padding: 30px 20px 20px 20px;
+  margin-top: 1rem;
+  padding: 1rem;
   color: var(--global-font-color);
-  background-color: var(--footer-background);
-  border-top: 1px solid var(--footer-border-color);
-  align-items: center;
-  justify-content: center;
+  background-color: var(--footer-background-color);
+}
 
-  .container {
-    display: flex;
-    max-width: 1440px;
-    flex-flow: row wrap;
-  }
+.footer-container {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "logo"
+    "about"
+    "documentation"
+    "community"
+    "legal"
+    "copyright";
+  max-width: var(--max-width);
+  margin-left: auto;
+  margin-right: auto;
+}
 
-  > * {
-    flex:  1 100%;
-  }
+.logo-column {
+  grid-area: logo;
+}
 
-  .footer-project-language {
-    margin-right: 1.25em;
-    margin-bottom: 2em;
-
-    h1 {
-      font-weight: bolder;
-      font-size: 1.5rem;
-    }
-
-    .options-container {
-      display: flex;
-      align-items: center;
-
-      .theme-container {
-        display: none;
-        margin-left: 2rem;
-
-        select {
-          border: 1px solid #CCC;
-          border-radius: 4px;
-          box-sizing: border-box;
-          background-color: #FCFCFD;
-          color: #444;
-        }
-      }
-
-      .language-container {
-        display: flex;
-        align-items: center;
-
-        a {
-          display: flex;
-          align-items: center;
-          text-decoration: none;
-          color: var(--global-font-color);
-          border-radius: 1px;
-          padding: .3rem;
-
-        img {
-          display: inline-flex;
-          padding-right: 10px;
-          align-items: center;
-          justify-content: center;
-          height: 1.5rem;
-          width: 1.5rem;
-        }
-        }
-      }
-
-    }
+.about-column {
+  grid-area: about;
+}
 
-  }
+.community-column {
+  grid-area: community;
+}
 
-  .footer-nav {
-    display: flex;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    > * {
-      flex: 1 50%;
-      margin-right: 1.25em;
-    }
-
-    .title {
-      font-weight: bolder;
-      font-size: 15px;
-      border-bottom: 1px solid var(--white);
-    }
-
-    h2 {
-      border: none !important;
-    }
-
-    ul {
-      list-style: none;
-      padding-left: 0;
-
-      li {
-        line-height: 2em;
-
-        a {
-          text-decoration: none;
-          color: var(--global-font-color);
-        }
-      }
-    }
-  }
+.documentation-column {
+  grid-area: documentation;
+}
 
-  .footer-nav > li {
-    margin-bottom: 2rem;
-  }
+.legal-column {
+  grid-area: legal;
+}
 
-  .copyright {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-    color: var(--global-font-color);
-
-    .love {
-      display: flex;
-      align-items: center;
-      font-weight: bolder;
-
-      .heart {
-        color: red;
-      }
-    }
-  }
+.copyright-column {
+  grid-area: copyright;
+  padding-top: 1rem;
+  border-top: 1px solid #E5E7EB;
+  line-height: 1rem;
+  font-size: .8rem;
+}
 
+.column-title {
+  margin-top: 0;
+  font-size: inherit;
+  border-bottom: none;
 }
 
-@media screen and (min-width: 24rem) {
-  .copyright .love {
-    margin-left: auto;
-  }
+.column-elements-container {
+  margin: .5rem 0;
+  padding: 0;
+  list-style: none;
+}
+
+.column-elements-container li {
+  margin-top: .7rem;
+}
+
+.column-element {
+  text-decoration: none;
+  line-height: 2rem;
+  color: inherit;
+  font-size: inherit;
+}
+
+.heart {
+  color: red;
 }
 
-@media screen and (min-width: 40rem) {
-  .footer-project-language {
-    flex: 1 0px;
+.options-container {
+  display: flex;
+  align-items: center;
+}
+
+.theme-container {
+  display: none;
+  margin-left: 2rem;
+}
+
+.theme-container select {
+  border: 1px solid #CCC;
+  border-radius: 4px;
+  box-sizing: border-box;
+  background-color: #FCFCFD;
+  color: #444;
+}
+
+.language-container {
+  display: flex;
+  align-items: center;
+}
+
+.language-container a {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: var(--global-font-color);
+  border-radius: 1px;
+  padding: .3rem;
+}
+
+.language-container a img {
+  display: inline-flex;
+  padding-right: 10px;
+  align-items: center;
+  justify-content: center;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+@media screen and (min-width: 450px) {
+  .footer-container {
+    gap: 2rem;
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+      "logo logo"
+      "about community"
+      "documentation legal"
+      "copyright copyright";
   }
+}
 
-  .footer-nav > * {
-    flex: 1;
+@media screen and (min-width: 900px) {
+  footer {
+    padding: 2rem;
   }
 
-  .footer-nav {
-    flex: 2 0px;
+  .footer-container {
+    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
+    grid-template-areas:
+      "logo about documentation community legal"
+      "copyright copyright copyright copyright copyright";
+    gap: 1rem;
   }
 }
 
-@media screen and (max-width: 41rem) {
-  .footer-nav {
-    display: block !important;
+@media screen and (min-width: 1451px) {
+  footer {
+    padding: 2rem 5rem;
+  }
+
+  .footer-container {
+    gap: 2rem;
   }
 }
diff --git a/documentation/themes/beastie/assets/styles/global.scss b/documentation/themes/beastie/assets/styles/global.scss
index 77c1ece932..83537922e5 100644
--- a/documentation/themes/beastie/assets/styles/global.scss
+++ b/documentation/themes/beastie/assets/styles/global.scss
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2001-2022, The FreeBSD Documentation Project
+ * Copyright (c) 1994-2022, The FreeBSD Documentation Project
  * Copyright (c) 2021-2022, Sergio Carlavilla <carlavilla@FreeBSD.org>
  * All rights reserved.
  *
@@ -60,11 +60,10 @@ body {
 .main-wrapper {
   display: flex;
   flex-direction: column;
-  margin-top: var(--header-height);
   justify-content: center;
   margin-left: auto;
   margin-right: auto;
-  max-width: 1440px;
+  max-width: var(--max-width);
   transition: padding .15s;
   background-color: var(--global-background-color);
 
diff --git a/documentation/themes/beastie/assets/styles/header.scss b/documentation/themes/beastie/assets/styles/header.scss
index 04c953103e..fbb50b15cf 100644
--- a/documentation/themes/beastie/assets/styles/header.scss
+++ b/documentation/themes/beastie/assets/styles/header.scss
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2001-2022, The FreeBSD Documentation Project
+ * Copyright (c) 1994-2022, The FreeBSD Documentation Project
  * Copyright (c) 2021-2022, Sergio Carlavilla <carlavilla@FreeBSD.org>
  * All rights reserved.
  *
@@ -27,147 +27,314 @@
  */
 
 header {
-  position: fixed;
+  position: sticky;
+  top: 0;
+  z-index: 9999;
+  padding: .5rem 1rem;
   background-color: var(--header-background);
-  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
+}
+
+.header-container {
+  display: flex;
   width: 100%;
-  z-index: 9999;
+  max-width: var(--max-width);
+  margin-left: auto;
+  margin-right: auto;
+  align-items: center;
+}
 
-  nav {
-    display: block;
-    max-width: 1440px;
-    width: 100%;
-    margin-left: auto;
-    margin-right: auto;
-  }
+.logo-menu-bars-container {
+  display: flex;
+  align-items: center;
+}
 
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    overflow: hidden;
-    background-color: var(--header-background);
+.logo {
+  display: flex;
+  align-items: center;
+  margin-right: 1rem;
+}
 
-    li {
-      list-style: none;
+header nav {
+  margin-left: 0;
+  margin-right: 0;
+}
 
-      a {
-        display: block;
-        padding: 20px 20px;
-        border-right: 1px solid var(--header-background);
-        text-decoration: none;
-        color: var(--header-font-color);
-        font-weight: bolder;
-      }
-    }
-  }
+header ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow: hidden;
+}
 
-  .logo {
-    display: block;
-    float: left;
-    font-size: 2em;
-    padding: 10px 20px;
-    padding-bottom: 0px;
-    text-decoration: none;
-  }
+header ul li {
+  list-style: none;
+}
 
-  .menu {
-    clear: both;
-    max-height: 0;
-    transition: max-height .2s ease-out;
+.menu-bars {
+  display: none;
+  margin-left: auto;
+  color: var(--white);
+  cursor: pointer;
+}
 
-    .first-element{
-      border-top: 1px solid transparent;
-      box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
-    }
-  }
+input[type='checkbox'] {
+  display: none;
+}
 
-  .menu-icon {
-    cursor: pointer;
-    display: inline-block;
-    float: right;
-    padding: 28px 20px;
-    position: relative;
-    user-select: none;
-    margin-top: 5px;
-
-    .navicon {
-      background: var(--white);
-      display: block;
-      height: 2px;
-      position: relative;
-      transition: background .2s ease-out;
-      width: 18px;
-    }
-  }
-}
-
-header li a:hover,
-header .menu-btn:hover {
-  background-color: var(--header-background);
+.menu {
+  display: flex;
+  padding: 0;
+  margin: 0;
+}
+
+.menu-item {
+  display: flex;
+  margin-right: 1rem;
+  align-items: center;
+  color: var(--white) !important;
+  margin-top: 0px !important;
+}
+
+.menu-item a {
+  padding: 1rem 0;
+  color: inherit;
+}
+
+.menu-item a,
+.donate a {
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.menu-item a:hover,
+.donate a:hover {
+  text-decoration: none;
 }
 
-header .menu-icon .navicon:before,
-header .menu-icon .navicon:after {
-  background: var(--white);
-  content: '';
-  display: block;
-  height: 100%;
+.donate a {
+  color: var(--black) !important;
+}
+
+.menu-item i {
+  margin-left: .1rem;
+}
+
+.sub-menu {
+  visibility: hidden;
   position: absolute;
-  transition: all .2s ease-out;
-  width: 100%;
+  top: 55px;
+  padding: 1rem .75rem;
+  min-width: 250px;
+  background-color: var(--white);
+  border-radius: .4rem;
+  color: #444;
+  border: 1px solid #CDCDCD;
+  z-index: 999;
 }
 
-header .menu-icon .navicon:before {
-  top: 5px;
+.sub-menu:hover {
+  visibility: visible;
 }
 
-header .menu-icon .navicon:after {
-  top: -5px;
+.menu-item a:hover+.sub-menu {
+  visibility: visible;
 }
 
-header .menu-btn {
-  display: none;
+.sub-menu li {
+  margin-top: 0;
+  padding: .75rem .6rem;
 }
 
-header .menu-btn:checked ~ .menu {
-  max-height: 300px;
+.sub-menu .title {
+  border-bottom: 1px solid #E5E7EB;
 }
 
-header .menu-btn:checked ~ .menu-icon .navicon {
-  background: transparent;
+.sub-menu li a {
+  font-weight: normal !important;
 }
 
-header .menu-btn:checked ~ .menu-icon .navicon:before {
-  transform: rotate(-45deg);
+.sub-menu .title a {
+  font-weight: bolder !important;
 }
 
-header .menu-btn:checked ~ .menu-icon .navicon:after {
-  transform: rotate(45deg);
+.search-donate-container {
+  display: flex;
+  align-items: center;
+  margin-top: 0px;
+  margin-left: auto;
 }
 
-header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
-header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
-  top: 0;
+.search {
+  display: flex;
+  border-radius: .4rem;
+  background-color: var(--white);
+  border: 1px solid var(--white);
+  margin-top: 0px;
+}
+
+.search input[type='text'] {
+  display: inline-block;
+  width: 100%;
+  padding: .3rem .8rem;
+  border: none;
+  border-radius: .4rem;
+  appearance: none;
+  outline: none;
+}
+
+.search button {
+  background-color: var(--white);
+  border: none;
+  border-radius: .4rem;
+}
+
+.donate {
+  margin-left: .5rem;
+}
+
+.donate a {
+  display: inline-block;
+  padding: .5rem 1rem;
+  background-color: var(--white);
+  border-radius: .4rem;
 }
 
-@media (min-width: 55em) {
-  header li {
-    float: left;
-    list-style: none;
+.donate a i,
+.heart i {
+  color: #E38582;
+}
+
+.donate:hover a i,
+.heart:hover i {
+  color: #D1332E;
+}
+
+@media screen and (max-width: 1100px) {
+  .header-container {
+    flex-direction: column;
   }
 
-  header li a {
-    padding: 20px 30px;
+  .logo-menu-bars-container {
+    width: 100%;
+    padding: .5rem 0;
   }
 
-  header .menu {
-    clear: none;
-    float: right;
-    max-height: none;
+  nav {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  .menu-bars {
+    display: block;
+  }
+
+  .menu {
+    display: none;
+    width: 100%;
+  }
+
+  #menu-bars:checked~nav .menu {
+    display: block !important;
+  }
+
+  .menu-item {
+    flex-direction: column;
+    width: 100%;
+    margin-right: 0px;
+    border-top: 1px solid var(--white);
+    cursor: pointer;
+  }
+
+  .menu-item a {
+    width: 100%;
   }
 
-  header .menu-icon {
+  .menu-item a:hover+.sub-menu {
+    visibility: visible;
+  }
+
+  .menu-item-description {
+    display: flex;
+    width: 100%;
+    cursor: pointer;
+  }
+
+  .menu-item-description i {
+    margin-left: auto;
+  }
+
+  .sub-menu {
     display: none;
+    flex-direction: column;
+    width: 100%;
+    padding: 0px;
+    position: static;
+    visibility: visible;
+    border: none;
+    background-color: inherit;
+    color: inherit;
+    box-shadow: inherit;
+  }
+
+  .sub-menu .title {
+    display: none;
+    border-bottom: none;
+  }
+
+  .sub-menu li {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  #about:checked~.sub-menu,
+  #download:checked~.sub-menu,
+  #documentation:checked~.sub-menu,
+  #community:checked~.sub-menu {
+    display: flex;
+  }
+
+  .search-donate-container {
+    display: none;
+  }
+
+  .search {
+    width: 100%;
+  }
+
+  #menu-bars:checked~.search-donate-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-left: unset;
+    padding-top: .2rem;
+  }
+
+  .donate {
+    display: flex;
+    width: 100%;
+    margin-left: unset;
+    padding-top: .8rem;
+  }
+
+  .donate a {
+    width: 100%;
+    text-align: center;
+  }
+
+  .donate a i {
+    color: #D1332E;
+  }
+}
+
+@media screen and (min-width: 900px) {
+  header {
+    padding: .5rem 2rem;
+  }
+}
+
+@media screen and (min-width: 1451px) {
+  header {
+    padding: .5rem 5rem;
   }
 }
diff --git a/documentation/themes/beastie/assets/styles/main.scss b/documentation/themes/beastie/assets/styles/main.scss
index 8d3fdbb1c9..e2d1a98f03 100644
--- a/documentation/themes/beastie/assets/styles/main.scss
+++ b/documentation/themes/beastie/assets/styles/main.scss
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2001-2022, The FreeBSD Documentation Project
+ * Copyright (c) 1994-2022, The FreeBSD Documentation Project
  * Copyright (c) 2021-2022, Sergio Carlavilla <carlavilla@FreeBSD.org>
  * All rights reserved.
  *
diff --git a/documentation/themes/beastie/assets/styles/variables.scss b/documentation/themes/beastie/assets/styles/variables.scss
index 717f154347..2cb677a321 100644
--- a/documentation/themes/beastie/assets/styles/variables.scss
+++ b/documentation/themes/beastie/assets/styles/variables.scss
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2001-2022, The FreeBSD Documentation Project
+ * Copyright (c) 1994-2022, The FreeBSD Documentation Project
  * Copyright (c) 2021-2022, Sergio Carlavilla <carlavilla@FreeBSD.org>
  * All rights reserved.
  *
@@ -27,9 +27,10 @@
  */
 
 :root {
+  --max-width: 1450px;
   --header-height: 4.5rem;
   --documentation-padding: 0px 20px 20px 20px;
-  --size-200: 0.50rem;
+
   --size-300: 0.75rem;
   --size-400: 1rem;
   --size-500: 1.33rem;
@@ -37,24 +38,20 @@
   --size-600: 1.77rem;
   --size-700: 2.30rem;
   --size-750: 2.40rem;
-  --size-800: 3.15rem;
-  --size-900: 4.2rem;
-
-  --flow-space: var(--size-700);
 }
 
 .theme-light {
   --white: #FFF;
   --black: #000;
   --global-font-color: #444;
-  --header-background: #9F0E0F;
+  --header-background: #AB2B28;
   --header-font-color: #FFF;
   --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-background-color: #F0F1F5;
   --footer-border-color: #F0F1F5;
   --lines-color: #DDD;
   --links-color: #0645AD;
@@ -77,56 +74,57 @@
   --example-block-color: #F1BB16;
   --example-block-background-color: #FEF8E7;
   --example-block-font-color: #444;
+
+  --footer-logo: "";
 }
 
 .theme-dark {
-  --white: #FFF;
-  --black: #000;
-  --global-font-color: #EEEFF1;
-  --header-background: #9F0E0F;
-  --header-font-color: #EEEFF1;
-  --global-background-color: #333333;
-  --card-background-color: #272727;
-  --card-border-color: #272727;
-  --table-header-background-color: #F1F3F1;
-  --table-header-font-color: #444;
-  --footer-background: #2B2B2B;
-  --footer-border-color: #2B2B2B;
-  --lines-color: #4d4d4d;
-  --links-color: #BAD7FF;
-  --pre-background-color: #272727;
-  --pre-font-color: #EEEFF1;
-  --copy-clipboard-tooltip-background-color: #43453B;
+    --white: #FFF;
+    --black: #000;
+    --global-font-color: #EEEFF1;
+    --header-background: #AB2B28;
*** 754 LINES SKIPPED ***