' | remove: '
' }} + {% if cv.basics.label %} +{{ cv.basics.label | markdownify | remove: '
' | remove: '
' }} + {% endif %} + + {% if page.actions %} ++ {{ r.reference |markdownify }} + {% if r.name %} ++ {% endif %} ++ {{ r.name }} +
+ {% endif %} +
{{ v.summary }}
+{{ w.summary }}
+{{ site.data.theme.t.read_more | default: 'Read More' }} {% include icon-arrow-right.svg %}
+ {% endif %} +
+
+ {% if site.logo %}{% endif %}
+ {{ site.title | escape }}
+
+
{{ page.sub_title | markdownify | strip_html }}
+ {% endif %} + + {% if page.date %} + {% include author %} + + {% endif %} + + {% if page.introduction %} ++ + +This post tests Twitter Embeds. \ No newline at end of file diff --git a/docs/_posts/2010-10-25-post-future-date.md b/docs/_posts/2010-10-25-post-future-date.md new file mode 100644 index 0000000..163ee06 --- /dev/null +++ b/docs/_posts/2010-10-25-post-future-date.md @@ -0,0 +1,13 @@ +--- +title: "Post: Future Date" +date: 9999-12-31 +categories: + - Post +last_modified_at: 2017-03-09T12:45:25-05:00 +--- + +This post lives in the future and is dated {{ page.date | date: "%c" }}. It should only appear when Jekyll builds your project with the `--future` flag. + +```bash +jekyll build --future +``` \ No newline at end of file diff --git a/docs/_posts/2012-03-14-layout-excerpt-defined.md b/docs/_posts/2012-03-14-layout-excerpt-defined.md new file mode 100644 index 0000000..f5a1439 --- /dev/null +++ b/docs/_posts/2012-03-14-layout-excerpt-defined.md @@ -0,0 +1,16 @@ +--- +title: "Layout: Excerpt (Defined)" +excerpt: "This is a user-defined post excerpt. It should be displayed in place of the auto-generated excerpt or post content on index pages." +categories: + - Layout + - Uncategorized +tags: + - content + - excerpt + - layout +last_modified_at: 2017-03-09T12:43:31-05:00 +--- + +This is the start of the post content. + +This paragraph should be absent from an index page where `post.excerpt` is shown. \ No newline at end of file diff --git a/docs/_posts/2012-03-14-layout-excerpt-generated.md b/docs/_posts/2012-03-14-layout-excerpt-generated.md new file mode 100644 index 0000000..b6ebff3 --- /dev/null +++ b/docs/_posts/2012-03-14-layout-excerpt-generated.md @@ -0,0 +1,22 @@ +--- +title: "Layout: Excerpt (Generated with Separator Tag)" +excerpt_separator: "" +categories: + - Layout + - Uncategorized +tags: + - content + - excerpt + - layout +last_modified_at: 2017-03-09T12:32:16-05:00 +--- + +This is the post content. Archive-index pages should display an [auto-generated excerpt](https://jekyllrb.com/docs/posts/#post-excerpts) of all the content preceding the `excerpt_separator`, as defined in the YAML Front Matter or globally in `_config.yml`. + +Be sure to test the formatting of the auto-generated excerpt, to ensure that it doesn't create any layout problems. + + + +Lorem ipsum dolor sit amet, dicant nusquam corpora in usu, laudem putent fuisset ut eam. Justo accusam definitionem id cum, choro prodesset ex his. Noluisse constituto intellegebat ea mei. Timeam admodum omnesque pri ex, eos habemus suavitate aliquando cu. Dico nihil delectus quo cu. Ludus cetero cu eos, vidit invidunt dissentiet mea ne. + +Usu delenit vocibus elaboraret ex. Scripta sapientem adversarium ei pri, pri ex solet democritum. Nam te porro impedit, ei doctus albucius cotidieque pri, ea mutat causae lucilius has. Pri omnis errem labore ut. An aperiam tibique est, mei te dolore veritus, nam nulla feugait ut. In vis labitur eripuit contentiones. \ No newline at end of file diff --git a/docs/_posts/2012-03-14-layout-hero-image.md b/docs/_posts/2012-03-14-layout-hero-image.md new file mode 100644 index 0000000..2d34e34 --- /dev/null +++ b/docs/_posts/2012-03-14-layout-hero-image.md @@ -0,0 +1,26 @@ +--- +title: "Layout: Hero Image" +image: /assets/images/eder-oliveira-180877.jpg +categories: + - Layout +tags: + - content + - image + - layout +last_modified_at: 2017-03-17T10:46:49-04:00 +--- + +This post should display a large hero image at the top of a page. + +This post tests a horizontal image using the following YAML Front Matter: + +```yaml +image: /assets/images/eder-oliveira-180877.jpg +``` + +Hero images can also be assigned like this: + +```yaml +image: + path: /assets/images/eder-oliveira-180877.jpg +``` diff --git a/docs/_posts/2012-05-22-markup-text-readability.md b/docs/_posts/2012-05-22-markup-text-readability.md new file mode 100644 index 0000000..9970eff --- /dev/null +++ b/docs/_posts/2012-05-22-markup-text-readability.md @@ -0,0 +1,46 @@ +--- +title: "Markup: Text Readability Test" +excerpt: "A large amount of sample text to test readability of a text heavy page." +tags: + - sample post + - readability + - test +last_modified_at: 2017-03-09T12:26:59-05:00 +--- + +Portland in shoreditch Vice, labore typewriter pariatur hoodie fap sartorial Austin. Pinterest literally occupy Schlitz forage. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag. + +Vero laborum commodo occupy. Semiotics voluptate mumblecore pug. Cosby sweater ullamco quinoa ennui assumenda, sapiente occupy delectus lo-fi. Ea fashion axe Marfa cillum aliquip. Retro Bushwick keytar cliche. Before they sold out sustainable gastropub Marfa readymade, ethical Williamsburg skateboard brunch qui consectetur gentrify semiotics. Mustache cillum irony, fingerstache magna pour-over keffiyeh tousled selfies. + +## Cupidatat 90's lo-fi authentic try-hard + +In pug Portland incididunt mlkshk put a bird on it vinyl quinoa. Terry Richardson shabby chic +1, scenester Tonx excepteur tempor fugiat voluptate fingerstache aliquip nisi next level. Farm-to-table hashtag Truffaut, Odd Future ex meggings gentrify single-origin coffee try-hard 90's. + + * Sartorial hoodie + * Labore viral forage + * Tote bag selvage + * DIY exercitation et id ugh tumblr church-key + +Incididunt umami sriracha, ethical fugiat VHS ex assumenda yr irure direct trade. Marfa Truffaut bicycle rights, kitsch placeat Etsy kogi asymmetrical. Beard locavore flexitarian, kitsch photo booth hoodie plaid ethical readymade leggings yr. + +Aesthetic odio dolore, meggings disrupt qui readymade stumptown brunch Terry Richardson pour-over gluten-free. Banksy american apparel in selfies, biodiesel flexitarian organic meh wolf quinoa gentrify banjo kogi. Readymade tofu ex, scenester dolor umami fingerstache occaecat fashion axe Carles jean shorts minim. Keffiyeh fashion axe nisi Godard mlkshk dolore. Lomo you probably haven't heard of them eu non, Odd Future Truffaut pug keytar meggings McSweeney's Pinterest cred. Etsy literally aute esse, eu bicycle rights qui meggings fanny pack. Gentrify leggings pug flannel duis. + +## Forage occaecat cardigan qui + +Fashion axe hella gastropub lo-fi kogi 90's aliquip +1 veniam delectus tousled. Cred sriracha locavore gastropub kale chips, iPhone mollit sartorial. Anim dolore 8-bit, pork belly dolor photo booth aute flannel small batch. Dolor disrupt ennui, tattooed whatever salvia Banksy sartorial roof party selfies raw denim sint meh pour-over. Ennui eu cardigan sint, gentrify iPhone cornhole. + +> Whatever velit occaecat quis deserunt gastropub, leggings elit tousled roof party 3 wolf moon kogi pug blue bottle ea. Fashion axe shabby chic Austin quinoa pickled laborum bitters next level, disrupt deep v accusamus non fingerstache. + +Tote bag asymmetrical elit sunt. Occaecat authentic Marfa, hella McSweeney's next level irure veniam master cleanse. Sed hoodie letterpress artisan wolf leggings, 3 wolf moon commodo ullamco. Anim occupy ea labore Terry Richardson. Tofu ex master cleanse in whatever pitchfork banh mi, occupy fugiat fanny pack Austin authentic. Magna fugiat 3 wolf moon, labore McSweeney's sustainable vero consectetur. Gluten-free disrupt enim, aesthetic fugiat jean shorts trust fund keffiyeh magna try-hard. + +## Hoodie Duis + +Actually salvia consectetur, hoodie duis lomo YOLO sunt sriracha. Aute pop-up brunch farm-to-table odio, salvia irure occaecat. Sriracha small batch literally skateboard. Echo Park nihil hoodie, aliquip forage artisan laboris. Trust fund reprehenderit nulla locavore. Stumptown raw denim kitsch, keffiyeh nulla twee dreamcatcher fanny pack ullamco 90's pop-up est culpa farm-to-table. Selfies 8-bit do pug odio. + +### Thundercats Ho! + +Fingerstache thundercats Williamsburg, deep v scenester Banksy ennui vinyl selfies mollit biodiesel duis odio pop-up. Banksy 3 wolf moon try-hard, sapiente enim stumptown deep v ad letterpress. Squid beard brunch, exercitation raw denim yr sint direct trade. Raw denim narwhal id, flannel DIY McSweeney's seitan. Letterpress artisan bespoke accusamus, meggings laboris consequat Truffaut qui in seitan. Sustainable cornhole Schlitz, twee Cosby sweater banh mi deep v forage letterpress flannel whatever keffiyeh. Sartorial cred irure, semiotics ethical sed blue bottle nihil letterpress. + +Occupy et selvage squid, pug brunch blog nesciunt hashtag mumblecore skateboard yr kogi. Ugh small batch swag four loko. Fap post-ironic qui tote bag farm-to-table american apparel scenester keffiyeh vero, swag non pour-over gentrify authentic pitchfork. Schlitz scenester lo-fi voluptate, tote bag irony bicycle rights pariatur vero Vice freegan wayfarers exercitation nisi shoreditch. Chambray tofu vero sed. Street art swag literally leggings, Cosby sweater mixtape PBR lomo Banksy non in pitchfork ennui McSweeney's selfies. Odd Future Banksy non authentic. + +Aliquip enim artisan dolor post-ironic. Pug tote bag Marfa, deserunt pour-over Portland wolf eu odio intelligentsia american apparel ugh ea. Sunt viral et, 3 wolf moon gastropub pug id. Id fashion axe est typewriter, mlkshk Portland art party aute brunch. Sint pork belly Cosby sweater, deep v mumblecore kitsch american apparel. Try-hard direct trade tumblr sint skateboard. Adipisicing bitters excepteur biodiesel, pickled gastropub aute veniam. diff --git a/docs/_posts/2013-01-05-markup-title-with-markup.md b/docs/_posts/2013-01-05-markup-title-with-markup.md new file mode 100644 index 0000000..2ce5f1b --- /dev/null +++ b/docs/_posts/2013-01-05-markup-title-with-markup.md @@ -0,0 +1,18 @@ +--- +title: "Markup: Title *with* **Markdown**" +categories: + - Markdown +tags: + - css + - html + - title +last_modified_at: 2017-03-09T12:25:10-05:00 +--- + +Using Markdown in the title should have no adverse effect on the layout or functionality. + +**`page.title` example:** + +```yaml +title: "Markup: Title *with* **Markdown**"" +``` \ No newline at end of file diff --git a/docs/_posts/2013-01-05-markup-title-with-special-characters.md b/docs/_posts/2013-01-05-markup-title-with-special-characters.md new file mode 100644 index 0000000..1b5eceb --- /dev/null +++ b/docs/_posts/2013-01-05-markup-title-with-special-characters.md @@ -0,0 +1,437 @@ +--- +title: "Markup: Title with Special --- Characters" +categories: + - Markup +tags: + - html + - markup + - post + - title +last_modified_at: 2017-03-09T12:23:27-05:00 +--- + +Putting special characters in the title should have no adverse effect on the layout or functionality. + +The title above has none-breaking spaces before and after the m-dash. + +```markdown + --- +``` + +## Latin Character Tests + +This is a test to see if the fonts used in this theme support basic Latin characters. + +Oh I dunno. It's probably been over 15 years since I smudged out a face with a pencil and kneaded eraser. #WIP #Sktchy pic.twitter.com/PwqbMddyVK
— Michael Rose (@mmistakes) February 1, 2017
| + ! + | + ++ “ + | + ++ # + | + ++ $ + | + ++ % + | + ++ & + | + ++ ‘ + | + ++ ( + | + ++ ) + | + ++ * + | +
| + + + | + ++ , + | + ++ – + | + ++ . + | + ++ / + | + ++ | + ++ 1 + | + ++ 2 + | + ++ 3 + | + ++ 4 + | +
| + 5 + | + ++ 6 + | + ++ 7 + | + ++ 8 + | + ++ 9 + | + ++ : + | + ++ ; + | + ++ > + | + ++ = + | + ++ < + | +
| + ? + | + ++ @ + | + ++ A + | + ++ B + | + ++ C + | + ++ D + | + ++ E + | + ++ F + | + ++ G + | + ++ H + | +
| + I + | + ++ J + | + ++ K + | + ++ L + | + ++ M + | + ++ N + | + ++ O + | + ++ P + | + ++ Q + | + ++ R + | +
| + S + | + ++ T + | + ++ U + | + ++ V + | + ++ W + | + ++ X + | + ++ Y + | + ++ Z + | + ++ [ + | + ++ | +
| + ] + | + ++ ^ + | + ++ _ + | + ++ ` + | + ++ a + | + ++ b + | + ++ c + | + ++ d + | + ++ e + | + ++ f + | +
| + g + | + ++ h + | + ++ i + | + ++ j + | + ++ k + | + ++ l + | + ++ m + | + ++ n + | + ++ o + | + ++ p + | +
| + q + | + ++ r + | + ++ s + | + ++ t + | + ++ u + | + ++ v + | + ++ w + | + ++ x + | + ++ y + | + ++ z + | +
| + { + | + ++ | + | + ++ } + | + ++ ~ + | + ++ | + ++ | + ++ | + ++ | + ++ | + ++ | +
Left aligned text.
+Center aligned text.
+Right aligned text.
+Justified text.
+No wrap text.
+``` + +Or with Kramdown and [inline attribute lists](https://kramdown.gettalong.org/syntax.html#inline-attribute-lists): + +```markdown +Left aligned text. +{: .text-left} + +Center aligned text. +{: .text-center} + +Right aligned text. +{: .text-right} + +Justified text. +{: .text-justify} + +No wrap text. +{: .text-nowrap} +``` + +## Default + +This is a paragraph. It should not have any alignment of any kind. It should just flow like you would normally expect. Nothing fancy. Just straight up text, free flowing, with love. Completely neutral and not picking a side or sitting on the fence. It just is. It just freaking is. It likes where it is. It does not feel compelled to pick a side. Leave him be. It will just be better that way. Trust me. + +## Left Aligned + +This is a paragraph. It is left aligned. Because of this, it is a bit more liberal in it's views. It's favorite color is green. Left align tends to be more eco-friendly, but it provides no concrete evidence that it really is. Even though it likes share the wealth evenly, it leaves the equal distribution up to justified alignment. +{: .text-left} + +## Center Aligned + +This is a paragraph. It is center aligned. Center is, but nature, a fence sitter. A flip flopper. It has a difficult time making up its mind. It wants to pick a side. Really, it does. It has the best intentions, but it tends to complicate matters more than help. The best you can do is try to win it over and hope for the best. I hear center align does take bribes. +{: .text-center} + +## Right Aligned + +This is a paragraph. It is right aligned. It is a bit more conservative in it's views. It's prefers to not be told what to do or how to do it. Right align totally owns a slew of guns and loves to head to the range for some practice. Which is cool and all. I mean, it's a pretty good shot from at least four or five football fields away. Dead on. So boss. +{: .text-right} + +## Justify Aligned + +This is a paragraph. It is justify aligned. It gets really mad when people associate it with Justin Timberlake. Typically, justified is pretty straight laced. It likes everything to be in it's place and not all cattywampus like the rest of the aligns. I am not saying that makes it better than the rest of the aligns, but it does tend to put off more of an elitist attitude. +{: .text-justify} + +## No Wrap + +This is a paragraph. It has a no wrap. Beef ribs pig tenderloin filet mignon. Spare ribs leberkas ribeye, burgdoggen fatback tenderloin biltong jowl flank sirloin hamburger bacon brisket. Shoulder bresaola drumstick capicola. Beef ribs prosciutto porchetta beef. +{: .text-nowrap} + +--- + +Transform text with capitalization classes via HTML: + +```html +Lowercased text.
+Uppercased text.
+Capitalized text.
+Truncated text.
+Small text.
+``` + +Or with Kramdown: + +```markdown +Lowercased text +{: .text-lowercase} + +Uppercased text +{: .text-uppercase} + +Capitalized text +{: .text-capitalize} +``` + +Lowercased text +{: .text-lowercase} + +Uppercased text +{: .text-uppercase} + +Capitalized text +{: .text-capitalize} + +This is a truncated paragraph of text. Bacon ipsum dolor amet shoulder jowl tail andouille fatback tongue. Ham porchetta kielbasa pork pork chop, tenderloin hamburger meatball. Picanha porchetta swine, brisket salami pork belly burgdoggen. Cupim swine pastrami, chuck tri-tip pork belly jowl shankle alcatra brisket capicola ball tip prosciutto beef ribs doner. Tri-tip bacon ground round pork chop burgdoggen leberkas pork strip steak beef corned beef salami. +{: .text-truncate} + +Small text +{: .small} diff --git a/docs/_posts/2013-01-10-markup-image-alignment.md b/docs/_posts/2013-01-10-markup-image-alignment.md new file mode 100644 index 0000000..60e6293 --- /dev/null +++ b/docs/_posts/2013-01-10-markup-image-alignment.md @@ -0,0 +1,89 @@ +--- +title: "Markup: Image Alignment" +categories: + - Markup +tags: + - alignment + - captions + - content + - css + - image + - markup +last_modified_at: 2017-03-09T11:15:57-05:00 +--- + +The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let's get started. + +Assign classes with HTML: + +```html +
+
+
+```
+
+Or use Kramdown and [inline attribute lists](https://kramdown.gettalong.org/syntax.html#inline-attribute-lists):
+
+```markdown
+{: .align-left}
+{: .align-center}
+{: .align-right}
+```
+
+{: .align-center}
+
+The image should be **centered** with the `.align-center` class.
+
+{: .align-left} The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is **left aligned** with the `.align-left` class.
+
+As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we'll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it's thing. Mission accomplished!
+
+And now for a **massively large image** --- it has **no alignment**.
+
+
+
+The image above, though `1200px` wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.
+
+{: .align-right}
+
+And now we're going to shift things to the **right** with the `.align-right` class. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there --- Hey guy! Way to rock that right side. I don't care what the left aligned image says, you look great. Don't let anyone else tell you differently.
+
+In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah --- Just like that. It never felt so good to be right.
+
+And just when you thought we were done, we're going to do them all over again with captions!
+
+
+ 
+ 
+ 
+ ` element.
+
+## Preformatted element
+
+This element styles large blocks of code.
+
+
+.post-title {
+ margin: 0 0 5px;
+ font-weight: bold;
+ font-size: 38px;
+ line-height: 1.2;
+ and here's a line of some really, really, really, really long text, just to see how the PRE element handles it and to find out how it overflows;
+}
+
+
+## Quote element
+
+Developers, developers, developers…
–Steve Ballmer
+
+## Strong element
+
+This element shows **bold text**.
+
+## Subscript element
+
+Getting our science styling on with H2O, which should push the "2" down.
+
+## Superscript element
+
+Still sticking with science and Isaac Newton's E = MC2, which should lift the 2 up.
+
+## Variable element
+
+This allows you to denote variables.
\ No newline at end of file
diff --git a/docs/_posts/2013-08-16-markup-syntax-highlighting.md b/docs/_posts/2013-08-16-markup-syntax-highlighting.md
new file mode 100644
index 0000000..8d8ae90
--- /dev/null
+++ b/docs/_posts/2013-08-16-markup-syntax-highlighting.md
@@ -0,0 +1,123 @@
+---
+title: "Markup: Syntax Highlighting"
+excerpt: "Post displaying the various ways one can highlight code blocks with Jekyll. Some options include standard Markdown, GitHub Flavored Markdown, and Jekyll's `{% highlight %}` tag."
+last_modified_at: 2017-03-09T10:27:01-05:00
+tags:
+ - code
+ - syntax highlighting
+---
+
+Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.[^1]
+
+[^1]:
+
+## GFM Code Blocks
+
+GitHub Flavored Markdown [fenced code blocks](https://help.github.com/articles/creating-and-highlighting-code-blocks/) are supported by default with Jekyll. You may need to update your `_config.yml` file to enable them if you're using an older version.
+
+```yaml
+kramdown:
+ input: GFM
+```
+
+Here's an example of a CSS code snippet written in GFM:
+
+```css
+#container {
+ float: left;
+ margin: 0 -240px 0 0;
+ width: 100%;
+}
+```
+
+Yet another code snippet for demonstration purposes:
+
+```ruby
+module Jekyll
+ class TagIndex < Page
+ def initialize(site, base, dir, tag)
+ @site = site
+ @base = base
+ @dir = dir
+ @name = 'index.html'
+ self.process(@name)
+ self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
+ self.data['tag'] = tag
+ tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
+ tag_title_suffix = site.config['tag_title_suffix'] || '–'
+ self.data['title'] = "#{tag_title_prefix}#{tag}"
+ self.data['description'] = "An archive of posts tagged #{tag}."
+ end
+ end
+end
+```
+
+## Jekyll Highlight Liquid Tag
+
+Jekyll also has built-in support for syntax highlighting of code snippets using either Rouge or Pygments, using a dedicated Liquid tag as follows:
+
+```liquid
+{% raw %}{% highlight scss %}
+.highlight {
+ margin: 0;
+ padding: 1em;
+ font-family: $monospace;
+ font-size: $type-size-7;
+ line-height: 1.8;
+}
+{% endhighlight %}{% endraw %}
+```
+
+And the output will look like this:
+
+{% highlight scss %}
+.highlight {
+ margin: 0;
+ padding: 1em;
+ font-family: $monospace;
+ font-size: $type-size-7;
+ line-height: 1.8;
+}
+{% endhighlight %}
+
+Here's an example of a code snippet using the Liquid tag and `linenos` enabled.
+
+{% highlight html linenos %}
+{% raw %}{% endraw %}
+{% endhighlight %}
+
+## Code Blocks in Lists
+
+Indentation matters. Be sure the indent of the code block aligns with the first non-space character after the list item marker (e.g., `1.`). Usually this will mean indenting 3 spaces instead of 4.
+
+1. Do step 1.
+2. Now do this:
+
+ ```ruby
+ def print_hi(name)
+ puts "Hi, #{name}"
+ end
+ print_hi('Tom')
+ #=> prints 'Hi, Tom' to STDOUT.
+ ```
+
+3. Now you can do this.
+
+## GitHub Gist Embed
+
+GitHub Gist embeds can also be used:
+
+```html
+
+```
+
+Which outputs as:
+
+
diff --git a/docs/_sass/basically-basic.scss b/docs/_sass/basically-basic.scss
new file mode 100644
index 0000000..c95ab41
--- /dev/null
+++ b/docs/_sass/basically-basic.scss
@@ -0,0 +1,37 @@
+/*!
+ * Basically Basic Jekyll Theme 0.0.1
+ * Copyright 2017 Michael Rose - mademistakes | @mmistakes
+ * Free for personal and commercial use under the MIT license
+ * https://github.com/mmistakes/jekyll-theme-basically-basic/blob/master/LICENSE.md
+*/
+
+/* Mixins and functions */
+@import 'basically-basic/vendor/susy';
+@import 'basically-basic/vendor/breakpoint';
+@include breakpoint-set('to ems', true);
+@import 'basically-basic/mixins';
+
+/* Variables */
+@import 'basically-basic/variables';
+
+/* Core CSS */
+@import 'basically-basic/reset';
+@import 'basically-basic/base';
+@import 'basically-basic/layout';
+@import 'basically-basic/tables';
+
+/* Components */
+@import 'basically-basic/global';
+@import 'basically-basic/sidebar';
+@import 'basically-basic/navigation';
+@import 'basically-basic/footer';
+@import 'basically-basic/entries';
+@import 'basically-basic/buttons';
+@import 'basically-basic/icons';
+@import 'basically-basic/intro';
+@import 'basically-basic/navicons';
+@import 'basically-basic/contact-lists';
+@import 'basically-basic/syntax-highlighting';
+
+/* Utility classes */
+@import 'basically-basic/utilities';
diff --git a/docs/_sass/basically-basic/_base.scss b/docs/_sass/basically-basic/_base.scss
new file mode 100644
index 0000000..cec266f
--- /dev/null
+++ b/docs/_sass/basically-basic/_base.scss
@@ -0,0 +1,110 @@
+/* ==========================================================================
+ Base elements
+ ========================================================================== */
+
+html {
+ @include fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size);
+}
+
+body {
+ background: $background-color;
+ color: $text-color;
+}
+
+blockquote,
+q {
+ color: tint($text-color, 40%);
+ font-style: italic;
+
+ cite {
+ font-size: 80%;
+ font-style: normal;
+ font-weight: bold;
+
+ &::before {
+ padding-right: 0.25rem;
+ content: '\2014';
+ }
+ }
+}
+
+code,
+kbd,
+samp,
+pre {
+ font-family: $monospace-font-family;
+}
+
+kbd {
+ display: inline-block;
+ margin: 0 0.125em;
+ padding: 0.125em 0.5em;
+ border: 1px solid rgb(204, 204, 204);
+ border-radius: 3px;
+ background-color: rgb(247, 247, 247);
+ text-shadow: 0 1px 0 #fff;
+ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 2px #fff;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-family: $headline-font-family;
+ text-rendering: optimizeLegibility; /* enable common ligatures and kerning */
+}
+
+h1 {
+ @include fluid-type($min-vw, $max-vw, $h1-min, $h1-max);
+}
+
+h2 {
+ @include fluid-type($min-vw, $max-vw, $h2-min, $h2-max);
+}
+
+h3 {
+ @include fluid-type($min-vw, $max-vw, $h3-min, $h3-max);
+}
+
+h4 {
+ @include fluid-type($min-vw, $max-vw, $h4-min, $h4-max);
+}
+
+h5 {
+ @include fluid-type($min-vw, $max-vw, $h5-min, $h5-max);
+}
+
+h6 {
+ @include fluid-type($min-vw, $max-vw, $h6-min, $h6-max);
+}
+
+dt {
+ font-weight: bold;
+
+ &:not(:first-child) {
+ margin-top: 1rem;
+ }
+}
+
+dd {
+ margin: 0;
+}
+
+pre {
+ @include fluid-type($min-vw, $max-vw, 12px, 14px);
+}
+
+figcaption {
+ margin: 0.5rem 0;
+ font-size: 80%;
+}
+
+a {
+ color: $accent-color;
+
+ &:hover {
+ color: shade($accent-color, 25%);
+ }
+}
diff --git a/docs/_sass/basically-basic/_buttons.scss b/docs/_sass/basically-basic/_buttons.scss
new file mode 100644
index 0000000..9502d32
--- /dev/null
+++ b/docs/_sass/basically-basic/_buttons.scss
@@ -0,0 +1,39 @@
+/* ==========================================================================
+ Buttons
+ ========================================================================== */
+
+.btn {
+ display: inline-block;
+ padding: 0.5em 1em;
+ border: 0;
+ border-radius: $border-radius;
+ background-color: $accent-color;
+ color: #fff;
+ font-weight: bold;
+ text-align: center;
+ text-decoration: none;
+ cursor: pointer;
+
+ &:hover {
+ background-color: tint($accent-color, 20%);
+ color: #fff;
+ }
+
+ &:focus {
+ background-color: shade($accent-color, 20%);
+ }
+
+ .icon {
+ margin-right: 0.5em;
+ }
+
+ /* block button fills width of parent container */
+ &--block {
+ display: block;
+ width: 100%;
+
+ + .btn--block {
+ margin-top: 1rem;
+ }
+ }
+}
diff --git a/docs/_sass/basically-basic/_contact-lists.scss b/docs/_sass/basically-basic/_contact-lists.scss
new file mode 100644
index 0000000..2bb5912
--- /dev/null
+++ b/docs/_sass/basically-basic/_contact-lists.scss
@@ -0,0 +1,11 @@
+/* ==========================================================================
+ Contact lists
+ ========================================================================== */
+
+.contact-list {
+ @include list-unstyled;
+
+ .icon {
+ margin-right: 0.25em;
+ }
+}
diff --git a/docs/_sass/basically-basic/_entries.scss b/docs/_sass/basically-basic/_entries.scss
new file mode 100644
index 0000000..83947cc
--- /dev/null
+++ b/docs/_sass/basically-basic/_entries.scss
@@ -0,0 +1,155 @@
+/* ==========================================================================
+ Entries (Posts, collection documents, etc.)
+ ========================================================================== */
+
+.entry {
+ @include clearfix();
+ margin-bottom: 2rem;
+ padding-bottom: 2rem;
+
+ &:not(:last-child) {
+ border-bottom: 1px solid $border-color;
+ }
+
+ a {
+ color: inherit;
+ }
+}
+
+.entry-title {
+ @include fluid-type($min-vw, $max-vw, 18px, 24px);
+ margin-bottom: 0.5rem;
+ color: tint($text-color, 25%);
+ line-height: inherit;
+
+ a {
+ text-decoration: none;
+ }
+}
+
+.entry-meta {
+ @include fluid-type($min-vw, $max-vw, 12px, 16px);
+ margin-bottom: 1rem;
+
+ a {
+ color: inherit;
+ }
+
+ .byline-item {
+
+ &:not(:first-child) {
+ margin-left: 1.5rem;
+ }
+ }
+
+ .icon {
+ margin-right: 0.5em;
+ fill: $accent-color;
+ }
+}
+
+/*
+ Entry list
+ ========================================================================== */
+
+.entries {
+
+ .entry-title {
+ word-wrap: break-word; /* break long words that could overflow */
+
+ a:hover {
+ color: $accent-color;
+ }
+ }
+
+ .entry-excerpt {
+ @include breakpoint($medium) {
+ @include span(11 of 16);
+ }
+
+ /* normalize font sizes */
+ > * {
+ font-size: 1em;
+ }
+
+ /* remove space after last child element */
+ > *:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .entry-content {
+ @include breakpoint($medium) {
+ @include span(11 of 16);
+ }
+
+ /* remove space after last child element */
+ > *:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .entry-meta {
+ @include breakpoint($medium) {
+ @include span(5 of 16 last);
+ @include prefix(1 of 16);
+ }
+
+ ul {
+ @include list-unstyled();
+
+ @include breakpoint(max-width $medium) {
+ li {
+ display: inline-block;
+ margin-right: 1.5rem;
+ }
+ }
+
+ @include breakpoint($medium) {
+ li {
+ padding-bottom: 0.5rem;
+ }
+ }
+ }
+ }
+
+ > .summary {
+
+ > p:first-child {
+ font-size: 1.125em;
+ line-height: 1.625;
+ }
+ }
+}
+
+.entry-content {
+
+ > p:first-child {
+ font-size: 1.125em;
+ line-height: 1.625;
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: tint($text-color, 25%);
+ }
+}
+
+/* Footnotes */
+.footnotes {
+ margin: 2rem 0;
+ padding-top: 1rem;
+ border-top: 1px solid $border-color;
+ font-size: 80%;
+}
+
+/* Read more link */
+.more-link {
+ font-size: 75%;
+ font-weight: bold;
+ text-decoration: none;
+}
diff --git a/docs/_sass/basically-basic/_footer.scss b/docs/_sass/basically-basic/_footer.scss
new file mode 100644
index 0000000..9bd2cb0
--- /dev/null
+++ b/docs/_sass/basically-basic/_footer.scss
@@ -0,0 +1,13 @@
+/* ==========================================================================
+ Footer
+ ========================================================================== */
+
+.site-footer {
+ margin-top: 4rem;
+ color: tint($text-color, 40%);
+ font-size: 80%;
+}
+
+.copyright {
+ font-family: $monospace-font-family;
+}
diff --git a/docs/_sass/basically-basic/_global.scss b/docs/_sass/basically-basic/_global.scss
new file mode 100644
index 0000000..abb3f50
--- /dev/null
+++ b/docs/_sass/basically-basic/_global.scss
@@ -0,0 +1,36 @@
+/* ==========================================================================
+ Site-wide
+ ========================================================================== */
+
+.site-title {
+ @include fluid-type($min-vw, $max-vw, 20px, 24px);
+ margin: 0;
+ padding: 1.8125rem 1rem;
+ padding-right: calc(10vw + #{$navicon-width}); /* make room for sidebar toggle */
+ font-family: $base-font-family;
+ font-weight: bold;
+ line-height: 1;
+
+ @include breakpoint($medium) {
+ padding-left: 2rem;
+ }
+
+ @include breakpoint($large) {
+ padding-left: 5vw;
+ }
+
+ a {
+ display: flex;
+ align-items: center;
+ min-height: $site-image-height;
+ color: $text-color;
+ text-decoration: none;
+ }
+}
+
+.site-logo {
+ width: $site-image-width;
+ height: $site-image-height;
+ margin-right: 0.5rem;
+ border-radius: 50%;
+}
diff --git a/docs/_sass/basically-basic/_icons.scss b/docs/_sass/basically-basic/_icons.scss
new file mode 100644
index 0000000..7df5282
--- /dev/null
+++ b/docs/_sass/basically-basic/_icons.scss
@@ -0,0 +1,43 @@
+/* ==========================================================================
+ Icons
+ ========================================================================== */
+
+.icon {
+ display: inline-block;
+ position: relative;
+ top: -0.05em; /* fine-tune alignment */
+ width: 1em;
+ height: 1em;
+ line-height: 1;
+ vertical-align: middle;
+ fill: currentColor;
+
+ $icons: (
+ (bitbucket, #205081),
+ (codepen, #000),
+ (dribbble, #ea4c89),
+ (email, #000),
+ (facebook, #3b5998),
+ (flickr, #0063dc),
+ (github, #181717),
+ (gitlab, #e24329),
+ (googleplus, #dc4e41),
+ (instagram, #e4405f),
+ (lastfm, #d51007),
+ (linkedin, #0077b5),
+ (pinterest, #bd081c),
+ (rss, #ffa500),
+ (soundcloud, #f30),
+ (stackoverflow, #fe7a16),
+ (tumblr, #36465d),
+ (twitter, #1da1f2),
+ (xing, #005a5f),
+ (youtube, #cd201f)
+ );
+
+ @each $icon, $color in $icons {
+ &--#{$icon} {
+ fill: $color;
+ }
+ }
+}
diff --git a/docs/_sass/basically-basic/_intro.scss b/docs/_sass/basically-basic/_intro.scss
new file mode 100644
index 0000000..77fe9bc
--- /dev/null
+++ b/docs/_sass/basically-basic/_intro.scss
@@ -0,0 +1,65 @@
+/* ==========================================================================
+ Page intro
+ ========================================================================== */
+
+.intro {
+ margin: 1rem 0;
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+}
+
+.intro-image {
+ position: relative;
+ margin-top: -3rem; /* compensate for intro top margin */
+ margin-bottom: 3rem;
+
+ &::before {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: rgba($accent-color, 0.25);
+ content: '';
+ }
+
+ img {
+ width: 100%;
+ }
+}
+
+.intro-text {
+
+ /* remove space after last child element */
+ > *:last-child {
+ margin-bottom: 0;
+ }
+}
+
+.intro-title {
+ @include fluid-type($min-vw, $max-vw, 26px, 80px);
+ margin-bottom: 1rem;
+ color: tint($text-color, 25%);
+ line-height: 1;
+}
+
+.intro-subtitle {
+ @include fluid-type($min-vw, $max-vw, 18px, 28px);
+ font-style: italic;
+}
+
+.intro-actions {
+ @include list-unstyled;
+
+ li {
+ display: inline-block;
+ }
+}
+
+.intro-more {
+
+ > p:first-child {
+ font-size: 1.125em;
+ line-height: 1.625;
+ }
+}
diff --git a/docs/_sass/basically-basic/_layout.scss b/docs/_sass/basically-basic/_layout.scss
new file mode 100644
index 0000000..79c0996
--- /dev/null
+++ b/docs/_sass/basically-basic/_layout.scss
@@ -0,0 +1,178 @@
+/* ==========================================================================
+ Layout
+ ========================================================================== */
+
+.wrapper {
+ min-height: 100vh;
+ transition: $global-transition;
+}
+
+.intro,
+main {
+
+ > .inner {
+ padding: 0 0.5rem;
+
+ @include breakpoint($small) {
+ padding-right: 1rem;
+ padding-left: 1rem;
+ }
+
+ @include breakpoint($medium) {
+ padding-right: 2rem;
+ padding-left: 2rem;
+ }
+
+ @include breakpoint($large) {
+ padding-right: 3rem;
+ padding-left: 3rem;
+ }
+
+ @include breakpoint($xlarge) {
+ padding-right: 4rem;
+ padding-left: 4rem;
+ }
+ }
+}
+
+main {
+
+ section {
+ @include container;
+ }
+}
+
+.inner {
+ max-width: $large;
+}
+
+/*
+ Layout specific adjustments
+ ========================================================================== */
+
+.layout--post,
+.layout--page {
+
+ .entry-content {
+
+ @include breakpoint($large) {
+ width: span(14 of 16);
+ }
+ }
+}
+
+.layout--about {
+
+ .entry-wrap {
+ display: flex;
+ flex-wrap: wrap;
+
+ @include breakpoint($medium) {
+ flex-wrap: nowrap;
+ }
+ }
+
+ .entry-content {
+
+ @include breakpoint($medium) {
+ flex: 1;
+ }
+ }
+
+ .entry-sidebar {
+ order: -1;
+ -ms-flex-order: -1;
+
+ @include breakpoint($medium) {
+ order: initial;
+ -ms-flex-order: initial;
+ }
+
+ .author-picture {
+ margin: 0 0 2rem;
+ border-radius: 2 * $border-radius;
+
+ @include breakpoint($medium) {
+ margin: 0 0 0 2rem;
+ }
+ }
+ }
+}
+
+.layout--cv {
+
+ .entries {
+
+ .entry-header {
+
+ @include breakpoint($medium) {
+ @include span(5 of 16);
+ @include suffix(1 of 16);
+
+ /* remove space after last child element */
+ > *:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ .entry-content {
+ @include breakpoint($medium) {
+ @include span(11 of 16 last);
+ }
+ }
+ }
+
+ .entry {
+
+ a {
+ color: $accent-color;
+ }
+
+ address {
+ font-style: normal;
+ }
+
+ .title,
+ .position,
+ .institution,
+ .language {
+ margin-bottom: 0;
+ }
+
+ .date {
+ margin-bottom: 1rem;
+ color: tint($text-color, 40%);
+ font-family: $monospace-font-family;
+ font-size: 80%;
+ }
+
+ .courses-title,
+ .awarder,
+ .publisher,
+ .level {
+ margin: 1rem 0 0;
+ }
+
+ .courses,
+ .keywords {
+ @include list-unstyled;
+ }
+ }
+
+ .taxonomy {
+
+ + .taxonomy {
+ margin-top: 0.5rem;
+ }
+
+ .title {
+ display: inline-block;
+ margin-right: 1rem;
+ }
+
+ .keywords {
+ display: inline-block;
+ }
+ }
+}
diff --git a/docs/_sass/basically-basic/_mixins.scss b/docs/_sass/basically-basic/_mixins.scss
new file mode 100644
index 0000000..71f0610
--- /dev/null
+++ b/docs/_sass/basically-basic/_mixins.scss
@@ -0,0 +1,7 @@
+@import 'mixins/color';
+@import 'mixins/clearfix';
+@import 'mixins/fluid-type';
+@import 'mixins/float';
+@import 'mixins/image';
+@import 'mixins/lists';
+@import 'mixins/text-truncate';
diff --git a/docs/_sass/basically-basic/_navicons.scss b/docs/_sass/basically-basic/_navicons.scss
new file mode 100644
index 0000000..b21d964
--- /dev/null
+++ b/docs/_sass/basically-basic/_navicons.scss
@@ -0,0 +1,144 @@
+/* ==========================================================================
+ Navicons
+ ========================================================================== */
+
+.navicon-button {
+ display: inline-block;
+ position: relative;
+ padding: 1.8125rem 1rem;
+ transition: $navicon-duration / 2;
+ background-color: $navicon-nav-bg-close;
+ cursor: pointer;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ user-select: none;
+
+ @include breakpoint($medium) {
+ margin-right: 2rem;
+ }
+
+ @include breakpoint($large) {
+ margin-right: 5vw;
+ }
+
+ &.open {
+ background-color: $navicon-nav-bg-open;
+ }
+
+ .navicon::before,
+ .navicon::after {
+ transition-duration: $navicon-duration / 2;
+ }
+
+ &:hover {
+ transition-duration: $navicon-duration;
+
+ .navicon::before,
+ .navicon::after {
+ transition-duration: $navicon-duration / 2;
+ }
+
+ .navicon::before { top: (2.5 * $navicon-height); }
+ .navicon::after { top: (-2.5 * $navicon-height); }
+ }
+}
+
+.navicon {
+ position: relative;
+ width: $navicon-width;
+ height: $navicon-height;
+ transition-duration: $navicon-duration;
+ border-radius: $navicon-width;
+ background: $navicon-content-bg;
+
+ &::before,
+ &::after {
+ display: block;
+ position: absolute;
+ width: $navicon-width;
+ height: $navicon-height;
+ transition-duration: $navicon-duration $navicon-duration / 2;
+ border-radius: $navicon-width;
+ background: $navicon-content-bg;
+ content: '';
+ }
+
+ &::before { top: (2 * $navicon-height); }
+ &::after { top: (-2 * $navicon-height); }
+}
+
+.open:not(.steps) .navicon::before,
+.open:not(.steps) .navicon::after {
+ top: 0 !important;
+}
+
+.open {
+ transform: scale($navicon-toggled-size);
+
+ .navicon::before,
+ .navicon::after {
+ transition-duration: $navicon-duration;
+ }
+
+ /* Arrows */
+ &.larr .navicon,
+ &.rarr .navicon,
+ &.uarr .navicon {
+
+ &::before,
+ &::after {
+ width: (0.6 * $navicon-width);
+ }
+
+ &::before {
+ transform: rotate(35deg);
+ transform-origin: left top;
+ }
+
+ &::after {
+ transform: rotate(-35deg);
+ transform-origin: left bottom;
+ }
+ }
+
+ &.uarr {
+ transform: scale($navicon-toggled-size) rotate(90deg);
+ }
+
+ &.rarr .navicon {
+
+ &::before {
+ transform: translate3d(1em, 0, 0) rotate(-35deg);
+ transform-origin: right top;
+ }
+
+ &::after {
+ transform: translate3d(1em, 0, 0) rotate(35deg);
+ transform-origin: right bottom;
+ }
+ }
+
+ /* × and + */
+ /* &.plus,*/
+ /* &.x {*/
+ /* .navicon {*/
+ /* background: transparent;*/
+
+ /* &::before {*/
+ /* -ms-transform: rotate(-45deg);*/
+ /* transform: rotate(-45deg);*/
+ /* }*/
+
+ /* &::after {*/
+ /* -ms-transform: rotate(45deg);*/
+ /* transform: rotate(45deg);*/
+ /* }*/
+ /* }*/
+ /* }*/
+
+ /* &.plus {*/
+ /* -ms-transform: scale($navicon-toggled-size) rotate(45deg);*/
+ /* transform: scale($navicon-toggled-size) rotate(45deg);*/
+ /* }*/
+}
diff --git a/docs/_sass/basically-basic/_navigation.scss b/docs/_sass/basically-basic/_navigation.scss
new file mode 100644
index 0000000..4e52b2d
--- /dev/null
+++ b/docs/_sass/basically-basic/_navigation.scss
@@ -0,0 +1,51 @@
+/* ==========================================================================
+ Navigation
+ ========================================================================== */
+
+.menu {
+ @include list-unstyled;
+
+ a {
+ color: inherit;
+ text-decoration: none;
+ }
+}
+
+/*
+ Paginator
+ ========================================================================== */
+
+.pager {
+ @include clearfix();
+ margin-bottom: 2rem;
+
+ ul {
+ @include list-unstyled;
+ display: flex;
+
+ > li {
+ flex: 1;
+ justify-content: space-between;
+ -ms-flex-pack: justify;
+ }
+
+ li + li {
+ margin-left: 0.125em;
+ }
+ }
+
+ a {
+ display: block;
+ padding: 1em;
+ border-radius: $border-radius;
+ background-color: $accent-color;
+ color: #fff;
+ font-weight: bold;
+ text-align: center;
+ text-decoration: none;
+
+ &:hover {
+ background-color: tint($accent-color, 20%);
+ }
+ }
+}
diff --git a/docs/_sass/basically-basic/_reset.scss b/docs/_sass/basically-basic/_reset.scss
new file mode 100644
index 0000000..2fface1
--- /dev/null
+++ b/docs/_sass/basically-basic/_reset.scss
@@ -0,0 +1,522 @@
+/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Prevent adjustments of font size after orientation changes in
+ * IE on Windows Phone and in iOS.
+ */
+
+/* Document
+ ========================================================================== */
+
+html {
+ font-family: $base-font-family; /* 1 */
+ box-sizing: border-box;
+ -ms-text-size-adjust: 100%; /* 2 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: inherit;
+}
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+ margin: 0;
+ line-height: 1.5;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+ display: block;
+}
+
+/**
+ * Remove margin padding.
+ *
+ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+pre,
+blockquote,
+dl,
+table,
+address {
+ margin-top: 0;
+ margin-bottom: 1.5rem;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+ font-size: 2em;
+}
+
+/**
+ * Adjust heading line-height
+ *
+ */
+
+h1,
+h2,
+h3,
+h4 {
+ line-height: 1.2;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main { /* 1 */
+ display: block;
+}
+
+/**
+ * Reset the margins.
+ */
+
+figure {
+ margin: 1rem 0 1.5rem;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+ box-sizing: content-box; /* 1 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ * 3. Add scrollbars to wide code blocks.
+ */
+
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+ overflow-x: auto; /* 3 */
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+ background-color: transparent; /* 1 */
+ -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+ outline-width: 0;
+}
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+ font-weight: inherit;
+ font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari. */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+ font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+ background-color: #ff0;
+ color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Change the margin and padding and add a line rule on the left-side in all
+ * browsers (opinionated).
+ */
+
+blockquote {
+ margin-right: 0;
+ margin-left: 0;
+ padding: 0 1rem;
+ border-left: solid 0.25rem;
+
+ *:last-child {
+ margin-bottom: 0;
+ }
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+ position: relative;
+ font-size: 75%;
+ line-height: 0;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/**
+ * Remove margin
+ */
+
+ul,
+ol {
+ margin-top: 0;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+ display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+img {
+ /* Responsive images (ensure images don't scale beyond their parents) */
+ max-width: 100%; /* part 1: Set a maximum relative to the parent*/
+ width: auto\9; /* IE7-8 need help adjusting responsive images*/
+ height: auto; /* part 2: Scale the height according to the width, otherwise you get stretching*/
+
+ border-style: none; /* Remove the border on images inside links in IE 10-.*/
+
+ vertical-align: middle;
+ -ms-interpolation-mode: bicubic;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ margin: 0; /* 2 */
+ font-family: $base-font-family; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+ text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ * controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ padding: 0;
+ border-style: none;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated).
+ */
+
+fieldset {
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+ border: 1px solid #c0c0c0;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+legend {
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ color: inherit; /* 2 */
+ white-space: normal; /* 1 */
+ box-sizing: border-box; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+ display: inline-block; /* 1 */
+ vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+ padding: 0; /* 2 */
+ box-sizing: border-box; /* 1 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+ outline-offset: -2px; /* 2 */
+ -webkit-appearance: textfield; /* 1 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ font: inherit; /* 2 */
+ -webkit-appearance: button; /* 1 */
+}
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+ display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+ display: list-item;
+}
+
+/* Scripting
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+ display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+ display: none;
+}
+
+/* Hidden
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+ display: none;
+}
diff --git a/docs/_sass/basically-basic/_sidebar.scss b/docs/_sass/basically-basic/_sidebar.scss
new file mode 100644
index 0000000..7590b93
--- /dev/null
+++ b/docs/_sass/basically-basic/_sidebar.scss
@@ -0,0 +1,177 @@
+/* ==========================================================================
+ Sidebar
+ ========================================================================== */
+
+.sidebar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ z-index: 150;
+ pointer-events: none;
+
+ /* page overlay dimmer */
+ &::after {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1);
+ background: rgba($base-color, 0.5);
+ content: '';
+ opacity: 0;
+ pointer-events: none;
+ will-change: opacity;
+ }
+
+ li {
+ transform: translateX(-1rem);
+ transition: all 0.5s;
+ opacity: 0;
+
+ &.is--moved {
+ transform: translateX(0);
+ opacity: 1;
+ }
+
+ /* line hover effect */
+ a {
+ position: relative;
+ color: $base-color;
+
+ &::before {
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: -3rem;
+ width: 0;
+ height: 1px;
+ transition: width 0.3s cubic-bezier(0, 0, 0.3, 1);
+ background-color: $base-color;
+ content: '';
+ }
+
+ &:hover {
+ color: $accent-color;
+ }
+
+ &:hover::before {
+ width: 2.5rem;
+ }
+ }
+ }
+
+ &.is--visible {
+ transform: translateX(0);
+
+ &::after {
+ opacity: 1;
+ pointer-events: auto;
+ }
+
+ > .inner {
+ transform: none;
+ box-shadow: 0 1em 5em 0 rgba(0, 0, 0, 0.125);
+ }
+
+ &.is--animatable > .inner {
+ transition: all 330ms ease-out;
+ }
+ }
+
+ &.is--animatable > .inner {
+ transition: all 130ms ease-in;
+ }
+
+ > .inner {
+ position: relative;
+ width: 100%;
+ max-width: $sidebar-width;
+ height: 100%;
+ padding: 1.5em;
+ transform: translateX(-1 * $sidebar-width);
+ background-color: $sidebar-background-color;
+ box-shadow: none;
+ z-index: 160;
+ will-change: transform;
+ overflow-x: hidden;
+ pointer-events: auto;
+
+ @include breakpoint($medium) {
+ padding: 3rem;
+ }
+
+ @include breakpoint($large) {
+ max-width: (1.5 * $sidebar-width);
+ transform: translateX(-1.5 * $sidebar-width);
+ }
+ }
+
+ .menu {
+ @include fluid-type($min-vw, $max-vw, 24px, 48px);
+ position: relative;
+ margin-bottom: 1.5rem;
+ padding-bottom: 0.5rem;
+ font-weight: bold;
+ line-height: 1;
+
+ a {
+ display: block;
+ }
+
+ /* divider line */
+ &::after {
+ position: absolute;
+ bottom: 0;
+ width: 1.5em;
+ height: 1px;
+ background-color: $base-color;
+ content: '';
+ }
+
+ li {
+ margin-bottom: 1.5rem;
+ }
+ }
+
+ .contact-list {
+ @include fluid-type($min-vw, $max-vw, 18px, 24px);
+ margin-top: 0.5rem;
+ padding-top: 0.5rem;
+
+ li:not(:last-child) {
+ margin-bottom: 0.5rem;
+ }
+
+ a {
+ display: block;
+ color: $base-color;
+ text-decoration: none;
+ }
+ }
+}
+
+.sidebar-toggle-wrapper {
+ position: fixed;
+ top: 0.675rem;
+ right: 0;
+ cursor: pointer;
+ z-index: 10000;
+
+ .toggle {
+ display: flex;
+ align-items: center;
+ color: inherit;
+ text-decoration: none;
+ }
+}
+
+.sidebar-toggle-label {
+ order: 2;
+ margin-left: 0.5rem;
+ font-weight: bold;
+}
diff --git a/docs/_sass/basically-basic/_syntax-highlighting.scss b/docs/_sass/basically-basic/_syntax-highlighting.scss
new file mode 100644
index 0000000..eb5d512
--- /dev/null
+++ b/docs/_sass/basically-basic/_syntax-highlighting.scss
@@ -0,0 +1,127 @@
+/* ==========================================================================
+ Syntax highlighting
+ ========================================================================== */
+
+.highlight {
+ padding: 1em;
+ background-color: $code-background-color;
+
+ pre {
+ width: 100%;
+ margin: 0;
+ }
+
+ table {
+ margin: 0;
+ border: 0;
+ font-size: 1em;
+
+ tr {
+ border: 0;
+ }
+
+ td {
+ padding: 5px;
+ border: 0;
+
+ /* line numbers gutter */
+ &.gutter {
+ padding-right: 1rem;
+ }
+ }
+
+ pre {
+ margin: 0;
+ }
+ }
+
+ /* line numbers */
+ .lineno {
+ color: tint($base-color, 50%);
+ }
+
+ /*
+ Solarized Light
+ http://ethanschoonover.com/solarized
+
+ SOLARIZED HEX ROLE
+ --------- -------- ------------------------------------------
+ base01 #586e75 body text / default code / primary content
+ base1 #93a1a1 comments / secondary content
+ base3 #fdf6e3 background
+ orange #cb4b16 constants
+ red #dc322f regex, special keywords
+ blue #22b3eb reserved keywords
+ cyan #2aa198 strings, numbers
+ green #859900 operators, other keywords
+ ========================================================================== */
+
+ .c { color: #93a1a1; } /* Comment */
+ .err { color: #586e75; } /* Error */
+ .g { color: #586e75; } /* Generic */
+ .k { color: #859900; } /* Keyword */
+ .l { color: #586e75; } /* Literal */
+ .n { color: #586e75; } /* Name */
+ .o { color: #859900; } /* Operator */
+ .x { color: #cb4b16; } /* Other */
+ .p { color: #586e75; } /* Punctuation */
+ .cm { color: #93a1a1; } /* Comment.Multiline */
+ .cp { color: #859900; } /* Comment.Preproc */
+ .c1 { color: #93a1a1; } /* Comment.Single */
+ .cs { color: #859900; } /* Comment.Special */
+ .gd { color: #2aa198; } /* Generic.Deleted */
+ .ge { color: #586e75; font-style: italic; } /* Generic.Emph */
+ .gr { color: #dc322f; } /* Generic.Error */
+ .gh { color: #cb4b16; } /* Generic.Heading */
+ .gi { color: #859900; } /* Generic.Inserted */
+ .go { color: #586e75; } /* Generic.Output */
+ .gp { color: #586e75; } /* Generic.Prompt */
+ .gs { color: #586e75; font-weight: bold; } /* Generic.Strong */
+ .gu { color: #cb4b16; } /* Generic.Subheading */
+ .gt { color: #586e75; } /* Generic.Traceback */
+ .kc { color: #cb4b16; } /* Keyword.Constant */
+ .kd { color: #22b3eb; } /* Keyword.Declaration */
+ .kn { color: #859900; } /* Keyword.Namespace */
+ .kp { color: #859900; } /* Keyword.Pseudo */
+ .kr { color: #22b3eb; } /* Keyword.Reserved */
+ .kt { color: #dc322f; } /* Keyword.Type */
+ .ld { color: #586e75; } /* Literal.Date */
+ .m { color: #2aa198; } /* Literal.Number */
+ .s { color: #2aa198; } /* Literal.String */
+ .na { color: #586e75; } /* Name.Attribute */
+ .nb { color: #b58900; } /* Name.Builtin */
+ .nc { color: #22b3eb; } /* Name.Class */
+ .no { color: #cb4b16; } /* Name.Constant */
+ .nd { color: #22b3eb; } /* Name.Decorator */
+ .ni { color: #cb4b16; } /* Name.Entity */
+ .ne { color: #cb4b16; } /* Name.Exception */
+ .nf { color: #22b3eb; } /* Name.Function */
+ .nl { color: #586e75; } /* Name.Label */
+ .nn { color: #586e75; } /* Name.Namespace */
+ .nx { color: #586e75; } /* Name.Other */
+ .py { color: #586e75; } /* Name.Property */
+ .nt { color: #22b3eb; } /* Name.Tag */
+ .nv { color: #22b3eb; } /* Name.Variable */
+ .ow { color: #859900; } /* Operator.Word */
+ .w { color: #586e75; } /* Text.Whitespace */
+ .mf { color: #2aa198; } /* Literal.Number.Float */
+ .mh { color: #2aa198; } /* Literal.Number.Hex */
+ .mi { color: #2aa198; } /* Literal.Number.Integer */
+ .mo { color: #2aa198; } /* Literal.Number.Oct */
+ .sb { color: #93a1a1; } /* Literal.String.Backtick */
+ .sc { color: #2aa198; } /* Literal.String.Char */
+ .sd { color: #586e75; } /* Literal.String.Doc */
+ .s2 { color: #2aa198; } /* Literal.String.Double */
+ .se { color: #cb4b16; } /* Literal.String.Escape */
+ .sh { color: #586e75; } /* Literal.String.Heredoc */
+ .si { color: #2aa198; } /* Literal.String.Interpol */
+ .sx { color: #2aa198; } /* Literal.String.Other */
+ .sr { color: #dc322f; } /* Literal.String.Regex */
+ .s1 { color: #2aa198; } /* Literal.String.Single */
+ .ss { color: #2aa198; } /* Literal.String.Symbol */
+ .bp { color: #22b3eb; } /* Name.Builtin.Pseudo */
+ .vc { color: #22b3eb; } /* Name.Variable.Class */
+ .vg { color: #22b3eb; } /* Name.Variable.Global */
+ .vi { color: #22b3eb; } /* Name.Variable.Instance */
+ .il { color: #2aa198; } /* Literal.Number.Integer.Long */
+}
diff --git a/docs/_sass/basically-basic/_tables.scss b/docs/_sass/basically-basic/_tables.scss
new file mode 100644
index 0000000..68ac1c9
--- /dev/null
+++ b/docs/_sass/basically-basic/_tables.scss
@@ -0,0 +1,42 @@
+/* ==========================================================================
+ Tables
+ ========================================================================== */
+
+table {
+ @include fluid-type($min-vw, $max-vw, 12px, 18px);
+ width: 100%;
+ border-collapse: collapse;
+ /* For Firefox to horizontally scroll wider tables */
+ // scss-lint:disable DuplicateProperty
+ word-break: normal;
+ word-break: keep-all;
+}
+
+thead {
+
+ th,
+ td {
+ background-color: tint($base-color, 80%);
+ }
+}
+
+th,
+td {
+ border-bottom: 1px solid $border-color;
+}
+
+th {
+ padding: 0.5em;
+ font-weight: bold;
+ text-align: left;
+}
+
+td {
+ padding: 0.5em;
+}
+
+tr,
+td,
+th {
+ vertical-align: middle;
+}
diff --git a/docs/_sass/basically-basic/_utilities.scss b/docs/_sass/basically-basic/_utilities.scss
new file mode 100644
index 0000000..fd261bf
--- /dev/null
+++ b/docs/_sass/basically-basic/_utilities.scss
@@ -0,0 +1,5 @@
+@import 'utilities/accessibility';
+@import 'utilities/align';
+@import 'utilities/clearfix';
+@import 'utilities/float';
+@import 'utilities/text';
diff --git a/docs/_sass/basically-basic/_variables.scss b/docs/_sass/basically-basic/_variables.scss
new file mode 100644
index 0000000..5ac2a06
--- /dev/null
+++ b/docs/_sass/basically-basic/_variables.scss
@@ -0,0 +1,84 @@
+/* ==========================================================================
+ Variables
+ ========================================================================== */
+
+/* Breakpoint widths */
+$small: 320px !default;
+$medium: 768px !default;
+$large: 1024px !default;
+$xlarge: 1280px !default;
+
+/* Fluid type */
+$base-font-size: 16px !default;
+$min-vw: $small !default;
+$max-vw: $xlarge !default;
+$min-font-size: 14px !default;
+$max-font-size: 18px !default;
+
+/* Calculate Modular Scale */
+$modular-scale-1: 1.067 !default; /* small */
+$modular-scale-2: 1.296 !default; /* large */
+/* Heading 1 */
+$h1-min: $modular-scale-1 * $modular-scale-1 * $modular-scale-1 * $modular-scale-1 * $base-font-size !default;
+$h1-max: $modular-scale-2 * $modular-scale-2 * $modular-scale-2 * $modular-scale-2 * $base-font-size !default;
+/* Heading 2 */
+$h2-min: $modular-scale-1 * $modular-scale-1 * $modular-scale-1 * $base-font-size !default;
+$h2-max: $modular-scale-2 * $modular-scale-2 * $modular-scale-2 * $base-font-size !default;
+/* Heading 3 */
+$h3-min: $modular-scale-1 * $modular-scale-1 * $base-font-size !default;
+$h3-max: $modular-scale-2 * $modular-scale-2 * $base-font-size !default;
+/* Heading 4 */
+$h4-min: $modular-scale-1 * $base-font-size !default;
+$h4-max: $modular-scale-2 * $base-font-size !default;
+/* Heading 5 */
+$h5-min: $base-font-size !default;
+$h5-max: $base-font-size !default;
+/* Heading 6 */
+$h6-min: ($base-font-size / $modular-scale-1) !default;
+$h6-max: ($base-font-size / $modular-scale-2) !default;
+
+/* Base font family */
+$base-font-family: "Fira Sans", sans-serif !default;
+/* Other font families */
+$headline-font-family: $base-font-family !default;
+$monospace-font-family: Menlo, Consolas, Monaco, "Courier New", Courier, monospace !default;
+
+/* Colors */
+$base-color: #393e46 !default;
+$text-color: #222831 !default;
+$accent-color: #00848a !default;
+$background-color: #fff !default;
+$code-background-color: tint($base-color, 95%) !default;
+$border-color: tint($base-color, 80%) !default;
+$overlay-color: $base-color !default;
+
+/* Max-width of the main content */
+$main-max-width: $xlarge !default;
+
+/* Width of the sidebar */
+$sidebar-width: $small !default;
+
+/* Background color of the sidebar */
+$sidebar-background-color: #fff !default;
+
+/* Border radius */
+$border-radius: 0.25em !default;
+
+/* Global transition */
+$global-transition: all 0.4s ease !default;
+
+/* Navicon */
+$navicon-width: 1.75em !default;
+$navicon-height: 0.25em !default;
+$navicon-duration: 0.5s !default;
+$navicon-toggled-size: 1 !default;
+$navicon-nav-bg-close: transparent !default;
+$navicon-nav-bg-open: transparent !default;
+$navicon-content-bg: $text-color !default;
+
+/* Site image */
+$site-image-width: 50px !default;
+$site-image-height: 50px !default;
+
+/* Susy grid settings */
+$susy: (columns: 16, gutters: 0, math: fluid, output: float) !default;
diff --git a/docs/_sass/basically-basic/mixins/_clearfix.scss b/docs/_sass/basically-basic/mixins/_clearfix.scss
new file mode 100644
index 0000000..bd93049
--- /dev/null
+++ b/docs/_sass/basically-basic/mixins/_clearfix.scss
@@ -0,0 +1,11 @@
+/* ==========================================================================
+ Clearfix Mixin
+ ========================================================================== */
+
+@mixin clearfix() {
+ &::after {
+ display: block;
+ clear: both;
+ content: '';
+ }
+}
diff --git a/docs/_sass/basically-basic/mixins/_color.scss b/docs/_sass/basically-basic/mixins/_color.scss
new file mode 100644
index 0000000..80be545
--- /dev/null
+++ b/docs/_sass/basically-basic/mixins/_color.scss
@@ -0,0 +1,21 @@
+/* ==========================================================================
+ Color Functions
+ ========================================================================== */
+
+/// Slightly lighten a color
+/// @access public
+/// @param {Color} $color - color to tint
+/// @param {Number} $percentage - percentage of `$color` in returned color
+/// @return {Color}
+@function tint($color, $percentage) {
+ @return mix(#fff, $color, $percentage);
+}
+
+/// Slightly darken a color
+/// @access public
+/// @param {Color} $color - color to shade
+/// @param {Number} $percentage - percentage of `$color` in returned color
+/// @return {Color}
+@function shade($color, $percentage) {
+ @return mix(#000, $color, $percentage);
+}
diff --git a/docs/_sass/basically-basic/mixins/_float.scss b/docs/_sass/basically-basic/mixins/_float.scss
new file mode 100644
index 0000000..a5bab5b
--- /dev/null
+++ b/docs/_sass/basically-basic/mixins/_float.scss
@@ -0,0 +1,15 @@
+/* ==========================================================================
+ Float Mixins
+ ========================================================================== */
+
+@mixin float-left {
+ float: left !important;
+}
+
+@mixin float-right {
+ float: right !important;
+}
+
+@mixin float-none {
+ float: none !important;
+}
diff --git a/docs/_sass/basically-basic/mixins/_fluid-type.scss b/docs/_sass/basically-basic/mixins/_fluid-type.scss
new file mode 100644
index 0000000..9193809
--- /dev/null
+++ b/docs/_sass/basically-basic/mixins/_fluid-type.scss
@@ -0,0 +1,33 @@
+/* ==========================================================================
+ Fluid Type
+ as seen on https://madebymike.com.au/writing/fluid-type-calc-examples/
+ ========================================================================== */
+
+@function strip-unit($value) {
+ @return $value / ($value * 0 + 1);
+}
+
+@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
+ // scss-lint:disable UnnecessaryParentReference
+ $u1: unit($min-vw);
+ $u2: unit($max-vw);
+ $u3: unit($min-font-size);
+ $u4: unit($max-font-size);
+
+ @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
+ & {
+
+ font-size: $min-font-size;
+
+ @media screen and (min-width: $min-vw) {
+ font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+ }
+
+ @media screen and (min-width: $max-vw) {
+ font-size: $max-font-size;
+ }
+ }
+ } @else {
+ @error "Detected mixed units. Please use the same units for all parameters. " + $u1 +", " + $u2 + ", " + $u3 +", "+ $u4;
+ }
+}
diff --git a/docs/_sass/basically-basic/mixins/_image.scss b/docs/_sass/basically-basic/mixins/_image.scss
new file mode 100644
index 0000000..8df8671
--- /dev/null
+++ b/docs/_sass/basically-basic/mixins/_image.scss
@@ -0,0 +1,38 @@
+/* ==========================================================================
+ Image Mixins
+ - Responsive image
+ - Retina image
+ ========================================================================== */
+
+/*
+ Responsive image
+ Keep images from scaling beyond the width of their parents.
+ ========================================================================== */
+
+@mixin img-fluid {
+ // Part 1: Set a maximum relative to the parent
+ max-width: 100%;
+ // Part 2: Override the height to auto, otherwise images will be stretched
+ // when setting a width and height attribute on the img element.
+ height: auto;
+}
+
+/*
+ Retina image
+ Short retina mixin for setting background-image and -size.
+ ========================================================================== */
+
+@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
+ background-image: url($file-1x);
+
+ // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
+ // but doesn't convert dppx=>dpi.
+ // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
+ // Compatibility info: http://caniuse.com/#feat=css-media-resolution
+ @media
+ only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
+ only screen and (min-resolution: 2dppx) { // Standardized
+ background-image: url($file-2x);
+ background-size: $width-1x $height-1x;
+ }
+}
diff --git a/docs/_sass/basically-basic/mixins/_lists.scss b/docs/_sass/basically-basic/mixins/_lists.scss
new file mode 100644
index 0000000..2ca69a9
--- /dev/null
+++ b/docs/_sass/basically-basic/mixins/_lists.scss
@@ -0,0 +1,9 @@
+/* ==========================================================================
+ List Mixins
+ ========================================================================== */
+
+// Unstyled keeps list items block level, just removes default browser padding and list-style
+@mixin list-unstyled {
+ padding-left: 0;
+ list-style: none;
+}
diff --git a/docs/_sass/basically-basic/mixins/_text-truncate.scss b/docs/_sass/basically-basic/mixins/_text-truncate.scss
new file mode 100644
index 0000000..5277c90
--- /dev/null
+++ b/docs/_sass/basically-basic/mixins/_text-truncate.scss
@@ -0,0 +1,10 @@
+/* ==========================================================================
+ Text Truncate Mixin
+ Requires inline-block or block for proper styling
+ ========================================================================== */
+
+@mixin text-truncate() {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
diff --git a/docs/_sass/basically-basic/themes/_default.scss b/docs/_sass/basically-basic/themes/_default.scss
new file mode 100644
index 0000000..2f67753
--- /dev/null
+++ b/docs/_sass/basically-basic/themes/_default.scss
@@ -0,0 +1,5 @@
+/* ==========================================================================
+ Default theme skin
+ ========================================================================== */
+
+// Intentionally left blank
diff --git a/docs/_sass/basically-basic/themes/_night.scss b/docs/_sass/basically-basic/themes/_night.scss
new file mode 100644
index 0000000..7b18a8c
--- /dev/null
+++ b/docs/_sass/basically-basic/themes/_night.scss
@@ -0,0 +1,12 @@
+/* ==========================================================================
+ Night theme skin
+ ========================================================================== */
+
+/* Colors */
+$base-color: #252a34 !default;
+$text-color: #eaeaea !default;
+$accent-color: #00adb5 !default;
+$background-color: #252a34 !default;
+$code-background-color: #fff !default;
+$border-color: rgba($text-color, 0.5) !default;
+$overlay-color: #fff !default;
diff --git a/docs/_sass/basically-basic/themes/_plum.scss b/docs/_sass/basically-basic/themes/_plum.scss
new file mode 100644
index 0000000..75c573c
--- /dev/null
+++ b/docs/_sass/basically-basic/themes/_plum.scss
@@ -0,0 +1,12 @@
+/* ==========================================================================
+ Plum theme skin
+ ========================================================================== */
+
+/* Colors */
+$base-color: #561050 !default;
+$text-color: #35013f !default;
+$accent-color: #951556 !default;
+$background-color: #e9b5d2 !default;
+$code-background-color: #fff !default;
+$border-color: rgba($text-color, 0.5) !default;
+$overlay-color: #fff !default;
diff --git a/docs/_sass/basically-basic/themes/_sea.scss b/docs/_sass/basically-basic/themes/_sea.scss
new file mode 100644
index 0000000..d545f2b
--- /dev/null
+++ b/docs/_sass/basically-basic/themes/_sea.scss
@@ -0,0 +1,12 @@
+/* ==========================================================================
+ Sea theme skin
+ ========================================================================== */
+
+/* Colors */
+$base-color: #41506b !default;
+$text-color: #90f6d7 !default;
+$accent-color: #35bcbf !default;
+$background-color: #263849 !default;
+$code-background-color: #fff !default;
+$border-color: rgba($text-color, 0.5) !default;
+$overlay-color: #fff !default;
diff --git a/docs/_sass/basically-basic/themes/_soft.scss b/docs/_sass/basically-basic/themes/_soft.scss
new file mode 100644
index 0000000..cb3efa6
--- /dev/null
+++ b/docs/_sass/basically-basic/themes/_soft.scss
@@ -0,0 +1,12 @@
+/* ==========================================================================
+ Soft theme skin
+ ========================================================================== */
+
+/* Colors */
+$base-color: mix(#625772, #a9eee6, 75%) !default;
+$text-color: #625772 !default;
+$accent-color: #e85482 !default;
+$background-color: #fefaec !default;
+$code-background-color: #fff !default;
+$border-color: rgba($text-color, 0.5) !default;
+$overlay-color: #fff !default;
diff --git a/docs/_sass/basically-basic/themes/_steel.scss b/docs/_sass/basically-basic/themes/_steel.scss
new file mode 100644
index 0000000..b497a27
--- /dev/null
+++ b/docs/_sass/basically-basic/themes/_steel.scss
@@ -0,0 +1,12 @@
+/* ==========================================================================
+ Steel theme skin
+ ========================================================================== */
+
+/* Colors */
+$base-color: #3a4750 !default;
+$text-color: #303841 !default;
+$accent-color: #d72323 !default;
+$background-color: #eee !default;
+$code-background-color: #fff !default;
+$border-color: rgba($text-color, 0.25) !default;
+$overlay-color: #fff !default;
diff --git a/docs/_sass/basically-basic/utilities/_accessibility.scss b/docs/_sass/basically-basic/utilities/_accessibility.scss
new file mode 100644
index 0000000..f870ee2
--- /dev/null
+++ b/docs/_sass/basically-basic/utilities/_accessibility.scss
@@ -0,0 +1,54 @@
+/* ==========================================================================
+ Accessibility Modules
+ ========================================================================== */
+
+/* Skip links */
+.skip-links {
+ margin: 0;
+
+ li {
+ width: 0;
+ height: 0;
+ list-style: none;
+ }
+}
+
+/* Text meant only for screen readers */
+.screen-reader-text,
+.screen-reader-text span,
+.screen-reader-shortcut {
+ position: absolute !important;
+ width: 1px;
+ height: 1px;
+ clip: rect(0, 0, 0, 0);
+ border: 0;
+ overflow: hidden;
+
+ &:focus {
+ display: block;
+ top: 5px;
+ left: 5px;
+ width: auto;
+ height: auto;
+ padding: 0.75em 1em;
+ clip: auto !important;
+ border-radius: 0.125em;
+ background-color: $base-color;
+ color: #fff;
+ font-weight: bold;
+ line-height: normal;
+ text-decoration: none;
+ box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+ z-index: 100000;
+ }
+}
+
+.screen-reader-text:focus,
+.screen-reader-shortcut:focus {
+ width: auto;
+ height: auto;
+ clip: auto !important;
+ text-decoration: none;
+ box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+ z-index: 100000;
+}
diff --git a/docs/_sass/basically-basic/utilities/_align.scss b/docs/_sass/basically-basic/utilities/_align.scss
new file mode 100644
index 0000000..6c1156e
--- /dev/null
+++ b/docs/_sass/basically-basic/utilities/_align.scss
@@ -0,0 +1,64 @@
+/* ==========================================================================
+ Alignment
+ ========================================================================== */
+
+.align-baseline { vertical-align: baseline !important; } /* Browser default */
+.align-top { vertical-align: top !important; }
+.align-middle { vertical-align: middle !important; }
+.align-bottom { vertical-align: bottom !important; }
+.align-text-bottom { vertical-align: text-bottom !important; }
+.align-text-top { vertical-align: text-top !important; }
+
+/*
+ Image Alignment
+ ========================================================================== */
+
+.align-center,
+div.align-center,
+a img.align-center {
+ display: block;
+ margin-right: auto;
+ margin-left: auto;
+}
+
+figure.align-center {
+
+ img {
+ display: block;
+ margin-right: auto;
+ margin-left: auto;
+ }
+
+ figcaption {
+ text-align: center;
+ }
+}
+
+.align-right,
+a img.align-right {
+ margin-bottom: 1rem;
+ margin-left: 1rem;
+ float: right;
+}
+
+.align-left,
+a img.align-left {
+ margin-right: 1rem;
+ margin-bottom: 1rem;
+ float: left;
+}
+
+/*
+ Sidebar Pusher
+ ========================================================================== */
+
+.is--pushed {
+
+ @include breakpoint($medium) {
+ padding-left: $sidebar-width;
+ }
+
+ @include breakpoint($large) {
+ padding-left: (1.5 * $sidebar-width);
+ }
+}
diff --git a/docs/_sass/basically-basic/utilities/_clearfix.scss b/docs/_sass/basically-basic/utilities/_clearfix.scss
new file mode 100644
index 0000000..031b70c
--- /dev/null
+++ b/docs/_sass/basically-basic/utilities/_clearfix.scss
@@ -0,0 +1,7 @@
+//
+// Clearfix
+//
+
+.clearfix {
+ @include clearfix();
+}
diff --git a/docs/_sass/basically-basic/utilities/_float.scss b/docs/_sass/basically-basic/utilities/_float.scss
new file mode 100644
index 0000000..fdcb2a1
--- /dev/null
+++ b/docs/_sass/basically-basic/utilities/_float.scss
@@ -0,0 +1,7 @@
+/* ==========================================================================
+ Floats
+ ========================================================================== */
+
+.float-left { @include float-left; }
+.float-right { @include float-right; }
+.float-none { @include float-none; }
diff --git a/docs/_sass/basically-basic/utilities/_text.scss b/docs/_sass/basically-basic/utilities/_text.scss
new file mode 100644
index 0000000..0f53033
--- /dev/null
+++ b/docs/_sass/basically-basic/utilities/_text.scss
@@ -0,0 +1,28 @@
+/* ==========================================================================
+ Text
+ ========================================================================== */
+
+/*
+ Alignment
+ ========================================================================== */
+
+.text-justify { text-align: justify !important; }
+.text-nowrap { white-space: nowrap !important; }
+.text-left { text-align: left !important; }
+.text-right { text-align: right !important; }
+.text-center { text-align: center !important; }
+
+/*
+ Transformation
+ ========================================================================== */
+
+.text-lowercase { text-transform: lowercase !important; }
+.text-uppercase { text-transform: uppercase !important; }
+.text-capitalize { text-transform: capitalize !important; }
+.text-truncate { @include text-truncate; }
+
+/*
+ Sizing
+ ========================================================================== */
+
+.small { font-size: 80%; }
diff --git a/docs/_sass/basically-basic/vendor/_breakpoint.scss b/docs/_sass/basically-basic/vendor/_breakpoint.scss
new file mode 100644
index 0000000..2ede6b7
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/_breakpoint.scss
@@ -0,0 +1,114 @@
+//////////////////////////////
+// Default Variables
+//////////////////////////////
+$Breakpoint-Settings: (
+ 'default media': all,
+ 'default feature': min-width,
+ 'default pair': width,
+
+ 'force all media type': false,
+ 'to ems': false,
+ 'transform resolutions': true,
+
+ 'no queries': false,
+ 'no query fallbacks': false,
+
+ 'base font size': 16px,
+
+ 'legacy syntax': false
+);
+
+$breakpoint: () !default;
+
+//////////////////////////////
+// Imports
+//////////////////////////////
+@import "breakpoint/settings";
+@import 'breakpoint/context';
+@import 'breakpoint/helpers';
+@import 'breakpoint/parsers';
+@import 'breakpoint/no-query';
+
+@import 'breakpoint/respond-to';
+
+@import "breakpoint/legacy-settings";
+
+//////////////////////////////
+// Breakpoint Mixin
+//////////////////////////////
+
+@mixin breakpoint($query, $no-query: false) {
+ @include legacy-settings-warning;
+
+ // Reset contexts
+ @include private-breakpoint-reset-contexts();
+
+ $breakpoint: breakpoint($query, false);
+
+ $query-string: map-get($breakpoint, 'query');
+ $query-fallback: map-get($breakpoint, 'fallback');
+
+ $private-breakpoint-context-holder: map-get($breakpoint, 'context holder') !global;
+ $private-breakpoint-query-count: map-get($breakpoint, 'query count') !global;
+
+ // Allow for an as-needed override or usage of no query fallback.
+ @if $no-query != false {
+ $query-fallback: $no-query;
+ }
+
+ @if $query-fallback != false {
+ $context-setter: private-breakpoint-set-context('no-query', $query-fallback);
+ }
+
+ // Print Out Query String
+ @if not breakpoint-get('no queries') {
+ @media #{$query-string} {
+ @content;
+ }
+ }
+
+ @if breakpoint-get('no query fallbacks') != false or breakpoint-get('no queries') == true {
+
+ $type: type-of(breakpoint-get('no query fallbacks'));
+ $print: false;
+
+ @if ($type == 'bool') {
+ $print: true;
+ }
+ @else if ($type == 'string') {
+ @if $query-fallback == breakpoint-get('no query fallbacks') {
+ $print: true;
+ }
+ }
+ @else if ($type == 'list') {
+ @each $wrapper in breakpoint-get('no query fallbacks') {
+ @if $query-fallback == $wrapper {
+ $print: true;
+ }
+ }
+ }
+
+ // Write Fallback
+ @if ($query-fallback != false) and ($print == true) {
+ $type-fallback: type-of($query-fallback);
+
+ @if ($type-fallback != 'bool') {
+ #{$query-fallback} & {
+ @content;
+ }
+ }
+ @else {
+ @content;
+ }
+ }
+ }
+
+ @include private-breakpoint-reset-contexts();
+}
+
+
+@mixin mq($query, $no-query: false) {
+ @include breakpoint($query, $no-query) {
+ @content;
+ }
+}
diff --git a/docs/_sass/basically-basic/vendor/_su.scss b/docs/_sass/basically-basic/vendor/_su.scss
new file mode 100644
index 0000000..83386ad
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/_su.scss
@@ -0,0 +1,4 @@
+// Su
+// ==
+
+@import 'susy/su';
diff --git a/docs/_sass/basically-basic/vendor/_susy.scss b/docs/_sass/basically-basic/vendor/_susy.scss
new file mode 100644
index 0000000..224e98a
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/_susy.scss
@@ -0,0 +1,4 @@
+// Susy
+// ====
+
+@import 'susy/language/susy';
diff --git a/docs/_sass/basically-basic/vendor/_susyone.scss b/docs/_sass/basically-basic/vendor/_susyone.scss
new file mode 100644
index 0000000..5b934c6
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/_susyone.scss
@@ -0,0 +1,4 @@
+// Susy
+// ====
+
+@import 'susy/language/susyone';
diff --git a/docs/_sass/basically-basic/vendor/breakpoint/_context.scss b/docs/_sass/basically-basic/vendor/breakpoint/_context.scss
new file mode 100644
index 0000000..57947f5
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/breakpoint/_context.scss
@@ -0,0 +1,95 @@
+//////////////////////////////
+// Private Breakpoint Variables
+//////////////////////////////
+$private-breakpoint-context-holder: ();
+$private-breakpoint-query-count: 0 !default;
+
+//////////////////////////////
+// Breakpoint Has Context
+// Returns whether or not you are inside a Breakpoint query
+//////////////////////////////
+@function breakpoint-has-context() {
+ @if length($private-breakpoint-query-count) {
+ @return true;
+ }
+ @else {
+ @return false;
+ }
+}
+
+//////////////////////////////
+// Breakpoint Get Context
+// $feature: Input feature to get it's current MQ context. Returns false if no context
+//////////////////////////////
+@function breakpoint-get-context($feature) {
+ @if map-has-key($private-breakpoint-context-holder, $feature) {
+ $get: map-get($private-breakpoint-context-holder, $feature);
+ // Special handling of no-query from get side so /false/ prepends aren't returned
+ @if $feature == 'no-query' {
+ @if type-of($get) == 'list' and length($get) > 1 and nth($get, 1) == false {
+ $get: nth($get, length($get));
+ }
+ }
+ @return $get;
+ }
+ @else {
+ @if breakpoint-has-context() and $feature == 'media' {
+ @return breakpoint-get('default media');
+ }
+ @else {
+ @return false;
+ }
+ }
+}
+
+//////////////////////////////
+// Private function to set context
+//////////////////////////////
+@function private-breakpoint-set-context($feature, $value) {
+ @if $value == 'monochrome' {
+ $feature: 'monochrome';
+ }
+
+ $current: map-get($private-breakpoint-context-holder, $feature);
+ @if $current and length($current) == $private-breakpoint-query-count {
+ @warn "You have already queried against `#{$feature}`. Unexpected things may happen if you query against the same feature more than once in the same `and` query. Breakpoint is overwriting the current context with `#{$value}`";
+ }
+
+ @if not map-has-key($private-breakpoint-context-holder, $feature) {
+ $v-holder: ();
+ @for $i from 1 to $private-breakpoint-query-count {
+ @if $feature == 'media' {
+ $v-holder: append($v-holder, breakpoint-get('default media'));
+ }
+ @else {
+ $v-holder: append($v-holder, false);
+ }
+ }
+ $v-holder: append($v-holder, $value);
+ $private-breakpoint-context-holder: map-merge($private-breakpoint-context-holder, ($feature: $v-holder)) !global;
+ }
+ @else {
+ $v-holder: map-get($private-breakpoint-context-holder, $feature);
+ $length: length($v-holder);
+ @for $i from $length to $private-breakpoint-query-count - 1 {
+ @if $feature == 'media' {
+ $v-holder: append($v-holder, breakpoint-get('default media'));
+ }
+ @else {
+ $v-holder: append($v-holder, false);
+ }
+ }
+ $v-holder: append($v-holder, $value);
+ $private-breakpoint-context-holder: map-merge($private-breakpoint-context-holder, ($feature: $v-holder)) !global;
+ }
+
+ @return true;
+}
+
+//////////////////////////////
+// Private function to reset context
+//////////////////////////////
+@mixin private-breakpoint-reset-contexts {
+ $private-breakpoint-context-holder: () !global;
+ $private-breakpoint-query-count: 0 !global;
+}
\ No newline at end of file
diff --git a/docs/_sass/basically-basic/vendor/breakpoint/_helpers.scss b/docs/_sass/basically-basic/vendor/breakpoint/_helpers.scss
new file mode 100644
index 0000000..97e522d
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/breakpoint/_helpers.scss
@@ -0,0 +1,151 @@
+//////////////////////////////
+// Converts the input value to Base EMs
+//////////////////////////////
+@function breakpoint-to-base-em($value) {
+ $value-unit: unit($value);
+
+ // Will convert relative EMs into root EMs.
+ @if breakpoint-get('base font size') and type-of(breakpoint-get('base font size')) == 'number' and $value-unit == 'em' {
+ $base-unit: unit(breakpoint-get('base font size'));
+
+ @if $base-unit == 'px' or $base-unit == '%' or $base-unit == 'em' or $base-unit == 'pt' {
+ @return base-conversion($value) / base-conversion(breakpoint-get('base font size')) * 1em;
+ }
+ @else {
+ @warn '#{breakpoint-get(\'base font size\')} is not set in valid units for font size!';
+ @return false;
+ }
+ }
+ @else {
+ @return base-conversion($value);
+ }
+}
+
+@function base-conversion($value) {
+ $unit: unit($value);
+
+ @if $unit == 'px' {
+ @return $value / 16px * 1em;
+ }
+ @else if $unit == '%' {
+ @return $value / 100% * 1em;
+ }
+ @else if $unit == 'em' {
+ @return $value;
+ }
+ @else if $unit == 'pt' {
+ @return $value / 12pt * 1em;
+ }
+ @else {
+ @return $value;
+// @warn 'Everything is terrible! What have you done?!';
+ }
+}
+
+//////////////////////////////
+// Returns whether the feature can have a min/max pair
+//////////////////////////////
+$breakpoint-min-max-features: 'color',
+ 'color-index',
+ 'aspect-ratio',
+ 'device-aspect-ratio',
+ 'device-height',
+ 'device-width',
+ 'height',
+ 'monochrome',
+ 'resolution',
+ 'width';
+
+@function breakpoint-min-max($feature) {
+ @each $item in $breakpoint-min-max-features {
+ @if $feature == $item {
+ @return true;
+ }
+ }
+ @return false;
+}
+
+//////////////////////////////
+// Returns whether the feature can have a string value
+//////////////////////////////
+$breakpoint-string-features: 'orientation',
+ 'scan',
+ 'color',
+ 'aspect-ratio',
+ 'device-aspect-ratio',
+ 'pointer',
+ 'luminosity';
+
+@function breakpoint-string-value($feature) {
+ @each $item in $breakpoint-string-features {
+ @if breakpoint-min-max($item) {
+ @if $feature == 'min-#{$item}' or $feature == 'max-#{$item}' {
+ @return true;
+ }
+ }
+ @else if $feature == $item {
+ @return true;
+ }
+ }
+ @return false;
+}
+
+//////////////////////////////
+// Returns whether the feature is a media type
+//////////////////////////////
+$breakpoint-media-types: 'all',
+ 'braille',
+ 'embossed',
+ 'handheld',
+ 'print',
+ 'projection',
+ 'screen',
+ 'speech',
+ 'tty',
+ 'tv';
+
+@function breakpoint-is-media($feature) {
+ @each $media in $breakpoint-media-types {
+ @if ($feature == $media) or ($feature == 'not #{$media}') or ($feature == 'only #{$media}') {
+ @return true;
+ }
+ }
+
+ @return false;
+}
+
+//////////////////////////////
+// Returns whether the feature can stand alone
+//////////////////////////////
+$breakpoint-single-string-features: 'color',
+ 'color-index',
+ 'grid',
+ 'monochrome';
+
+@function breakpoint-single-string($feature) {
+ @each $item in $breakpoint-single-string-features {
+ @if $feature == $item {
+ @return true;
+ }
+ }
+ @return false;
+}
+
+//////////////////////////////
+// Returns whether the feature
+//////////////////////////////
+@function breakpoint-is-resolution($feature) {
+ $resolutions: 'device-pixel-ratio', 'dpr';
+
+ @if breakpoint-get('transform resolutions') {
+ $resolutions: append($resolutions, 'resolution');
+ }
+
+ @each $reso in $resolutions {
+ @if index($feature, $reso) or index($feature, 'min-#{$reso}') or index($feature, 'max-#{$reso}') {
+ @return true;
+ }
+ }
+
+ @return false;
+}
diff --git a/docs/_sass/basically-basic/vendor/breakpoint/_legacy-settings.scss b/docs/_sass/basically-basic/vendor/breakpoint/_legacy-settings.scss
new file mode 100644
index 0000000..e060ebe
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/breakpoint/_legacy-settings.scss
@@ -0,0 +1,50 @@
+@mixin legacy-settings-warning {
+ $legacyVars: (
+ 'default-media': 'default media',
+ 'default-feature': 'default feature',
+ 'force-media-all': 'force all media type',
+ 'to-ems': 'to ems',
+ 'resolutions': 'transform resolutions',
+ 'no-queries': 'no queries',
+ 'no-query-fallbacks': 'no query fallbacks',
+ 'base-font-size': 'base font size',
+ 'legacy-syntax': 'legacy syntax'
+ );
+
+ @each $legacy, $new in $legacyVars {
+ @if global-variable-exists('breakpoint-' + $legacy) {
+ @warn "In order to avoid variable namspace collisions, we have updated the way to change settings for Breakpoint. Please change all instances of `$breakpoint-#{$legacy}: {{setting}}` to `@include breakpoint-set('#{$new}', {{setting}})`. Variable settings, as well as this warning will be deprecated in a future release."
+ }
+ };
+
+ //////////////////////////////
+ // Hand correct each setting
+ //////////////////////////////
+ @if global-variable-exists('breakpoint-default-media') and $breakpoint-default-media != breakpoint-get('default media') {
+ @include breakpoint-set('default media', $breakpoint-default-media);
+ }
+ @if global-variable-exists('breakpoint-default-feature') and $breakpoint-default-feature != breakpoint-get('default feature') {
+ @include breakpoint-set('default feature', $breakpoint-default-feature);
+ }
+ @if global-variable-exists('breakpoint-force-media-all') and $breakpoint-force-media-all != breakpoint-get('force all media type') {
+ @include breakpoint-set('force all media type', $breakpoint-force-media-all);
+ }
+ @if global-variable-exists('breakpoint-to-ems') and $breakpoint-to-ems != breakpoint-get('to ems') {
+ @include breakpoint-set('to ems', $breakpoint-to-ems);
+ }
+ @if global-variable-exists('breakpoint-resolutions') and $breakpoint-resolutions != breakpoint-get('transform resolutions') {
+ @include breakpoint-set('transform resolutions', $breakpoint-resolutions);
+ }
+ @if global-variable-exists('breakpoint-no-queries') and $breakpoint-no-queries != breakpoint-get('no queries') {
+ @include breakpoint-set('no queries', $breakpoint-no-queries);
+ }
+ @if global-variable-exists('breakpoint-no-query-fallbacks') and $breakpoint-no-query-fallbacks != breakpoint-get('no query fallbacks') {
+ @include breakpoint-set('no query fallbacks', $breakpoint-no-query-fallbacks);
+ }
+ @if global-variable-exists('breakpoint-base-font-size') and $breakpoint-base-font-size != breakpoint-get('base font size') {
+ @include breakpoint-set('base font size', $breakpoint-base-font-size);
+ }
+ @if global-variable-exists('breakpoint-legacy-syntax') and $breakpoint-legacy-syntax != breakpoint-get('legacy syntax') {
+ @include breakpoint-set('legacy syntax', $breakpoint-legacy-syntax);
+ }
+}
\ No newline at end of file
diff --git a/docs/_sass/basically-basic/vendor/breakpoint/_no-query.scss b/docs/_sass/basically-basic/vendor/breakpoint/_no-query.scss
new file mode 100644
index 0000000..0b5a81f
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/breakpoint/_no-query.scss
@@ -0,0 +1,15 @@
+@function breakpoint-no-query($query) {
+ @if type-of($query) == 'list' {
+ $keyword: nth($query, 1);
+
+ @if type-of($keyword) == 'string' and ($keyword == 'no-query' or $keyword == 'no query' or $keyword == 'fallback') {
+ @return nth($query, 2);
+ }
+ @else {
+ @return false;
+ }
+ }
+ @else {
+ @return false;
+ }
+}
diff --git a/docs/_sass/basically-basic/vendor/breakpoint/_parsers.scss b/docs/_sass/basically-basic/vendor/breakpoint/_parsers.scss
new file mode 100644
index 0000000..f0b053f
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/breakpoint/_parsers.scss
@@ -0,0 +1,215 @@
+//////////////////////////////
+// Import Parser Pieces
+//////////////////////////////
+@import "parsers/query";
+@import "parsers/single";
+@import "parsers/double";
+@import "parsers/triple";
+@import "parsers/resolution";
+
+$Memo-Exists: function-exists(memo-get) and function-exists(memo-set);
+
+//////////////////////////////
+// Breakpoint Function
+//////////////////////////////
+@function breakpoint($query, $contexts...) {
+ $run: true;
+ $return: ();
+
+ // Grab the Memo Output if Memoization can be a thing
+ @if $Memo-Exists {
+ $return: memo-get(breakpoint, breakpoint $query $contexts);
+
+ @if $return != null {
+ $run: false;
+ }
+ }
+
+ @if not $Memo-Exists or $run {
+ // Internal Variables
+ $query-string: '';
+ $query-fallback: false;
+ $return: ();
+
+ // Reserve Global Private Breakpoint Context
+ $holder-context: $private-breakpoint-context-holder;
+ $holder-query-count: $private-breakpoint-query-count;
+
+ // Reset Global Private Breakpoint Context
+ $private-breakpoint-context-holder: () !global;
+ $private-breakpoint-query-count: 0 !global;
+
+
+ // Test to see if it's a comma-separated list
+ $or-list: if(list-separator($query) == 'comma', true, false);
+
+
+ @if ($or-list == false and breakpoint-get('legacy syntax') == false) {
+ $query-string: breakpoint-parse($query);
+ }
+ @else {
+ $length: length($query);
+
+ $last: nth($query, $length);
+ $query-fallback: breakpoint-no-query($last);
+
+ @if ($query-fallback != false) {
+ $length: $length - 1;
+ }
+
+ @if (breakpoint-get('legacy syntax') == true) {
+ $mq: ();
+
+ @for $i from 1 through $length {
+ $mq: append($mq, nth($query, $i), comma);
+ }
+
+ $query-string: breakpoint-parse($mq);
+ }
+ @else {
+ $query-string: '';
+ @for $i from 1 through $length {
+ $query-string: $query-string + if($i == 1, '', ', ') + breakpoint-parse(nth($query, $i));
+ }
+ }
+ }
+
+ $return: ('query': $query-string,
+ 'fallback': $query-fallback,
+ 'context holder': $private-breakpoint-context-holder,
+ 'query count': $private-breakpoint-query-count
+ );
+ @if length($contexts) > 0 and nth($contexts, 1) != false {
+ @if $query-fallback != false {
+ $context-setter: private-breakpoint-set-context('no-query', $query-fallback);
+ }
+ $context-map: ();
+ @each $context in $contexts {
+ $context-map: map-merge($context-map, ($context: breakpoint-get-context($context)));
+ }
+ $return: map-merge($return, (context: $context-map));
+ }
+
+ // Reset Global Private Breakpoint Context
+ $private-breakpoint-context-holder: () !global;
+ $private-breakpoint-query-count: 0 !global;
+
+ @if $Memo-Exists {
+ $holder: memo-set(breakpoint, breakpoint $query $contexts, $return);
+ }
+ }
+
+ @return $return;
+}
+
+//////////////////////////////
+// General Breakpoint Parser
+//////////////////////////////
+@function breakpoint-parse($query) {
+ // Increase number of 'and' queries
+ $private-breakpoint-query-count: $private-breakpoint-query-count + 1 !global;
+
+ // Set up Media Type
+ $query-print: '';
+
+ $force-all: ((breakpoint-get('force all media type') == true) and (breakpoint-get('default media') == 'all'));
+ $empty-media: true;
+ @if ($force-all == true) or (breakpoint-get('default media') != 'all') {
+ // Force the print of the default media type if (force all is true and default media type is all) or (default media type is not all)
+ $query-print: breakpoint-get('default media');
+ $empty-media: false;
+ }
+
+
+ $query-resolution: false;
+
+ $query-holder: breakpoint-parse-query($query);
+
+
+
+ // Loop over each parsed out query and write it to $query-print
+ $first: true;
+
+ @each $feature in $query-holder {
+ $length: length($feature);
+
+ // Parse a single feature
+ @if ($length == 1) {
+ // Feature is currently a list, grab the actual value
+ $feature: nth($feature, 1);
+
+ // Media Type must by convention be the first item, so it's safe to flat override $query-print, which right now should only be the default media type
+ @if (breakpoint-is-media($feature)) {
+ @if ($force-all == true) or ($feature != 'all') {
+ // Force the print of the default media type if (force all is true and default media type is all) or (default media type is not all)
+ $query-print: $feature;
+ $empty-media: false;
+
+ // Set Context
+ $context-setter: private-breakpoint-set-context(media, $query-print);
+ }
+ }
+ @else {
+ $parsed: breakpoint-parse-single($feature, $empty-media, $first);
+ $query-print: '#{$query-print} #{$parsed}';
+ $first: false;
+ }
+ }
+ // Parse a double feature
+ @else if ($length == 2) {
+ @if (breakpoint-is-resolution($feature) != false) {
+ $query-resolution: $feature;
+ }
+ @else {
+ $parsed: null;
+ // If it's a string/number pair,
+ // we check to see if one is a single-string value,
+ // then we parse it as a normal double
+ $alpha: nth($feature, 1);
+ $beta: nth($feature, 2);
+ @if breakpoint-single-string($alpha) or breakpoint-single-string($beta) {
+ $parsed: breakpoint-parse-single($alpha, $empty-media, $first);
+ $query-print: '#{$query-print} #{$parsed}';
+ $first: false;
+ $parsed: breakpoint-parse-single($beta, $empty-media, $first);
+ $query-print: '#{$query-print} #{$parsed}';
+ }
+ @else {
+ $parsed: breakpoint-parse-double($feature, $empty-media, $first);
+ $query-print: '#{$query-print} #{$parsed}';
+ $first: false;
+ }
+ }
+ }
+ // Parse a triple feature
+ @else if ($length == 3) {
+ $parsed: breakpoint-parse-triple($feature, $empty-media, $first);
+ $query-print: '#{$query-print} #{$parsed}';
+ $first: false;
+ }
+
+ }
+
+ @if ($query-resolution != false) {
+ $query-print: breakpoint-build-resolution($query-print, $query-resolution, $empty-media, $first);
+ }
+
+ // Loop through each feature that's been detected so far and append 'false' to the the value list to increment their counters
+ @each $f, $v in $private-breakpoint-context-holder {
+ $v-holder: $v;
+ $length: length($v-holder);
+ @if length($v-holder) < $private-breakpoint-query-count {
+ @for $i from $length to $private-breakpoint-query-count {
+ @if $f == 'media' {
+ $v-holder: append($v-holder, breakpoint-get('default media'));
+ }
+ @else {
+ $v-holder: append($v-holder, false);
+ }
+ }
+ }
+ $private-breakpoint-context-holder: map-merge($private-breakpoint-context-holder, ($f: $v-holder)) !global;
+ }
+
+ @return $query-print;
+}
diff --git a/docs/_sass/basically-basic/vendor/breakpoint/_respond-to.scss b/docs/_sass/basically-basic/vendor/breakpoint/_respond-to.scss
new file mode 100644
index 0000000..e2462c5
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/breakpoint/_respond-to.scss
@@ -0,0 +1,82 @@
+////////////////////////
+// Default the Breakpoints variable
+////////////////////////
+$breakpoints: () !default;
+$BREAKPOINTS: () !default;
+
+////////////////////////
+// Respond-to API Mixin
+////////////////////////
+@mixin respond-to($context, $no-query: false) {
+ @if length($breakpoints) > 0 and length($BREAKPOINTS) == 0 {
+ @warn "In order to avoid variable namespace collisions, we have updated the way to add breakpoints for respond-to. Please change all instances of `$breakpoints: add-breakpoint()` to `@include add-breakpoint()`. The `add-breakpoint()` function will be deprecated in a future release.";
+ $BREAKPOINTS: $breakpoints !global;
+ $breakpoints: () !global;
+ }
+
+ @if type-of($BREAKPOINTS) != 'map' {
+ // Just in case someone writes gibberish to the $breakpoints variable.
+ @warn "Your breakpoints aren't a map! `respond-to` expects a map. Please check the value of $BREAKPOINTS variable.";
+ @content;
+ }
+ @else if map-has-key($BREAKPOINTS, $context) {
+ @include breakpoint(map-get($BREAKPOINTS, $context), $no-query) {
+ @content;
+ }
+ }
+ @else if not map-has-key($BREAKPOINTS, $context) {
+ @warn "`#{$context}` isn't a defined breakpoint! Please add it using `$breakpoints: add-breakpoint(`#{$context}`, $value);`";
+ @content;
+ }
+ @else {
+ @warn "You haven't created any breakpoints yet! Make some already! `@include add-breakpoint($name, $bkpt)`";
+ @content;
+ }
+}
+
+//////////////////////////////
+// Add Breakpoint to Breakpoints
+// TODO: Remove function in next release
+//////////////////////////////
+@function add-breakpoint($name, $bkpt, $overwrite: false) {
+ $output: ($name: $bkpt);
+
+ @if length($breakpoints) == 0 {
+ @return $output;
+ }
+ @else {
+ @if map-has-key($breakpoints, $name) and $overwrite != true {
+ @warn "You already have a breakpoint named `#{$name}`, please choose another breakpoint name, or pass in `$overwrite: true` to overwrite the previous breakpoint.";
+ @return $breakpoints;
+ }
+ @else if not map-has-key($breakpoints, $name) or $overwrite == true {
+ @return map-merge($breakpoints, $output);
+ }
+ }
+}
+
+@mixin add-breakpoint($name, $bkpt, $overwrite: false) {
+ $output: ($name: $bkpt);
+
+ @if length($BREAKPOINTS) == 0 {
+ $BREAKPOINTS: $output !global;
+ }
+ @else {
+ @if map-has-key($BREAKPOINTS, $name) and $overwrite != true {
+ @warn "You already have a breakpoint named `#{$name}`, please choose another breakpoint name, or pass in `$overwrite: true` to overwrite the previous breakpoint.";
+ $BREAKPOINTS: $BREAKPOINTS !global;
+ }
+ @else if not map-has-key($BREAKPOINTS, $name) or $overwrite == true {
+ $BREAKPOINTS: map-merge($BREAKPOINTS, $output) !global;
+ }
+ }
+}
+
+@function get-breakpoint($name: false) {
+ @if $name == false {
+ @return $BREAKPOINTS;
+ }
+ @else {
+ @return map-get($BREAKPOINTS, $name);
+ }
+}
diff --git a/docs/_sass/basically-basic/vendor/breakpoint/_settings.scss b/docs/_sass/basically-basic/vendor/breakpoint/_settings.scss
new file mode 100644
index 0000000..05ee689
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/breakpoint/_settings.scss
@@ -0,0 +1,71 @@
+//////////////////////////////
+// Has Setting
+//////////////////////////////
+@function breakpoint-has($setting) {
+ @if map-has-key($breakpoint, $setting) {
+ @return true;
+ }
+ @else {
+ @return false;
+ }
+}
+
+//////////////////////////////
+// Get Settings
+//////////////////////////////
+@function breakpoint-get($setting) {
+ @if breakpoint-has($setting) {
+ @return map-get($breakpoint, $setting);
+ }
+ @else {
+ @return map-get($Breakpoint-Settings, $setting);
+ }
+}
+
+//////////////////////////////
+// Set Settings
+//////////////////////////////
+@function breakpoint-set($setting, $value) {
+ @if (str-index($setting, '-') or str-index($setting, '_')) and str-index($setting, ' ') == null {
+ @warn "Words in Breakpoint settings should be separated by spaces, not dashes or underscores. Please replace dashes and underscores between words with spaces. Settings will not work as expected until changed.";
+ }
+ $breakpoint: map-merge($breakpoint, ($setting: $value)) !global;
+ @return true;
+}
+
+@mixin breakpoint-change($setting, $value) {
+ $breakpoint-change: breakpoint-set($setting, $value);
+}
+
+@mixin breakpoint-set($setting, $value) {
+ @include breakpoint-change($setting, $value);
+}
+
+@mixin bkpt-change($setting, $value) {
+ @include breakpoint-change($setting, $value);
+}
+@mixin bkpt-set($setting, $value) {
+ @include breakpoint-change($setting, $value);
+}
+
+//////////////////////////////
+// Remove Setting
+//////////////////////////////
+@function breakpoint-reset($settings...) {
+ @if length($settings) == 1 {
+ $settings: nth($settings, 1);
+ }
+
+ @each $setting in $settings {
+ $breakpoint: map-remove($breakpoint, $setting) !global;
+ }
+ @return true;
+}
+
+@mixin breakpoint-reset($settings...) {
+ $breakpoint-reset: breakpoint-reset($settings);
+}
+
+@mixin bkpt-reset($settings...) {
+ $breakpoint-reset: breakpoint-reset($settings);
+}
\ No newline at end of file
diff --git a/docs/_sass/basically-basic/vendor/breakpoint/parsers/_double.scss b/docs/_sass/basically-basic/vendor/breakpoint/parsers/_double.scss
new file mode 100644
index 0000000..24580c1
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/breakpoint/parsers/_double.scss
@@ -0,0 +1,33 @@
+//////////////////////////////
+// Import Pieces
+//////////////////////////////
+@import "double/default-pair";
+@import "double/double-string";
+@import "double/default";
+
+@function breakpoint-parse-double($feature, $empty-media, $first) {
+ $parsed: '';
+ $leader: '';
+ // If we're forcing
+ @if not ($empty-media) or not ($first) {
+ $leader: 'and ';
+ }
+
+ $first: nth($feature, 1);
+ $second: nth($feature, 2);
+
+ // If we've got two numbers, we know we need to use the default pair because there are no media queries that has a media feature that is a number
+ @if type-of($first) == 'number' and type-of($second) == 'number' {
+ $parsed: breakpoint-parse-default-pair($first, $second);
+ }
+ // If they are both strings, we send it through the string parser
+ @else if type-of($first) == 'string' and type-of($second) == 'string' {
+ $parsed: breakpoint-parse-double-string($first, $second);
+ }
+ // If it's a string/number pair, we parse it as a normal double
+ @else {
+ $parsed: breakpoint-parse-double-default($first, $second);
+ }
+
+ @return $leader + $parsed;
+}
diff --git a/docs/_sass/basically-basic/vendor/breakpoint/parsers/_query.scss b/docs/_sass/basically-basic/vendor/breakpoint/parsers/_query.scss
new file mode 100644
index 0000000..b138b39
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/breakpoint/parsers/_query.scss
@@ -0,0 +1,82 @@
+@function breakpoint-parse-query($query) {
+ // Parse features out of an individual query
+ $feature-holder: ();
+ $query-holder: ();
+ $length: length($query);
+
+ @if $length == 2 {
+ // If we've got a string/number, number/string, check to see if it's a valid string/number pair or two singles
+ @if (type-of(nth($query, 1)) == 'string' and type-of(nth($query, 2)) == 'number') or (type-of(nth($query, 1)) == 'number' and type-of(nth($query, 2)) == 'string') {
+
+ $number: '';
+ $value: '';
+
+ @if type-of(nth($query, 1)) == 'string' {
+ $number: nth($query, 2);
+ $value: nth($query, 1);
+ }
+ @else {
+ $number: nth($query, 1);
+ $value: nth($query, 2);
+ }
+
+ // If the string value can be a single value, check to see if the number passed in is a valid input for said single value. Fortunately, all current single-value options only accept unitless numbers, so this check is easy.
+ @if breakpoint-single-string($value) {
+ @if unitless($number) {
+ $feature-holder: append($value, $number, space);
+ $query-holder: append($query-holder, $feature-holder, comma);
+ @return $query-holder;
+ }
+ }
+ // If the string is a media type, split the query
+ @if breakpoint-is-media($value) {
+ $query-holder: append($query-holder, nth($query, 1));
+ $query-holder: append($query-holder, nth($query, 2));
+ @return $query-holder;
+ }
+ // If it's not a single feature, we're just going to assume it's a proper string/value pair, and roll with it.
+ @else {
+ $feature-holder: append($value, $number, space);
+ $query-holder: append($query-holder, $feature-holder, comma);
+ @return $query-holder;
+ }
+
+ }
+ // If they're both numbers, we assume it's a double and roll with that
+ @else if (type-of(nth($query, 1)) == 'number' and type-of(nth($query, 2)) == 'number') {
+ $feature-holder: append(nth($query, 1), nth($query, 2), space);
+ $query-holder: append($query-holder, $feature-holder, comma);
+ @return $query-holder;
+ }
+ // If they're both strings and neither are singles, we roll with that.
+ @else if (type-of(nth($query, 1)) == 'string' and type-of(nth($query, 2)) == 'string') {
+ @if not breakpoint-single-string(nth($query, 1)) and not breakpoint-single-string(nth($query, 2)) {
+ $feature-holder: append(nth($query, 1), nth($query, 2), space);
+ $query-holder: append($query-holder, $feature-holder, comma);
+ @return $query-holder;
+ }
+ }
+ }
+ @else if $length == 3 {
+ // If we've got three items and none is a list, we check to see
+ @if type-of(nth($query, 1)) != 'list' and type-of(nth($query, 2)) != 'list' and type-of(nth($query, 3)) != 'list' {
+ // If none of the items are single string values and none of the values are media values, we're good.
+ @if (not breakpoint-single-string(nth($query, 1)) and not breakpoint-single-string(nth($query, 2)) and not breakpoint-single-string(nth($query, 3))) and ((not breakpoint-is-media(nth($query, 1)) and not breakpoint-is-media(nth($query, 2)) and not breakpoint-is-media(nth($query, 3)))) {
+ $feature-holder: append(nth($query, 1), nth($query, 2), space);
+ $feature-holder: append($feature-holder, nth($query, 3), space);
+ $query-holder: append($query-holder, $feature-holder, comma);
+ @return $query-holder;
+ }
+ // let's check to see if the first item is a media type
+ @else if breakpoint-is-media(nth($query, 1)) {
+ $query-holder: append($query-holder, nth($query, 1));
+ $feature-holder: append(nth($query, 2), nth($query, 3), space);
+ $query-holder: append($query-holder, $feature-holder);
+ @return $query-holder;
+ }
+ }
+ }
+
+ // If it's a single item, or if it's not a special case double or triple, we can simply return the query.
+ @return $query;
+}
diff --git a/docs/_sass/basically-basic/vendor/breakpoint/parsers/_resolution.scss b/docs/_sass/basically-basic/vendor/breakpoint/parsers/_resolution.scss
new file mode 100644
index 0000000..19769ad
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/breakpoint/parsers/_resolution.scss
@@ -0,0 +1,31 @@
+@import "resolution/resolution";
+
+@function breakpoint-build-resolution($query-print, $query-resolution, $empty-media, $first) {
+ $leader: '';
+ // If we're forcing
+ @if not ($empty-media) or not ($first) {
+ $leader: 'and ';
+ }
+
+ @if breakpoint-get('transform resolutions') and $query-resolution {
+ $resolutions: breakpoint-make-resolutions($query-resolution);
+ $length: length($resolutions);
+ $query-holder: '';
+
+ @for $i from 1 through $length {
+ $query: '#{$query-print} #{$leader}#{nth($resolutions, $i)}';
+ @if $i == 1 {
+ $query-holder: $query;
+ }
+ @else {
+ $query-holder: '#{$query-holder}, #{$query}';
+ }
+ }
+
+ @return $query-holder;
+ }
+ @else {
+ // Return with attached resolution
+ @return $query-print;
+ }
+}
diff --git a/docs/_sass/basically-basic/vendor/breakpoint/parsers/_single.scss b/docs/_sass/basically-basic/vendor/breakpoint/parsers/_single.scss
new file mode 100644
index 0000000..d9fd764
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/breakpoint/parsers/_single.scss
@@ -0,0 +1,26 @@
+//////////////////////////////
+// Import Pieces
+//////////////////////////////
+@import "single/default";
+
+@function breakpoint-parse-single($feature, $empty-media, $first) {
+ $parsed: '';
+ $leader: '';
+ // If we're forcing
+ @if not ($empty-media) or not ($first) {
+ $leader: 'and ';
+ }
+
+ // If it's a single feature that can stand alone, we let it
+ @if (breakpoint-single-string($feature)) {
+ $parsed: $feature;
+ // Set Context
+ $context-setter: private-breakpoint-set-context($feature, $feature);
+ }
+ // If it's not a stand alone feature, we pass it off to the default handler.
+ @else {
+ $parsed: breakpoint-parse-default($feature);
+ }
+
+ @return $leader + '(' + $parsed + ')';
+}
diff --git a/docs/_sass/basically-basic/vendor/breakpoint/parsers/_triple.scss b/docs/_sass/basically-basic/vendor/breakpoint/parsers/_triple.scss
new file mode 100644
index 0000000..e273206
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/breakpoint/parsers/_triple.scss
@@ -0,0 +1,36 @@
+//////////////////////////////
+// Import Pieces
+//////////////////////////////
+@import "triple/default";
+
+@function breakpoint-parse-triple($feature, $empty-media, $first) {
+ $parsed: '';
+ $leader: '';
+
+ // If we're forcing
+ @if not ($empty-media) or not ($first) {
+ $leader: 'and ';
+ }
+
+ // separate the string features from the value numbers
+ $string: null;
+ $numbers: null;
+ @each $val in $feature {
+ @if type-of($val) == string {
+ $string: $val;
+ }
+ @else {
+ @if type-of($numbers) == 'null' {
+ $numbers: $val;
+ }
+ @else {
+ $numbers: append($numbers, $val);
+ }
+ }
+ }
+
+ $parsed: breakpoint-parse-triple-default($string, nth($numbers, 1), nth($numbers, 2));
+
+ @return $leader + $parsed;
+
+}
diff --git a/docs/_sass/basically-basic/vendor/breakpoint/parsers/double/_default-pair.scss b/docs/_sass/basically-basic/vendor/breakpoint/parsers/double/_default-pair.scss
new file mode 100644
index 0000000..f88432c
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/breakpoint/parsers/double/_default-pair.scss
@@ -0,0 +1,21 @@
+@function breakpoint-parse-default-pair($first, $second) {
+ $default: breakpoint-get('default pair');
+ $min: '';
+ $max: '';
+
+ // Sort into min and max
+ $min: min($first, $second);
+ $max: max($first, $second);
+
+ // Set Context
+ $context-setter: private-breakpoint-set-context(min-#{$default}, $min);
+ $context-setter: private-breakpoint-set-context(max-#{$default}, $max);
+
+ // Make them EMs if need be
+ @if (breakpoint-get('to ems') == true) {
+ $min: breakpoint-to-base-em($min);
+ $max: breakpoint-to-base-em($max);
+ }
+
+ @return '(min-#{$default}: #{$min}) and (max-#{$default}: #{$max})';
+}
diff --git a/docs/_sass/basically-basic/vendor/breakpoint/parsers/double/_default.scss b/docs/_sass/basically-basic/vendor/breakpoint/parsers/double/_default.scss
new file mode 100644
index 0000000..73190ed
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/breakpoint/parsers/double/_default.scss
@@ -0,0 +1,22 @@
+@function breakpoint-parse-double-default($first, $second) {
+ $feature: '';
+ $value: '';
+
+ @if type-of($first) == 'string' {
+ $feature: $first;
+ $value: $second;
+ }
+ @else {
+ $feature: $second;
+ $value: $first;
+ }
+
+ // Set Context
+ $context-setter: private-breakpoint-set-context($feature, $value);
+
+ @if (breakpoint-get('to ems') == true) {
+ $value: breakpoint-to-base-em($value);
+ }
+
+ @return '(#{$feature}: #{$value})'
+}
diff --git a/docs/_sass/basically-basic/vendor/breakpoint/parsers/double/_double-string.scss b/docs/_sass/basically-basic/vendor/breakpoint/parsers/double/_double-string.scss
new file mode 100644
index 0000000..c6fd0cb
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/breakpoint/parsers/double/_double-string.scss
@@ -0,0 +1,22 @@
+@function breakpoint-parse-double-string($first, $second) {
+ $feature: '';
+ $value: '';
+
+ // Test to see which is the feature and which is the value
+ @if (breakpoint-string-value($first) == true) {
+ $feature: $first;
+ $value: $second;
+ }
+ @else if (breakpoint-string-value($second) == true) {
+ $feature: $second;
+ $value: $first;
+ }
+ @else {
+ @warn "Neither #{$first} nor #{$second} is a valid media query name.";
+ }
+
+ // Set Context
+ $context-setter: private-breakpoint-set-context($feature, $value);
+
+ @return '(#{$feature}: #{$value})';
+}
\ No newline at end of file
diff --git a/docs/_sass/basically-basic/vendor/breakpoint/parsers/resolution/_resolution.scss b/docs/_sass/basically-basic/vendor/breakpoint/parsers/resolution/_resolution.scss
new file mode 100644
index 0000000..3680421
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/breakpoint/parsers/resolution/_resolution.scss
@@ -0,0 +1,60 @@
+@function breakpoint-make-resolutions($resolution) {
+ $length: length($resolution);
+
+ $output: ();
+
+ @if $length == 2 {
+ $feature: '';
+ $value: '';
+
+ // Find which is number
+ @if type-of(nth($resolution, 1)) == 'number' {
+ $value: nth($resolution, 1);
+ }
+ @else {
+ $value: nth($resolution, 2);
+ }
+
+ // Determine min/max/standard
+ @if index($resolution, 'min-resolution') {
+ $feature: 'min-';
+ }
+ @else if index($resolution, 'max-resolution') {
+ $feature: 'max-';
+ }
+
+ $standard: '(#{$feature}resolution: #{$value})';
+
+ // If we're not dealing with dppx,
+ @if unit($value) != 'dppx' {
+ $base: 96dpi;
+ @if unit($value) == 'dpcm' {
+ $base: 243.84dpcm;
+ }
+ // Write out feature tests
+ $webkit: '';
+ $moz: '';
+ $webkit: '(-webkit-#{$feature}device-pixel-ratio: #{$value / $base})';
+ $moz: '(#{$feature}-moz-device-pixel-ratio: #{$value / $base})';
+ // Append to output
+ $output: append($output, $standard, space);
+ $output: append($output, $webkit, space);
+ $output: append($output, $moz, space);
+ }
+ @else {
+ $webkit: '';
+ $moz: '';
+ $webkit: '(-webkit-#{$feature}device-pixel-ratio: #{$value / 1dppx})';
+ $moz: '(#{$feature}-moz-device-pixel-ratio: #{$value / 1dppx})';
+ $fallback: '(#{$feature}resolution: #{$value / 1dppx * 96dpi})';
+ // Append to output
+ $output: append($output, $standard, space);
+ $output: append($output, $webkit, space);
+ $output: append($output, $moz, space);
+ $output: append($output, $fallback, space);
+ }
+
+ }
+
+ @return $output;
+}
diff --git a/docs/_sass/basically-basic/vendor/breakpoint/parsers/single/_default.scss b/docs/_sass/basically-basic/vendor/breakpoint/parsers/single/_default.scss
new file mode 100644
index 0000000..503ef42
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/breakpoint/parsers/single/_default.scss
@@ -0,0 +1,13 @@
+@function breakpoint-parse-default($feature) {
+ $default: breakpoint-get('default feature');
+
+ // Set Context
+ $context-setter: private-breakpoint-set-context($default, $feature);
+
+ @if (breakpoint-get('to ems') == true) and (type-of($feature) == 'number') {
+ @return '#{$default}: #{breakpoint-to-base-em($feature)}';
+ }
+ @else {
+ @return '#{$default}: #{$feature}';
+ }
+}
diff --git a/docs/_sass/basically-basic/vendor/breakpoint/parsers/triple/_default.scss b/docs/_sass/basically-basic/vendor/breakpoint/parsers/triple/_default.scss
new file mode 100644
index 0000000..7fa418d
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/breakpoint/parsers/triple/_default.scss
@@ -0,0 +1,18 @@
+@function breakpoint-parse-triple-default($feature, $first, $second) {
+
+ // Sort into min and max
+ $min: min($first, $second);
+ $max: max($first, $second);
+
+ // Set Context
+ $context-setter: private-breakpoint-set-context(min-#{$feature}, $min);
+ $context-setter: private-breakpoint-set-context(max-#{$feature}, $max);
+
+ // Make them EMs if need be
+ @if (breakpoint-get('to ems') == true) {
+ $min: breakpoint-to-base-em($min);
+ $max: breakpoint-to-base-em($max);
+ }
+
+ @return '(min-#{$feature}: #{$min}) and (max-#{$feature}: #{$max})';
+}
diff --git a/docs/_sass/basically-basic/vendor/susy/_su.scss b/docs/_sass/basically-basic/vendor/susy/_su.scss
new file mode 100644
index 0000000..a145415
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/susy/_su.scss
@@ -0,0 +1,7 @@
+// Su
+// ==
+
+@import "su/utilities";
+@import "su/settings";
+@import "su/validation";
+@import "su/grid";
diff --git a/docs/_sass/basically-basic/vendor/susy/language/_susy.scss b/docs/_sass/basically-basic/vendor/susy/language/_susy.scss
new file mode 100644
index 0000000..0ee9cae
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/susy/language/_susy.scss
@@ -0,0 +1,24 @@
+// Susy Next Syntax
+// ================
+
+$susy-version: 2.1;
+
+@import "../su";
+@import "../output/float";
+
+@import "susy/settings";
+@import "susy/validation";
+@import "susy/grids";
+@import "susy/box-sizing";
+@import "susy/context";
+@import "susy/background";
+@import "susy/container";
+@import "susy/span";
+@import "susy/gutters";
+@import "susy/isolate";
+@import "susy/gallery";
+@import "susy/rows";
+@import "susy/margins";
+@import "susy/padding";
+@import "susy/bleed";
+@import "susy/breakpoint-plugin";
diff --git a/docs/_sass/basically-basic/vendor/susy/language/_susyone.scss b/docs/_sass/basically-basic/vendor/susy/language/_susyone.scss
new file mode 100644
index 0000000..a783d3a
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/susy/language/_susyone.scss
@@ -0,0 +1,13 @@
+// ---------------------------------------------------------------------------
+// Partials
+
+$susy-version: 1.5;
+
+@import "susyone/settings";
+@import "susyone/functions";
+@import "susyone/grid";
+@import "susyone/isolation";
+@import "susyone/padding";
+@import "susyone/margin";
+@import "susyone/media";
+@import "susyone/background";
diff --git a/docs/_sass/basically-basic/vendor/susy/language/susy/_background.scss b/docs/_sass/basically-basic/vendor/susy/language/susy/_background.scss
new file mode 100644
index 0000000..d39dc72
--- /dev/null
+++ b/docs/_sass/basically-basic/vendor/susy/language/susy/_background.scss
@@ -0,0 +1,385 @@
+// Background Grid Syntax
+// ======================
+
+$susy-overlay-grid-head-exists: false;
+
+
+// Show Grid/s
+// -----------
+// Show grid on any element using either background or overlay.
+// - [$grid] :
+@mixin show-grid(
+ $grid: $susy
+) {
+ $inspect: $grid;
+ $_output: debug-get(output, $grid);
+
+ @include susy-inspect(show-grid, $inspect);
+ @if $_output == overlay and susy-get(debug image, $grid) != hide {
+ @include overlay-grid($grid);
+ } @else {
+ @include background-grid($grid);
+ }
+}
+
+@mixin show-grids(
+ $grid: $susy
+) {
+ @include show-grid($grid);
+}
+
+// Background Grid
+// ---------------
+// Show a grid background on any element.
+// - [$grid] :
+@mixin background-grid(
+ $grid: $susy
+) {
+ $inspect : $grid;
+ $_output : get-background($grid);
+
+ @if length($_output) > 0 {
+ $_flow: susy-get(flow, $grid);
+
+ $_image: ();
+ @each $name, $layer in map-get($_output, image) {
+ $_direction: if($name == baseline, to bottom, to to($_flow));
+ $_image: append($_image, linear-gradient($_direction, $layer), comma);
+ }
+ $_output: map-merge($_output, (image: $_image));
+
+ @include background-grid-output($_output...);
+ @include susy-inspect(background-grid, $inspect);
+ }
+}
+
+
+// Overlay Grid
+// ------------
+// Generate an icon to trigger grid-overlays on any given elements.
+// $grids... : [] [, ]*
+@mixin overlay-grid (
+ $grid: $susy
+) {
+ @if not($susy-overlay-grid-head-exists) {
+ @at-root head { @include overlay-head($grid); }
+ @at-root head:before { @include overlay-trigger; }
+ @at-root head:hover { @include overlay-trigger-hover; }
+ $susy-overlay-grid-head-exists: true !global;
+ }
+
+ head:hover ~ &,
+ head:hover ~ body & {
+ position: relative;
+ &:before {
+ @include grid-overlay-base;
+ @include background-grid($grid);
+ }
+ }
+}
+
+
+// [Private] Overlay Trigger
+// -------------------------
+@mixin overlay-trigger {
+ content: "|||";
+ display: block;
+ padding: 5px 10px;
+ font: {
+ family: sans-serif;
+ size: 16px;
+ weight: bold;
+ }
+}
+
+
+// [Private] Overlay Trigger Hover
+// -------------------------------
+@mixin overlay-trigger-hover {
+ background: rgba(white, .5);
+ color: red;
+}
+
+
+// [Private] Overlay Head
+// ----------------------
+// styles to create grid overlay toggle
+@mixin overlay-head (
+ $grid: $susy
+) {
+ $_toggle: debug-get(toggle, $grid);
+ $_horz: null;
+ $_vert: null;
+
+ @each $side in $_toggle {
+ $_horz: if($side == left or $side == right, $side, $_horz);
+ $_vert: if($side == top or $side == bottom, $side, $_vert);
+ }
+
+ display: block;
+ position: fixed;
+ #{$_horz}: 10px;
+ #{$_vert}: 10px;
+ z-index: 999;
+ color: #333;
+ background: rgba(white, .25);
+}
+
+
+// [Private] Grid Overlay Base
+// ---------------------------
+// Base styles for generating a grid overlay
+@mixin grid-overlay-base() {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ content: " ";
+ z-index: 998;
+}
+
+
+// Get Symmetrical Background
+// --------------------------
+// - $grid: