Initial version of DocFX Material

ovasquez · Feb 1, 2019 · 7785672 · 7785672
1 parent b38433f
commit 7785672
Show file tree

Hide file tree

Showing 14 changed files with 687 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+**/_site
+**/obj
diff --git a/README.md b/README.md
@@ -1,2 +1,21 @@
-# docfx-material
-A simple material theme for DocFX
+# DocFX Material
+
+A simple material theme for DocFX. This is an override of the default template
+so you need to enable both in the `docfx.json`.
+
+![DocFX Material Site](./sample/images/material-site.png)
+
+## Install
+
+1. Download the source or the zipped file from the release.
+2. Create a `templates` folder in the root of your DocFX directory.
+3. Copy the `material` folder to the `templates` folder.
+4. Update the `docfx.json` configuration to include the material template:
+ ```json
+ {
+ "template": [
+ "default",
+ "templates/material"
+ ],
+ }
+ ```
diff --git a/material/partials/head.tmpl.partial b/material/partials/head.tmpl.partial
@@ -0,0 +1,21 @@
+{{!Copyright (c) Oscar Vasquez. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}} {{#_appTitle}}| {{_appTitle}} {{/_appTitle}}</title>
+ <meta name="viewport" content="width=device-width">
+ <meta name="title" content="{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}} {{#_appTitle}}| {{_appTitle}} {{/_appTitle}}">
+ <meta name="generator" content="docfx {{_docfxVersion}}">
+ {{#_description}}<meta name="description" content="{{_description}}">{{/_description}}
+ <link rel="shortcut icon" href="{{_rel}}{{{_appFaviconPath}}}{{^_appFaviconPath}}favicon.ico{{/_appFaviconPath}}">
+ <link rel="stylesheet" href="{{_rel}}styles/docfx.vendor.css">
+ <link rel="stylesheet" href="{{_rel}}styles/docfx.css">
+ <link rel="stylesheet" href="{{_rel}}styles/main.css">
+ <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
+ <meta property="docfx:navrel" content="{{_navRel}}">
+ <meta property="docfx:tocrel" content="{{_tocRel}}">
+ {{#_noindex}}<meta name="searchOption" content="noindex">{{/_noindex}}
+ {{#_enableSearch}}<meta property="docfx:rel" content="{{_rel}}">{{/_enableSearch}}
+ {{#_enableNewTab}}<meta property="docfx:newtab" content="true">{{/_enableNewTab}}
+</head>
diff --git a/material/styles/main.css b/material/styles/main.css
@@ -0,0 +1,141 @@
+body {
+ color: #34393e;
+ font-family: 'Roboto', sans-serif;
+ line-height: 1.5;
+ font-size: 16px;
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+ word-wrap: break-word
+}
+
+/* HEADINGS */
+
+h1 {
+ font-weight: 600;
+ font-size: 32px;
+}
+
+h2 {
+ font-weight: 600;
+ font-size: 24px;
+ line-height: 1.8;
+}
+
+h3 {
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 1.8;
+}
+
+article h1,
+article h2,
+article h3,
+article h4 {
+ margin-top: 35px;
+ margin-bottom: 15px;
+}
+
+article h4 {
+ padding-bottom: 8px;
+ border-bottom: 2px solid #ddd;
+}
+
+/* NAVBAR */
+
+.navbar-brand>img {
+ color: #fff;
+}
+
+.navbar {
+ border: none;
+ -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);
+}
+
+.subnav {
+ border-top: 1px solid #ddd;
+ background-color: #fff;
+ -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);
+}
+
+.navbar-inverse {
+ background-color: #0d47a1;
+ z-index: 100;
+}
+
+.navbar-inverse .navbar-nav>li>a,
+.navbar-inverse .navbar-text {
+ color: #fff;
+ background-color: #0d47a1;
+ 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: #0d47a1;
+ 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: #0d47a1;
+ border-bottom: 3px solid white;
+}
+
+.navbar-form .form-control {
+ border: none;
+ border-radius: 20px;
+}
+
+/* SIDEBAR */
+
+.toc .level1>li {
+ font-weight: 400;
+}
+
+.toc .nav>li>a {
+ color: #34393e;
+}
+
+.sidefilter {
+ background-color: #fff;
+ border-left: none;
+ border-right: none;
+}
+
+.sidefilter {
+ background-color: #fff;
+ border-left: none;
+ border-right: none;
+}
+
+.toc-filter {
+ padding: 10px;
+ margin: 0;
+}
+
+.toc-filter>input {
+ border: 2px solid #ddd;
+ border-radius: 20px;
+}
+
+.toc-filter>.filter-icon {
+ display: none;
+}
+
+.sidetoc>.toc {
+ background-color: #fff;
+ overflow-x: hidden;
+}
+
+.sidetoc {
+ background-color: #fff;
+ border: none;
+}