classic-jekyll-theme 0.1.0 → 0.2.0

data/_sass/classic/_formatting.scss

@@ -0,0 +1,189 @@
+// 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.
+
+// Formatting for the navbanner panel elements.
+.navbanner-panel {
+
+	// Formatting for the banner area
+	.navbanner-title, .navbanner-label {
+	
+		// Color for the title itself
+		p { color: $site-title-color; }
+		
+		// Color for the menu symbol (only visible on narrow and medium sized layouts)
+		label p { color: $menu-symbol-color; }
+		
+		// Size of the title and menu symbol depends on the layout in effect.
+		@include narrow-layout {
+			font-size: $narrow-site-title-font-size;
+			label { padding: 0 $hspacing-unit; } // Give the menu label more area to make it easier to tap.
+		}
+		@include medium-layout {
+			font-size: $medium-site-title-font-size;
+			label { padding: 0 $hspacing-unit; } // Give the menu label more area to make it easier to tap.
+		}
+		@include wide-layout {
+			font-size: $wide-site-title-font-size;
+		}
+	}
+
+	// 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;
+	}
+	
+	// Formatting for the menu (navigation) area
+	.navbanner-menu {
+
+		// 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.
+		ul { margin: 0;  list-style-type: none; }
+
+		// Set the color for the menu items
+		.menu-item-separator, .menu-item-symbol, .menu-item-title {
+			color: $menu-item-font-color;
+			a { color: $menu-item-font-color; }
+			a:hover { color: $menu-item-hover-color; }
+		}
+		
+		// Set the color for the submenu items
+		.menu-subitem-symbol, .menu-subitem-title {
+			color: $menu-subitem-font-color;
+			a { color: $menu-subitem-font-color; }
+			a:hover { color: $menu-subitem-hover-color; }
+		}
+		
+		// Set the font size for the menu items
+		.menu-item-title { font-size: $menu-item-font-size; }
+		.menu-subitem-title { font-size: $menu-subitem-font-size; }
+
+		// The sub menu items are displayed in a box, make sure the text does not start at the box edge.
+		.menu-subitem {
+			padding-left: $hspacing-unit / 2;
+			padding-right: $hspacing-unit / 2;
+		}
+		
+		// Specifics for the narrow sized layout
+		@include narrow-layout {
+		
+			// Fix the height of the items and subitems to make tapping easier
+			// Use a background color to set off the menu from the content
+			.menu-item, .menu-subitem {
+				border-top: 1px solid $background-color;
+				border-bottom: 1px solid $background-color;
+			}
+			.menu-item {
+				p { line-height: $narrow-menu-item-height; margin-bottom: 0; }
+				background-color: $narrow-menu-item-background-color;
+			}
+			.menu-subitem {
+				p { line-height: $narrow-menu-subitem-height; margin-bottom: 0; }
+				background-color: $narrow-menu-subitem-background-color;
+			}
+
+			// Move the disclosure symbol a little bit from the edge of the item
+			.menu-item-symbol p { margin-left: $hspacing-unit; }
+			
+			// Add some left-margin for the title of the subitems
+			.menu-subitem-title { margin-left: $hspacing-unit; }
+		}
+		
+		// Specifics for the medium sized layout
+		@include medium-layout {
+		
+			// Keep the submenu tight
+			.menu-subitem p { margin-bottom: 0; }
+			
+			// Formatting of the sub-menu items
+			ul li ul {
+				margin-left: 2 * $hspacing-unit; // The sub-menu should appear slightly to the right
+				background-color: $medium-menu-subitem-background-color; // Set-of a little bit from the background
+				box-shadow: 0 0.5em 1em 0 rgba(0,0,0,0.2); // Create a shadow box
+			}
+		}
+		
+		// Specifics for the wide sized layout
+		@include wide-layout {
+
+			// Keep the submenu tight
+			.menu-subitem p { margin-bottom: 0; }
+
+			// Formatting of the sub-menu items
+			ul li ul {
+				margin-left: 2 * $hspacing-unit; // The sub-menu should appear slightly to the right
+				background-color: $wide-menu-subitem-background-color; // Set-of a little bit from the background
+				box-shadow: 0 0.5em 1em 0 rgba(0,0,0,0.2); // Create a shadow box
+			}
+		}
+	}
+	
+	// Formatting for the divder between menu and column panel.
+	.nav-bottom-divider {
+		border-top: 2px solid $navbanner-menu-dividers-color;
+		display: $navbanner-menu-dividers-display;
+	}
+}
+
+// Defines the insets used in the columns and footer-panel. I.e the empty spaces between text and separators lines.
+.insets {
+	padding-top: $vspacing-unit;
+	padding-right: $hspacing-unit;
+	padding-bottom: $vspacing-unit;
+	padding-left: $hspacing-unit;
+}
+.secondary-column { @extend .insets; }
+.primary-column { @extend .insets; }
+.tertiary-column { @extend .insets; }
+.footer-panel { @extend .insets; }
+
+// Set the background colors for the panels & columns
+.navbanner-panel { background-color: $navbanner-background-color; }
+.navbanner-panel .navbanner-menu { background-color: $navbanner-menubar-background-color; }
+.primary-column { background-color: $primary-column-background-color; }
+.secondary-column { background-color: $secondary-column-background-color; }
+.tertiary-column { background-color: $tertiary-column-background-color; }
+.footer-panel { background-color: $footer-background-color; }
+
+// This is the element between the column panel and the footer.
+.footer-divider {
+	display: $footer-divider-display;
+	width: 100%;
+	margin: 0;
+	border-bottom: 1px solid $footer-divider-color;
+}
+
+// Formatting for the footer.
+.footer-panel {
+	font-size: $small-font-size;
+	text-align: center;
+}
+
+// Formatting for the widgets. Note that widgets are small.
+.widget {
+	font-size: $small-small-font-size;
+	h1 { font-size: $small-font-size; font-weight: bold; }
+	h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure { margin-bottom: 0; }
+}
+
+// The divider between widgets, a thin horizontal line.
+.widget-divider {
+	margin-top: $vspacing-unit / 2;
+	margin-left: 0;
+	margin-bottom: $vspacing-unit / 2;
+	margin-right: 0;
+	border-bottom: 1px solid $widget-divider-color;
+	display: $widget-divider-display;
+}
+
+// Divider between primary, secondary and tertiary
+.secondary-widget-divider { @extend .widget-divider; }
+.tertiary-widget-divider { @extend .widget-divider; }
+
+// The column dividers
+.secondary-divider, .tertiary-divider {
+	margin-top: $vspacing-unit;
+	margin-left: 0;
+	margin-bottom: $vspacing-unit;
+	margin-right: 0;
+	border-right: 1px solid $column-divider-color;
+	display: $column-divider-display;
+}

data/_sass/classic/_layout.scss

@@ -0,0 +1,306 @@
+// 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 done here. If the CSS affects only the appearance of an item, then it appears in "formatting". Of course the appearance may affect the layout, so there is no hard distinction.
+
+
+@mixin narrow-layout {
+	@media screen and (min-width: 0px) and (max-width: $narrow-max-width) {
+		@content
+	}
+}
+
+@mixin medium-layout {
+	@media screen and (min-width: $medium-min-width) and (max-width: $medium-max-width) {
+		@content
+	}
+}
+
+@mixin wide-layout {
+	@media screen and (min-width: $wide-min-width) {
+		@content
+	}
+}
+
+// Layout top-to-bottom for the top level
+// This arranges the navbanner-panel, column-panel, footer-separator and footer-panel (from "default.html")
+.body-panel {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+}
+
+// The navigation & banner
+// Note: these two have to be together to enable a RDW design with an input/label in the banner area.
+.navbanner-panel {
+
+	// Use the flex layout rules.
+	display: flex;
+	flex-direction: row;
+	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.
+	.navbanner-title {
+
+		// The title area should take up all space not used by the menu label.
+		flex-grow: 1;
+
+		// Center the title.
+		display: flex;
+		justify-content: center;
+	}
+
+	// The menu label is only visible in narrow and medium layout.
+	.navbanner-label {
+		
+		// Never grow the menu label (symbol)
+		flex-grow: 0;
+
+		// The menu label (symbol) should be centered 
+		display: flex;
+		justify-content: center;
+
+		// The label is used as checkbox-label, it should show a pointer when the mouse is above it.
+		label {
+			p:after { content: $menu-symbol-code; } // Set the menu symbol
+			cursor: pointer;
+		}
+	}
+
+	// The dividers should run accross the entire window. Note that they are not always visible, that depends on the active layout.
+	.nav-top-divider { width: 100%; }
+	.nav-bottom-divider { width: 100%; }
+	
+	// The menu is always the entire width.
+	.navbanner-menu { width: 100%; }
+	
+	@include narrow-layout {
+
+		// Disabled items.
+		.navbanner-menu, .nav-bottom-divider, input, .menu-item-separator { 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.
+			.navbanner-menu { display: block; }
+			
+			// Do not display the top divider when the menu is visible.
+			.nav-top-divider { display: none; }
+		}
+
+		// Only visible when the menu symbol invisible checkbox is selected
+		.navbanner-menu {
+		
+			// For the top level list (menu) items
+			li {
+
+				// Disable submenu by default
+				ul { display: none; }
+
+				// When the submenu is closed, show the appropriate symbol
+				label .menu-item .menu-item-symbol p:after { content: $menu-closed-submenu-code; }
+
+				// If the checkbox is checked
+				input:checked ~ {
+
+					// Show submenu
+					ul { display: block; }
+
+					// When the submenu is open, show the appropriate symbol
+					label .menu-item .menu-item-symbol p:after { content: $menu-open-submenu-code; }
+				}
+
+				// Ensure that the whole width and height of a link is clickable
+				a { display: block; }	
+			}
+
+			// Use the flex layout for the menu items
+			.menu-item, .menu-subitem {
+			
+				display: flex;
+				flex-direction: row;
+
+				// Align all items in the center
+				align-items: center;
+
+				// Fix the display property for the menu item symbol and title area's when a <p> is included
+				.menu-item-symbol { p { display: inline; } }
+		
+				// The symbol area does not grow
+				.menu-item-symbol, .menu-subitem-symbol { flex-grow: 0; width: 3 * $hspacing-unit; }
+
+				// The title area must grow
+				.menu-item-title, .menu-subitem-title { flex-grow: 1; }
+			}
+		}
+	}
+
+	@include medium-layout {
+
+		// 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.
+			.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 {
+
+			// Create a left and right spacing
+			border-left: ($navbar-side-margin - ($navbar-menu-item-spacing / 2)) solid transparent;
+			border-right: $navbar-side-margin solid transparent;
+
+			// Menu item spacing
+			.menu-item {
+				border-left: ($navbar-menu-item-spacing / 2) solid transparent;
+				border-right: ($navbar-menu-item-spacing / 2) solid transparent;
+			}
+			.menu-item-separator p:after { content: $menu-item-separator; }
+
+			// This menu is horizontal
+			.menu-item, .menu-item-separator, .menu-item-title, menu-subitem-title {
+				display: inline;
+				p { display: inline; } // Keeps the labels in-line with the links
+			}
+			
+			ul {
+				li {
+					// This menu is horizontal
+					display: inline-block;
+					
+					// The submenu display
+					ul {
+						display: none; // Initially disabled
+						position: absolute; // Display the submenu below the corresponding menu item
+						li { display: block; } // Makes the submenu vertical
+					}
+
+					// Display the submenu if the user hovers the mouse over it
+					&:hover ul { display: block; }
+
+					// Display the submenu if the user taps the corresponding menu item
+					input:checked ~ ul { display: block; }
+				}
+			}
+		}
+	}
+
+	@include wide-layout {
+
+		// Do not show the small butterfly icon, the short title, the checkbox label, the input(s) and the menu symbols
+		.navbanner-label, input, .menu-item-symbol, .menu-subitem-symbol { display: none; }
+		
+		.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;
+
+			// Create a left and right spacing
+			border-left: ($navbar-side-margin - ($navbar-menu-item-spacing / 2)) solid transparent;
+			border-right: $navbar-side-margin solid transparent;
+			
+			// Menu item spacing
+			.menu-item {
+				border-left: ($navbar-menu-item-spacing / 2) solid transparent;
+				border-right: ($navbar-menu-item-spacing / 2) solid transparent;
+			}
+			.menu-item-separator p:after { content: $menu-item-separator; }
+
+			// This menu is horizontal
+			.menu-item, .menu-item-separator, .menu-item-title, menu-subitem-title {
+				display: inline;
+				p { display: inline; }
+			}
+
+			ul {
+				li {
+					
+					// This menu is horizontal
+					display: inline-block;
+					
+					// The submenu display
+					ul {
+						display: none; // Initially disabled
+						position: absolute; // Display the submenu below the corresponding menu item
+						li { display: block; } // Makes the submenu vertical
+					}
+
+					// Display the submenu if the user hovers the mouse over it
+					&:hover ul { display: block; }
+
+					// Display the submenu if the user taps the corresponding menu item
+					input:checked ~ ul { display: block; }
+				}
+			}
+		}
+	}
+}
+
+
+// The layout for the column panel uses flex, but lays out the columns either column or row based depending on the size of the window (screen).
+.column-panel {
+
+	// Use flex, layout as a row or column, based on the screenwidth
+	display: flex;
+		
+	@include narrow-layout {
+	
+		// This layout is column based, i.e. the content is displayed over one another.
+		flex-direction: column;
+				
+		// The primary column must be displayed on top, use the 'order' property to enforce this.
+		.primary-column { order: 1; }
+
+		// The secondary column is put below the primary the second place
+		.secondary-column { order: 2; }
+
+		// Unused		
+		.tertiary-column, .secondary-divider, .tertiary-divider { display: none; }
+	}
+	
+	@include medium-layout {
+		
+		// This layout is row based
+		flex-direction: row;
+		
+		// The secondary column uses a fixed witdh and hosts both the secondary and tertiary column content
+		.secondary-column { width: $secondary-column-width; }
+
+		// The primary column can grow
+		.primary-column { flex: 1 1 auto; width: 1px; } // A width must be specified
+
+		// Unused
+		.tertiary-divder, .secondary-widget-divider, .tertiary-column { display: none; }
+	}
+	
+	@include wide-layout {
+	
+		// This layout is row based
+		flex-direction: row;
+		
+		// The secondary and tertiary columns uses a fixed witdh 
+		.secondary-column { width: $secondary-column-width; }
+		.tertiary-column { width: $tertiary-column-width; }
+							
+		// The primary column can grow
+		.primary-column { flex: 1 1 auto; width: 1px; } // A width must be specified
+
+		// Unused
+		.secondary-column .tertiary-column-content, .tertiary-widget-divider, .secondary-widget-divider { display: none }
+	}
+}