Redesign dottydoc theme

Lighter and closer to the old one instead of the front page. See issue #7595

Author: TheElectronWill

doc-tool/bootstrap-theme/theme.scss

@@ -4,29 +4,67 @@
 @import "node_modules/bootstrap/scss/mixins";
 
 // Web fonts
-@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300|Source+Code+Pro:400,600|Source+Sans+Pro:400,600|Lobster&display=fallback');
+@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Roboto+Slab:300|Fira+Code:400,700&display=fallback');
+
+// Custom colors
+$pro-grey: #414551;
+$soft-red: #ca445e;
+$primary: $pro-grey;
+$light: #fafafa;
+$code-color: $soft-red; // overrides bootstrap
 
-// Custom values that override the default variables of Bootstrap
 $theme-colors: (
-  "primary": #002b36, // primary toolbar+sidebar dark color
-  "secondary": #ca445e, // secondary color used on light backgrounds
-  "secondary-lite": #ca44c822, // less opaque version of secondary
-  "accent": #ca445e, // secondary-like for dark backgrounds
-  "contrast": #f26527, // used on dark backgrounds
+  "primary": $primary,
+  "secondary": $soft-red
+);
+
+$colors: (
+  "light": $light,
+
+  "toolbar": $pro-grey,
+  "toolbar-entry": $light,
+  "toolbar-active": lighten($pro-grey, 25),
+
+  "sidebar": $light,
+  "sidebar-category": #000,
+  "sidebar-page": $pro-grey,
+  "sidebar-active": $soft-red,
+
+  "pre-bg": $light, // <pre> blocks of code background
+  "doc-bg": rgba($soft-red, 0.135) //#ca44c822
 );
+
+// Responsive control
 $container-max-widths: (
   md: 720px,
   lg: 960px,
   xl: 960px
 );
 
-$code-color: theme-color("secondary");
-$font-family-monospace: "Source Code Pro", "Andale Mono", "Courier New", monospace;
-$font-family-sans-serif: "Source Sans Pro", "Tahoma", "Geneva", sans-serif;
+// Body Fonts
+$font-family-monospace: "Fira Code", "Andale Mono", monospace;
+$font-family-sans-serif: "Lato", sans-serif;
 $font-family-serif: "Roboto Slab", "Georgia", serif;
 $font-family-base: $font-family-serif;
 $headings-font-family: $font-family-sans-serif;
 
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-bold: 700;
+$headings-font-weight: 700;
+
+// Nav Fonts
+$toolbar-main-font: $headings-font-family;
+$toolbar-main-weight: $font-weight-normal;
+$toolbar-details-font: $headings-font-family;
+$toolbar-details-weight: $font-weight-normal;
+
+$sidebar-font: $headings-font-family;
+$sidebar-category-weight: $font-weight-normal;
+$sidebar-category-size: 18px;
+$sidebar-page-weight: $font-weight-normal;
+$sidebar-page-size: 1rem;
+
 // Features imports - follow the order of bootstrap.scss (bootstrap's module)
 @import "node_modules/bootstrap/scss/root";
 @import "node_modules/bootstrap/scss/reboot";
@@ -43,3 +81,20 @@ $headings-font-family: $font-family-sans-serif;
 @import "node_modules/bootstrap/scss/badge";
 @import "node_modules/bootstrap/scss/spinners";
 @import "node_modules/bootstrap/scss/utilities";
+
+// Additional CSS variables
+:root {
+  --font-family-toolbar-main: #{inspect($toolbar-main-font)};
+  --font-weight-toolbar-main: #{$toolbar-main-weight};
+
+  --font-family-toolbar-details: #{inspect($toolbar-details-font)};
+  --font-weight-toolbar-details: #{$toolbar-details-weight};
+
+  --font-family-sidebar: #{inspect($sidebar-font)};
+
+  --font-size-sidebar-category: #{$sidebar-category-size};
+  --font-weight-sidebar-category: #{$sidebar-category-weight};
+
+  --font-size-sidebar-page: #{$sidebar-page-size};
+  --font-weight-sidebar-page: #{$sidebar-page-weight};
+}

doc-tool/resources/css/dottydoc.css

@@ -154,7 +154,7 @@ footer img#author-img {
   width: 100%;
 }
 .api .member:hover {
-  background: var(--secondary-lite);
+  background: var(--doc-bg);
   cursor: pointer;
 }
 .api .left-column {
@@ -175,10 +175,13 @@ footer img#author-img {
 }
 
 /* code */
+pre, code {
+  font-variant-ligatures: none;
+}
 pre {
   padding: 0;
   font-size: 13px;
-  background: rgba(244, 243, 244, 0.6);
+  background: var(--pre-bg);
   border-radius: 2px;
   border: 1px solid rgba(0, 0, 0, 0.1);
 }
@@ -222,10 +225,10 @@ aside.success {
   background-color: grey;
 }
 .gitter-open-chat-button:focus, .gitter-open-chat-button:hover {
-  background-color: var(--secondary);
+  background-color: var(--primary);
 }
 .gitter-open-chat-button:focus {
-  box-shadow: 0 0 8px var(--secondary);
+  box-shadow: 0 0 8px var(--primary);
 }
 .gitter-chat-embed {
   top: 40px; /* 50px (navbar) - 10px (aside's margin) */
@@ -253,4 +256,7 @@ aside.success {
     display: flex;
     flex-flow: wrap;
   }
+  main.container {
+    padding: 15px 45px;
+  }
 }

doc-tool/resources/css/sidebar.css

@@ -5,16 +5,12 @@
   z-index: 1000;
   width: 100%;
   height: 100%;
-  /* Safari and some others don't support overflow: x y */
-  overflow-x: hidden;
+  overflow-x: hidden; /* Safari and some others don't support overflow: x y */
   overflow-y: auto;
   -webkit-overflow-scrolling: touch; /* nicer scrolling on touch screens */
-  font-family: var(--font-family-sans-serif);
-  font-weight: 400;
-  background: var(--primary);
-  border-top: 1px solid black;
-  /* hidden by default, shown by toggle (on small screens) */
-  visibility: hidden;
+  font-family: var(--font-family-sidebar);
+  background: var(--sidebar);
+  visibility: hidden; /* hidden by default, shown by toggle (on small screens) */
   opacity: 0;
   transition: visibility .25s ease-out, opacity .25s ease-out;
 }
@@ -53,15 +49,21 @@
 }
 
 .sidebar .toc > li {
-  border-left: 2px solid var(--accent);
+  border-left: 2px solid var(--sidebar-active);
   padding-left: 1em;
 }
 
+.sidebar li a {
+  font-size: var(--font-size-sidebar-page);
+  font-weight: var(--font-weight-sidebar-page);
+}
+
 .sidebar > ul > li.leaf > a, .sidebar li.section > a {
-  color: white;
-  font-size: 18px;
-  text-transform: uppercase;
+  font-size: var(--font-size-sidebar-category);
+  font-weight: var(--font-weight-sidebar-category);
+  text-transform: capitalize;
   cursor: pointer;
+  color: var(--sidebar-category);
 }
 
 .sidebar .entity-package > .entity-name {
@@ -70,11 +72,11 @@
 
 .sidebar a {
   width: 100%;
-  color: var(--contrast);
+  color: var(--sidebar-page);
   transition: color .2s ease-out;
 }
 .sidebar a:hover {
-  color: var(--accent) !important;
+  color: var(--sidebar-active) !important;
 }
 
 /* API Documentation */
@@ -122,17 +124,17 @@
 
 @media (min-width: 768px) {
   .sidebar { /* visible by default, hidden by toggle */
-    width: 320px;
+    width: 275px;
     visibility: visible;
     opacity: 1;
     margin-left: 0;
     transition: margin .25s ease-out;
   }
   .sidebar.toggled {
-    margin-left: -320px;
+    margin-left: -275px;
   }
   #content-wrapper {
-    margin-left: 320px !important;
+    margin-left: 275px !important;
     transition: margin .25s ease-out;
   }
   .sidebar.toggled ~ #content-wrapper {

doc-tool/resources/css/toolbar.css

@@ -6,16 +6,17 @@ nav.navbar {
   height: 50px;
   line-height: 1;
   font-size: 24px;
-  font-family: var(--font-family-sans-serif);
-  background: var(--primary);
+  font-family: var(--font-family-toolbar-details);
+  background-color: var(--toolbar);
+  box-shadow: 0 0 6px;
 }
 nav.navbar-dark * {
-  color: white;
+  color: var(--toolbar-entry);
   transition: color .2s ease-out;
 }
 
 nav.navbar-dark a:hover *, nav.navbar-dark a:focus * {
-  color: var(--accent);
+  color: var(--toolbar-active);
 }
 nav.navbar a:hover {
   text-decoration: none;
@@ -43,13 +44,14 @@ nav.navbar a {
   line-height: inherit;
 }
 .navbar-brand .project-details h1 {
-  font-size: 1.1em;
-  font-family: "Lobster", cursive;
+  font-size: 1em;
+  font-family: var(--font-family-toolbar-main);
+  font-weight: var(--font-weight-toolbar-main);
 }
 .navbar-brand .project-details h2 {
   font-size: 0.5em;
-  color: grey;
   margin-top: 2px;
+  font-weight: var(--font-weight-toolbar-details);
 }
 
 #search-api-input {