classic-jekyll-theme 1.1.1 → 1.2.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 03e312fd52c2965e13699a18742aee07962bc5ed
4
- data.tar.gz: c33b01d120fcd08bc7042daec32a1487084c66d3
3
+ metadata.gz: 0221074cc516dfc8fad5f42e93d9ffc4fce73abc
4
+ data.tar.gz: f5ad911bbb0bcb48947cdc84c61d062be7ae8b63
5
5
  SHA512:
6
- metadata.gz: 564695bf3cc71333e79e480ba3a0d4c6c48039666e74515356ad194d795c9290f6047ea42006ea7739624f8c785d505fddc09d2d2fea8925439a1e0f245b8466
7
- data.tar.gz: bc6544e7a1d3773c53bf74a5f1f3eb3baebed7c310bc62444690aa41673120e59089104cca4dce65a40072f5376315e8452bcebc834f62a475c30ed9f53d8ae2
6
+ metadata.gz: e90bd2735605615011044291074b40e6a957183a73b56f8935d487adfbe0cf1962d75d90709b06a743e03a7175e7f152627bdb8461e1f9c77ef9eb44cc97dacd
7
+ data.tar.gz: '081216263e34f77a4ed38154ec84bd123ecd6f7e14c08467bb3bc60da2d84671988ab204192f601668a7ed883ef192d28e89b9a1077a2bdd10037b47bdbdc7e9'
data/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # Classic-Jekyll-Theme v1.1.1
1
+ # Classic-Jekyll-Theme v1.2.0
2
2
 
3
3
  Welcome to Classic-Jekyll-Theme. This theme centers around one of the most used website structures on the web. A banner, navigation menu, (up to) three columns and a footer. The design is fully responsive for three different screen widths: wide, medium and narrow. It is probably best shown in an example:
4
4
 
@@ -24,11 +24,19 @@ An example screenshot:
24
24
 
25
25
  ![example](http://balancingrock.nl/img/classic-jekyll-theme-screenshot-half.png)
26
26
 
27
- The navigation bar is created automatically from the available pages when they have the proper YAML frontmatter. The navigation bar contains the top level menu items, while the submenu items show up as a drop-down menu when the cursor hovers over the corresponding menu item.
27
+ Other features:
28
28
 
29
- Category pages are created semi-automatically; the web designer has to identify the categories for inclusion, but the menu entry and category pages are created automatically.
29
+ - __Navigation bar__ is created automatically from the available pages when these have the proper YAML frontmatter. The navigation bar contains the top level menu items, while the submenu items show up as a drop-down menu when the cursor hovers over the corresponding menu item.
30
30
 
31
- For european users a cookies policy is included by default. It can be easily disabled for non-european websites though.
31
+ - __Category pages__ are created semi-automatically; the web designer has to identify the categories for inclusion, but the menu entry and category pages are created automatically.
32
+
33
+ - __Cookies policy__ for european users is included by default. It can be easily disabled for non-european websites though.
34
+
35
+ - __Language customization__ (not multi-language support!) is available by way of the _config.yml file.
36
+
37
+ - __Icon__ support for an icon in the upper left corner of the site.
38
+
39
+ - __Background images__ and __Background color__ settings for major site elements.
32
40
 
33
41
  ## Installation & setup
34
42
 
@@ -219,15 +227,31 @@ For a consistent user experience in the narrow layout, it is recommened not to l
219
227
 
220
228
  ## History
221
229
 
222
- 0.2.6 Inital version (before this I was only getting acquainted with the gem-publishing mechanism)
230
+ Release 0.2.6
231
+
232
+ - Inital version (before this I was only getting acquainted with the gem-publishing mechanism)
233
+
234
+ Release 1.0.0
235
+
236
+ - Fixed a problem with navigation menu generation. (Insufficient control over menu item placement)
223
237
 
224
- 1.0.0 Fixed a problem with navigation menu generation. (Insufficient control over menu item placement)
238
+ Release 1.0.1
225
239
 
226
- 1.0.1 Fixed some info in this readme file and in the example pages.
240
+ - Fixed some info in this readme file and in the example pages.
227
241
 
228
- 1.1.0 Added language customization for default theme elements in the `_config.yml` file
242
+ Release 1.1.0
229
243
 
230
- 1.1.1 Added clarification to upgrade information.
244
+ - Added language customization for default theme elements in the `_config.yml` file
245
+
246
+ Release 1.1.1
247
+
248
+ - Added clarification to upgrade information.
249
+
250
+ Release 1.2.0
251
+
252
+ - Added facilities for background images.
253
+ - Added option for an icon on the top-left side of the site.
254
+ - Fixed a problem where the tertiary column divider was not removed for medium layout.
231
255
 
232
256
  ## Upgrade information
233
257
 
@@ -268,6 +292,10 @@ The index for a menu item. If not present, the menu ordering is undetermined. If
268
292
 
269
293
  No changes needed except for the `Gemfile` in which you should upgrade the version number for the classic-jekyll-theme.
270
294
 
295
+ ### from 1.1.1 to 1.2.0
296
+
297
+ If changes were made to `_sass/classic-jekyll-theme.scss` then this file must be replaced with the new version that comes with this release and the changes must be re-applied. Note that background color setting has changed slightly.
298
+
271
299
  ## Known problems (need your help)
272
300
 
273
301
  There is some odd behaviour in the navigation bar that I have not been able to nail down yet. It has to do with the space between top level menu items. There is some additional space that I am not able to trace down. For those who like a puzzle: there is some space around a ".navbanner-menu ul li" that has no obvious source. Please let me know if you happen to find where it comes from. (rien@balancingrock.nl)
@@ -1,3 +1,6 @@
1
+ <!-- The icon in the top-left side, content and size set through CSS3 -->
2
+ <div class="navbanner-icon"></div>
3
+
1
4
  <!-- Title of the site is always visible -->
2
5
  <div class="navbanner-title">
3
6
  <p>{{ site.title }}</p>
@@ -3,7 +3,7 @@
3
3
 
4
4
  {% include head.html %}
5
5
 
6
- <body>
6
+ <body class="body-panel">
7
7
 
8
8
  <div class="navbanner-panel">{% include navbanner.html %}</div>
9
9
 
@@ -33,37 +33,78 @@ $grey-color-dark: darken($grey-color, 25%);
33
33
 
34
34
  // The theme-color is the default for some of the other elements that can be colored in this theme.
35
35
  // Its value is only used in this file.
36
- $theme-color: green;
37
-
38
- $navbanner-background-color: $background-color;
39
- $navbanner-menubar-background-color: $background-color;
40
- $primary-column-background-color: $background-color;
41
- $secondary-column-background-color: $background-color;
42
- $tertiary-column-background-color: $background-color;
43
- $footer-background-color: $background-color;
36
+ $theme-color: green;
37
+
38
+ // Background color or pictures (keep in mind that some of these will overlap)
39
+ // The value set is assigned to the CSS3 'background' property.
40
+ // background: color image-url position/size repeat origin clip attachment initial|inherit;
41
+ // The properties that can be set, are: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment.
42
+ // See http://www.w3schools.com/cssref/css3_pr_background.asp for a full description.
43
+ // Example: ...-background: url("/assets/img/bckgnd.png") repeat
44
+ $wide-body-background: initial;
45
+ $medium-body-background: initial;
46
+ $narrow-body-background: initial;
47
+ $wide-banner-background: initial;
48
+ $medium-banner-background: initial;
49
+ $narrow-banner-background: initial;
50
+ $menubar-background: initial;
51
+ $column-panel-background: initial;
52
+ $primary-column-background: initial;
53
+ $secondary-column-background: initial;
54
+ $tertiary-column-background: initial;
55
+ $wide-footer-background: initial;
56
+ $medium-footer-background: initial;
57
+ $narrow-footer-background: initial;
58
+
59
+ // For an icon in the top left of the site (left side of the banner)
60
+ // Set the url's to 'none' if no icon should be shown.
61
+ // Note: width and height are ignored when the url is set to 'none'
62
+ $wide-icon-url: none;
63
+ $wide-icon-width: 0px;
64
+ $wide-icon-height: 0px;
65
+ $medium-icon-url: none;
66
+ $medium-icon-width: 0px;
67
+ $medium-icon-height: 0px;
68
+ $narrow-icon-url: none;
69
+ $narrow-icon-width: 0px;
70
+ $narrow-icon-height: 0px;
44
71
 
45
72
  // Colors for the dividers between the panels, columns and widgets
46
73
  // Set display to 'none' to get rid of the divider, 'block' to enable the divider
47
- $column-divider-color: lighten($grey-color, 30%);
48
- $column-divider-display: block; //none;
49
- $navbanner-menu-dividers-color: $theme-color;
50
- $navbanner-menu-dividers-display: block; //none;
51
- $footer-divider-color: $theme-color;
52
- $footer-divider-display: block; //none;
53
- $widget-divider-color: $theme-color;
54
- $widget-divider-display: block; //none;
74
+ $column-divider-color: lighten($grey-color, 30%);
75
+ $column-divider-display: block; //none;
76
+ $navbanner-menu-dividers-color: $theme-color;
77
+ $navbanner-menu-dividers-display: block; //none;
78
+ $footer-divider-color: $theme-color;
79
+ $footer-divider-display: block; //none;
80
+ $widget-divider-color: $theme-color;
81
+ $widget-divider-display: block; //none;
55
82
 
56
83
  // Site title and menu-label coloring and sizing
57
- $site-title-color: $theme-color;
58
- $narrow-site-title-font-size: 2 * $base-font-size;
59
- $medium-site-title-font-size: 2.5 * $base-font-size;
60
- $wide-site-title-font-size: 3.5 * $base-font-size;
84
+ $site-title-color: $theme-color;
85
+ $narrow-site-title-font-size: 2 * $base-font-size;
86
+ $medium-site-title-font-size: 2.5 * $base-font-size;
87
+ $wide-site-title-font-size: 3.5 * $base-font-size;
88
+
89
+ // Shift the title this much to the right or left to fine-tune the title placement.
90
+ // Implementation note: actually sets a margin-left and margin-top on the div that holds the title.
91
+ $wide-horizontal-title-shift: 0px; // positive is to the right, negative is to the left
92
+ $wide-vertical-title-shift: 0px; // positive is down, negative is up
93
+ $medium-horizontal-title-shift: 0px; // positive is to the right, negative is to the left
94
+ $medium-vertical-title-shift: 0px; // positive is down, negative is up
95
+ $narrow-horizontal-title-shift: 0px; // positive is to the right, negative is to the left
96
+ $narrow-vertical-title-shift: 0px; // positive is down, negative is up
97
+
98
+ // Setting a minimum height for the banner. This can be helpfull if a background image has to be displayed. Note that for 'auto' the banner hight is determined by the tallest of either the icon image or title text.
99
+ $wide-minimum-banner-height: auto; // Set to 'auto' to disable a minimum height
100
+ $medium-minimum-banner-height: auto; // Set to 'auto' to disable a minimum height
101
+ $narrow-minimum-banner-height: auto; // Set to 'auto' to disable a minimum height
61
102
 
62
103
  // Special characters used for menu functions
63
- $menu-symbol-code: '\02261'; // ≡ Used in narrow and medium banner only
64
- $menu-closed-submenu-code: '\021E8'; // ⇨ Used in narrow when the menu items are visible
65
- $menu-open-submenu-code: '\021E9'; // ⇩ Used in narrow when the submenu items are visible
66
- $menu-item-separator: ''; // Default = nothing
104
+ $menu-symbol-code: '\02261'; // ≡ Used in narrow and medium banner only
105
+ $menu-closed-submenu-code: '\021E8'; // ⇨ Used in narrow when the menu items are visible
106
+ $menu-open-submenu-code: '\021E9'; // ⇩ Used in narrow when the submenu items are visible
107
+ $menu-item-separator: ''; // Default = nothing
67
108
 
68
109
  // Alignent of the menu items in the navigation bar.
69
110
  // This is done via the "justify-content" flex property, valid values are:
@@ -71,7 +112,7 @@ $menu-item-separator: ''; // Default = nothing
71
112
  // center - to center the menu items in the middle of the navigation bar
72
113
  // flex-end - to have them at the right most position possible
73
114
  // for more options, see "justif-content".
74
- $menu-alignment: flex-start;
115
+ $menu-alignment: flex-start;
75
116
 
76
117
  // Navigation menu coloring and sizing
77
118
  $menu-symbol-color: $theme-color;
@@ -89,19 +130,19 @@ $narrow-menu-item-height: 3 * $vspacing-unit;
89
130
  $narrow-menu-subitem-height: 2.5 * $vspacing-unit;
90
131
 
91
132
  // Navigation bar formatting
92
- $navbar-side-margin: $hspacing-unit; // Only for medium and wide navbars
93
- $navbar-menu-item-spacing: $hspacing-unit; // Only for medium and wide navbars
133
+ $navbar-side-margin: $hspacing-unit; // Only for medium and wide navbars
134
+ $navbar-menu-item-spacing: $hspacing-unit; // Only for medium and wide navbars
94
135
 
95
136
  // Column width specification. The secondary and tertiary column can be removed in the _config.yml file.
96
- $primary-column-min-width: 480px;
97
- $secondary-column-width: 240px;
98
- $tertiary-column-width: 240px;
137
+ $primary-column-min-width: 480px;
138
+ $secondary-column-width: 240px;
139
+ $tertiary-column-width: 240px;
99
140
 
100
141
  // There should be no need to change the next 4 definitions
101
- $wide-min-width: $primary-column-min-width + $secondary-column-width + $tertiary-column-width;
102
- $medium-max-width: $wide-min-width - 1;
103
- $medium-min-width: $primary-column-min-width + $secondary-column-width;
104
- $narrow-max-width: $medium-min-width - 1;
142
+ $wide-min-width: $primary-column-min-width + $secondary-column-width + $tertiary-column-width;
143
+ $medium-max-width: $wide-min-width - 1;
144
+ $medium-min-width: $primary-column-min-width + $secondary-column-width;
145
+ $narrow-max-width: $medium-min-width - 1;
105
146
 
106
147
 
107
148
  // Import partials.
@@ -1,27 +1,105 @@
1
1
  // The distinction between "layout" and "formatting" is as follows: If the resulting CCS affects the placement of and/or visibility of multiple items, it is placed in "layout". If the CSS affects only the appearance of an item, then it appears here. Of course the appearance may affect the layout, so there is no hard distinction.
2
2
 
3
+ // Setting a background image on the entire site-title-color
4
+ body {
5
+ @include wide-layout { background: $wide-body-background; }
6
+ @include medium-layout { background: $medium-body-background; }
7
+ @include narrow-layout { background: $narrow-body-background; }
8
+ }
9
+
3
10
  // Formatting for the navbanner panel elements.
4
11
  .navbanner-panel {
5
12
 
6
- // Formatting for the banner area
7
- .navbanner-title, .navbanner-label {
13
+ .navbanner-icon {
14
+ @include wide-layout {
15
+ @if $wide-icon-url == none {
16
+ display: none;
17
+ } @else {
18
+ background: $wide-icon-url no-repeat center center;
19
+ width: $wide-icon-width;
20
+ height: $wide-icon-height;
21
+ }
22
+ }
23
+ @include medium-layout {
24
+ @if $medium-icon-url == none {
25
+ display: none;
26
+ } @else {
27
+ background: $medium-icon-url no-repeat center center;
28
+ width: $medium-icon-width;
29
+ height: $medium-icon-height;
30
+ }
31
+ }
32
+ @include narrow-layout {
33
+ @if $narrow-icon-url == none {
34
+ display: none;
35
+ } @else {
36
+ background: $narrow-icon-url no-repeat center center;
37
+ width: $narrow-icon-width;
38
+ height: $narrow-icon-height;
39
+ }
40
+ }
41
+ }
8
42
 
9
- // Color for the title itself
43
+ // Title formatting
44
+ .navbanner-title {
10
45
  p { color: $site-title-color; }
11
-
46
+ @include wide-layout {
47
+ @if $wide-icon-url == none {
48
+ margin-left: $wide-horizontal-title-shift;
49
+ } @else {
50
+ margin-left: $wide-horizontal-title-shift - $wide-icon-width;
51
+ }
52
+ margin-top: $wide-vertical-title-shift;
53
+ min-height: $wide-minimum-banner-height;
54
+ background: $wide-banner-background;
55
+ font-size: $wide-site-title-font-size;
56
+ }
57
+ @include medium-layout {
58
+ @if $medium-icon-url == none {
59
+ margin-left: $medium-horizontal-title-shift;
60
+ } @else {
61
+ margin-left: $medium-horizontal-title-shift - $medium-icon-width;
62
+ }
63
+ margin-top: $medium-vertical-title-shift;
64
+ min-height: $medium-minimum-banner-height;
65
+ background: $medium-banner-background;
66
+ font-size: $medium-site-title-font-size;
67
+ }
68
+ @include narrow-layout {
69
+ @if $narrow-icon-url == none {
70
+ margin-left: $narrow-horizontal-title-shift;
71
+ } @else {
72
+ margin-left: $narrow-horizontal-title-shift - $narrow-icon-width;
73
+ }
74
+ margin-top: $narrow-vertical-title-shift;
75
+ min-height: $narrow-minimum-banner-height;
76
+ background: $narrow-banner-background;
77
+ font-size: $narrow-site-title-font-size;
78
+ }
79
+ }
80
+
81
+ // Label formatting
82
+ .navbanner-label {
83
+
12
84
  // Color for the menu symbol (only visible on narrow and medium sized layouts)
13
85
  label p { color: $menu-symbol-color; }
14
86
 
15
87
  // Size of the title and menu symbol depends on the layout in effect.
16
88
  @include narrow-layout {
89
+ min-height: $wide-minimum-banner-height;
90
+ background: $wide-banner-background;
17
91
  font-size: $narrow-site-title-font-size;
18
92
  label { padding: 0 $hspacing-unit; } // Give the menu label more area to make it easier to tap.
19
93
  }
20
94
  @include medium-layout {
95
+ min-height: $medium-minimum-banner-height;
96
+ background: $medium-banner-background;
21
97
  font-size: $medium-site-title-font-size;
22
98
  label { padding: 0 $hspacing-unit; } // Give the menu label more area to make it easier to tap.
23
99
  }
24
100
  @include wide-layout {
101
+ min-height: $narrow-minimum-banner-height;
102
+ background: $narrow-banner-background;
25
103
  font-size: $wide-site-title-font-size;
26
104
  }
27
105
  }
@@ -35,6 +113,9 @@
35
113
  // Formatting for the menu (navigation) area
36
114
  .navbanner-menu {
37
115
 
116
+ // Background settings
117
+ background: $menubar-background;
118
+
38
119
  // Lists are used for the menu's. No spacing for the top level list and no item markers. There will be an item marker for the narrow layout but that marker is state-dependent and set via a content property.
39
120
  ul { margin: 0; list-style-type: none; }
40
121
 
@@ -130,18 +211,11 @@
130
211
  padding-bottom: $vspacing-unit;
131
212
  padding-left: $hspacing-unit;
132
213
  }
133
- .secondary-column { @extend .insets; }
134
- .primary-column { @extend .insets; }
135
- .tertiary-column { @extend .insets; }
136
- .footer-panel { @extend .insets; }
137
-
138
- // Set the background colors for the panels & columns
139
- .navbanner-panel { background-color: $navbanner-background-color; }
140
- .navbanner-panel .navbanner-menu { background-color: $navbanner-menubar-background-color; }
141
- .primary-column { background-color: $primary-column-background-color; }
142
- .secondary-column { background-color: $secondary-column-background-color; }
143
- .tertiary-column { background-color: $tertiary-column-background-color; }
144
- .footer-panel { background-color: $footer-background-color; }
214
+
215
+ .column-panel { background: $column-panel-background; }
216
+ .secondary-column { @extend .insets; background: $secondary-column-background; }
217
+ .primary-column { @extend .insets; background: $primary-column-background; }
218
+ .tertiary-column { @extend .insets; background: $tertiary-column-background; }
145
219
 
146
220
  // This is the element between the column panel and the footer.
147
221
  .footer-divider {
@@ -151,10 +225,13 @@
151
225
  border-bottom: 1px solid $footer-divider-color;
152
226
  }
153
227
 
154
- // Formatting for the footer.
155
228
  .footer-panel {
229
+ @extend .insets;
156
230
  font-size: $small-font-size;
157
- text-align: center;
231
+ text-align: center;
232
+ @include wide-layout { background: $wide-footer-background; }
233
+ @include medium-layout { background: $medium-footer-background; }
234
+ @include narrow-layout { background: $narrow-footer-background; }
158
235
  }
159
236
 
160
237
  // Formatting for the widgets. Note that widgets are small.
@@ -75,7 +75,7 @@
75
75
  @include narrow-layout {
76
76
 
77
77
  // Disabled items.
78
- .navbanner-menu, .nav-bottom-divider, input, .menu-item-separator { display: none; }
78
+ .navbanner-menu, .nav-bottom-divider, input, .menu-item-separator, .wide-icon, .medium-icon { display: none; }
79
79
 
80
80
  // Conditionally visible/invisible items (conditionally on the invisible checkbox, i.e. menu symbol)
81
81
  input:checked ~ {
@@ -137,7 +137,7 @@
137
137
  @include medium-layout {
138
138
 
139
139
  // Disabled items
140
- .navbanner-menu, input, .menu-item-symbol, .menu-subitem-symbol, .nav-bottom-divider { display: none; }
140
+ .navbanner-menu, input, .menu-item-symbol, .menu-subitem-symbol, .nav-bottom-divider, .wide-icon, .narrow-icon { display: none; }
141
141
 
142
142
  // Conditionally visible/invisible items (conditionally on the invisible checkbox, i.e. menu symbol)
143
143
  input:checked ~ {
@@ -200,7 +200,7 @@
200
200
  @include wide-layout {
201
201
 
202
202
  // Do not show the small butterfly icon, the short title, the checkbox label, the input(s) and the menu symbols
203
- .navbanner-label, input, .menu-item-symbol, .menu-subitem-symbol { display: none; }
203
+ .navbanner-label, input, .menu-item-symbol, .menu-subitem-symbol, .medium-icon, .narrow-icon { display: none; }
204
204
 
205
205
  .navbanner-menu {
206
206
 
@@ -285,7 +285,7 @@
285
285
  .primary-column { flex: 1 1 auto; width: 1px; } // A width must be specified
286
286
 
287
287
  // Unused
288
- .tertiary-divder, .secondary-widget-divider, .tertiary-column { display: none; }
288
+ .tertiary-divider, .secondary-widget-divider, .tertiary-column { display: none; }
289
289
  }
290
290
 
291
291
  @include wide-layout {
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: classic-jekyll-theme
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.1.1
4
+ version: 1.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Rien
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2016-11-11 00:00:00.000000000 Z
11
+ date: 2016-11-14 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll-feed
@@ -146,7 +146,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
146
146
  version: '0'
147
147
  requirements: []
148
148
  rubyforge_project:
149
- rubygems_version: 2.0.14.1
149
+ rubygems_version: 2.6.8
150
150
  signing_key:
151
151
  specification_version: 4
152
152
  summary: A responsive 3 column Jekyll theme for wide, medium and narrow displays.