mirror of https://github.com/thangisme/notes.git
Initial commit
Patrick Marsceill
6 years ago
commit
b7b0d0d7bf
@ -0,0 +1,5 @@
|
||||
*.gem
|
||||
.bundle
|
||||
.sass-cache
|
||||
_site
|
||||
Gemfile.lock
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"extends": [
|
||||
"stylelint-config-primer"
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 Patrick Marsceill
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
@ -0,0 +1,26 @@
|
||||
# Welcome to Jekyll!
|
||||
#
|
||||
# This config file is meant for settings that affect your whole site, values
|
||||
# which you are expected to set up once and rarely edit after that. If you find
|
||||
# yourself editing these this file very often, consider using Jekyll's data files
|
||||
# feature for the data you need to update frequently.
|
||||
#
|
||||
# For technical reasons, this file is *NOT* reloaded automatically when you use
|
||||
# 'jekyll serve'. If you change this file, please restart the server process.
|
||||
|
||||
# Site settings
|
||||
# These are used to personalize your new site. If you look in the HTML files,
|
||||
# you will see them accessed via {{ site.title }}, {{ site.github_repo }}, and so on.
|
||||
# You can create any custom variable you would like, and they will be accessible
|
||||
# in the templates via {{ site.myvariable }}.
|
||||
title: Just the docs
|
||||
description: A Jekyll theme for documentation
|
||||
# baseurl: "" # the subpath of your site, e.g. /blog
|
||||
# url: "" # the base hostname & protocol for your site, e.g. http://example.com
|
||||
|
||||
sass:
|
||||
# Load dependancies
|
||||
load_paths:
|
||||
- node_modules/
|
||||
|
||||
exclude: ["node_modules/", "*.gemspec", "Gemfile", "Gemfile.lock", "package.json", "LICENSE.txt"]
|
||||
@ -0,0 +1,8 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
|
||||
<title>{{ page.title }} - {{ site.title }}</title>
|
||||
<link rel="stylesheet" href="/assets/css/just-the-docs.css">
|
||||
|
||||
</head>
|
||||
@ -0,0 +1,24 @@
|
||||
<nav>
|
||||
<ul class="navigation-list">
|
||||
{% assign pages_list = site.pages | sort:"nav_order"%}
|
||||
{% for node in pages_list %}
|
||||
<li class="navigation-list-item{% if page.url == node.url %} active{% endif %} js-side-nav-item">
|
||||
{% if node.parent == nil or node.has_children == true %}
|
||||
<a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url or (page.parent != nil and page.parent == node.parent) %} active{% endif %}">{{ node.title }}</a>
|
||||
{% if (node.has_children == true and node.parent == page.parent) %}
|
||||
{% assign children_list = site.pages | sort:"nav_order" %}
|
||||
<ul class="navigation-list-child-list">
|
||||
{% for child in children_list %}
|
||||
{% if child.parent == node.parent and child.title != node.title %}
|
||||
<li class="navigation-list-item">
|
||||
<a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en-us">
|
||||
{% include head.html %}
|
||||
|
||||
<div class="page-wrap">
|
||||
<div class="side-bar">
|
||||
<a href="{{ site.url }}" class="site-title fs-6 fw-300 text-grey-dk-300">Just the <span class="fw-700">/docs</span></a>
|
||||
<div class="navigation">
|
||||
{% include nav.html %}
|
||||
</div>
|
||||
<footer role="contentinfo" class="site-footer">
|
||||
<p class="text-small text-grey-dk-000">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<div class="main-content-wrap">
|
||||
<div class="main-content">
|
||||
{% unless page.url == "/" %}
|
||||
<nav>
|
||||
<ol class="breadcrumb-nav-list">
|
||||
<li class="breadcrumb-nav-list-item"><a href="{{ site.url }}">Home</a></li>
|
||||
{% if page.parent != nil and page.parent != page.title %}
|
||||
<li class="breadcrumb-nav-list-item"><a href="{{ site.url }}/{{ page.parent | slugify }}">{{ page.parent }}</a></li>
|
||||
{% endif %}
|
||||
<li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
|
||||
</ol>
|
||||
</nav>
|
||||
{% endunless %}
|
||||
{{ content }}
|
||||
|
||||
{% if page.has_children == true %}
|
||||
<hr>
|
||||
<h2 class="text-delta">Table of contents</h2>
|
||||
{% assign children_list = site.pages | sort:"nav_order" %}
|
||||
<ol>
|
||||
{% for child in children_list %}
|
||||
{% if child.parent == page.title and child.title != page.title %}
|
||||
<li>
|
||||
<a href="{{ child.url | absolute_url }}">{{ child.title }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ol>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
{{ content }}
|
||||
@ -0,0 +1,79 @@
|
||||
// stylelint-disable selector-no-type
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: $root-font-size;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $body-font-family;
|
||||
font-size: inherit;
|
||||
line-height: 1.4;
|
||||
color: $body-text-color;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
color: $body-heading-color;
|
||||
line-height: 1.1;
|
||||
margin-bottom: .8em;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 1.2 em;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
ol,
|
||||
ul,
|
||||
pre,
|
||||
address,
|
||||
blockquote,
|
||||
dl,
|
||||
div,
|
||||
fieldset,
|
||||
form,
|
||||
hr,
|
||||
noscript,
|
||||
table {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
font-size: 90%;
|
||||
line-height: 1.3;
|
||||
font-family: $mono-font-family;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
@ -0,0 +1,85 @@
|
||||
code {
|
||||
background-color: $grey-lt-000;
|
||||
padding: 0.2em 0.15em;
|
||||
border: $border $border-color;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: $grey-lt-000;
|
||||
padding: $sp-3;
|
||||
|
||||
code {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight .c { color: #586E75 } /* Comment */
|
||||
.highlight .err { color: #93A1A1 } /* Error */
|
||||
.highlight .g { color: #93A1A1 } /* Generic */
|
||||
.highlight .k { color: #859900 } /* Keyword */
|
||||
.highlight .l { color: #93A1A1 } /* Literal */
|
||||
.highlight .n { color: #93A1A1 } /* Name */
|
||||
.highlight .o { color: #859900 } /* Operator */
|
||||
.highlight .x { color: #CB4B16 } /* Other */
|
||||
.highlight .p { color: #93A1A1 } /* Punctuation */
|
||||
.highlight .cm { color: #586E75 } /* Comment.Multiline */
|
||||
.highlight .cp { color: #859900 } /* Comment.Preproc */
|
||||
.highlight .c1 { color: #586E75 } /* Comment.Single */
|
||||
.highlight .cs { color: #859900 } /* Comment.Special */
|
||||
.highlight .gd { color: #2AA198 } /* Generic.Deleted */
|
||||
.highlight .ge { color: #93A1A1; font-style: italic } /* Generic.Emph */
|
||||
.highlight .gr { color: #DC322F } /* Generic.Error */
|
||||
.highlight .gh { color: #CB4B16 } /* Generic.Heading */
|
||||
.highlight .gi { color: #859900 } /* Generic.Inserted */
|
||||
.highlight .go { color: #93A1A1 } /* Generic.Output */
|
||||
.highlight .gp { color: #93A1A1 } /* Generic.Prompt */
|
||||
.highlight .gs { color: #93A1A1; font-weight: bold } /* Generic.Strong */
|
||||
.highlight .gu { color: #CB4B16 } /* Generic.Subheading */
|
||||
.highlight .gt { color: #93A1A1 } /* Generic.Traceback */
|
||||
.highlight .kc { color: #CB4B16 } /* Keyword.Constant */
|
||||
.highlight .kd { color: #268BD2 } /* Keyword.Declaration */
|
||||
.highlight .kn { color: #859900 } /* Keyword.Namespace */
|
||||
.highlight .kp { color: #859900 } /* Keyword.Pseudo */
|
||||
.highlight .kr { color: #268BD2 } /* Keyword.Reserved */
|
||||
.highlight .kt { color: #DC322F } /* Keyword.Type */
|
||||
.highlight .ld { color: #93A1A1 } /* Literal.Date */
|
||||
.highlight .m { color: #2AA198 } /* Literal.Number */
|
||||
.highlight .s { color: #2AA198 } /* Literal.String */
|
||||
.highlight .na { color: #93A1A1 } /* Name.Attribute */
|
||||
.highlight .nb { color: #B58900 } /* Name.Builtin */
|
||||
.highlight .nc { color: #268BD2 } /* Name.Class */
|
||||
.highlight .no { color: #CB4B16 } /* Name.Constant */
|
||||
.highlight .nd { color: #268BD2 } /* Name.Decorator */
|
||||
.highlight .ni { color: #CB4B16 } /* Name.Entity */
|
||||
.highlight .ne { color: #CB4B16 } /* Name.Exception */
|
||||
.highlight .nf { color: #268BD2 } /* Name.Function */
|
||||
.highlight .nl { color: #93A1A1 } /* Name.Label */
|
||||
.highlight .nn { color: #93A1A1 } /* Name.Namespace */
|
||||
.highlight .nx { color: #555 } /* Name.Other */
|
||||
.highlight .py { color: #93A1A1 } /* Name.Property */
|
||||
.highlight .nt { color: #268BD2 } /* Name.Tag */
|
||||
.highlight .nv { color: #268BD2 } /* Name.Variable */
|
||||
.highlight .ow { color: #859900 } /* Operator.Word */
|
||||
.highlight .w { color: #93A1A1 } /* Text.Whitespace */
|
||||
.highlight .mf { color: #2AA198 } /* Literal.Number.Float */
|
||||
.highlight .mh { color: #2AA198 } /* Literal.Number.Hex */
|
||||
.highlight .mi { color: #2AA198 } /* Literal.Number.Integer */
|
||||
.highlight .mo { color: #2AA198 } /* Literal.Number.Oct */
|
||||
.highlight .sb { color: #586E75 } /* Literal.String.Backtick */
|
||||
.highlight .sc { color: #2AA198 } /* Literal.String.Char */
|
||||
.highlight .sd { color: #93A1A1 } /* Literal.String.Doc */
|
||||
.highlight .s2 { color: #2AA198 } /* Literal.String.Double */
|
||||
.highlight .se { color: #CB4B16 } /* Literal.String.Escape */
|
||||
.highlight .sh { color: #93A1A1 } /* Literal.String.Heredoc */
|
||||
.highlight .si { color: #2AA198 } /* Literal.String.Interpol */
|
||||
.highlight .sx { color: #2AA198 } /* Literal.String.Other */
|
||||
.highlight .sr { color: #DC322F } /* Literal.String.Regex */
|
||||
.highlight .s1 { color: #2AA198 } /* Literal.String.Single */
|
||||
.highlight .ss { color: #2AA198 } /* Literal.String.Symbol */
|
||||
.highlight .bp { color: #268BD2 } /* Name.Builtin.Pseudo */
|
||||
.highlight .vc { color: #268BD2 } /* Name.Variable.Class */
|
||||
.highlight .vg { color: #268BD2 } /* Name.Variable.Global */
|
||||
.highlight .vi { color: #268BD2 } /* Name.Variable.Instance */
|
||||
.highlight .il { color: #2AA198 } /* Literal.Number.Integer.Long */
|
||||
@ -0,0 +1,115 @@
|
||||
.page-wrap {
|
||||
@include mq(md) {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.side-bar {
|
||||
|
||||
padding-top: $gutter-spacing;
|
||||
padding-bottom: $gutter-spacing;
|
||||
background-color: $grey-lt-000;
|
||||
z-index: 100;
|
||||
|
||||
@include mq(md) {
|
||||
padding-top: $gutter-spacing * 2;
|
||||
border-right: $border $border-color;
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
align-items: flex-end;
|
||||
width: $nav-width + 16px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@include mq(lg) {
|
||||
width: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
|
||||
min-width: $nav-width;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content-wrap {
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding-top: $gutter-spacing;
|
||||
padding-right: $gutter-spacing;
|
||||
padding-left: $gutter-spacing;
|
||||
@include mq(md) {
|
||||
position: relative;
|
||||
margin-left: $nav-width;
|
||||
max-width: $content-width;
|
||||
padding-right: $gutter-spacing;
|
||||
padding-left: $gutter-spacing * 1.5;
|
||||
padding-bottom: $gutter-spacing;
|
||||
}
|
||||
|
||||
@include mq(lg) {
|
||||
margin-left: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
|
||||
padding-left: $gutter-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.site-title {
|
||||
display: block;
|
||||
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
top: $gutter-spacing;
|
||||
right: 0;
|
||||
width: $nav-width;
|
||||
z-index: 101;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation,
|
||||
.site-title,
|
||||
.site-footer {
|
||||
padding-left: $gutter-spacing;
|
||||
padding-right: $gutter-spacing;
|
||||
width: 100%;
|
||||
|
||||
@include mq(lg) {
|
||||
width: $nav-width + 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
top: $sp-8;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
bottom: $sp-8;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
.img-logo {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
@ -0,0 +1,67 @@
|
||||
.navigation-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: $sp-4;
|
||||
|
||||
@include mq(md) {
|
||||
margin-top: $sp-8;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-list-child-list {
|
||||
list-style: none;
|
||||
padding-left: $sp-3;
|
||||
|
||||
.navigation-list-link {
|
||||
color: $grey-dk-100;
|
||||
}
|
||||
|
||||
.navigation-list-item {
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "- ";
|
||||
margin-left: -0.8em;
|
||||
color: $grey-dk-000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-list-item {
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
.navigation-list-link {
|
||||
display: block;
|
||||
|
||||
&.active {
|
||||
color: $grey-dk-200;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-nav-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin-top: $sp-3;
|
||||
margin-bottom: $sp-5;
|
||||
}
|
||||
|
||||
.breadcrumb-nav-list-item {
|
||||
display: table-cell;
|
||||
@include fs-2;
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
margin-left: $sp-2;
|
||||
margin-right: $sp-2;
|
||||
content: "/";
|
||||
color: $grey-dk-000;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
@function rem($size, $unit:"") {
|
||||
$remSize: $size / $root-font-size;
|
||||
|
||||
@if ($unit == false) {
|
||||
@return #{$remSize};
|
||||
}
|
||||
@else {
|
||||
@return #{$remSize}rem;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
// Font size
|
||||
|
||||
@mixin fs-1 {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
@mixin fs-2 {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
@mixin fs-3 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
@mixin fs-4 {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
@mixin fs-5 {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
@mixin fs-6 {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
@mixin fs-7 {
|
||||
font-size: 32px !important;
|
||||
}
|
||||
|
||||
@mixin fs-8 {
|
||||
font-size: 36px !important;
|
||||
}
|
||||
|
||||
@mixin fs-9 {
|
||||
font-size: 42px !important;
|
||||
}
|
||||
|
||||
@mixin fs-10 {
|
||||
font-size: 48px !important;
|
||||
}
|
||||
|
||||
// Media query
|
||||
|
||||
// Media query mixin
|
||||
// Usage:
|
||||
// @include mq(md) {
|
||||
// ..medium and up styles
|
||||
// }
|
||||
@mixin mq($name) {
|
||||
// Retrieves the value from the key
|
||||
$value: map-get($media-queries, $name);
|
||||
|
||||
// If the key exists in the map
|
||||
@if $value != null {
|
||||
// Prints a media query based on the value
|
||||
@media (min-width: rem($value)) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@warn "No value could be retrieved from `#{$media-query}`. "
|
||||
+ "Please make sure it is defined in `$media-queries` map.";
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,99 @@
|
||||
//
|
||||
// Colors
|
||||
//
|
||||
|
||||
$grey-dk-000: #959396;
|
||||
$grey-dk-100: #5c5962;
|
||||
$grey-dk-200: #44434d;
|
||||
$grey-dk-300: #27262b;
|
||||
|
||||
$grey-lt-000: #f5f6fa;
|
||||
$grey-lt-100: #efebf0;
|
||||
$grey-lt-200: #ecebed;
|
||||
$grey-lt-300: #e6e1e8;
|
||||
|
||||
$purple-000: #7253ed;
|
||||
$purple-100: #5e41d0;
|
||||
$purple-200: #4e26af;
|
||||
$purple-300: #381885;
|
||||
|
||||
$green-000: #41d66f;
|
||||
$green-100: #2bb45a;
|
||||
$green-200: #299950;
|
||||
$green-300: #156f49;
|
||||
|
||||
$body-text-color: $grey-dk-100;
|
||||
$body-heading-color: $grey-dk-300;
|
||||
$root-font-size: 16px; // Base font-size for rems
|
||||
$link-color: $purple-000;
|
||||
|
||||
//
|
||||
// Media queries in pixels
|
||||
//
|
||||
|
||||
$media-queries: (
|
||||
xs: 320px,
|
||||
sm: 500px,
|
||||
md: 740px,
|
||||
lg: 1120px,
|
||||
xl: 1200px
|
||||
) !default;
|
||||
|
||||
//
|
||||
// Spacing
|
||||
//
|
||||
|
||||
$spacing-unit: 1rem; // 1rem == 16px
|
||||
|
||||
$spacers: (
|
||||
sp-0: 0,
|
||||
sp-1: $spacing-unit * 0.25,
|
||||
sp-2: $spacing-unit * 0.5,
|
||||
sp-3: $spacing-unit * 0.75,
|
||||
sp-4: $spacing-unit,
|
||||
sp-5: $spacing-unit * 1.5,
|
||||
sp-6: $spacing-unit * 2,
|
||||
sp-7: $spacing-unit * 2.5,
|
||||
sp-8: $spacing-unit * 3
|
||||
);
|
||||
|
||||
$sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px
|
||||
$sp-2: map-get($spacers, sp-2); // 0.5 rem == 8px
|
||||
$sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px
|
||||
$sp-4: map-get($spacers, sp-4); // 1 rem == 16px
|
||||
$sp-5: map-get($spacers, sp-5); // 1.5 rem == 24px
|
||||
$sp-6: map-get($spacers, sp-6); // 2 rem == 32px
|
||||
$sp-7: map-get($spacers, sp-7); // 2.5 rem == 40px
|
||||
$sp-8: map-get($spacers, sp-8); // 3 rem == 48px
|
||||
|
||||
//
|
||||
// Borders
|
||||
//
|
||||
|
||||
$border: 1px solid;
|
||||
$border-radius: 4px;
|
||||
$border-color: $grey-lt-100;
|
||||
|
||||
//
|
||||
// Grid system
|
||||
//
|
||||
|
||||
$gutter-spacing: $sp-6;
|
||||
$nav-width: 232px;
|
||||
$content-width: 800px;
|
||||
|
||||
$media-queries: (
|
||||
xs: 320px,
|
||||
sm: 500px,
|
||||
md: 740px,
|
||||
lg: 800px,
|
||||
xl: 1316px
|
||||
) !default;
|
||||
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
|
||||
|
||||
$mono-font-family: Menlo, Consolas, Monospace;
|
||||
@ -0,0 +1,3 @@
|
||||
@import "./variables";
|
||||
@import "./functions";
|
||||
@import "./mixins";
|
||||
@ -0,0 +1,64 @@
|
||||
table {
|
||||
width: 100%;
|
||||
margin-bottom: $sp-5;
|
||||
border-collapse: separate;
|
||||
box-shadow: 0 3px 12px 0 transparentize($grey-dk-300, 0.9);
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
@include fs-3;
|
||||
padding-top: $sp-2;
|
||||
padding-left: $sp-3;
|
||||
padding-bottom: $sp-2;
|
||||
padding-right: $sp-3;
|
||||
border-bottom: $border $grey-lt-000;
|
||||
border-left: $border $border-color;
|
||||
|
||||
&:first-of-type {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
thead, tbody:first-child {
|
||||
tr {
|
||||
&:first-of-type {
|
||||
th,
|
||||
td {
|
||||
&:first-of-type {
|
||||
border-top-left-radius: $border-radius;
|
||||
}
|
||||
&:last-of-type {
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:last-of-type {
|
||||
th,
|
||||
td {
|
||||
border-bottom: 0;
|
||||
|
||||
&:first-of-type {
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
&:last-of-type {
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
thead {
|
||||
th {
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,53 @@
|
||||
h1,
|
||||
.text-alpha {
|
||||
@include fs-8;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h2,
|
||||
.text-beta {
|
||||
@include fs-6;
|
||||
}
|
||||
|
||||
h3,
|
||||
.text-gamma {
|
||||
@include fs-5;
|
||||
}
|
||||
|
||||
h4,
|
||||
.text-delta {
|
||||
@include fs-2;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
h5,
|
||||
.text-epsilon {
|
||||
@include fs-3;
|
||||
color: $grey-dk-200;
|
||||
}
|
||||
|
||||
h6,
|
||||
.text-epsilon {
|
||||
@include fs-2;
|
||||
color: $grey-dk-200;
|
||||
}
|
||||
|
||||
li {
|
||||
.highlight {
|
||||
margin-top: $sp-2;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: $sp-6 0;
|
||||
background-color: $grey-lt-100;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.text-small {
|
||||
@include fs-2;
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
.text-purple-000 {
|
||||
color: $purple-000 !important;
|
||||
}
|
||||
|
||||
.text-purple-100 {
|
||||
color: $purple-100 !important;
|
||||
}
|
||||
|
||||
.text-purple-200 {
|
||||
color: $purple-200 !important;
|
||||
}
|
||||
|
||||
.text-purple-300 {
|
||||
color: $purple-300 !important;
|
||||
}
|
||||
|
||||
.text-grey-lt-000 {
|
||||
color: $grey-lt-000 !important;
|
||||
}
|
||||
|
||||
.text-grey-lt-100 {
|
||||
color: $grey-lt-100 !important;
|
||||
}
|
||||
|
||||
.text-grey-lt-200 {
|
||||
color: $grey-lt-200 !important;
|
||||
}
|
||||
|
||||
.text-grey-lt-300 {
|
||||
color: $grey-lt-300 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-000 {
|
||||
color: $grey-dk-000 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-100 {
|
||||
color: $grey-dk-100 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-200 {
|
||||
color: $grey-dk-200 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-300 {
|
||||
color: $grey-dk-300 !important;
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
// stylelint-disable primer/selector-no-utility
|
||||
|
||||
.list-style-none {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
list-style: none !important;
|
||||
}
|
||||
@ -0,0 +1,121 @@
|
||||
// scss-lint:disable SpaceAfterPropertyName
|
||||
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
|
||||
|
||||
// Margin spacer utilities
|
||||
|
||||
// scss-lint:disable SpaceAfterPropertyName
|
||||
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
|
||||
// Margin spacer utilities
|
||||
|
||||
@for $i from 1 through length($spacers) {
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .m-0, .m-1, .m-2...
|
||||
.m-#{$scale} { margin: #{$size} !important; }
|
||||
.mt-#{$scale} { margin-top: #{$size} !important; }
|
||||
.mr-#{$scale} { margin-right: #{$size} !important; }
|
||||
.mb-#{$scale} { margin-bottom: #{$size} !important; }
|
||||
.ml-#{$scale} { margin-left: #{$size} !important; }
|
||||
|
||||
.mx-#{$scale} {
|
||||
margin-right: #{$size} !important;
|
||||
margin-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.my-#{$scale} {
|
||||
margin-top: #{$size} !important;
|
||||
margin-bottom: #{$size} !important;
|
||||
}
|
||||
|
||||
.mxn-#{$scale} {
|
||||
margin-right: -#{$size} !important;
|
||||
margin-left: -#{$size} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
@each $media-query in map-keys($media-queries) {
|
||||
@for $i from 1 through length($spacers) {
|
||||
@include mq($media-query) {
|
||||
$size: #{map-get($spacers, spacer#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .m-sm-0, .m-md-1, .m-lg-2...
|
||||
.m-#{$media-query}-#{$scale} { margin: #{$size} !important; }
|
||||
.mt-#{$media-query}-#{$scale} { margin-top: #{$size} !important; }
|
||||
.mr-#{$media-query}-#{$scale} { margin-right: #{$size} !important; }
|
||||
.mb-#{$media-query}-#{$scale} { margin-bottom: #{$size} !important; }
|
||||
.ml-#{$media-query}-#{$scale} { margin-left: #{$size} !important; }
|
||||
|
||||
.mx-#{$media-query}-#{$scale} {
|
||||
margin-right: #{$size} !important;
|
||||
margin-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.my-#{$media-query}-#{$scale} {
|
||||
margin-top: #{$size} !important;
|
||||
margin-bottom: #{$size} !important;
|
||||
}
|
||||
|
||||
.mxn-#{$media-query}-#{$scale} {
|
||||
margin-right: -#{$size} !important;
|
||||
margin-left: -#{$size} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Padding spacer utilities
|
||||
|
||||
@for $i from 1 through length($spacers) {
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .p-0, .p-1, .p-2...
|
||||
.p-#{$scale} { padding: #{$size} !important; }
|
||||
.pt-#{$scale} { padding-top: #{$size} !important; }
|
||||
.pr-#{$scale} { padding-right: #{$size} !important; }
|
||||
.pb-#{$scale} { padding-bottom: #{$size} !important; }
|
||||
.pl-#{$scale} { padding-left: #{$size} !important; }
|
||||
|
||||
.px-#{$scale} {
|
||||
padding-right: #{$size} !important;
|
||||
padding-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.py-#{$scale} {
|
||||
padding-top: #{$size} !important;
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $media-query in map-keys($media-queries) {
|
||||
@include mq($media-query) {
|
||||
@for $i from 1 through length($spacers) {
|
||||
$size: #{map-get($spacers, spacer#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .p-sm-0, .p-md-1, .p-lg-2...
|
||||
.p-#{$media-query}-#{$scale} { padding: #{$size} !important; }
|
||||
.pt-#{$media-query}-#{$scale} { padding-top: #{$size} !important; }
|
||||
.pr-#{$media-query}-#{$scale} { padding-right: #{$size} !important; }
|
||||
.pb-#{$media-query}-#{$scale} { padding-bottom: #{$size} !important; }
|
||||
.pl-#{$media-query}-#{$scale} { padding-left: #{$size} !important; }
|
||||
|
||||
.px-#{$media-query}-#{$scale} {
|
||||
padding-right: #{$size} !important;
|
||||
padding-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.py-#{$media-query}-#{$scale} {
|
||||
padding-top: #{$size} !important;
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
.fs-1 {
|
||||
@include fs-1;
|
||||
}
|
||||
|
||||
.fs-2 {
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
.fs-3 {
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
.fs-4 {
|
||||
@include fs-4;
|
||||
}
|
||||
|
||||
.fs-5 {
|
||||
@include fs-5;
|
||||
}
|
||||
|
||||
.fs-6 {
|
||||
@include fs-6;
|
||||
}
|
||||
|
||||
.fs-7 {
|
||||
@include fs-7;
|
||||
}
|
||||
|
||||
.fs-8 {
|
||||
@include fs-8;
|
||||
}
|
||||
|
||||
.fs-9 {
|
||||
@include fs-9;
|
||||
}
|
||||
|
||||
.fs-10 {
|
||||
@include fs-10;
|
||||
}
|
||||
|
||||
.fw-300 {
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
|
||||
.fw-400 {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.fw-500 {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.fw-700 {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
@import "./colors";
|
||||
@import "./layout";
|
||||
@import "./typography";
|
||||
@import "./lists";
|
||||
@import "./spacing";
|
||||
@ -0,0 +1,38 @@
|
||||
---
|
||||
# this ensures Jekyll reads the file to be transformed into CSS later
|
||||
# only Main files contain this front matter, not partials.
|
||||
---
|
||||
|
||||
//
|
||||
// Import dependancies
|
||||
//
|
||||
|
||||
@import "./normalize.scss/normalize.scss";
|
||||
|
||||
//
|
||||
// Import Just the docs scss
|
||||
//
|
||||
|
||||
// Support
|
||||
@import "./support/support";
|
||||
|
||||
// Utilities
|
||||
@import "./utilities/utilities";
|
||||
|
||||
// Base
|
||||
@import "./base";
|
||||
|
||||
// Layout
|
||||
@import "./layout";
|
||||
|
||||
// Navigation
|
||||
@import "./navigation";
|
||||
|
||||
// Typography
|
||||
@import "./typography";
|
||||
|
||||
// Tables
|
||||
@import "./tables";
|
||||
|
||||
// Code blocks and inline code
|
||||
@import "./code";
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
title: Customization
|
||||
nav_order: 4
|
||||
---
|
||||
@ -0,0 +1,125 @@
|
||||
---
|
||||
layout: default
|
||||
title: Markdown kitchen sink
|
||||
nav_order: 99
|
||||
---
|
||||
|
||||
Text can be **bold**, _italic_, or ~~strikethrough~~.
|
||||
|
||||
[Link to another page](another-page).
|
||||
|
||||
There should be whitespace between paragraphs.
|
||||
|
||||
There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.
|
||||
|
||||
# [](#header-1)Header 1
|
||||
|
||||
This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.
|
||||
|
||||
## [](#header-2)Header 2
|
||||
|
||||
> This is a blockquote following a header.
|
||||
>
|
||||
> When something is important enough, you do it even if the odds are not in your favor.
|
||||
|
||||
### [](#header-3)Header 3
|
||||
|
||||
```js
|
||||
// Javascript code with syntax highlighting.
|
||||
var fun = function lang(l) {
|
||||
dateformat.i18n = require('./lang/' + l)
|
||||
return true;
|
||||
}
|
||||
```
|
||||
|
||||
```ruby
|
||||
# Ruby code with syntax highlighting
|
||||
GitHubPages::Dependencies.gems.each do |gem, version|
|
||||
s.add_dependency(gem, "= #{version}")
|
||||
end
|
||||
```
|
||||
|
||||
#### [](#header-4)Header 4
|
||||
|
||||
* This is an unordered list following a header.
|
||||
* This is an unordered list following a header.
|
||||
* This is an unordered list following a header.
|
||||
|
||||
##### [](#header-5)Header 5
|
||||
|
||||
1. This is an ordered list following a header.
|
||||
2. This is an ordered list following a header.
|
||||
3. This is an ordered list following a header.
|
||||
|
||||
###### [](#header-6)Header 6
|
||||
|
||||
| head1 | head two | three |
|
||||
|:-------------|:------------------|:------|
|
||||
| ok | good swedish fish | nice |
|
||||
| out of stock | good and plenty | nice |
|
||||
| ok | good `oreos` | hmm |
|
||||
| ok | good `zoute` drop | yumm |
|
||||
|
||||
### There's a horizontal rule below this.
|
||||
|
||||
* * *
|
||||
|
||||
### Here is an unordered list:
|
||||
|
||||
* Item foo
|
||||
* Item bar
|
||||
* Item baz
|
||||
* Item zip
|
||||
|
||||
### And an ordered list:
|
||||
|
||||
1. Item one
|
||||
1. Item two
|
||||
1. Item three
|
||||
1. Item four
|
||||
|
||||
### And a nested list:
|
||||
|
||||
- level 1 item
|
||||
- level 2 item
|
||||
- level 2 item
|
||||
- level 3 item
|
||||
- level 3 item
|
||||
- level 1 item
|
||||
- level 2 item
|
||||
- level 2 item
|
||||
- level 2 item
|
||||
- level 1 item
|
||||
- level 2 item
|
||||
- level 2 item
|
||||
- level 1 item
|
||||
|
||||
### Small image
|
||||
|
||||
|
||||
|
||||
### Large image
|
||||
|
||||
|
||||
|
||||
|
||||
### Definition lists can be used with HTML syntax.
|
||||
|
||||
<dl>
|
||||
<dt>Name</dt>
|
||||
<dd>Godzilla</dd>
|
||||
<dt>Born</dt>
|
||||
<dd>1952</dd>
|
||||
<dt>Birthplace</dt>
|
||||
<dd>Japan</dd>
|
||||
<dt>Color</dt>
|
||||
<dd>Green</dd>
|
||||
</dl>
|
||||
|
||||
```
|
||||
Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
|
||||
```
|
||||
|
||||
```
|
||||
The final element.
|
||||
```
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: default
|
||||
title: Navigation Structure
|
||||
nav_order: 3
|
||||
---
|
||||
@ -0,0 +1,6 @@
|
||||
---
|
||||
layout: default
|
||||
title: Buttons
|
||||
parent: UI Components
|
||||
nav_order: 2
|
||||
---
|
||||
@ -0,0 +1,6 @@
|
||||
---
|
||||
layout: default
|
||||
title: Code
|
||||
parent: UI Components
|
||||
nav_order: 3
|
||||
---
|
||||
@ -0,0 +1,6 @@
|
||||
---
|
||||
layout: default
|
||||
title: Typography
|
||||
parent: UI Components
|
||||
nav_order: 1
|
||||
---
|
||||
@ -0,0 +1,12 @@
|
||||
---
|
||||
layout: default
|
||||
title: UI Components
|
||||
nav_order: 2
|
||||
has_children: true
|
||||
parent: UI Components
|
||||
permalink: /ui-components
|
||||
---
|
||||
|
||||
# UI Components
|
||||
|
||||
Just the Docs includes styles for displaying clear and readable typography, nicely formatted code, and easily identifiable buttons. The goal of this theme is to make it as easy as possible to write code documentation in markdown and have the Just the Docs take care of the rest, so very few CSS classes are required to render commonly used UI elements.
|
||||
@ -0,0 +1,19 @@
|
||||
# coding: utf-8
|
||||
|
||||
Gem::Specification.new do |spec|
|
||||
spec.name = "just-the-docs"
|
||||
spec.version = "0.1.0"
|
||||
spec.authors = ["Patrick Marsceill"]
|
||||
spec.email = ["patrick.marsceill@gmail.com"]
|
||||
|
||||
spec.summary = %q{A Jekyll theme for documentation}
|
||||
spec.homepage = "https://github.com/pmarsceill/just-the-docs"
|
||||
spec.license = "MIT"
|
||||
|
||||
spec.files = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(assets|_layouts|_includes|_sass|LICENSE|README)}i) }
|
||||
|
||||
spec.add_runtime_dependency "jekyll", "~> 3.3"
|
||||
|
||||
spec.add_development_dependency "bundler", "~> 1.12"
|
||||
spec.add_development_dependency "rake", "~> 10.0"
|
||||
end
|
||||
@ -0,0 +1 @@
|
||||
../JSONStream/index.js
|
||||
@ -0,0 +1 @@
|
||||
../browserslist/cli.js
|
||||
@ -0,0 +1 @@
|
||||
../colorguard/bin/colorguard
|
||||
@ -0,0 +1 @@
|
||||
../css-rule-stream/index.js
|
||||
@ -0,0 +1 @@
|
||||
../doiuse/cli.js
|
||||
@ -0,0 +1 @@
|
||||
../esprima/bin/esparse.js
|
||||
@ -0,0 +1 @@
|
||||
../esprima/bin/esvalidate.js
|
||||
@ -0,0 +1 @@
|
||||
../js-yaml/bin/js-yaml.js
|
||||
@ -0,0 +1 @@
|
||||
../jsonfilter/cli.js
|
||||
@ -0,0 +1 @@
|
||||
../semver/bin/semver
|
||||
@ -0,0 +1 @@
|
||||
../specificity/bin/specificity
|
||||
@ -0,0 +1 @@
|
||||
../strip-indent/cli.js
|
||||
@ -0,0 +1 @@
|
||||
../stylehacks/dist/cli.js
|
||||
@ -0,0 +1 @@
|
||||
../stylelint/bin/stylelint.js
|
||||
@ -0,0 +1 @@
|
||||
../window-size/cli.js
|
||||
@ -0,0 +1,2 @@
|
||||
node_modules/*
|
||||
node_modules
|
||||
@ -0,0 +1,4 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- "0.8"
|
||||
- "0.10"
|
||||
@ -0,0 +1,15 @@
|
||||
Apache License, Version 2.0
|
||||
|
||||
Copyright (c) 2011 Dominic Tarr
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
@ -0,0 +1,24 @@
|
||||
The MIT License
|
||||
|
||||
Copyright (c) 2011 Dominic Tarr
|
||||
|
||||
Permission is hereby granted, free of charge,
|
||||
to any person obtaining a copy of this software and
|
||||
associated documentation files (the "Software"), to
|
||||
deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify,
|
||||
merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom
|
||||
the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice
|
||||
shall be included in all copies or substantial portions of the Software.
|
||||
|
||||