classic-jekyll-theme 1.9.4 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (114) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +18 -359
  3. data/_data/setup.yml +62 -10
  4. data/_data/text-for.yml +3 -0
  5. data/_includes/banner-area.html +57 -0
  6. data/_includes/banner-icon.html +23 -0
  7. data/_includes/banner-title-area.html +30 -0
  8. data/_includes/cblock-row.html +15 -3
  9. data/_includes/cblock.html +16 -1
  10. data/_includes/disqus-comments.html +39 -0
  11. data/_includes/footer.html +11 -0
  12. data/_includes/google-analytics.html +18 -8
  13. data/_includes/head.html +71 -30
  14. data/_includes/menubar-icon.html +23 -0
  15. data/_includes/menubar.html +428 -0
  16. data/_includes/secondary-column.html +30 -9
  17. data/_includes/tertiary-column.html +7 -3
  18. data/_includes/vertical-menu.html +284 -0
  19. data/_includes/widgets/browser-info.html +5 -2
  20. data/_includes/widgets/categories.html +21 -0
  21. data/_includes/widgets/cookie-consent.html +10 -10
  22. data/_includes/widgets/older-posts.html +63 -42
  23. data/_includes/widgets/recent-posts.html +14 -8
  24. data/_includes/widgets/social-media-res/icon-github.html +7 -1
  25. data/_includes/widgets/social-media-res/icon-github.svg +1 -1
  26. data/_includes/widgets/social-media-res/icon-twitter.html +7 -1
  27. data/_includes/widgets/social-media-res/icon-twitter.svg +1 -1
  28. data/_includes/widgets/social-media.html +19 -10
  29. data/_includes/widgets/subscribe.html +9 -4
  30. data/_includes/widgets/youtube-player.html +8 -8
  31. data/_layouts/banner-layout.html +1 -0
  32. data/_layouts/category-page.html +33 -33
  33. data/_layouts/content-blocks.html +1 -3
  34. data/_layouts/default.html +129 -55
  35. data/_layouts/home.html +4 -4
  36. data/_layouts/page.html +13 -12
  37. data/_layouts/post.html +13 -12
  38. data/_sass/classic-jekyll-theme.scss +1143 -155
  39. data/_sass/classic/_banner-area.scss +548 -0
  40. data/_sass/classic/_body.scss +15 -0
  41. data/_sass/classic/_columns.scss +122 -0
  42. data/_sass/classic/{_support.scss → _custom.scss} +12 -4
  43. data/_sass/classic/_footer.scss +31 -0
  44. data/_sass/classic/_menubar.scss +509 -0
  45. data/_sass/classic/_normalize-override.scss +9 -9
  46. data/_sass/classic/_normalize.scss +13 -27
  47. data/_sass/classic/_page.scss +1 -1
  48. data/_sass/classic/_post.scss +1 -1
  49. data/_sass/classic/_theme-internal.scss +37 -0
  50. data/_sass/classic/_theme-library.scss +85 -0
  51. data/_sass/classic/_vertical-menu.scss +237 -0
  52. data/_sass/classic/_widgets.scss +88 -0
  53. data/assets/img/banner-area-layout.png +0 -0
  54. data/assets/img/cog-wheels-120x68.png +0 -0
  55. data/assets/img/cog-wheels-240x135.png +0 -0
  56. data/assets/img/cog-wheels-30x17.png +0 -0
  57. data/assets/img/cog-wheels-60x43.png +0 -0
  58. data/assets/img/column-panel-layout.png +0 -0
  59. data/assets/img/test-pattern-110x83.png +0 -0
  60. data/assets/img/test-pattern-1280x800.png +0 -0
  61. data/assets/img/test-pattern-220x165.png +0 -0
  62. data/assets/img/test-pattern-55x42.png +0 -0
  63. data/assets/img/test-pattern-640x400.png +0 -0
  64. data/assets/img/top-level-layout.png +0 -0
  65. data/icons/android-chrome-192x192.png +0 -0
  66. data/icons/apple-touch-icon.png +0 -0
  67. data/icons/browserconfig.xml +9 -0
  68. data/icons/favicon-16x16.png +0 -0
  69. data/icons/favicon-32x32.png +0 -0
  70. data/icons/favicon.ico +0 -0
  71. data/icons/manifest.json +13 -0
  72. data/icons/mstile-150x150.png +0 -0
  73. data/icons/safari-pinned-tab.svg +14 -0
  74. data/pages/about/about.md +4 -1
  75. data/pages/classic/01-features.md +36 -0
  76. data/pages/classic/02-setup.md +113 -0
  77. data/pages/classic/03-pages-and-posts.md +21 -0
  78. data/pages/classic/04-posts.md +18 -0
  79. data/pages/classic/05-menus.md +122 -0
  80. data/pages/classic/06-categories.md +38 -0
  81. data/pages/classic/07-terminology.md +35 -0
  82. data/pages/classic/08-versioning.md +23 -0
  83. data/pages/contact/contact.md +7 -2
  84. data/pages/jekyll/01-jekyll.md +42 -0
  85. data/pages/jekyll/02-speed.md +88 -0
  86. data/pages/jekyll/03-ruby.md +19 -0
  87. data/pages/layouts/banner-main.md +36 -0
  88. data/pages/{other → layouts}/blocks.md +4 -3
  89. data/pages/layouts/landing-page.md +21 -0
  90. data/pages/layouts/no-sec-no-ter.md +28 -0
  91. data/pages/layouts/sec-left-no-ter.md +28 -0
  92. data/pages/layouts/sec-left-ter-right.md +28 -0
  93. data/pages/layouts/sec-right-no-ter.md +28 -0
  94. data/pages/layouts/sec-right-ter-left.md +28 -0
  95. data/pages/{more/more.md → menus/landing-page.md} +2 -5
  96. data/pages/menus/submenu-subsections.md +72 -0
  97. data/pages/menus/submenu1.md +22 -0
  98. data/pages/menus/submenu2.md +21 -0
  99. data/pages/menus/submenu3.md +30 -0
  100. metadata +72 -24
  101. data/_includes/disqus_comments.html +0 -25
  102. data/_includes/navbanner.html +0 -232
  103. data/_layouts/navbanner-layout.html +0 -1
  104. data/_sass/classic/_formatting.scss +0 -336
  105. data/_sass/classic/_layout.scss +0 -331
  106. data/_sass/classic/_widget-support.scss +0 -42
  107. data/navbanner.md +0 -5
  108. data/pages/classic/categories.md +0 -13
  109. data/pages/classic/classic.md +0 -12
  110. data/pages/classic/known-problems.md +0 -14
  111. data/pages/classic/pages.md +0 -23
  112. data/pages/classic/posts.md +0 -19
  113. data/pages/other/example-page.md +0 -12
  114. data/pages/other/other.md +0 -10
@@ -0,0 +1,38 @@
1
+ ---
2
+ layout: page
3
+ title: "Categories in classic"
4
+ date: 2017-12-15
5
+ menuInclude: yes
6
+ menuTopTitle: Classic
7
+ menuSubs:
8
+ - title: About Categories
9
+ index: 6
10
+ excerpt: "An excerpt is used as the page description and can be up to 160 characters long..."
11
+ ---
12
+
13
+ ### Category pages
14
+
15
+ Category pages can be created with a little assistance of the web designer. To kick of the creation of a category page, create a page with the `layout` set to _category-page_. Also add a `title` that is set to the name of the category for which the page is created.
16
+
17
+ An example can be seen in the _pages/categories/classic.md_ file:
18
+
19
+ ---
20
+ layout: category-page
21
+ title: classic
22
+ ---
23
+
24
+ All other content in a category generation file is ignored.
25
+
26
+ ### Category Menu Item
27
+
28
+ To enable the creation of a category menu item set the `site.data.setup.generate-categories-menu parameter` to _yes_. This will create a drop-down menu entry with the names of the categories for which pages were generated.
29
+
30
+ PS: The name of the categories menu item can be configured in `site.data.text-for.tCategories`.
31
+
32
+ ### Category widget
33
+
34
+ As an alternative to the menu a widget is available that can be included somewhere to have access to the category pages.
35
+
36
+ ### Widget or Menu
37
+
38
+ Using the categories menu is not possible when the drop-down menus are disabled (by setting `site.data.setup.drop-down-menu` to _no_). In that case the widget is the only way to access the categories pages.
@@ -0,0 +1,35 @@
1
+ ---
2
+ layout: page
3
+ title: Terminology
4
+ date: 2017-12-15
5
+ tertiary-column: none
6
+ menuInclude: yes
7
+ menuTopTitle: Classic
8
+ menuSubs:
9
+ - title: Terminology
10
+ index: 7
11
+ excerpt: The terminology used throughout the classic-jekyll-theme code base
12
+ ---
13
+ When configuring the many options it is necessary to have a good view of the names used in the layout.
14
+
15
+ At the top level there are the following visible elements:
16
+
17
+ ![top-level elements]({{ "/assets/img/top-level-layout.png" | relative_url }}){:.image-centered}
18
+
19
+ Of these the footer-separator and footer have no further internal decomposition.
20
+
21
+ The banner-area is the most complex as is displayed below. The column-panel is the main content panel and is divided into the following sub-components:
22
+
23
+ ![column elements]({{ "/assets/img/column-panel-layout.png" | relative_url }}){:.image-centered}
24
+
25
+ The secondary-column and tertiary-column may be swapped in place, or disabled altogether.
26
+
27
+ The banner-area is build from the following components:
28
+
29
+ ![column elements]({{ "/assets/img/banner-area-layout.png" | relative_url }}){:.image-centered}
30
+
31
+ Of these elements the menubar and menubar-bottom-separator may be made invisible by tapping or clicking the menu-symbol. The elements in the banner itself may be arranged differently, or may be absent.
32
+
33
+ All elements (except the primary-column) can be disabled.
34
+
35
+ It is also possible to insert an icon into the menubar and disable the banner. This means that the banner-area then only consist of the menubar and its separators (which can also be disabled).
@@ -0,0 +1,23 @@
1
+ ---
2
+ layout: page
3
+ title: Versioning
4
+ date: 2017-12-20
5
+ tertiary-column: none
6
+ menuInclude: yes
7
+ menuTopTitle: Classic
8
+ menuSubs:
9
+ - title: Versioning
10
+ index: 8
11
+ excerpt: The versioning approach for Classic
12
+ ---
13
+ Classic uses the versioning approach Major.Minor.Patch.
14
+
15
+ However due to the nature of theme's the interpretation of these number is slightly different.
16
+
17
+ Classic will update the _Patch_ number when adding to the content area's of the theme. I.e. posts or pages. There is no need to follow these updates closely for your own theme.
18
+
19
+ Classic will update the _Minor_ number when bugfixes or minor additions are made. A list of changed files will be provided. It may be necessary to re-apply changes that were made to the theme's files at your end.
20
+
21
+ Classic will update the _Major_ number when significant additions have been made. The difference between minor and major additions is entirely subjective.
22
+
23
+ Backwards compatibility with previously used YAML tags is a very important driver for further development.
@@ -8,6 +8,11 @@ excerpt: Contact information for this site.
8
8
  tertiary-column: none
9
9
  ---
10
10
 
11
- Publish your contact information on this page.
11
+ This is a placeholder in the theme.
12
12
 
13
- Edit this content in `pages/contact/contact.md`.
13
+ Edit this content in `pages/contact/contact.md`.
14
+
15
+ But you can contact us at:
16
+
17
+ - Before the at sign: rien
18
+ - After the at sign: balancingrock.nl
@@ -0,0 +1,42 @@
1
+ ---
2
+ layout: page
3
+ title: Jekyll Static Website Generator
4
+ date: 2017-12-20
5
+ menuInclude: yes
6
+ menuTopTitle: Jekyll
7
+ menuTopIndex: 1
8
+ menuSubs:
9
+ - title: Static generator
10
+ index: 1
11
+ tertiary-column: none
12
+ excerpt: What is Jekyll? Jekyll is a static website generator...
13
+ ---
14
+ Back in the early days of the internet websites were just a few files on a computer.
15
+
16
+ As the web became more widely used, the content became more and more 'dynamic'. This means that two visits to the same site by two different people or at two different times would no longer return the same information.
17
+
18
+ The information returned depended on the context in which is was requested.
19
+
20
+ The static pages were replaced by scripting languages and database backends. Needless to say, this increased de complexity of building and maintaining a website. To combat this, many people started to use standard products such as Wordpress.
21
+
22
+ However as good as Wordpress (and others) might be, they do not simplify the underlying structure. They merely hide it from the site-developper. Add plugins to this, and instability of the platform becomes a real possibility. I know, I lost entire websites -more than once!- because of this.
23
+
24
+ After the initial embrace of dynamic this and dynamic that, many people started to rediscover the old way of creating websites. Static websites are -as it turns out- more than enough for many small sites or blogs! Certainly with the new wave of "comments" providers as disqus.
25
+
26
+ Creating a simple website using a comments provider is still a bit of work though.
27
+
28
+ Enter the static website generator.
29
+
30
+ Static websites generators take a lot of pain out of traditional web design. And when using a theme (like this!) this becomes even simpler.
31
+
32
+ Creating content now is simply a matter of writing the content in a (plain) text editor, then compiling the website and uploading it (or only the changes) to the hosting provider.
33
+
34
+ Simple, neat.
35
+
36
+ Jekyll is such a static website generator.
37
+
38
+ And Classic-Jekyll-Theme is a theme that can be used with Jekyll to create beautiful sites.
39
+
40
+ For more on Jekyll, see [https://jekyllrb.com](https://jekyllrb.com)
41
+
42
+ For more on Classic, explore this website!
@@ -0,0 +1,88 @@
1
+ ---
2
+ layout: page
3
+ title: Compilation Speed
4
+ date: 2017-12-20
5
+ menuInclude: yes
6
+ menuTopTitle: Jekyll
7
+ menuSubs:
8
+ - title: Compilation speed
9
+ index: 2
10
+ sub:
11
+ - title: Jekyll
12
+ anchorId: jekyll
13
+ index: 1
14
+ - title: Classic
15
+ anchorId: classic
16
+ index: 2
17
+ tertiary-column: none
18
+ excerpt: Speed hints for Jekyll and Classic
19
+ ---
20
+ {:.anchor}
21
+ ## Jekyll Speed Hints {#jekyll}
22
+
23
+ Once the site starts to grow, compilation speed can become an issue. Jekyll is not all that fast, and Classic can slow down things even more.
24
+
25
+ The main culprit for Classic's performance is the creation of the menubar. More on that below. First some general speed hints about Jekyll.
26
+
27
+ ### Knowledge is power
28
+
29
+ Turn on the profiler. That shows how much time is spend where.
30
+
31
+ bundle exec jekyll serve --profile
32
+
33
+ will do the trick.
34
+
35
+ ### Exclude content that must not be compiled
36
+
37
+ In the `_config.yml` exclude the directories that contains stuff that can be copied and stuff that simply does not need to be compiled.
38
+
39
+ Example:
40
+
41
+ keep_files: [assets, icons]
42
+ exclude: [README.md, raw-material]
43
+
44
+ Use `keep_files` to simply copy over those files. Use `exclude` to complete ignore the files.
45
+
46
+ ### Incremental build
47
+
48
+ Jekyll offers an incremental build option.
49
+
50
+ bundle exec jekyll serve --incremental
51
+
52
+ However in Classic that may not help all that much. Interdependency of the files is such that incremental build don't seem to happen often. Still, we have not found any ill effects. Turning it on may help, or at least it does not seem to hurt.
53
+
54
+ If you find any strange effects/artefacts, be sure to turn this off first.
55
+
56
+ ### Build only the last post
57
+
58
+ This helps when writing a new post:
59
+
60
+ bundle exec jekyll serve --limit_posts 1
61
+
62
+ However once the post is ready to be published, it is still necessary to recompile the entire site to ensure that all webpages properly reflect that a new post was added.
63
+
64
+ {:.anchor}
65
+ ## Classic Speed Hints {#classic}
66
+
67
+ ### Use fast-content-build
68
+
69
+ Setting `fast-content-build` (in _setup.yml_) to _yes_ will disable the creation of the menubar, the vertical menu, categories widget, older-posts widget and the recent-posts widget.
70
+
71
+ The resulting speed increase is rather large, but of course the created site is not ready for publication. Still it can be advantageous when creating content where the browser window is "reloaded" frequently to view the changes that were made.
72
+
73
+ To prevent accidentally leaving this setting active, this setting is always disregarded when `jekyll.environment` is set to _production_.
74
+
75
+ ### Use a separate banner-area file
76
+
77
+ By default the menubar is generated in-line for each page/post. However the menubar generation process is the biggest time consumer when creating a page/post.
78
+
79
+ It is possible to create the menubar in a separate file and to load that file whenever necessary (using a simple line of Javascript). That increases the speed of compilation but degrades the user experience. The degradation is two fold: the browser must make multiple fetches which will take longer. However that is in our experience not really an issue. The bigger drawback is that the user is no longer given information about which menu item is selected.
80
+
81
+ With the in-line menubar the menu item for the currently visible page is highlighted.
82
+
83
+ When the menubar is generated in a separate file this is no longer possible.
84
+
85
+ If this is no problem, then the menubar (and banner) can be separated by setting the `use-separate-banner-menubar-file` parameter (in _setup.yml_) to 'yes'
86
+
87
+ Alternatively it is of course also possible to set this parameter to 'yes' during development and to 'no' for deployment.
88
+
@@ -0,0 +1,19 @@
1
+ ---
2
+ layout: page
3
+ title: The Ruby Environment
4
+ date: 2017-12-20
5
+ menuInclude: yes
6
+ menuTopTitle: Jekyll
7
+ menuSubs:
8
+ - title: Ruby environment
9
+ index: 3
10
+ tertiary-column: none
11
+ excerpt: Ruby and versioning hell
12
+ ---
13
+ Versioning is a major headache for people doing more than 1 project. It is not called "Versioning Hell" for nothing.
14
+
15
+ Ruby is no exception. And using Jekyll for website development may in turn cause problems with other Ruby based projects.
16
+
17
+ We use [rbenv](https://github.com/rbenv/rbenv) to solve this problem.
18
+
19
+ With [rbenv](https://github.com/rbenv/rbenv) any Ruby based project can run in its own versioning environment. Recommended!
@@ -0,0 +1,36 @@
1
+ ---
2
+ layout: page
3
+ title: Banner on main only
4
+ date: 2017-12-17
5
+ menuInclude: yes
6
+ menuTopTitle: Layout
7
+ menuSubs:
8
+ - title: Banner on main only
9
+ index: 1
10
+ banner-position: main
11
+ secondary-column: left
12
+ tertiary-column: none
13
+ excerpt: The banner is placed above the main column only
14
+ ---
15
+ The banner only appears above the main page. To create more space for the banner, the secondary column has been fixed to the left en the tertiary column has been disabled.
16
+
17
+ If the screen is too small, the title will be displayed over the icon.
18
+
19
+ Also note that there is less space available in the menubar this way, which could lead to overflow into the secondary column and disappearing on the right. In this mode, it is usually best to use "flex-start' for the theme properties "menubar-justify-content-medium/widest".
20
+
21
+ This illustrates the importance of choosing a proper column width in conjunction with the necessary menubar area.
22
+
23
+ The relevant YAML frontmatter for this page is:
24
+
25
+ ---
26
+ layout: page
27
+ title: Banner on main only
28
+ menuInclude: yes
29
+ menuTopTitle: Layout
30
+ menuSubs:
31
+ - title: Banner on main only
32
+ index: 1
33
+ banner-position: main
34
+ secondary-column: left
35
+ tertiary-column: none
36
+ ---
@@ -3,8 +3,9 @@ layout: content-blocks
3
3
  title: Content blocks
4
4
  date: 2017-01-23
5
5
  menuInclude: yes
6
- menuTopTitle: Other
7
- menuSubTitle: Content blocks
8
- menuSubIndex: 3
6
+ menuTopTitle: Layout
7
+ menuSubs:
8
+ - title: Content blocks
9
+ index: 2
9
10
  excerpt: "An excerpt is used as the page description and can be up to 160 characters long..."
10
11
  ---
@@ -0,0 +1,21 @@
1
+ ---
2
+ layout: page
3
+ title: Landing Page
4
+ menuInclude: yes
5
+ menuLink: yes
6
+ menuTopTitle: Layout
7
+ menuTopIndex: 3
8
+ excerpt: "An excerpt is used as the page description and can be up to 160 characters long..."
9
+ ---
10
+ Select one of the sub topics.
11
+
12
+ The relevant YAML frontmatter for this page is:
13
+
14
+ ---
15
+ layout: page
16
+ title: Landing Page
17
+ menuInclude: yes
18
+ menuLink: yes
19
+ menuTopTitle: Layout
20
+ menuTopIndex: 3
21
+ ---
@@ -0,0 +1,28 @@
1
+ ---
2
+ layout: page
3
+ title: No secondary or tertiary column
4
+ date: 2017-12-17
5
+ menuInclude: yes
6
+ menuTopTitle: Layout
7
+ menuSubs:
8
+ - title: No secondary, no tertiary
9
+ index: 3
10
+ secondary-column: none
11
+ tertiary-column: none
12
+ excerpt: No secondary or tertiary column
13
+ ---
14
+ This page overrides the secondary and tertiary column settings by disabling them both.
15
+
16
+ The relevant YAML frontmatter for this page is:
17
+
18
+ ---
19
+ layout: page
20
+ title: No secondary or tertiary column
21
+ menuInclude: yes
22
+ menuTopTitle: Layout
23
+ menuSubs:
24
+ - title: No secondary, no tertiary
25
+ index: 3
26
+ secondary-column: none
27
+ tertiary-column: none
28
+ ---
@@ -0,0 +1,28 @@
1
+ ---
2
+ layout: page
3
+ title: Left secondary no tertiary column
4
+ date: 2017-12-17
5
+ menuInclude: yes
6
+ menuTopTitle: Layout
7
+ menuSubs:
8
+ - title: Left secondary, no tertiary
9
+ index: 4
10
+ secondary-column: left
11
+ tertiary-column: none
12
+ excerpt: Left secondary no tertiary column
13
+ ---
14
+ This page overrides the secondary and tertiary column settings by disabling the tertiary column and placing the secondary on the left.
15
+
16
+ The relevant YAML frontmatter for this page is:
17
+
18
+ ---
19
+ layout: page
20
+ title: Left secondary no tertiary column
21
+ menuInclude: yes
22
+ menuTopTitle: Layout
23
+ menuSubs:
24
+ - title: Left secondary, no tertiary
25
+ index: 4
26
+ secondary-column: left
27
+ tertiary-column: none
28
+ ---
@@ -0,0 +1,28 @@
1
+ ---
2
+ layout: page
3
+ title: Right secondary left tertiary column
4
+ date: 2017-12-17
5
+ menuInclude: yes
6
+ menuTopTitle: Layout
7
+ menuSubs:
8
+ - title: Right secondary, left tertiary
9
+ index: 6
10
+ secondary-column: right
11
+ tertiary-column: present
12
+ excerpt: Right secondary left tertiary column
13
+ ---
14
+ This page overrides the secondary and tertiary column settings by placing the secondary on the right and the tertiary column on the left.
15
+
16
+ The relevant YAML frontmatter for this page is:
17
+
18
+ ---
19
+ layout: page
20
+ title: Right secondary left tertiary column
21
+ menuInclude: yes
22
+ menuTopTitle: Layout
23
+ menuSubs:
24
+ - title: Right secondary, left tertiary
25
+ index: 6
26
+ secondary-column: right
27
+ tertiary-column: present
28
+ ---
@@ -0,0 +1,28 @@
1
+ ---
2
+ layout: page
3
+ title: Right secondary no tertiary column
4
+ date: 2017-12-17
5
+ menuInclude: yes
6
+ menuTopTitle: Layout
7
+ menuSubs:
8
+ - title: Right secondary, no tertiary
9
+ index: 5
10
+ secondary-column: right
11
+ tertiary-column: none
12
+ excerpt: Right secondary no tertiary column
13
+ ---
14
+ This page overrides the secondary and tertiary column settings by placing the secondary on the right and disabling the tertiary column.
15
+
16
+ The relevant YAML frontmatter for this page is:
17
+
18
+ ---
19
+ layout: page
20
+ title: Right secondary no tertiary column
21
+ menuInclude: yes
22
+ menuTopTitle: Layout
23
+ menuSubs:
24
+ - title: Right secondary, no tertiary
25
+ index: 5
26
+ secondary-column: right
27
+ tertiary-column: none
28
+ ---