adding buttons

Signed-off-by: Vanessa Sochat <[email protected]>
vsoch · Jul 20, 2019 · 4db620f · 4db620f
1 parent 34bb286
commit 4db620f
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,5 +14,6 @@ Critical items to know are:
  - changed behaviour
 
 ## [master](https://github.com/vsoch/mkdocs-jekyll/tree/master)
+ - adding colored buttons, various fixed to navigation (0.0.11)
  - getting search working (0.0.1)
  - start of theme  (0.0.0)
diff --git a/_docs/getting-started.md b/_docs/getting-started.md
@@ -162,6 +162,22 @@ folder that will parse into the site [feed]({{ site.baseurl }}/feed.xml)
 The bottom of the page links the user to a post archive, where posts are organized
 according to the year.
 
+### Buttons
+
+Buttons come in a nice array of colors. Here is the code for a basic example,
+and you'd want to vary the `.btn-<tag>` to get different classes.
+
+```html
+<button class="btn btn-success">.btn-success</button>
+```
+
+<button class="btn btn-success">.btn-success</button>
+<button class="btn btn-info">.btn-info</button>
+<button class="btn btn-secondary">.btn-secondary</button>
+<button class="btn btn-primary">.btn-primary</button>
+<button class="btn btn-danger">.btn-danger</button>
+<button class="btn btn-warning">.btn-warning</button>
+
 ### Badges
 
 For news post items, it's nice to be able to tag it with something that indicates

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -78,6 +78,8 @@ input {
   color: #888;
   font-style: italic; }
 
+/* Badges */
+
 span.badge {
   font-family: "Open Sans", sans-serif;
   padding: 2px 5px;
@@ -106,6 +108,35 @@ span.badge-success {
   background: forestgreen;
   color: #fff; }
 
+/* Buttons */
+
+.btn {
+  border-radius: 3px;
+  padding: 5px;
+  color: white;
+}
+
+.btn-primary {
+  background: #3c7dae;
+  color: #fff; }
+.btn-secondary {
+  background: #999;
+  color: #fff; }
+.btn-danger {
+  background: firebrick;
+  color: #fff; }
+.btn-warning {
+  background: darkorange;
+  color: #fff; }
+.btn-info {
+  background: royalblue;
+  color: #fff; }
+.btn-success {
+  background: forestgreen;
+  color: #fff; }
+
+/* Primary Styles */
+
 .md-clipboard:before, .md-icon, .md-nav__button, .md-nav__link:after, .md-nav__title:before, .md-search-result__article--document:before, .md-source-file:before, .md-typeset .admonition>.admonition-title:before, .md-typeset .admonition>summary:before, .md-typeset .critic.comment:before, .md-typeset .footnote-backref, .md-typeset .task-list-control .task-list-indicator:before, .md-typeset details>.admonition-title:before, .md-typeset details>summary:before, .md-typeset summary:after {
     font-family: Material Icons;
     font-style: normal;