Minor updates on style variables and shadows

ovasquez · Jan 14, 2020 · 06ab5db · 06ab5db
1 parent f47b174
commit 06ab5db
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -28,9 +28,12 @@ You can easily customize the color of the header bar and the links by updating
 the following variables in the `material/styles/main.css` file.
 
 ```css
+/* COLOR VARIABLES*/
 :root {
- --primary-color: #1565c0; /* Header color */
- --primary-dark: #003c8f; /* Link color */
- --primary-light: #5e92f3; /* Link:hover color */
+ --header-bg-color: #0d47a1;
+ --header-ft-color: #fff;
+ --highlight-light: #5e92f3;
+ --highlight-dark: #003c8f;
+ --font-color: #34393e;
 }
 ```
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## Version 0.3.1 - January 13th 2020
+
+- Minor update in styles and shadows.
+
 ## Version 0.3.0 - December 2nd 2019
 
 - Added easy customization of header and link colors.

diff --git a/docs/docfx.json b/docs/docfx.json
@@ -19,6 +19,7 @@
  ]
  }
  ],
+ "markdownEngineName": "markdig",
  "dest": "_site",
  "globalMetadataFiles": [],
  "fileMetadataFiles": [],

diff --git a/docs/index.md b/docs/index.md
@@ -28,10 +28,13 @@ You can easily customize the color of the header bar and the links by updating
 the following variables in the `material/styles/main.css` file.
 
 ```css
+/* COLOR VARIABLES*/
 :root {
- --primary-color: #1565c0; /* Header color */
- --primary-dark: #003c8f; /* Link color */
- --primary-light: #5e92f3; /* Link:hover color */
+ --header-bg-color: #0d47a1;
+ --header-ft-color: #fff;
+ --highlight-light: #5e92f3;
+ --highlight-dark: #003c8f;
+ --font-color: #34393e;
 }
 ```
 
@@ -48,3 +51,21 @@ For more reference about markdown support in DocFX check the
 >
 > [!CAUTION]
 > This is a warning containing some **very** important message.
+
+## DocFX tips
+
+### Enable search
+
+To enable search in DocFX it's not enough to set the configuration parameter to `true`:
+
+```json
+"globalMetadata": {
+ "_enableSearch": "true"
+}
+```
+
+You also have to indicate in the `docfx.json` the post processor that generates the index for the searches:
+
+```json
+"postProcessors": ["ExtractSearchIndex"],
+```
diff --git a/material/styles/main.css b/material/styles/main.css
@@ -1,9 +1,11 @@
 /* COLOR VARIABLES*/
 :root {
- --primary-color: #0d47a1;
- --primary-light: #5e92f3;
- --primary-dark: #003c8f;
+ --header-bg-color: #0d47a1;
+ --header-ft-color: #fff;
+ --highlight-light: #5e92f3;
+ --highlight-dark: #003c8f;
  --font-color: #34393e;
+ --custom-box-shadow: 0 1px 2px 0 rgba(61, 65, 68, 0.06), 0 1px 3px 1px rgba(61, 65, 68, 0.16);
 }
 
 body {
@@ -20,30 +22,30 @@ body {
 
 button,
 a {
- color: var(--primary-dark);
+ color: var(--highlight-dark);
  cursor: pointer;
 }
 
 button:hover,
 button:focus,
 a:hover,
 a:focus {
- color: var(--primary-light);
+ color: var(--highlight-light);
  text-decoration: none;
 }
 
 .toc .nav > li.active > a {
- color: var(--primary-dark);
+ color: var(--highlight-dark);
 }
 
 .toc .nav > li.active > a:hover,
 .toc .nav > li.active > a:focus {
- color: var(--primary-light);
+ color: var(--highlight-light);
 }
 
 .pagination > .active > a {
- background-color: var(--primary-color);
- border-color: var(--primary-color);
+ background-color: var(--header-bg-color);
+ border-color: var(--header-bg-color);
 }
 
 .pagination > .active > a,
@@ -52,8 +54,8 @@ a:focus {
 .pagination > .active > span,
 .pagination > .active > span:focus,
 .pagination > .active > span:hover {
- background-color: var(--primary-light);
- border-color: var(--primary-light);
+ background-color: var(--highlight-light);
+ border-color: var(--highlight-light);
 }
 
 /* HEADINGS */
@@ -96,15 +98,15 @@ article h4 {
 /* NAVBAR */
 
 .navbar-brand > img {
- color: #fff;
+ color: var(--header-ft-color);
 }
 
 .navbar {
  border: none;
  /* Both navbars use box-shadow */
- -webkit-box-shadow: 0px 1px 3px 0px rgba(100, 100, 100, 0.5);
- -moz-box-shadow: 0px 1px 3px 0px rgba(100, 100, 100, 0.5);
- box-shadow: 0px 1px 3px 0px rgba(100, 100, 100, 0.5);
+ -webkit-box-shadow: var(--custom-box-shadow);
+ -moz-box-shadow: var(--custom-box-shadow);
+ box-shadow: var(--custom-box-shadow);
 }
 
 .subnav {
@@ -113,30 +115,30 @@ article h4 {
 }
 
 .navbar-inverse {
- background-color: var(--primary-color);
+ background-color: var(--header-bg-color);
  z-index: 100;
 }
 
 .navbar-inverse .navbar-nav > li > a,
 .navbar-inverse .navbar-text {
- color: #fff;
- background-color: var(--primary-color);
+ color: var(--header-ft-color);
+ background-color: var(--header-bg-color);
  border-bottom: 3px solid transparent;
  padding-bottom: 12px;
 }
 
 .navbar-inverse .navbar-nav > li > a:focus,
 .navbar-inverse .navbar-nav > li > a:hover {
- color: #fff;
- background-color: var(--primary-color);
+ color: var(--header-ft-color);
+ background-color: var(--header-bg-color);
  border-bottom: 3px solid white;
 }
 
 .navbar-inverse .navbar-nav > .active > a,
 .navbar-inverse .navbar-nav > .active > a:focus,
 .navbar-inverse .navbar-nav > .active > a:hover {
- color: #fff;
- background-color: var(--primary-color);
+ color: var(--header-ft-color);
+ background-color: var(--header-bg-color);
  border-bottom: 3px solid white;
 }
 
@@ -198,7 +200,7 @@ article h4 {
  color: inherit;
  background-color: inherit;
  border: none;
- box-shadow: 0px 2px 2px 0px rgba(100, 100, 100, 0.4);
+ box-shadow: var(--custom-box-shadow);
 }
 
 .alert > p {
@@ -246,5 +248,6 @@ pre {
  word-wrap: break-word;
  background-color: #fffaef;
  border-radius: 4px;
- box-shadow: 0px 1px 4px 1px rgba(100, 100, 100, 0.4);
+ border: none;
+ box-shadow: var(--custom-box-shadow);
 }