├── .bowerrc
├── .editorconfig
├── .gitattributes
├── .gitignore
├── .jshintrc
├── .ordentlich.json
├── Ordentlich-Theme-Shot.jpg
├── README.md
├── app
    ├── assets
    │   ├── css
    │   │   ├── base
    │   │   │   ├── _base.scss
    │   │   │   ├── _buttons.scss
    │   │   │   ├── _forms.scss
    │   │   │   ├── _grid-settings.scss
    │   │   │   ├── _lists.scss
    │   │   │   ├── _tables.scss
    │   │   │   ├── _typography.scss
    │   │   │   └── _variables.scss
    │   │   ├── footer.scss
    │   │   ├── header.scss
    │   │   ├── home.scss
    │   │   ├── navigation.scss
    │   │   ├── pagination.scss
    │   │   ├── post.scss
    │   │   └── screen.scss
    │   ├── images
    │   │   ├── arrow_down.png
    │   │   └── favicon.ico
    │   └── js
    │   │   ├── highlight.pack.js
    │   │   └── main.js
    ├── default.hbs
    ├── index.hbs
    ├── package.json
    ├── partials
    │   ├── loop.hbs
    │   └── navigation.hbs
    ├── post.hbs
    └── robots.txt
├── bower.json
├── gulpfile.js
├── package.json
└── test
    ├── .bowerrc
    ├── bower.json
    ├── index.html
    └── spec
        └── test.js


/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 |   "directory": "bower_components"
3 | }
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig helps developers define and maintain consistent
 2 | # coding styles between different editors and IDEs
 3 | # editorconfig.org
 4 | 
 5 | root = true
 6 | 
 7 | 
 8 | [*]
 9 | 
10 | # change these settings to your own preference
11 | indent_style = space
12 | indent_size = 2
13 | 
14 | # we recommend you to keep these unchanged
15 | end_of_line = lf
16 | charset = utf-8
17 | trim_trailing_whitespace = true
18 | insert_final_newline = true
19 | 
20 | [*.md]
21 | trim_trailing_whitespace = false
22 | 
23 | [{package,bower}.json]
24 | indent_style = space
25 | indent_size = 2
26 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | ordentlich
3 | .tmp
4 | .sass-cache
5 | bower_components
6 | test/bower_components
7 | gh-pages/
8 | 


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "browser": true,
 3 |   "node": true,
 4 |   "esnext": true,
 5 |   "bitwise": true,
 6 |   "camelcase": true,
 7 |   "curly": true,
 8 |   "eqeqeq": true,
 9 |   "immed": true,
10 |   "indent": 2,
11 |   "latedef": true,
12 |   "newcap": true,
13 |   "noarg": true,
14 |   "quotmark": "single",
15 |   "undef": true,
16 |   "unused": true,
17 |   "strict": true,
18 |   "jquery": true
19 | }
20 | 


--------------------------------------------------------------------------------
/.ordentlich.json:
--------------------------------------------------------------------------------
1 | {
2 |   "generator-mocha": {}
3 | }


--------------------------------------------------------------------------------
/Ordentlich-Theme-Shot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/happy-coding/ordentlich/e6d4a37b32b6c10ec3a51a66d3e719bca874a88b/Ordentlich-Theme-Shot.jpg


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Ordentlich Ghost Theme
 2 | 
 3 | Just clone the repository and run the following commands.
 4 | 
 5 | ```
 6 | npm install
 7 | bower install
 8 | gulp build
 9 | ```
10 | 
11 | Final theme is located in the `ordentlich` folder and can be copied to the Ghost `content/themes` folder.
12 | 
13 | To continuously monitor changes in your files run
14 | 
15 | `gulp watch`
16 | 
17 | ## Gulp & Bower installation
18 | 
19 | To install `bower` run
20 | 
21 | `npm install -g bower`
22 | 
23 | for `gulp`
24 | 
25 | `npm install -g gulp`
26 | 
27 | ## Demo & Examples
28 | 
29 | The following pages use this theme for example:
30 | 
31 | - [Coding w/ Passion Magazin](http://mag.codingwithpassion.com/)
32 | 
33 | ### Screenshot
34 | 
35 | This is an example Screenshot of the Ordentlich theme
36 | 
37 | ![](https://github.com/happy-coding/ordentlich/blob/master/Ordentlich-Theme-Shot.jpg)
38 | 
39 | # Feedback
40 | 
41 | [You can leave us feedback](http://happy-coding.org/portfolio/ordentlich-a-terrific-neat-ghost-theme/)
42 | 
43 | # Copyright & License
44 | 
45 | Copyright (C) 2015 HAPPY CODING - Released under the MIT License.
46 | 
47 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
48 | 
49 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
50 | 
51 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
52 | 


--------------------------------------------------------------------------------
/app/assets/css/base/_base.scss:
--------------------------------------------------------------------------------
 1 | // Bitters 1.0.0
 2 | // http://bitters.bourbon.io
 3 | // Copyright 2013-2015 thoughtbot, inc.
 4 | // MIT License
 5 | 
 6 | @import "variables";
 7 | 
 8 | // Neat Settings -- uncomment if using Neat -- must be imported before Neat
 9 | // @import "grid-settings";
10 | 
11 | @import "buttons";
12 | @import "forms";
13 | @import "lists";
14 | @import "tables";
15 | @import "typography";
16 | 


--------------------------------------------------------------------------------
/app/assets/css/base/_buttons.scss:
--------------------------------------------------------------------------------
 1 | #{$all-button-inputs},
 2 | button {
 3 |   @include appearance(none);
 4 |   -webkit-font-smoothing: antialiased;
 5 |   background-color: #FFF;
 6 |   border-radius: $base-border-radius;
 7 |   border: 1px solid $light-gray;
 8 |   color: $dark-blue;
 9 |   cursor: pointer;
10 |   display: inline-block;
11 |   font-family: $base-font-family;
12 |   font-size: $base-font-size;
13 |   font-weight: 300;
14 |   line-height: 1;
15 |   padding: 0.75em 1em;
16 |   text-decoration: none;
17 |   user-select: none;
18 |   vertical-align: middle;
19 |   white-space: nowrap;
20 | 
21 |   &:hover,
22 |   &:focus {
23 |     background-color: darken($action-color, 15%);
24 |     color: #fff;
25 |   }
26 | 
27 |   &:disabled {
28 |     cursor: not-allowed;
29 |     opacity: 0.5;
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/app/assets/css/base/_forms.scss:
--------------------------------------------------------------------------------
 1 | fieldset {
 2 |   background-color: lighten($base-border-color, 10%);
 3 |   border: $base-border;
 4 |   margin: 0 0 $small-spacing;
 5 |   padding: $base-spacing;
 6 | }
 7 | 
 8 | input,
 9 | label,
10 | select {
11 |   display: block;
12 |   font-family: $base-font-family;
13 |   font-size: $base-font-size;
14 | }
15 | 
16 | label {
17 |   font-weight: 600;
18 |   margin-bottom: $small-spacing / 2;
19 | 
20 |   &.required::after {
21 |     content: "*";
22 |   }
23 | 
24 |   abbr {
25 |     display: none;
26 |   }
27 | }
28 | 
29 | #{$all-text-inputs},
30 | select[multiple=multiple],
31 | textarea {
32 |   background-color: $base-background-color;
33 |   border: $base-border;
34 |   border-radius: $base-border-radius;
35 |   box-shadow: $form-box-shadow;
36 |   box-sizing: border-box;
37 |   font-family: $base-font-family;
38 |   font-size: $base-font-size;
39 |   margin-bottom: $base-spacing / 2;
40 |   padding: $base-spacing / 3;
41 |   transition: border-color;
42 |   width: 100%;
43 | 
44 |   &:hover {
45 |     border-color: darken($base-border-color, 10%);
46 |   }
47 | 
48 |   &:focus {
49 |     border-color: $action-color;
50 |     box-shadow: $form-box-shadow-focus;
51 |     outline: none;
52 |   }
53 | }
54 | 
55 | textarea {
56 |   resize: vertical;
57 | }
58 | 
59 | input[type="search"] {
60 |   @include appearance(none);
61 | }
62 | 
63 | input[type="checkbox"],
64 | input[type="radio"] {
65 |   display: inline;
66 |   margin-right: $small-spacing / 2;
67 | }
68 | 
69 | input[type="file"] {
70 |   padding-bottom: $small-spacing;
71 |   width: 100%;
72 | }
73 | 
74 | select {
75 |   margin-bottom: $base-spacing;
76 |   max-width: 100%;
77 |   width: auto;
78 | }
79 | 


--------------------------------------------------------------------------------
/app/assets/css/base/_grid-settings.scss:
--------------------------------------------------------------------------------
 1 | @import "bower_components/neat/app/assets/stylesheets/_neat-helpers.scss";
 2 | 
 3 | // Neat Overrides
 4 | // $column: 90px;
 5 | // $gutter: 30px;
 6 | // $grid-columns: 12;
 7 | // $max-width: em(1088);
 8 | 
 9 | // Neat Breakpoints
10 | $medium-screen: em(640);
11 | $large-screen: em(860);
12 | 
13 | $medium-screen-up: new-breakpoint(min-width $medium-screen 4);
14 | $large-screen-up: new-breakpoint(min-width $large-screen 8);
15 | 


--------------------------------------------------------------------------------
/app/assets/css/base/_lists.scss:
--------------------------------------------------------------------------------
 1 | ul,
 2 | ol {
 3 |   // list-style-type: none;
 4 |   // margin: 0;
 5 |   // padding: 0;
 6 | 
 7 |   &%default-ul {
 8 |     list-style-type: disc;
 9 |     margin-bottom: $small-spacing;
10 |     padding-left: $base-spacing;
11 |   }
12 | 
13 |   &%default-ol {
14 |     list-style-type: decimal;
15 |     margin-bottom: $small-spacing;
16 |     padding-left: $base-spacing;
17 |   }
18 | }
19 | 
20 | dl {
21 |   margin-bottom: $small-spacing;
22 | 
23 |   dt {
24 |     font-weight: bold;
25 |     margin-top: $small-spacing;
26 |   }
27 | 
28 |   dd {
29 |     margin: 0;
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/app/assets/css/base/_tables.scss:
--------------------------------------------------------------------------------
 1 | table {
 2 |   @include font-feature-settings("kern", "liga", "tnum");
 3 |   border-collapse: collapse;
 4 |   margin: $small-spacing 0;
 5 |   table-layout: fixed;
 6 |   width: 100%;
 7 | }
 8 | 
 9 | th {
10 |   border-bottom: 1px solid darken($base-border-color, 15%);
11 |   font-weight: 600;
12 |   padding: $small-spacing 0;
13 |   text-align: left;
14 | }
15 | 
16 | td {
17 |   border-bottom: $base-border;
18 |   padding: $small-spacing 0;
19 | }
20 | 
21 | tr,
22 | td,
23 | th {
24 |   vertical-align: middle;
25 | }
26 | 


--------------------------------------------------------------------------------
/app/assets/css/base/_typography.scss:
--------------------------------------------------------------------------------
 1 | html {
 2 |     height: 100%;
 3 |     max-height: 100%;
 4 |     font-size: 62.5%;
 5 | }
 6 | 
 7 | body {
 8 |   height: 100%;
 9 |   max-height: 100%;
10 |   @include font-feature-settings("kern", "liga", "pnum");
11 |   -webkit-font-smoothing: antialiased;
12 |   color: $base-font-color;
13 |   font-family: $base-font-family;
14 |   font-size: $base-font-size;
15 |   line-height: $base-line-height;
16 |   font-size: 1.4rem;
17 |   color: $blue;
18 | }
19 | 
20 | h1 {
21 |   @include media(min-width 640px) {
22 |     font-size: 4.5rem;
23 |   }
24 |   @include media(max-width 640px) {
25 |     font-size: 3.5rem;
26 |   }
27 | }
28 | 
29 | h2 {
30 |   @include media(min-width 640px) {
31 |     font-size: 3.5rem;
32 |   }
33 |   @include media(max-width 640px) {
34 |     font-size: 2.5rem;
35 |   }
36 | }
37 | 
38 | h3 {
39 |   @include media(min-width 640px) {
40 |     font-size: 3rem;
41 |   }
42 |   @include media(max-width 640px) {
43 |     font-size: 2.2rem;
44 |   }
45 | }
46 | 
47 | h4 {
48 |   @include media(min-width 640px) {
49 |     font-size: 2.5rem;
50 |   }
51 |   @include media(max-width 640px) {
52 |     font-size: 2rem;
53 |   }
54 | }
55 | 
56 | h5, h6 {
57 |   @include media(min-width 640px) {
58 |     font-size: 2rem;
59 |   }
60 |   @include media(max-width 640px) {
61 |     font-size: 1.6rem;
62 |   }
63 | }
64 | 
65 | p {
66 |   margin: 0 0 $small-spacing;
67 | }
68 | 
69 | a {
70 |   color: $action-color;
71 |   text-decoration: none;
72 |   transition: color 0.1s linear;
73 | 
74 |   &:active,
75 |   &:focus,
76 |   &:hover {
77 |     color: darken($action-color, 15%);
78 |   }
79 | 
80 |   &:active,
81 |   &:focus {
82 |     outline: none;
83 |   }
84 | }
85 | 
86 | hr {
87 |   border-bottom: $base-border;
88 |   border-left: none;
89 |   border-right: none;
90 |   border-top: none;
91 |   margin: $base-spacing 0;
92 | }
93 | 
94 | img,
95 | picture {
96 |   margin: 0;
97 |   max-width: 100%;
98 | }
99 | 


--------------------------------------------------------------------------------
/app/assets/css/base/_variables.scss:
--------------------------------------------------------------------------------
 1 | // Typography
 2 | $base-font-family: 'Lato', sans-serif;
 3 | $heading-font-family: 'Lato', sans-serif;
 4 | 
 5 | // Font Sizes
 6 | $base-font-size: 12pt;
 7 | 
 8 | // Line height
 9 | $base-line-height: 1.5;
10 | $heading-line-height: 1.2;
11 | 
12 | // Other Sizes
13 | $base-border-radius: 3px;
14 | $base-spacing: $base-line-height * 1em;
15 | $small-spacing: $base-spacing / 2;
16 | $base-z-index: 0;
17 | 
18 | // Colors
19 | $blue: #2B445C;
20 | $dark-gray: #333;
21 | $medium-gray: #999;
22 | $light-gray: #ddd;
23 | $dark-blue: #1E2F40;
24 | $light-blue: #3C5F7F;
25 | 
26 | // Font Colors
27 | $base-background-color: #fff;
28 | $base-font-color: $dark-gray;
29 | $action-color: $dark-blue;
30 | 
31 | // Border
32 | $base-border-color: $light-gray;
33 | $base-border: 1px solid $base-border-color;
34 | 
35 | // Forms
36 | $form-box-shadow: inset 0 1px 3px rgba(#000, 0.06);
37 | $form-box-shadow-focus: $form-box-shadow, 0 0 5px adjust-color($action-color, $lightness: -5%, $alpha: -0.3);
38 | 


--------------------------------------------------------------------------------
/app/assets/css/footer.scss:
--------------------------------------------------------------------------------
 1 | footer {
 2 |   &.main-footer {
 3 |     @include outer-container(90%);
 4 |     border-top: 1px solid $light-gray;
 5 |     padding-top: 2rem;
 6 |     margin-top: 4rem;
 7 |     font-size: 1.3rem;
 8 |     font-weight: 400;
 9 |     line-height: 2.1rem;
10 |     text-align: center;
11 |     color: $medium-gray;
12 |     a {
13 |       color: $medium-gray;
14 |       border-bottom: 1px dotted $medium-gray;
15 |     }
16 |     .copyright {
17 |       margin-bottom: 0.5rem;
18 |     }
19 |   }
20 | }


--------------------------------------------------------------------------------
/app/assets/css/header.scss:
--------------------------------------------------------------------------------
 1 | header {
 2 |   padding: 0.5em 1em;
 3 |   text-align: center;
 4 |   
 5 |   .wrapper {
 6 |     max-width: 64rem;
 7 |     margin-left: auto;
 8 |     margin-right: auto;
 9 |   }
10 |   h1 {
11 |     color: #fff;
12 |     font-weight: 300;
13 |     line-height: 1.618em;
14 |   }
15 | }
16 | 
17 | .main-header {
18 |   $main-header-background: #FFF;
19 |   $main-header-font-color: $dark-blue;
20 |   background-color: $main-header-background;
21 |   border-bottom: 1px solid $medium-gray;
22 |   h1 {
23 |     margin-top: 0.5rem;
24 |     margin-bottom: 0;
25 |     color: $main-header-font-color;
26 |   }
27 |   p {
28 |     color: $dark-gray;
29 |     font-family: 'Open Sans', sans-serif;
30 |     font-weight: 300;
31 |     font-size: 1.5rem;
32 |   }
33 | }
34 | 
35 | 
36 | 


--------------------------------------------------------------------------------
/app/assets/css/home.scss:
--------------------------------------------------------------------------------
 1 | .post-boxes {
 2 |   ///////////////////////////////////////////////////////////////////////////////////
 3 |   $base-border-radius: 3px !default;
 4 |   $base-background-color: white !default;
 5 |   $dark-gray: #333 !default;
 6 |   $light-gray: #DDD !default;
 7 |   $base-font-color: $dark-gray !default;
 8 |   
 9 |   a {
10 |     text-decoration: none;
11 |   }  
12 |   //////////////////////////////////////////////////////////////////////////////////
13 | 
14 |   $post-box-border-color: $light-gray;
15 |   $post-box-border: 1px solid $post-box-border-color;
16 |   $post-box-background: lighten($light-gray, 10%);
17 |   $post-box-gutter: 0.4em;
18 |   $post-box-width: 18em;
19 |   $post-box-color: transparentize($base-font-color, 0.3);
20 |   $post-box-top-colors: 
21 |     #7F1637, 
22 |     #047878, 
23 |     #FFB733, 
24 |     #F57336,
25 |     #C22121,
26 |     #2C3E50,
27 |     #E74C3C,
28 |     #5C832F,
29 |     #3498DB,
30 |     #E15F14;
31 | 
32 |     @include clearfix;
33 |     @include display(flex);
34 |     @include justify-content(center);
35 |     @include align-items(stretch);
36 |     @include flex-wrap(wrap);
37 |     clear: both;
38 |     text-align: center;
39 | 
40 |   .post-box {
41 |     @include transition (all 0.2s ease-in-out);
42 |     @include flex(2 2 15em);
43 |     @include align-self(stretch);
44 |     background: $post-box-background;
45 |     border-radius: $base-border-radius;
46 |     box-shadow: inset 0 0 1px $post-box-border-color, 0 1px 2px darken($base-background-color, 10%);
47 |     display: block;
48 |     margin: $post-box-gutter;
49 |     padding: 2em 2em 3em 2em;
50 | 
51 |     @for $i from 1 to 11 {
52 |       &:nth-child(#{$i}) {
53 |         $color-from-list: nth($post-box-top-colors, $i);
54 |         border-top: 1px solid $color-from-list;
55 |         border-bottom: 1px solid $color-from-list;
56 | 
57 |         &:focus,
58 |         &:hover {
59 |           background-color: transparentize($color-from-list, 0.8);
60 |         }
61 |       }
62 |     }
63 | 
64 |     .post-title {
65 |       color: $post-box-color;
66 |       font-size: 2.2rem;
67 |       font-weight: 400;
68 |       margin-bottom: 0.5em;
69 |     }
70 | 
71 |     p {
72 |       color: transparentize($post-box-color, 0.1);
73 |       line-height: 1.5em;
74 |       margin: auto;
75 |     }
76 |   }
77 | 
78 |   .post-box-big {
79 |     @include flex(1 1 40em);
80 |   }
81 | }
82 | 
83 | 


--------------------------------------------------------------------------------
/app/assets/css/navigation.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | .centered-navigation {
  3 | 
  4 |   ///////////////////////////////////////////////////////////////////////////////////
  5 |   $base-border-radius: 3px !default;
  6 |   $dark-gray: #333 !default;
  7 |   $large-screen: em(860) !default;
  8 |   $base-font-color: white !default;
  9 |   //////////////////////////////////////////////////////////////////////////////////
 10 | 
 11 |   $centered-navigation-padding: 1em;
 12 |   $centered-navigation-logo-height: 2em;
 13 |   $centered-navigation-background: #FFF;
 14 |   $centered-navigation-color: transparentize($base-font-color, 0.3);
 15 |   $centered-navigation-color-hover: $base-font-color;
 16 |   $centered-navigation-height: 60px;
 17 |   $centered-navigation-item-padding: 1em;
 18 |   $centered-navigation-submenu-padding: 1em;
 19 |   $centered-navigation-submenu-width: 12em;
 20 |   $centered-navigation-item-nudge: 2.2em;
 21 |   $horizontal-bar-mode: $large-screen;
 22 | 
 23 |   background-color: $centered-navigation-background;
 24 |   border-bottom: 1px solid $medium-gray;
 25 |   min-height: $centered-navigation-height;
 26 |   margin-bottom: 4rem;
 27 |   width: 100%;
 28 |   z-index: 9999;
 29 | 
 30 |   // Mobile view
 31 |   .centered-navigation-mobile-menu {
 32 |     color: $centered-navigation-color;
 33 |     display: block;
 34 |     // float: right;
 35 |     font-weight: 400;
 36 |     // line-height: $centered-navigation-height;
 37 |     margin: 0;
 38 |     padding-right: $centered-navigation-submenu-padding;
 39 |     text-decoration: none;
 40 |     text-transform: uppercase;
 41 | 
 42 |     @include media ($horizontal-bar-mode) {
 43 |       display: none;
 44 |     }
 45 | 
 46 |     &:focus,
 47 |     &:hover {
 48 |       color: $centered-navigation-color-hover;
 49 |     }
 50 | 
 51 |     img {
 52 |       @include transition(transform .5s ease-in-out);
 53 |       height: $centered-navigation-height;
 54 |       width: $centered-navigation-height;
 55 |       &.rotated {
 56 |         @include transform(rotate(180deg));
 57 |       }
 58 |     }
 59 |   }
 60 | 
 61 |   // Nav menu
 62 | 
 63 |   .centered-navigation-wrapper {
 64 |     @include outer-container;
 65 |     @include clearfix;
 66 |     position: relative;
 67 |     z-index: 999;
 68 |   }
 69 | 
 70 |   ul.centered-navigation-menu {
 71 |     -webkit-transform-style: preserve-3d; // stop webkit flicker
 72 |     clear: both;
 73 |     display: none;
 74 |     margin: 0 auto;
 75 |     overflow: visible;
 76 |     padding: 0;
 77 |     width: 100%;
 78 |     z-index: 99999;
 79 | 
 80 |     &.show {
 81 |       display: block;
 82 |     }
 83 | 
 84 |     @include media ($horizontal-bar-mode) {
 85 |       display: block;
 86 |       text-align: center;
 87 |     }
 88 |   }
 89 | 
 90 |   // The nav items
 91 | 
 92 |   .nav-link:first-child {
 93 |     @include media($horizontal-bar-mode) {
 94 |       margin-left: $centered-navigation-item-nudge;
 95 |     }
 96 |   }
 97 | 
 98 |   ul li.nav-link {
 99 |     background: $centered-navigation-background;
100 |     display: block;
101 |     line-height: $centered-navigation-height;
102 |     overflow: hidden;
103 |     padding-right: $centered-navigation-submenu-padding;
104 |     text-align: center;
105 |     width: 100%;
106 |     z-index: 9999;
107 | 
108 |     a {
109 |       color: $centered-navigation-color;
110 |       display: inline-block;
111 |       outline: none;
112 |       text-decoration: none;
113 |       font-weight: 300;
114 |       font-size: 2.2rem;
115 |       &:focus,
116 |       &:hover {
117 |         color: $centered-navigation-color-hover;
118 |       }
119 |     }
120 | 
121 |     @include media($horizontal-bar-mode) {
122 |       background: transparent;
123 |       display: inline;
124 |       line-height: $centered-navigation-height;
125 | 
126 |       a {
127 |         padding-right: $centered-navigation-item-padding;
128 |       }
129 |     }
130 |   }
131 | 
132 |   li.logo.nav-link {
133 |     display: none;
134 |     line-height: 0;
135 | 
136 |     @include media($large-screen) {
137 |       display: inline;
138 |     }
139 |   }
140 | 
141 |   .logo img {
142 |     margin-bottom: -$centered-navigation-logo-height / 3;
143 |     max-height: $centered-navigation-logo-height;
144 |     opacity: 0.6;
145 |   }
146 | 
147 |   // Sub menus
148 | 
149 |   li.more.nav-link {
150 |     padding-right: 0;
151 | 
152 |     @include media($large-screen) {
153 |       padding-right: $centered-navigation-submenu-padding;
154 |     }
155 | 
156 |     > ul > li:first-child a  {
157 |       padding-top: 1em;
158 |     }
159 | 
160 |     a {
161 |       margin-right: $centered-navigation-submenu-padding;
162 |     }
163 | 
164 |     > a {
165 |       padding-right: 0.6em;
166 |     }
167 | 
168 |     > a:after {
169 |       @include position(absolute, auto -0.4em auto auto);
170 |       color: $centered-navigation-color;
171 |       content: "\25BE";
172 |     }
173 |   }
174 | 
175 |   li.more {
176 |     overflow: visible;
177 |     padding-right: 0;
178 | 
179 |     a {
180 |       padding-right: $centered-navigation-submenu-padding;
181 |     }
182 | 
183 |     > a {
184 |       padding-right: 1.6em;
185 |       position: relative;
186 | 
187 |       @include media($large-screen) {
188 |         margin-right: $centered-navigation-submenu-padding;
189 |       }
190 | 
191 |       &:after {
192 |         content: "›";
193 |         font-size: 1.2rem;
194 |         position: absolute;
195 |         right: $centered-navigation-submenu-padding / 2;
196 |       }
197 |     }
198 | 
199 |     &:focus > .submenu,
200 |     &:hover > .submenu {
201 |       display: block;
202 |     }
203 | 
204 |     @include media($horizontal-bar-mode) {
205 |       padding-right: $centered-navigation-submenu-padding;
206 |       position: relative;
207 |     }
208 |   }
209 | 
210 |   ul.submenu {
211 |     display: none;
212 |     padding-left: 0;
213 | 
214 |     @include media($horizontal-bar-mode) {
215 |       left: -$centered-navigation-submenu-padding;
216 |       position: absolute;
217 |       top: 1.5em;
218 |     }
219 | 
220 |     .submenu {
221 |       @include media($horizontal-bar-mode) {
222 |         left: $centered-navigation-submenu-width - 0.2em;
223 |         top: 0;
224 |       }
225 |     }
226 | 
227 |     li {
228 |       display: block;
229 |       padding-right: 0;
230 | 
231 |       @include media($horizontal-bar-mode) {
232 |         line-height: $centered-navigation-height / 1.3;
233 | 
234 |         &:first-child > a {
235 |           border-top-left-radius: $base-border-radius;
236 |           border-top-right-radius: $base-border-radius;
237 |         }
238 | 
239 |         &:last-child > a {
240 |           border-bottom-left-radius: $base-border-radius;
241 |           border-bottom-right-radius: $base-border-radius;
242 |           padding-bottom: .7em;
243 |         }
244 |       }
245 | 
246 |       a {
247 |         background-color: darken($centered-navigation-background, 3%);
248 |         display: inline-block;
249 |         text-align: right;
250 |         text-decoration: none;
251 |         width: 100%;
252 | 
253 |         @include media($horizontal-bar-mode) {
254 |           background-color: $centered-navigation-background;
255 |           padding-left: $centered-navigation-submenu-padding;
256 |           text-align: left;
257 |           width: $centered-navigation-submenu-width;
258 |         }
259 |       }
260 |     }
261 |   }
262 | }
263 | 


--------------------------------------------------------------------------------
/app/assets/css/pagination.scss:
--------------------------------------------------------------------------------
 1 | nav {
 2 |   &.pagination {
 3 |     margin-top: 4rem;
 4 |     position: relative;
 5 |     text-align: center;
 6 |     display: block;
 7 |     .page-number {
 8 |       display: inline-block;
 9 |       color: $light-blue;
10 |     }
11 |     a {
12 |       @extend button;
13 |       &.older-posts {
14 |         position: absolute;
15 |         right: 0;
16 |       }
17 |       &.newer-posts {
18 |         position: absolute;
19 |         left: 0;
20 |       }
21 |     }
22 |   }
23 | }


--------------------------------------------------------------------------------
/app/assets/css/post.scss:
--------------------------------------------------------------------------------
  1 | article {
  2 |   &.post {
  3 |     h1,h2,h3 {
  4 |       font-weight: 300;
  5 |     }
  6 |     p, ul, ol {
  7 |       font-family: 'Open Sans', sans-serif;
  8 |       @include media(min-width 640px) {
  9 |         font-size: 1.8rem;
 10 |         line-height: 2.7rem;
 11 |       }
 12 |       @include media(max-width 640px) {
 13 |         font-size: 1.6rem;
 14 |         line-height: 2.3rem;
 15 |       }
 16 |       font-weight: 300;
 17 |       font-variant: normal;
 18 |     }
 19 |     img {
 20 |       margin: 2.3rem 0;
 21 |       border: 1px solid $blue;
 22 |       padding: 0.2rem;
 23 |     }
 24 |     a {
 25 |       color: $dark-blue;
 26 |       border-bottom: 1px solid $light-blue;
 27 |     }
 28 |   }
 29 | }
 30 | 
 31 | footer {
 32 |   &.post-footer {
 33 |     position: relative;
 34 |     margin-top: 3rem;
 35 |     border-top: 1px solid $light-blue;
 36 |   }
 37 | }
 38 | 
 39 | // ======================================================================================
 40 | // === Post Image
 41 | // ======================================================================================
 42 | 
 43 | .image-gradient-dynamic {
 44 | 
 45 |   $image-gradient-color-top: black; 
 46 |   $transparency-top: .8;
 47 |   $image-gradient-color-bottom: black; 
 48 |   $transparency-bottom: .8;
 49 |   $vertical-angle: 0deg;
 50 |   
 51 |   position: relative;
 52 |   width: 100%;
 53 |   margin-bottom: 2rem;
 54 |   line-height: 0;
 55 | 
 56 |   img {
 57 |     position: relative;
 58 |     height: 100%;
 59 |     width: 100%;
 60 |     padding: 0 !important;
 61 |     margin: 0 !important;
 62 |     border: 0 !important;
 63 |   }
 64 | 
 65 |   .image-text {
 66 | 
 67 |     @include media(max-width 800px) {
 68 |           display: none;
 69 |     }
 70 |     @include transform(translate(-50%, -50%));
 71 |     left: 50%;
 72 |     margin: auto;
 73 |     position: absolute;
 74 |     text-align: center;
 75 |     bottom: 5%;
 76 |     z-index: 999;
 77 | 
 78 |     p {
 79 |       color: white;
 80 |       font-weight: 300;
 81 |       font-size: 2.3rem;
 82 |       line-height: 2.3rem;
 83 |       padding: 1em 2em;
 84 |       position: relative;
 85 |     }
 86 |   }
 87 | 
 88 |   .overlay {
 89 |     @include linear-gradient($vertical-angle, transparentize($image-gradient-color-top, $transparency-top), 
 90 |       transparentize($image-gradient-color-bottom, $transparency-bottom));
 91 |     display: block;
 92 |     @include position(absolute, 0px 0px 0px 0px);
 93 |     max-width: 100%;
 94 |     margin: 0;
 95 |     padding: 0;
 96 |     z-index: 998;
 97 |   }
 98 | }
 99 | 
100 | 


--------------------------------------------------------------------------------
/app/assets/css/screen.scss:
--------------------------------------------------------------------------------
 1 | // bower:scss
 2 | @import "bower_components/bourbon/app/assets/stylesheets/_bourbon.scss";
 3 | @import "bower_components/neat/app/assets/stylesheets/_neat.scss";
 4 | // endbower
 5 | 
 6 | @import "base/base";
 7 | @import "home";
 8 | @import "navigation";
 9 | @import "header";
10 | @import "post";
11 | @import "footer";
12 | @import "pagination";
13 | 
14 | #content {
15 |   @include media(min-width 640px) {
16 |     @include outer-container(93%);
17 |     article {
18 |       @include span-columns(10);
19 |       @include shift(1);
20 |     }
21 |   }
22 |   @include media(max-width 640px) {
23 |     @include outer-container(95%);
24 |     article {
25 |       @include span-columns(12);
26 |     }
27 |   }
28 |   @include media(min-width 1200px) {
29 |     @include outer-container(1200px);
30 |     article {
31 |       @include span-columns(10);
32 |       @include shift(1);
33 |     }
34 |   }
35 | }
36 | 
37 | 


--------------------------------------------------------------------------------
/app/assets/images/arrow_down.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/happy-coding/ordentlich/e6d4a37b32b6c10ec3a51a66d3e719bca874a88b/app/assets/images/arrow_down.png


--------------------------------------------------------------------------------
/app/assets/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/happy-coding/ordentlich/e6d4a37b32b6c10ec3a51a66d3e719bca874a88b/app/assets/images/favicon.ico


--------------------------------------------------------------------------------
/app/assets/js/main.js:
--------------------------------------------------------------------------------
 1 | /* jshint devel:true */
 2 | /* globals jQuery, document */
 3 | (function ($, undefined) {
 4 |     "use strict";
 5 | 
 6 |     var $document = $(document);
 7 | 
 8 |     $(document).ready(function() {
 9 |       var menuToggle = $('#js-centered-navigation-mobile-menu').unbind();
10 |       $('#js-centered-navigation-menu').removeClass("show");
11 |       
12 |       menuToggle.on('click', function(e) {
13 |         e.preventDefault();
14 |         var img = $(this).find('img');
15 |         if (img.hasClass('rotated')) {
16 |           img.removeClass('rotated');  
17 |         } else {
18 |           img.addClass('rotated');  
19 |         }
20 |         $('#js-centered-navigation-menu').slideToggle(function(){
21 |           if($('#js-centered-navigation-menu').is(':hidden')) {
22 |             $('#js-centered-navigation-menu').removeAttr('style');
23 |           }
24 |         });
25 |       });
26 |     });
27 | 
28 | })(jQuery);
29 | 


--------------------------------------------------------------------------------
/app/default.hbs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     {{! Document Settings }}
 5 |     <meta charset="utf-8" />
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 7 | 
 8 |     {{! Page Meta }}
 9 |     <title>{{meta_title}}</title>
10 | 
11 |     <meta name="description" content="{{meta_description}}" />
12 | 
13 |     <meta name="HandheldFriendly" content="True" />
14 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
15 | 
16 |     <link rel="shortcut icon" href="{{asset "favicon.ico"}}">
17 | 
18 |     {{! Styles'n'Scripts }}
19 |     <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
20 |     <link rel="stylesheet" type="text/css" href="{{asset "css/highlightjs/googlecode.css"}}" />
21 |     <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:700,400,300|Lato:100,300,400" />
22 |     {{ghost_head}}
23 | </head>
24 | <body class="{{body_class}} nav-closed">
25 | 
26 |     <header class='main-header'>
27 |       <div class="wrapper">
28 |         <h1>{{meta_title}}</h1>
29 |         <p>{{meta_description}}</p>
30 |       </div>
31 |     </header>
32 | 
33 |     {{navigation}}
34 | 
35 |     <div id='content'>
36 |       {{{body}}}
37 |     </div>
38 | 
39 |     {{ghost_foot}}
40 | 
41 |     <script type="text/javascript" src="{{asset "js/main.js"}}"></script>
42 |     <script type="text/javascript" src="{{asset "js/highlightjs/highlight.pack.js"}}"></script>
43 |     <script>hljs.initHighlightingOnLoad();</script>
44 | 
45 |     <footer class="main-footer">
46 |         <section class='copyright'>&copy; 2015 *YOUR COMPANY NAME*</section>
47 |         <section class="poweredby">Proudly published with <a href="https://ghost.org">Ghost</a> and polished with the terrific &amp; neat '<a href="http://happy-coding.github.io/ordentlich/">Ordentlich</a>' theme.</section>
48 |         <section class='other_infos'><a href="http://thenounproject.com/term/arrow-down/113915/" ref='no-follow' target='_blank'>Arrow Icon</a> created by Marek Polakovic from the Noun Project. Licensed as <a href="http://creativecommons.org/licenses/by/3.0/us/" target="_blank">Creative Commons – Attribution (CC BY 3.0)</a></section>
49 |     </footer>
50 | </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/app/index.hbs:
--------------------------------------------------------------------------------
1 | {{!< default}}
2 | 
3 | {{> "loop"}}
4 | 


--------------------------------------------------------------------------------
/app/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Ordentlich",
3 |   "version": "1.0.0"
4 | }
5 | 


--------------------------------------------------------------------------------
/app/partials/loop.hbs:
--------------------------------------------------------------------------------
 1 | <div class="post-boxes">
 2 |   {{#foreach posts}}
 3 | 
 4 |   <a href="{{url}}" class="post-box">
 5 |     <h1 class="post-title">{{{title}}}</h1>
 6 |     <p>{{excerpt words="26"}}</p>
 7 |   </a>
 8 |   {{/foreach}}
 9 | </div>
10 | 
11 | {{pagination}}


--------------------------------------------------------------------------------
/app/partials/navigation.hbs:
--------------------------------------------------------------------------------
 1 | <header class="centered-navigation" role="banner">
 2 |   <div class="centered-navigation-wrapper">
 3 |     <a href="javascript:void(0)" id="js-centered-navigation-mobile-menu" class="centered-navigation-mobile-menu"><img src="{{asset "images/arrow_down.png"}}"/></a>
 4 |     <nav role="navigation">
 5 |       <ul id="js-centered-navigation-menu" class="centered-navigation-menu show">
 6 |         {{#foreach navigation}}
 7 |         <li class="nav-link"><a href="{{url absolute="true"}}">{{label}}</a></li>
 8 |         {{/foreach}}
 9 |       </ul>
10 |     </nav>
11 |   </div>
12 | </header>
13 | 


--------------------------------------------------------------------------------
/app/post.hbs:
--------------------------------------------------------------------------------
 1 | {{!< default}}
 2 | 
 3 | {{#post}}
 4 | 
 5 |     <article class="{{post_class}}">
 6 | 
 7 |         {{#if image}}
 8 |         <div class="image-gradient-dynamic">
 9 |           <span class="overlay"></span>
10 |           <img src="{{image}}" alt="" />
11 |           <div class="image-text">
12 |             <p>{{title}}</p>
13 |           </div>
14 |         </div>
15 |         {{/if}}
16 | 
17 |         <section class="post-content">
18 |             {{content}}
19 |         </section>
20 | 
21 |     </article>
22 | 
23 | {{/post}}
24 | 


--------------------------------------------------------------------------------
/app/robots.txt:
--------------------------------------------------------------------------------
1 | # robotstxt.org/
2 | 
3 | User-agent: * 
4 | Disallow:
5 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ordentlich",
 3 |   "private": true,
 4 |   "dependencies": {
 5 |     "jquery": "~2.1.1",
 6 |     "modernizr": "~2.8.1",
 7 |     "bourbon": "~4.2.1",
 8 |     "neat": "~1.7.2",
 9 |     "highlightjs": "~8.4"
10 |   }
11 | }


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
  1 | /*global -$ */
  2 | 'use strict';
  3 | 
  4 | var gulp = require('gulp');
  5 | var $ = require('gulp-load-plugins')();
  6 | var browserSync = require('browser-sync');
  7 | var reload = browserSync.reload;
  8 | 
  9 | var paths = {
 10 |   js: ['app/assets/js/**/*.js'],
 11 |   css: ['app/assets/css/**/*.scss'],
 12 |   images: ['app/assets/images/**/*'],
 13 |   hbs: ['app/**/*.hbs']
 14 | };
 15 | 
 16 | gulp.task('styles', function () {
 17 |   return gulp.src('app/assets/css/screen.scss')
 18 |     .pipe($.sourcemaps.init())
 19 |     .pipe($.sass({
 20 |       outputStyle: 'nested', // libsass doesn't support expanded yet
 21 |       precision: 10,
 22 |       includePaths: ['.'],
 23 |       onError: console.error.bind(console, 'Sass error:')
 24 |     }))
 25 |     .pipe($.postcss([
 26 |       require('autoprefixer-core')({browsers: ['last 1 version']})
 27 |     ]))
 28 |     .pipe($.sourcemaps.write())
 29 |     .pipe(gulp.dest('ordentlich/assets/css'))
 30 |     .pipe(reload({stream: true}));
 31 | });
 32 | 
 33 | gulp.task('highlightjs-js', function () {
 34 |   return gulp.src('bower_components/highlightjs/highlight.pack.js')
 35 |     .pipe(gulp.dest('ordentlich/assets/js/highlightjs'));
 36 | });
 37 | 
 38 | gulp.task('highlightjs-css', function () {
 39 |   return gulp.src('bower_components/highlightjs/styles/googlecode.css')
 40 |     .pipe(gulp.dest('ordentlich/assets/css/highlightjs'));
 41 | });
 42 | 
 43 | 
 44 | gulp.task('scripts', function () {
 45 |   return gulp.src('app/assets/js/**/*')
 46 |     .pipe($.if('*.js', $.uglify()))
 47 |     .pipe($.useref())
 48 |     .pipe(gulp.dest('ordentlich/assets/js'));
 49 | });
 50 | 
 51 | gulp.task('images', function () {
 52 |   return gulp.src('app/assets/images/**/*')
 53 |     .pipe($.cache($.imagemin({
 54 |       progressive: true,
 55 |       interlaced: true,
 56 |       // don't remove IDs from SVGs, they are often used
 57 |       // as hooks for embedding and styling
 58 |       svgoPlugins: [{cleanupIDs: false}]
 59 |     })))
 60 |     .pipe(gulp.dest('ordentlich/assets/images'));
 61 | });
 62 | 
 63 | gulp.task('fonts', function () {
 64 |   return gulp.src(require('main-bower-files')({
 65 |     filter: '**/*.{eot,svg,ttf,woff,woff2}'
 66 |   }).concat('app/fonts/**/*'))
 67 |     .pipe(gulp.dest('.tmp/fonts'))
 68 |     .pipe(gulp.dest('ordentlich/assets/fonts'));
 69 | });
 70 | 
 71 | gulp.task('extras', function () {
 72 |   return gulp.src([
 73 |     'app/**/*.*',
 74 |     '!app/*.html',
 75 |     '!app/assets/**/.*',
 76 |     '!app/**/*.scss'
 77 |   ], {
 78 |     dot: true
 79 |   }).pipe(gulp.dest('ordentlich'));
 80 | });
 81 | 
 82 | gulp.task('clean', require('del').bind(null, ['.tmp', 'ordentlich']));
 83 | 
 84 | // inject bower components
 85 | gulp.task('wiredep', function () {
 86 |   var wiredep = require('wiredep').stream;
 87 | 
 88 |   gulp.src('app/assets/css/*.scss')
 89 |     .pipe(wiredep({
 90 |       ignorePath: /^(\.\.\/)+/
 91 |     }))
 92 |     .pipe(gulp.dest('app/assets/css'));
 93 | 
 94 |   gulp.src('app/*.html')
 95 |     .pipe(wiredep({
 96 |       ignorePath: /^(\.\.\/)*\.\./
 97 |     }))
 98 |     .pipe(gulp.dest('app'));
 99 | });
100 | 
101 | gulp.task('build', ['styles', 'highlightjs-js','highlightjs-css', 'scripts', 'images', 'fonts', 'extras'], function () {
102 |   return gulp.src('ordentlich/**/*').pipe($.size({title: 'build', gzip: true}));
103 | });
104 | 
105 | gulp.task('watch', function() {
106 |   gulp.watch(paths.js, ['scripts']);
107 |   gulp.watch(paths.css, ['styles']);
108 |   gulp.watch(paths.images, ['images']);
109 |   gulp.watch(paths.hbs, ['extras']);
110 | });
111 | 
112 | gulp.task('default', ['clean'], function () {
113 |   gulp.start('build');
114 | });
115 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "engines": {
 4 |     "node": ">=0.10.0"
 5 |   },
 6 |   "devDependencies": {
 7 |     "autoprefixer-core": "^4.0.2",
 8 |     "browser-sync": "^1.8.2",
 9 |     "del": "^1.1.1",
10 |     "gulp": "^3.6.0",
11 |     "gulp-cache": "^0.2.2",
12 |     "gulp-csso": "^0.2.6",
13 |     "gulp-if": "^1.2.1",
14 |     "gulp-imagemin": "^2.0.0",
15 |     "gulp-jshint": "^1.5.3",
16 |     "gulp-load-plugins": "^0.8.0",
17 |     "gulp-minify-html": "^0.1.6",
18 |     "gulp-postcss": "^3.0.0",
19 |     "gulp-sass": "^1.3.3",
20 |     "gulp-size": "^1.1.0",
21 |     "gulp-sourcemaps": "^1.3.0",
22 |     "gulp-uglify": "^1.0.1",
23 |     "gulp-useref": "^1.0.2",
24 |     "jshint-stylish": "^1.0.0",
25 |     "main-bower-files": "^2.5.0",
26 |     "opn": "^1.0.0",
27 |     "wiredep": "^2.0.0"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/test/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 |     "directory": "bower_components"
3 | }
4 | 


--------------------------------------------------------------------------------
/test/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "yo-test",
 3 |   "private": true,
 4 |   "dependencies": {
 5 |     "chai": "~1.8.0",
 6 |     "mocha": "~1.14.0",
 7 |     "should": "~5.2.0"
 8 |   },
 9 |   "devDependencies": {}
10 | }
11 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Mocha Spec Runner</title>
 6 |     <link rel="stylesheet" href="bower_components/mocha/mocha.css">
 7 | </head>
 8 | <body>
 9 |     <div id="mocha"></div>
10 |     <script src="bower_components/mocha/mocha.js"></script>
11 |     <script>mocha.setup('bdd')</script>
12 |     <script src="bower_components/chai/chai.js"></script>
13 |     <script>
14 |         var assert = chai.assert;
15 |         var expect = chai.expect;
16 |         var should = chai.should();
17 |     </script>
18 | 
19 |     <!-- include source files here... -->
20 | 
21 |     <!-- include spec files here... -->
22 |     <script src="spec/test.js"></script>
23 | 
24 |     <script>mocha.run()</script>
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/test/spec/test.js:
--------------------------------------------------------------------------------
 1 | /* global describe, it */
 2 | 
 3 | (function () {
 4 |   'use strict';
 5 | 
 6 |   describe('Give it some context', function () {
 7 |     describe('maybe a bit more context here', function () {
 8 |       it('should run here few assertions');
 9 |     });
10 |   });
11 | })();
12 | 


--------------------------------------------------------------------------------