classic-jekyll-theme 1.7.2 → 1.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b01e77dbf15bd1fe5b99b37a621216328fac3c73
-  data.tar.gz: 6f762ca71a02a3c006c04b2d13584d47491ee62a
+  metadata.gz: c704de0479f5e312da02ad959eceb74eb0d11164
+  data.tar.gz: 368d4c6d1a51b0b072d0228534a9d4b4bf06075f
 SHA512:
-  metadata.gz: 033a9f30a50a2354330b11d451c9b8c3d690fc308c3827e43b64a2032f12304838d0c095c1e011e809148d721eb6ac964601965628826ee98787921928cbb4bd
-  data.tar.gz: 8709992bc60e83596091c3a18e91f598abd70b3232888456ae15dc6bad3bb3b4403b475afc5488936b07428d15deb567b8029ea74a4542376c8fafb4afe7a5e4
+  metadata.gz: 4ec68dc43d4b7ecbc35f9df309a5dd8d5c4bc8e2702927c66fdaf907ca57f9984f9087c1f0e53e4416278ce3013f51cfa36488fbc662af3a018afcdf79da5613
+  data.tar.gz: 07e3734883a04221d543ae5ddd0946cb81f7e589fed2a6b6e1a5c7840cea10e45ea9b402fb7837bf98c9b0da98bcad0f8d761cd5711aa22bacaee26c1a1ea308

data/README.md

@@ -1,4 +1,4 @@
-# Classic-Jekyll-Theme v1.7.2
+# Classic-Jekyll-Theme v1.8.0
 
 Welcome to Classic-Jekyll-Theme. This theme centers around one of the most used website structures on the web. A banner, navigation menu (dropdown), (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:
 
@@ -30,7 +30,7 @@ Other features:
 
 - __Secondary and Tertiary Columns__ can be specified by default and on a page by page basis for presence, location and content.
 
-- __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.
+- __Navigation bar with drop-down menu__ 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.
 
 - __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.
 
@@ -54,9 +54,12 @@ Other features:
 
 - __Blocked layout support__ Styles and includes support the creation of blocked layout (like product pages). To see an example of blocked pages, see the [http://balancingrock.nl](http://balancingrock.nl) home page.
 
-You can get it from [github](https://github.com/Balancingrock/classic-jekyll-theme) or [rubygems](https://rubygems.org/gems/classic-jekyll-theme).
+- __Enable/disable banner__ The banner at the top of the page can be disabled.
 
-Subscribe to news about this theme (be informed of new releases) by sending a mail to: rien@balancingrock.nl with the subject "classic".
+- __Move banner/menu to main column__ The banner & navigation can be moved to within the main column only. The secondary and tertiary columns will ten run right up to the top of the screen.
+
+
+You can download it from [github](https://github.com/Balancingrock/classic-jekyll-theme) or install it with [rubygems](https://rubygems.org/gems/classic-jekyll-theme).
 
 Like to help out?
 
@@ -375,6 +378,13 @@ Release 1.7.2
 
 - Fixed a bug in the blocked-layout.
 
+Release 1.8.0
+
+- Allow banner area to be removed.
+- Allow banner & menu area to be placed at the top of the main column only.
+- Added controls for setting the top and bottom free room of the column dividers.
+
+
 ## Upgrade information
 
 ### from 0.2.6 to 1.0.0
@@ -536,6 +546,31 @@ The index for a menu item. If not present, the menu ordering is undetermined. If
 - Update the version number in the `Gemfile` & delete the `Gemfile.lock` file.
 - The file `_sass/classic/_support.scss` has been updated.
 
+### from 1.7.2 to 1.8.0
+
+- Update the version number in the `Gemfile` & delete the `Gemfile.lock` file.
+- In file `_data/setup.yml` added some documentation and a new setting: `navbanner-position`. This setting is described in that file.
+- Added the following new parameters in `_sass/classic-jekyll-theme.scss`:
+
+~~~~
+    $column-divider-top-spacing
+	$column-divider-bottom-spacing
+	
+	$navbanner-menu-dividers-thickness
+    $navbanner-menu-top-divider-disable
+
+    $navbanner-include-banner
+~~~~
+
+
+- In addition the following files have been changed:
+
+~~~~
+	_layouts/default.html
+	_sass/classic/_formatting.scss
+	_sass/classic/_layout.scss
+~~~~
+    
 ## Feedback
 
 Comments, bug reports, feature requests and improvements are eagerly anticipated via email: rien@balancingrock.nl.

data/_data/setup.yml

@@ -7,19 +7,51 @@
 # In the narrow display all three columns will be below each other (if present)
 # If the tertiary column is used, the secondary column *must* also be used.
 
-# Possible values: 'left', 'right' or 'none', other values are illegal.
+# Controls the placing and visibility of the secondary column
+# Values: left | right | none
+# - left: The secondary column appears on the left side of the main column
+# - right: The secondary column appears on the right side of the main column
+# - none: There is no secondary column (note that this also inhibits the tertiary column)
+# Here the default value is defined, pages may override this in their front matter.
+# The secondary column must reside in the "_includes" directory and is called "secondary-column.html"
+# Front matter can specify a different file for the secondary column ("secondary-column-content").
+#
 secondary-column: left
 
-# Possible values: 'present' or 'none', other values are illegal.
+# Controls visibility of the tertiary column
+# Values: present | none
+# - present: The tertiary column is visible.
+# - none: There is no tertiary column.
+# The tertiary column is always on the opposite side of the main column from the secondary column.
+# Here the default value is defined, pages may override this in their front matter.
+# The tertiary column must reside in the "_includes" directory and is called "tertiary-column.html"
+# Front matter can specify a different file for the tertiary column ("tertiary-column-content").
+#
 tertiary-column: present
 
-# For the number of posts visible on the home page. Must be > 0.
+# For the number of posts visible on the home page.
+# Value: > 0
+#
 number-of-posts-on-home-page: 5
 
 # For the number of posts titles shown in the 'recent' widget
+# Value: > 0
+#
 number-of-recent-posts-in-widget: 10
 
 # Enables or disables the cookies warning.
+# Values: yes | no
+#
 enable-cookies-policy: yes
 
+# Place the navbanner in the main column
+# Values: top | main
+# - top: The navigation banner will be placed above all the columns
+# - main: The navigation banner will be placed inside the main column at the top.
+# This is the default value, it may be overriden by YAML frontmatter.
+#
+# Hint: It may be advantageous to set the $navbanner-include-banner value in the classic-jekyll-theme.scss to 'false' if this value here is set to 'true'.
+#
+navbanner-position: top
+
 # End of file

data/_layouts/default.html

@@ -3,13 +3,16 @@
 {% if page.secondary-column-content %}{% assign secondary-column-content = {{ page.secondary-column-content }} %}{% else %}{% assign secondary-column-content = 'secondary-column.html' %}{% endif %}
 {% if page.tertiary-column %}{% if page.tertiary-column == 'present' %}{% assign tertiary-column = 'present' %}{% endif %}{% else %}{% if site.data.setup.tertiary-column == 'present' %}{% assign tertiary-column = 'present' %}{% endif %}{% endif %}
 {% if page.tertiary-column-content %}{% assign tertiary-column-content = page.tertiary-column-content %}{% else %}{% assign tertiary-column-content = 'tertiary-column.html' %}{% endif %}
+{% if page.navbanner-position %}{% assign navbanner-position = page.navbanner-position %}{% else %}{% assign navbanner-position = site.data.setup.navbanner-position %}{% endif %}
 <html>
 
 	{% include head.html %}
 	
   	<body class="body-panel">
   	
+  		{% if navbanner-position == 'top' %}
   		<div class="navbanner-panel">{% include navbanner.html %}</div>
+  		{% endif %}
 
 		<div class="column-panel">
 
@@ -32,6 +35,9 @@
 
 
 			<div class="primary-column">
+			  	{% if navbanner-position == 'main' %}
+  				<div class="navbanner-panel">{% include navbanner.html %}</div>
+  				{% endif %}
 				<main>{{ content }}</main>
 			</div>
 			

data/_sass/classic-jekyll-theme.scss

@@ -98,8 +98,12 @@ $narrow-vertical-title-shift:			0px; // positive is down, negative is up
 // Set display to 'none' to get rid of the divider, 'block' to enable the divider
 $column-divider-color:					lighten($grey-color, 30%);
 $column-divider-display:				block; //none;
+$column-divider-top-spacing:			$vspacing-unit;
+$column-divider-bottom-spacing:         $vspacing-unit;
 $navbanner-menu-dividers-color:			$theme-color;
 $navbanner-menu-dividers-display:		block; //none;
+$navbanner-menu-dividers-thickness:     2px;
+$navbanner-menu-top-divider-disable:    false; //true;
 $footer-divider-color:					$theme-color;
 $footer-divider-display:				block; //none;
 $widget-divider-color:      			$theme-color;
@@ -111,6 +115,14 @@ $narrow-site-title-font-size:			2 * $base-font-size;
 $medium-site-title-font-size:  			2.5 * $base-font-size;
 $wide-site-title-font-size:				3.5 * $base-font-size;
 
+// Include the banner part in the navigation banner (banner contains icon, title and optionally the menu item)
+// Values: true | false
+// - true: Every layout (narrow, medium and wide) shows the banner with icon, title and optional menu symbol.
+// - false: The narrow layout is unaffected, it will still show the banner. The wide layout will no longer show the banner. The medium layout will no longer show the title nor the menu item but will show the menu bar (i.e. it is identical to the wide layout for this setting)
+//
+// Normally this should always be set to 'true'. However when the navbanner is put at the top of the main column instead of above it, then it may make sense to set this to 'false' as (presumably) the secondary column will show a banner kind of thing. Note that the navbanner location setting is done in the _data/setup.yml file.
+$navbanner-include-banner:              true;
+
 // Special characters used for menu functions
 $menu-symbol-code:          			'\02261'; // Used in narrow and medium banner only
 $menu-closed-submenu-code:				'\021E8'; // Used in narrow when the menu items are visible
@@ -123,7 +135,7 @@ $menu-item-separator:					''; // Default = nothing
 // center     - to center the menu items in the middle of the navigation bar
 // flex-end   - to have them at the right most position possible
 // for more options, see "justif-content".
-$menu-alignment:						flex-start;
+$menu-alignment:						center;
 
 // Navigation menu coloring and sizing
 $menu-symbol-color:						$theme-color;

data/_sass/classic/_formatting.scss

@@ -115,8 +115,12 @@ body {
 
 	// Formating for the divider between the banner and menu.	
 	.nav-top-divider {
-		border-top: 2px solid $navbanner-menu-dividers-color;
-		display: $navbanner-menu-dividers-display;
+		border-top: $navbanner-menu-dividers-thickness solid $navbanner-menu-dividers-color;
+		@if ($navbanner-menu-top-divider-disable == true) {
+			display: none;
+		} @else {
+			display: $navbanner-menu-dividers-display;
+		}
 	}
 	
 	// Formatting for the menu (navigation) area
@@ -211,7 +215,7 @@ body {
 	
 	// Formatting for the divder between menu and column panel.
 	.nav-bottom-divider {
-		border-top: 2px solid $navbanner-menu-dividers-color;
+		border-top: $navbanner-menu-dividers-thickness solid $navbanner-menu-dividers-color;
 		display: $navbanner-menu-dividers-display;
 	}
 }
@@ -226,9 +230,10 @@ body {
 
 .column-panel { background: $column-panel-background; }
 .secondary-column { @extend .insets; background: $secondary-column-background; }
-.primary-column { @extend .insets; background: $primary-column-background; }
+main { @extend .insets; background: $primary-column-background; }
 .tertiary-column { @extend .insets; background: $tertiary-column-background; }
 
+
 // This is the element between the column panel and the footer.
 .footer-divider {
 	display: $footer-divider-display;
@@ -269,9 +274,9 @@ body {
 
 // The column dividers
 .secondary-divider, .tertiary-divider {
-	margin-top: $vspacing-unit;
+	margin-top: $column-divider-top-spacing;
 	margin-left: 0;
-	margin-bottom: $vspacing-unit;
+	margin-bottom: $column-divider-bottom-spacing;
 	margin-right: 0;
 	border-right: 1px solid $column-divider-color;
 	display: $column-divider-display;

data/_sass/classic/_layout.scss

@@ -37,14 +37,14 @@
 	flex-wrap: wrap;
 	justify-content: flex-start;
 
-	// The title is always visible, though the size of the title depends on the width of the window.
+	// The size of the title depends on the width of the window.
 	.navbanner-title {
-
+	
 		// The title area should take up all space not used by the menu label.
 		flex-grow: 1;
 
-		// Center the title.
-		display: flex;
+		// Center the title if visible
+		@if ($navbanner-include-banner == true) { display: flex; } @else { display: none }
 		justify-content: center;
 		align-items: center;
 	}
@@ -55,8 +55,8 @@
 		// Never grow the menu label (symbol)
 		flex-grow: 0;
 
-		// The menu label (symbol) should be centered 
-		display: flex;
+		// The menu label (symbol) should be centered if visible
+		@if ($navbanner-include-banner == true) { display: flex; } @else { display: none }
 		justify-content: center;
 		align-items: center;
 
@@ -76,6 +76,9 @@
 	
 	@include narrow-layout {
 
+		// Override visibility of the label 
+		@if ($navbanner-include-banner == false) { .navbanner-label, .navbanner-title { display: flex; } }
+
 		// Disabled items.
 		.navbanner-menu, .nav-bottom-divider, input, .menu-item-separator { display: none; }
 		
@@ -141,10 +144,11 @@
 		// Disabled items
 		.navbanner-menu, input, .menu-item-symbol, .menu-subitem-symbol, .nav-bottom-divider { display: none; }
 
-		// Conditionally visible/invisible items (conditionally on the invisible checkbox, i.e. menu symbol)
-		input:checked ~ {
 		
-			// Display the menu only when the menu-checkbox (invisible) is checked.
+		// Conditional visibility of the menu bar		
+		@if ($navbanner-include-banner == false) {
+				
+			// Display the menu because the input checkbox (label) in the banner is never visible.
 			.navbanner-menu {
 			
 				// Use flex to enable alignment of the top level menu items
@@ -157,6 +161,25 @@
 			// Also display the bottom divider when the menu is visible.
 			.nav-bottom-divider { display: inline; }
 		}
+		@else {
+		
+			// Conditionally visible/invisible items (conditionally on the invisible checkbox, i.e. menu symbol)
+			input:checked ~ {
+		
+				// Display the menu only when the menu-checkbox (invisible) is checked.
+				.navbanner-menu {
+			
+					// Use flex to enable alignment of the top level menu items
+					display: flex;
+					flex-direction: row;
+					flex-wrap: wrap;
+					justify-content: $menu-alignment;
+				}
+			
+				// Also display the bottom divider when the menu is visible.
+				.nav-bottom-divider { display: inline; }
+			}
+		}
 
 		.navbanner-menu {
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: classic-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 1.7.2
+  version: 1.8.0
 platform: ruby
 authors:
 - Rien
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-02-05 00:00:00.000000000 Z
+date: 2017-02-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll-feed