Custom help theme

2019-09-30 07:13:26 +00:00 · 2019-09-30 07:13:26 +00:00 · 9a7e261f60
commit 9a7e261f60
parent 9db4794a88
3 changed files with 213 additions and 1 deletions
--- a/docs/assets/css/style.scss
+++ b/docs/assets/css/style.scss
@ -0,0 +1,167 @@
+---
+---
+
+$link-color: #0099ff;
+$border-color: #dedede;
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  color: #222;
+  font-family: 'Open Sans',Arial,Helvetica,sans-serif;
+  line-height: 2;
+}
+
+a {
+  &:link, &:active {
+    color: $link-color;
+    text-decoration: none;
+  }
+  &:hover, &:visited {
+    color: $link-color;
+    text-decoration: underline;
+  }
+}
+
+h1, h2, h3, h4, h5 {
+  font-family: 'Zilla Slab','Open Sans',X-LocaleSpecific,sans-serif;
+  font-weight: bold;
+  color: #222;
+
+  a:link, a:visited, a:hover, a:active {
+    color: #222;
+  }
+}
+
+header {
+  border-bottom: 1px solid $border-color;
+  position: fixed;
+  width: 100%;
+  background-color: white;
+
+  h1 {
+    padding: 0 1.5rem;
+    float: left;
+    line-height: 4rem;
+  }
+
+  ul {
+    display: inline-block;
+    float: right;
+    padding: 0 1rem;
+    li {
+      display: inline-block;
+      padding: 0 1rem;
+      a {
+        line-height: 4rem;
+      }
+    }
+  }
+}
+
+aside {
+  width: 15rem;
+  position: fixed;
+  top: 4rem;
+  left: 0;
+  bottom: 0;
+  border-right: 1px solid $border-color;
+  padding: 1rem 0;
+
+  h1 {
+    font-size: 1.2rem;
+    line-height: 2.5;
+    padding: 0 1.5rem;
+  }
+
+  ul {
+    li {
+      a {
+        padding: .35rem 1.5rem .35rem 1.5rem;
+        line-height: 2.5;
+      }
+    }
+  }
+}
+
+main {
+  padding: 4rem 4rem 4rem 20rem;
+  margin: 0 auto;
+
+  article {
+
+    h1, h2, h3, h4, h5 {
+      font-family: 'Zilla Slab','Open Sans',X-LocaleSpecific,sans-serif;
+      font-weight: bold;
+    }
+
+    h1 {
+      font-size: 3rem;
+      line-height: 2;
+    }
+
+    h2 {
+      border-top: 1px dotted #c1c5c8;
+      font-size: 1.8;
+      margin-top: 36px;
+      padding-top: 36px;
+      font-family: 'Zilla Slab','Open Sans',X-LocaleSpecific,sans-serif;
+    }
+
+    kbd {
+      display: inline-block;
+      padding: 3px 5px;
+      line-height: 10px;
+      color: #444d56;
+      vertical-align: middle;
+      background-color: #fafbfc;
+      border: 1px solid #c6cbd1;
+      border-bottom-color: rgb(198, 203, 209);
+      border-bottom-color: #959da5;
+      border-radius: 3px;
+      box-shadow: inset 0 -1px 0 #959da5;
+    }
+
+    pre {
+      padding: 16px;
+      overflow: auto;
+      line-height: 1.45;
+      background-color: #f6f8fa;
+      border-radius: 3px;
+    }
+
+    pre > code {
+      background: none;
+    }
+
+    code {
+      padding: .2em .4em;
+      margin: 0;
+      background-color: rgba(27,31,35,.05);
+      border-radius: 3px;
+    }
+
+    ul {
+      li {
+        padding: .25rem 0;
+        margin-left: 1rem;
+      }
+    }
+
+    p {
+      margin-bottom: 1rem;
+    }
+  }
+}
+
+footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: lightgreen;
+}