classic-jekyll-theme 1.3.3 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4cd99a944b87d5bee875188df4ad6b90ab088f74
-  data.tar.gz: 4cd4e5cbde898dc92024ec6bbb4175579c85dafe
+  metadata.gz: 7e4afdb8878750bd989388454d71fbd29b2a6dd1
+  data.tar.gz: f55330e49aaa8531fe96d6ba326ac0b6ee0f8842
 SHA512:
-  metadata.gz: c0bbbfe2c742057f178bd7856bcf1ebd876ca2d158e3103dfd8dedab2d055f19b4dc60453641c78310700a5c639ae85e688c3480749be6607222a87d2fc12c1a
-  data.tar.gz: 3436bec797bed1e9c137f1b71c7b53e81d4a63b7556d743bc7205092fabe1e48324310803026a08071082cf5f154338d59ea58aa09be8378049b9cccd8acf55c
+  metadata.gz: 953e04315ad1288d1c428b46d0f46719161166f7ee0e1b7afab8ed9d64a439ccf3a622466dde7a5c0ed060ec019f373e451d033b6d1a12bca46e6d1f5832231a
+  data.tar.gz: 4aa0f53e531adf7f1a0684c7df10956f4a5c79a9b58bc9aaecd7c694bd708c72b4aead1f6d69a94cb82d1f6f3f6bc5e0e91d87bb572fcc3e85549b269e9416b8

data/README.md

@@ -1,4 +1,4 @@
-# Classic-Jekyll-Theme v1.3.3
+# Classic-Jekyll-Theme v1.4.0
 
 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:
 
@@ -38,6 +38,12 @@ Other features:
 
 - __Background images__ and __Background color__ settings for major site elements.
 
+- __Widgets__ the following widgets are included:
+	- recent-posts: Shows a list of the N most recent posts (N is configurable).
+	- social-media: Shows a list of social media sites with their links (Edit to add).
+	- subscribe: Shows how a visitor can subscribe to your site (Edit to add).
+	- youtube-player: Shows a youtube player that scales with the column it is used in (video id parameter).
+
 You can get it from [github](https://github.com/Swiftrien/classic-jekyll-theme) or [rubygems](https://rubygems.org/gems/classic-jekyll-theme).
 
 Subscribe to news about this theme (be informed of new releases) by sending a mail to: rien@balancingrock.nl with the subject "classic".
@@ -62,13 +68,13 @@ Create a new project:
 
 	$ jekyll new great-site
 	
-Change the directory:
+Goto to the directory:
 
 	$ cd great-site
 	
 Change in the Gemfile:
 
-	From `gem "minima", "~> 2.0"` to `gem "classic-jekyll-theme", "~>1.3.3"`
+	From `gem "minima", "~> 2.0"` to `gem "classic-jekyll-theme", "~>1.4.0"`
 
 Change in the _config.yml:
 
@@ -217,6 +223,12 @@ To create a page that must be included in the menu bar, add the following front
 
 For a consistent user experience in the narrow layout, it is recommened not to link pages to top level menu items if these menu items have a drop-down submenu.
 
+## Editing the secondary and tertiary columns
+
+The prime column is populated by the 'normal' pages and posts. The secondary and tertairy columns have a fixed content that is created by directly editing the `_include/secondary-column.html` and `_include/tertiary-column.html`. These files must be copied from the gem dictionary to the directory with the jekyll files for the website at the path `_include`.
+
+Documentation for the widgets is included in the widget files themselves. The are located in the gem directory at `_includes/widgets/`.
+
 ## History
 
 Release 0.2.6
@@ -276,6 +288,10 @@ Release 1.3.3
 
 - Added the "jekyll-data" gem to simplify initial configuration/setup.
 
+Release 1.4.0
+
+- Added "youtube-player" widget.
+- Improved placement control of the site icon
 
 ## Upgrade information
 
@@ -314,43 +330,67 @@ The index for a menu item. If not present, the menu ordering is undetermined. If
 
 ### from 1.0.0 (and later) to 1.1.1
 
-- Update the version number in the `Gemfile`
+- Update the version number in the `Gemfile` & delete the `Gemfile.lock` file.
 
 ### from 1.1.1 to 1.2.0
 
 - 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.
-- As always, update the version number in the `Gemfile`
+- Update the version number in the `Gemfile` & delete the `Gemfile.lock` file.
 
 ### from 1.2.0 to 1.2.1
 
 - Replace the 'initial' values in `_sass/classic-jekyll-theme.scss` for the backgrounds with 'none'.
 - The icon size (width and height) values are no longer used and can be removed.
-- As always, update the version number in the `Gemfile`
+- Update the version number in the `Gemfile` & delete the `Gemfile.lock` file.
 
 ### from 1.2.1 to 1.2.2
 
 - The banner height settings in `_sass/classic-jekyll-theme.scss` are no longer "minimum" specifications but absolute specifications and therefore have been renamed from `<layout-size>-minimum-banner-height` to `<layout-size>-banner-height`.
-- As always, update the version number in the `Gemfile`
+- Update the version number in the `Gemfile` & delete the `Gemfile.lock` file.
 
 ### from 1.2.2 to 1.2.3
 
-- Update the version number in the `Gemfile`
+- Update the version number in the `Gemfile` & delete the `Gemfile.lock` file.
 
 ### from 1.2.3 to 1.3.0
 
 - Copy the `_data` directory from the gem to the website directory as per installation instructions in this document.
 - Remove the classic-jekyll-theme configurations from the `_config.yml` file, and reapply any changes made to either `_data/setup.yml` and/or `_data/text-for.yml` as required.
-- As always, update the version number in the `Gemfile`
+- Update the version number in the `Gemfile` & delete the `Gemfile.lock` file.
 
 ### from 1.3.0 to 1.3.2
 
 - If not done yet, copy the `_data` directory from the gem to the website directory as per installation instructions in this document.
-- Update the version number in the `Gemfile`
+- Update the version number in the `Gemfile` & delete the `Gemfile.lock` file.
 
 ### from 1.3.2 to 1.3.3
 
 - It is no longer necessary to copy the `_data` folder content to the site directory.
-- Update the version number in the `Gemfile`
+- Update the version number in the `Gemfile` & delete the `Gemfile.lock` file.
+
+### from 1.3.3 to 1.4.0
+
+- Add to `classic-jekyll-theme.scss` the import of `classic/widget-support` (at end of file)
+- Add the following definitions to the existing `classic-jekyll-theme.scss` in your project:
+^
+
+~~~~~~
+     $wide-icon-vposition:		center;
+     $wide-icon-hposition:		left;
+	 $wide-icon-voffset:		0px;
+	 $wide-icon-hoffset:		0px;
+	 $medium-icon-vposition:	center;
+	 $medium-icon-hposition:	left;
+	 $medium-icon-voffset:		0px;
+	 $medium-icon-hoffset:		0px;
+	 $narrow-icon-vposition:	center;
+	 $narrow-icon-hposition:	left;
+	 $narrow-icon-voffset:		0px;
+	 $narrow-icon-hoffset:		0px;
+~~~~~~
+
+- Alternatively copy the new `classic-jekyll-theme.scss` to your project and re-apply the changes you made.
+- Update the version number in the `Gemfile` & delete the `Gemfile.lock` file.
 
 ## Known problems (need your help)
 

data/_includes/navbanner.html

@@ -1,5 +1,6 @@
 <!-- Title of the site is always visible -->
 <div class="navbanner-title">
+	<div class="banner-icon"></div>
 	<p class="site-title-text">{{ site.title }}</p>
 </div>
 

data/_includes/widgets/cookie-consent.html

@@ -1,4 +1,12 @@
-<!-- Begin Cookie Consent plugin by Silktide - http://silktide.com/cookieconsent -->
+{% comment %}
+
+Usage:
+
+Enable the cookie consent script by setting the "_data/setup.yml" item `enable-cookies-policy` to `yes`.
+
+Configure the text for the message and the buttons in "_data/text-for.yml" for the items `tUsesCookies`, `tCookieOk` and `tMoreInfo`
+
+{% endcomment %}
 {% assign usesCookies = 'This site uses cookies' %}
 {% if site.data.text-for.tUsesCookies %}{% assign usesCookies = site.data.text-for.tUsesCookies %}{% endif %}
 {% assign cookieOk = 'OK' %}

data/_includes/widgets/recent-posts.html

@@ -1,3 +1,12 @@
+{% comment %}
+
+Usage:
+
+Configure the number of referenced posts by assigning a value to `number-of-recent-posts-in-widget` in the file "_data/setup.yml".
+
+Configure the text for the header message in "_data/text-for.yml" for the item `tRecent`.
+
+{% endcomment %}
 <div>
 	{% assign recent = 'Recent' %}
 	{% if site.data.text-for.tRecent %}{% assign recent = site.data.text-for.tRecent %}{% endif %}

data/_includes/widgets/social-media.html

@@ -1,3 +1,12 @@
+{% comment %}
+
+Usage:
+
+Configure the github-username and twitter-username in `_config.yml`.
+
+Configure the text for the header message in "_data/text-for.yml" for the item `tSocialMediaResources`.
+
+{% endcomment %}
 <div>
 	{% assign message = 'Social Media & Resources' %}
 	{% if site.data.text-for.tSocialMediaResources %}{% assign message = site.data.text-for.tSocialMediaResources %}{% endif %}

data/_includes/widgets/subscribe.html

@@ -1,3 +1,10 @@
+{% comment %}
+
+Usage:
+
+Configure the text for the header message in "_data/text-for.yml" for the item `tSubscribe`.
+
+{% endcomment %}
 <div>
 	{% assign subscribe = 'Subscribe' %}
 	{% if site.data.text-for.tSubscribe %}{% assign subscribe = site.data.text-for.tSubscribe %}{% endif %}

data/_includes/widgets/youtube-player.html

@@ -0,0 +1,38 @@
+{% comment %}
+
+Purpose:
+
+To include a youtube video player in HD format in a column. The player will size (dynamically) with te size of the column. It will take up the entire available width, so if margins are needed, apply these to the object this player is included in.
+
+
+Usage:
+
+	{% include youtube-hd-player.html
+		video = "Identifier of the video"
+	%}
+
+
+Also needs the following CSS (written in SASS, included in `_sass/_widget-support.scss`):
+
+.scaling-iframe-wrapper-hd {
+	position: relative;
+	padding-bottom: 56.25%; // HD ratio is 16:9 => (9/16)*100%= 56.25%
+	padding-top: 30px;
+	overflow: hidden;
+	margin-top: $vspacing-unit;
+	margin-bottom: $vspacing-unit;
+	iframe {
+		// Allows component to extend over the padding area
+		position: absolute;
+		// Let the upper left corner be the upper left corner of the containg element
+		top: 0;
+		left: 0;
+		// Make the iframe as big as its container.
+		width: 100%;
+		height: 100%;
+	}
+}
+
+{% endcomment %}
+
+<div class="scaling-iframe-wrapper-hd"><iframe src="https://www.youtube.com/embed/{{ include.video }}"></iframe></div>

data/_sass/classic-jekyll-theme.scss

@@ -56,12 +56,29 @@ $wide-footer-background:				none;
 $medium-footer-background:				none;
 $narrow-footer-background:				none;
 
-// For an icon in the top left of the site (left side of the banner)
+// To include an icon on the site.
 // Set the url's to 'none' if no icon should be shown.
 // Example: ...-icon-url: url("/assets/img/wide-icon.png");
+// The position of the icon can be controlled via the position and offset values. They area relative to the banner area.
+// Valid hposition values are 'left', 'center' and 'right'.
+// Valid vposition values are 'top', 'center' and 'bottom'.
+// Positive offset values are "to the right" and "down". Negative are "left" and "up".
+// Note that you may need to set the banner-height to ensure that the entire icon is contained in the banner area.
 $wide-icon-url:							none;
+$wide-icon-vposition:					center;
+$wide-icon-hposition:					left;
+$wide-icon-voffset:						0px;
+$wide-icon-hoffset:						0px;
 $medium-icon-url:						none;
+$medium-icon-vposition:					center;
+$medium-icon-hposition:					left;
+$medium-icon-voffset:					0px;
+$medium-icon-hoffset:					0px;
 $narrow-icon-url:						none;
+$narrow-icon-vposition:					center;
+$narrow-icon-hposition:					left;
+$narrow-icon-voffset:					0px;
+$narrow-icon-hoffset:					0px;
 
 // Setting a height for the banner. This can be helpfull if a background image or icon has to be displayed.
 // Note that for 'auto' the banner hight is determined by the title text.
@@ -147,5 +164,6 @@ $narrow-max-width:						$medium-min-width - 1;
   "classic/formatting",
   "classic/syntax-highlighting",
   "classic/post",
-  "classic/page"
+  "classic/page",
+  "classic/widget-support"
 ;

data/_sass/classic/_formatting.scss

@@ -1,20 +1,5 @@
 // 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.
 
-// Sets the background for the .navbanner-title
-@mixin titleBackgroundWithIcon($bgnd, $icn) {
-	 @if $bgnd != none {
-	 	@if $icn != none {
-			background: $icn left center no-repeat, $bgnd;
-	 	} @else {
-		 	background: $bgnd;
-	 	}
-	 } @else {
-	 	@if $icn != none {
-			background: $icn left center no-repeat;
-	 	}
-	 }
-}
-
 // Setting a background image on the entire site-title-color
 body {
 	@include wide-layout { background: $wide-body-background; }
@@ -27,6 +12,7 @@ body {
 	
 	// Title formatting
 	.navbanner-title {
+		position: relative;
 		.site-title-text {
 			color: $site-title-color;
 			@include wide-layout {
@@ -45,17 +31,40 @@ body {
 				margin-top: $narrow-vertical-title-shift;
 			}
 		}
+		.banner-icon {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+		}
 		@include wide-layout {
-			height: $wide-banner-height;
-			@include titleBackgroundWithIcon($wide-banner-background, $wide-icon-url);
+			background: $wide-banner-background;
+			@if $wide-icon-url != none {
+				.banner-icon {
+					top: $wide-icon-voffset;
+					left: $wide-icon-hoffset;
+					background: $wide-icon-url $wide-icon-hposition $wide-icon-vposition no-repeat;
+				}
+			}
 		}
 		@include medium-layout {
-			height: $medium-banner-height;
-			@include titleBackgroundWithIcon($medium-banner-background, $medium-icon-url);
+			background: $medium-banner-background;
+			@if $medium-icon-url != none {
+				.banner-icon {
+					top: $medium-icon-voffset;
+					left: $medium-icon-hoffset;
+					background: $medium-icon-url $medium-icon-hposition $medium-icon-vposition no-repeat;
+				}
+			}
 		}
 		@include narrow-layout {	
-			height: $narrow-banner-height;
-			@include titleBackgroundWithIcon($narrow-banner-background, $narrow-icon-url);
+			background: $narrow-banner-background;
+			@if $narrow-icon-url != none {
+				.banner-icon {
+					top: $narrow-icon-voffset;
+					left: $narrow-icon-hoffset;
+					background: $narrow-icon-url $narrow-icon-hposition $narrow-icon-vposition no-repeat;
+				}
+			}
 		}
 	}
 

data/_sass/classic/_widget-support.scss

@@ -0,0 +1,22 @@
+// Used to include an iframe that scales with the column width in HD (16:9) format.
+// To be used for the div that wraps an iframe like:
+// <div class="scaling-iframe-wrapper-hd"><iframe>...</iframe></div>
+// Very usefull for video players etc.
+.scaling-iframe-wrapper-hd {
+	position: relative;
+	padding-bottom: 56.25%; // HD ratio is 16:9 => (9/16)*100%= 56.25%
+	padding-top: 30px;
+	overflow: hidden;
+	margin-top: $vspacing-unit;
+	margin-bottom: $vspacing-unit;
+	iframe {
+		// Allows component to extend over the padding area
+		position: absolute;
+		// Let the upper left corner be the upper left corner of the containg element
+		top: 0;
+		left: 0;
+		// Make the iframe as big as its container.
+		width: 100%;
+		height: 100%;
+	}
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: classic-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 1.3.3
+  version: 1.4.0
 platform: ruby
 authors:
 - Rien
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-11-24 00:00:00.000000000 Z
+date: 2016-11-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll-feed
@@ -113,6 +113,7 @@ files:
 - _includes/widgets/social-media-res/icon-twitter.svg
 - _includes/widgets/social-media.html
 - _includes/widgets/subscribe.html
+- _includes/widgets/youtube-player.html
 - _layouts/category-page.html
 - _layouts/default.html
 - _layouts/home.html
@@ -125,6 +126,7 @@ files:
 - _sass/classic/_page.scss
 - _sass/classic/_post.scss
 - _sass/classic/_syntax-highlighting.scss
+- _sass/classic/_widget-support.scss
 - assets/js/cookieconsent.min.js
 - assets/main.scss
 - pages/about/about.md