swiftfire-jekyll-theme 0.2.0

data/_sass/classic/_body.scss

@@ -0,0 +1,15 @@
+// Settings for the body panel in the layout "defaults.html"
+//
+.body-panel {
+
+	// Layout top-to-bottom for the top level
+	// This arranges the banner-area, column-panel, footer-separator and footer-panel (from "default.html")
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	
+	// Setting a background on the entire site
+	@include widest-layout { background: $background-widest; }
+	@include medium-layout { background: $background-medium; }
+	@include narrow-layout { background: $background-narrow; }
+}

data/_sass/classic/_columns.scss

@@ -0,0 +1,122 @@
+// *********************************************************************************************************************
+// Column panel settings
+// ---------------------------------------------------------------------------------------------------------------------
+//
+
+.secondary-column {
+	
+	// Use the theme insets to keep the content of the column away from the edges.
+	@extend .theme-insets;	
+
+	// Set the background
+	@include narrow-layout { background: $secondary-column-background-narrow; }
+	@include medium-layout { background: $secondary-column-background-medium; }
+	@include widest-layout { background: $secondary-column-background-widest; }
+}
+
+main {
+
+	// Use the theme insets to keep the content of the column away from the edges.
+	@extend .theme-insets;
+
+	// Set the background
+	@include narrow-layout { background: $primary-column-background-narrow; }
+	@include medium-layout { background: $primary-column-background-medium; }
+	@include widest-layout { background: $primary-column-background-widest; }
+}
+
+.tertiary-column {
+	
+	// Use the theme insets to keep the content of the column away from the edges.
+	@extend .theme-insets;
+
+	// Set the background
+	@include narrow-layout { background: $tertiary-column-background-narrow; }
+	@include medium-layout { background: $tertiary-column-background-medium; }
+	@include widest-layout { background: $tertiary-column-background-widest; }
+}
+
+// The layout for the column panel is the main driver for the RWD aspects of this theme.
+//
+.column-panel {
+
+	// Layout
+	display: flex;
+	
+	@include narrow-layout {
+	
+		// Background for the entire panel
+		background: $column-panel-background-narrow;
+	
+		// 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-separator,
+		.tertiary-separator,
+		.secondary-column .vmenu-container { display: none; }
+	}
+	
+	@include medium-layout {
+	
+		// Background for the entire panel
+		background: $column-panel-background-medium;
+		
+		// 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-separator,
+		.secondary-widget-separator,
+		.tertiary-column,
+		.primary-column .vmenu-container { display: none; }
+	}
+	
+	@include widest-layout {
+	
+		// Background for the entire panel
+		background: $column-panel-background-widest;
+	
+		// 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-separator,
+		.secondary-widget-separator,
+		.primary-column .vmenu-container { display: none }
+	}
+}
+
+
+// The column separator
+.secondary-separator, .tertiary-separator {
+	margin-top: $column-separator-top-spacing;
+	margin-left: 0;
+	margin-bottom: $column-separator-bottom-spacing;
+	margin-right: 0;
+	@include medium-layout { border-right: 1px solid $column-separator-color-medium; }
+	@include widest-layout { border-right: 1px solid $column-separator-color-widest; }
+	@if $column-separator-display { display: block; } @else { display: none; }
+}
+

data/_sass/classic/_custom.scss

@@ -0,0 +1,138 @@
+// This file contains class definitions for support of page and post layout.
+//
+// ===============================================================
+// Text styles, use as follows in *.md files:
+//
+// {:.text-boxed-float-left}
+// This is the text that will be in the box on the left hand side.
+// 
+// ===============================================================
+
+// text centered in a column
+.text-centered {
+	text-align: center;
+}
+
+// text centered in a column and bold
+.text-centered-bold {
+	text-align: center;
+	font-weight: bold;
+}
+
+// A floating text box on the right hand side.
+.text-boxed-float-right {
+	float: right;
+	font-size: $small-1-font-size;
+	font-style: italic;
+	border: 1px solid lightgray;
+	margin: $vspacing-unit/2 0 $vspacing-unit/2 $hspacing-unit;
+	padding: 0 $hspacing-unit/2;
+	width: 25%
+}
+
+// A floating text box on the left hand side
+.text-boxed-float-left {
+	float: left;
+	font-size: $small-1-font-size;
+	font-style: italic;
+	border: 1px solid lightgray;
+	margin: $vspacing-unit/2 $hspacing-unit $vspacing-unit/2 0;
+	padding: 0 $hspacing-unit/2;
+	width: 25%
+}
+
+
+// ===============================================================
+// Image styles, use as follows in *.md files:
+//
+// ![image-name](image-source){:.image-centered}
+// 
+// ===============================================================
+
+// An image centered in a column with nothing on either side
+.image-centered {
+	display: block;
+	max-width: 80%;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+// An image floating centered with text on both sides
+.image-float-center {
+	display: block;
+	max-width: 40%;
+	float: center;
+	margin: $vspacing-unit $hspacing-unit
+}
+
+// An image float right (with text flowing on the left side)
+.image-float-right {
+	display: block;
+	max-width: 50%;
+	float: right;
+	margin: $vspacing-unit 0 $vspacing-unit $hspacing-unit
+}
+
+// An image float left (with text flowing on the right side)
+.image-float-left {
+	display: block;
+	max-width: 50%;
+	float: left;
+	margin: $vspacing-unit $hspacing-unit $vspacing-unit 0
+}
+
+
+// ===============================================================
+// Content blocks support.
+// ===============================================================
+
+.cblock-row-title {
+	text-align: center;
+}
+
+.cblock-row {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
+.cblock {
+	display: block;
+	width: 200px;
+	margin: $vspacing-unit $hspacing-unit;
+}
+
+.cblock-name {
+	text-align: center;
+}
+
+.cblock-image {
+	display: block;
+	width: 150px;
+	height: 150px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.cblock-description {
+	text-align: center;
+	font-size: $small-1-font-size;
+}
+
+.cblock-store {
+	text-align: center;
+	font-size: $small-1-font-size;
+}
+
+// ===============================================================
+// General
+// ===============================================================
+
+.highlighter-rouge {
+	background: #eee;
+}
+
+.highlight {
+	overflow-x: auto;
+}

data/_sass/classic/_footer.scss

@@ -0,0 +1,31 @@
+// Footer related SCCS
+
+// This is the element between the column panel and the footer.
+.footer-separator {
+	@if $footer-separator-display { display: block; } @else { display: none; }
+	width: 100%;
+	margin: 0;
+	@include narrow-layout { border-bottom: 1px solid $footer-separator-color-narrow; }
+	@include medium-layout { border-bottom: 1px solid $footer-separator-color-medium; }
+	@include widest-layout { border-bottom: 1px solid $footer-separator-color-widest; }
+}
+
+.footer-panel {
+	@extend .theme-insets;
+	text-align: center;	
+	@include narrow-layout {
+		font: $footer-font-narrow;
+		color: $footer-color-narrow;
+		background: $footer-background-narrow;
+	}
+	@include medium-layout {
+		font: $footer-font-medium;
+		color: $footer-color-medium;
+		background: $footer-background-medium;
+	}
+	@include widest-layout {
+		font: $footer-font-widest;
+		color: $footer-color-widest;
+		background: $footer-background-widest;
+	}
+}

data/_sass/classic/_menubar.scss

@@ -0,0 +1,530 @@
+.menubar {
+	
+	// Positioning & size
+	@include narrow-layout { height: auto; }
+	@include medium-layout { height: $menubar-height-medium; }
+	@include widest-layout { height: $menubar-height-widest; }
+
+	// Never display input elements
+	input { display: none; }
+	
+	@include narrow-layout {
+
+		// Only displayed when the menu symbol is checked
+		display: none;
+
+		// Display the menu items vertically.
+		flex-direction: column;
+			
+		// Appearances
+		background: $menubar-background-narrow;
+			
+		// Make sure the separator is empty
+		.item-separator:after { content: none; }
+		
+		// Show it as a line across the whle screen
+		.item-separator {
+			width: 100%;
+			height: $menubar-item-separator-line-width-narrow;
+			background-color: $menubar-item-separator-line-color-narrow;
+		}
+			
+		.item,
+		.item-narrow-only {
+			
+			// Layout
+			display: flex;
+			flex-direction: column;
+			
+			// Format the link (area)
+			a {
+				// Make the link area as big as possible
+				width: 100%;
+				height: 100%;
+				
+				// Remove link underlining
+				text-decoration: none;
+			}
+			
+			// Implement selection changes
+			input:checked ~ {
+
+				// Show submenu when selected
+				.dropdown, .dropdown-narrow { display: flex; }
+
+				// When the submenu is open, show the appropriate symbol
+				.title .symbol .code:after { content: $menubar-item-title-symbol-code-open-narrow; }
+			}
+
+			.title {
+				
+				// Layout
+				display: flex; // Default = row layout
+				
+				// Set the height
+				height: $menubar-item-height-narrow;
+				
+				// Use the item color for all elements
+				background: $menubar-item-background-narrow;
+				&:hover { background: $menubar-item-background-hover-narrow; }
+
+				// Create the hover effect
+				&:hover { background: $menubar-item-background-hover-narrow; }
+
+				.symbol {
+
+					// Layout: Center the disclosure symbol
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					
+					// The width of the tap area with the disclosure symbol in it
+					width: $menubar-item-disclosure-symbol-width-narrow;
+					
+					// Load the disclosure symbol for the closed state
+					.code:after { content: $menubar-item-title-symbol-code-closed-narrow; }
+				
+					// Show a clickable symbol over the disclosure symbol
+					.code { cursor: pointer; }
+				}
+					
+				.text {
+
+					// Layout: Center vertically and justify-left
+					display: flex;
+					justify-content: start;
+					align-items: center;
+					
+					 // Takes up remainder of .title width
+					.text { width: 100%; }
+
+					// Use the item color for all elements
+					p { color: $menubar-item-color-narrow; }
+					
+					// Hover effect
+					&:hover { p { color: $menubar-item-color-hover-narrow; } }
+				}
+			}
+
+			.dropdown,
+			.dropdown-narrow {
+				
+				// Disable submenu by default
+				display: none;
+				
+				// Subitems are stacked vertically
+				flex-direction: column;
+				
+				.subitem-separator {
+					display: block;
+					width: 100%;
+					height: $menubar-subitem-separator-line-width-narrow;
+					background-color: $menubar-subitem-separator-line-color-narrow;
+				}
+					
+				.subitem {
+				
+					// If the checkbox is checked
+					input:checked ~ {
+
+						// Show submenu
+						.sub-dropdown, .sub-dropdown-narrow { display: flex; }
+
+						// When the submenu is open, show the appropriate symbol
+						.title .symbol .code:after { content: $menubar-subitem-title-symbol-code-open-narrow; }
+					}
+
+					.title {
+						
+						// Layout (row oriented)
+						display: flex;
+					
+						// Appearance
+						background: $menubar-subitem-background-narrow;
+						&:hover { background: $menubar-subitem-background-hover-narrow; }
+						
+						// Height
+						height: $menubar-subitem-height-narrow;
+						
+						// The disclosure symbol
+						.symbol { width: $menubar-item-disclosure-symbol-width-narrow; }
+						
+						.text a {
+							display: flex;
+							justify-content: start;
+							align-items: center;
+						}
+						
+						p { padding-left: $menubar-subitem-indent-narrow; }
+					}
+					
+					.sub-dropdown,
+					.sub-dropdown-narrow {
+						
+						// Disable by default
+						display: none;
+						
+						// Subitems are stacked vertically
+						flex-direction: column;
+					
+						.subsubitem-separator {
+							display: block;
+							width: 100%;
+							height: $menubar-subsubitem-separator-line-width-narrow;
+							background-color: $menubar-subsubitem-separator-line-color-narrow;
+						}
+						
+						.subsubitem .title {
+						
+							// Layout (row oriented)
+							display: flex;
+					
+							// Appearance
+							background: $menubar-subsubitem-background-narrow;
+							&:hover { background: $menubar-subsubitem-background-hover-narrow; }
+							
+							// Height
+							height: $menubar-subsubitem-height-narrow;
+	
+							.text a {
+								display: flex;
+								justify-content: start;
+								align-items: center;
+							}
+						
+							p { padding-left: $menubar-subsubitem-indent-narrow; }
+						}
+					}
+				}
+			}
+		}
+		
+		.isActiveSelection {
+			background: $menubar-item-background-selected-narrow;
+			.title .text p { color: $menubar-item-color-selected-narrow }
+		}
+	}
+			
+	@include medium-and-widest-layout {
+
+		// Check if it must be displayed
+		@include medium-layout { @if $menubar-enabled-medium { display: flex; } @else { display: none; } }
+		@include widest-layout { @if $menubar-enabled-widest { display: flex; } @else { display: none; } }
+
+		// Appearances
+		@include medium-layout {
+			background: $menubar-background-medium;
+			border: $menubar-border-medium;
+			box-shadow: $menubar-box-shadow-medium;
+		}
+		@include widest-layout {
+			background: $menubar-background-widest;
+			border: $menubar-border-widest;
+			box-shadow: $menubar-box-shadow-widest;
+		}
+
+		// Positioning of items and item-separators.
+		flex-direction: row;
+		@include medium-layout {
+			justify-content: $menubar-justify-content-medium;
+			align-items: $menubar-align-items-medium;
+		}
+		@include widest-layout {
+			justify-content: $menubar-justify-content-widest;
+			align-items: $menubar-align-items-widest;
+		}
+
+		.menubar-icon {
+				
+			@include medium-layout {
+				width: $menubar-icon-width-medium;
+				height: $menubar-icon-height-medium;
+				padding: $menubar-icon-padding-medium;
+			}
+			@include widest-layout {
+				width: $menubar-icon-width-widest;
+				height: $menubar-icon-height-widest;
+				padding: $menubar-icon-padding-widest;
+			}
+		}
+
+		// Content (icon image)
+		// Note: Firefox needs the 'after' attribute to display the icon. Other browsers seem fine without it.
+		// Issue no 19.
+		.menubar-icon:after {
+			@include medium-layout { content: $menubar-icon-url-medium; }
+			@include widest-layout { content: $menubar-icon-url-widest; }
+		}
+
+		.item-separator {
+	
+			@include medium-layout {
+
+				// Appearance
+				color: $menubar-item-separator-symbol-color-medium;
+				background: $menubar-item-separator-symbol-background-medium;
+			
+				// Set padding
+				padding: $menubar-item-separator-symbol-padding-medium;
+	
+				// Set the separator symbol
+				p:after { content: $menubar-item-separator-symbol-medium; }
+
+				// The font for the separator
+				p { font: $menubar-item-separator-symbol-font-medium; }
+			}
+					
+			@include widest-layout {
+				
+				// Appearance
+				color: $menubar-item-separator-symbol-color-widest;
+				background: $menubar-item-separator-symbol-background-widest;
+
+				// Set padding
+				padding: $menubar-item-separator-symbol-padding-widest;
+	
+				// Set the separator symbol
+				p:after { content: $menubar-item-separator-symbol-widest; }
+
+				// The font for the separator
+				p { font: $menubar-item-separator-symbol-font-widest; }
+			}
+		}
+			
+		// Make all p's as small as possible
+		p { margin: 0; padding: 0; }
+
+		
+		.item-narrow-only { display: none; }
+		
+		.item {
+			
+			// Vertical layout
+			display: flex;
+			flex-direction: column;		
+			
+			// Make this the baseline reverence for the dropdown box
+			position: relative;
+			
+			// Appearances
+			p {
+				// Prevent wrapping of the (sub) menu items
+				white-space: nowrap;
+
+				// Font color
+				@include medium-layout { color: $menubar-item-color-medium; }
+				@include widest-layout { color: $menubar-item-color-widest; }
+			
+				// Font
+				@include medium-layout { font: $menubar-item-font-medium; }
+				@include widest-layout { font: $menubar-item-font-widest; }
+			}
+			
+			// Set background
+			@include medium-layout { background: $menubar-item-background-medium; }
+			@include widest-layout { background: $menubar-item-background-widest; }
+
+			// Hover effect
+			&:hover {
+
+				// Display the submenu if the user hovers the mouse over it
+				.dropdown { display: block; }
+			
+				p {
+					// Change font color
+					@include medium-layout { color: $menubar-item-color-hover-medium; }
+					@include widest-layout { color: $menubar-item-color-hover-widest; }
+				}
+				
+				// Change item background
+				@include medium-layout { background: $menubar-item-background-hover-medium; }
+				@include widest-layout { background: $menubar-item-background-hover-widest; }
+			}
+			
+			a {
+				// Make the entire hightlight block clickable
+				display: block;
+				
+				// Remove the link underlining
+				text-decoration: none;
+			}
+
+			// Sizing of the items
+			a, .paddingAsLink {
+				@include medium-layout { padding: $menubar-item-padding-medium; }
+				@include widest-layout { padding: $menubar-item-padding-widest; }
+			}
+			
+			.title {		
+				@include medium-layout { height: $menubar-item-height-medium; }
+				@include widest-layout { height: $menubar-item-height-widest; }
+			}
+			
+			.dropdown,
+			.dropdown-narrow {
+				
+				// Visibility depends on hovering over the item
+				display: none;
+
+				// Don't show the separators
+				.subitem-separator { display: none; }
+					
+				// Position the dropdown box below the item.
+				position: absolute;
+				top: 100%;
+
+				// Make it at least as wide as the parent						
+				min-width: 100%;
+						
+				// Appearances
+				@include medium-layout { margin: $menubar-dropdown-margin-medium; }
+				@include widest-layout { margin: $menubar-dropdown-margin-widest; }
+
+				@include medium-layout { padding: $menubar-dropdown-padding-medium; }
+				@include widest-layout { padding: $menubar-dropdown-padding-widest; }
+
+				@include medium-layout { background: $menubar-dropdown-background-medium; }
+				@include widest-layout { background: $menubar-dropdown-background-widest; }
+
+				@include medium-layout { border: $menubar-dropdown-border-medium; }
+				@include widest-layout { border: $menubar-dropdown-border-widest; }
+
+				@include medium-layout { box-shadow: $menubar-dropdown-box-shadow-medium; }
+				@include widest-layout { box-shadow: $menubar-dropdown-box-shadow-widest; }
+
+				.subitem {
+					
+					// To anchor the sub-dropdown
+					position: relative;
+					
+					// Appearances
+					p {
+						@include medium-layout { font: $menubar-subitem-font-medium; }
+						@include widest-layout { font: $menubar-subitem-font-widest; }
+
+						@include medium-layout { color: $menubar-subitem-color-medium; }
+						@include widest-layout { color: $menubar-subitem-color-widest; }
+					}
+					
+					@include medium-layout { background: $menubar-subitem-background-medium; }
+					@include widest-layout { background: $menubar-subitem-background-widest; }
+
+					// Hover effect
+					&:hover {
+
+						// Show the sub-dropdown only on hover
+						.sub-dropdown { display: flex; }
+
+						p {
+							@include medium-layout { color: $menubar-subitem-color-hover-medium; }
+							@include widest-layout { color: $menubar-subitem-color-hover-widest; }
+						}
+						
+						@include medium-layout { background: $menubar-subitem-background-hover-medium; }
+						@include widest-layout { background: $menubar-subitem-background-hover-widest; }
+					}
+											
+					// Sizing of the subitems
+					a, .paddingAsLink {
+						@include medium-layout { padding: $menubar-subitem-padding-medium; }
+						@include widest-layout { padding: $menubar-subitem-padding-widest; }
+					}
+					
+					.sub-dropdown {
+					
+						// Do not display (until hover over the subitem)
+						display: none;
+						
+						// Position it relative to the subitem
+						position: absolute;
+						
+						// Position it adjacent to the subitem
+						top: 0;
+						left: 100%;
+						
+						// Make it at least as wide as the parent						
+						min-width: 100%;
+						
+						// Stack the sub-sub item vertically
+						flex-direction: column;
+						
+						// Formatting the appearance
+						@include medium-layout { background: $menubar-sub-dropdown-background-medium; }
+						@include widest-layout { background: $menubar-sub-dropdown-background-widest; }
+						
+						@include medium-layout { border: $menubar-sub-dropdown-border-medium; }
+						@include widest-layout { border: $menubar-sub-dropdown-border-widest; }
+						
+						@include medium-layout { box-shadow: $menubar-sub-dropdown-box-shadow-medium; }
+						@include widest-layout { box-shadow: $menubar-sub-dropdown-box-shadow-widest; }
+						
+						.subsubitem {
+						
+							// Appearance
+							p {
+								@include medium-layout { font: $menubar-subsubitem-font-medium; }
+								@include widest-layout { font: $menubar-subsubitem-font-widest; }
+
+								@include medium-layout { color: $menubar-subsubitem-color-medium; }
+								@include widest-layout { color: $menubar-subsubitem-color-widest; }
+							}
+							
+							@include medium-layout { background: $menubar-subsubitem-background-medium; }
+							@include widest-layout { background: $menubar-subsubitem-background-widest; }
+
+							// Hover effect
+							&:hover {
+								p {
+									@include medium-layout { color: $menubar-subsubitem-color-hover-medium; }
+									@include widest-layout { color: $menubar-subsubitem-color-hover-widest; }
+								}
+								
+								@include medium-layout { background: $menubar-subsubitem-background-hover-medium; }
+								@include widest-layout { background: $menubar-subsubitem-background-hover-widest; }
+							}
+							
+							// Sizing of the subitems
+							a, .paddingAsLink {
+								@include medium-layout { padding: $menubar-subsubitem-padding-medium; }
+								@include widest-layout { padding: $menubar-subsubitem-padding-widest; }
+							}
+						}
+
+						// Show selection for pages that match a menu entry
+						// Note that this setting overrides the setting in .subsubitem and hence be placed after it.
+						.isActiveSelection {
+							@include medium-layout { background: $menubar-subsubitem-background-selected-medium; }
+							@include widest-layout { background: $menubar-subsubitem-background-selected-widest; }
+							p {
+								@include medium-layout { color: $menubar-subsubitem-color-selected-medium; }
+								@include widest-layout { color: $menubar-subsubitem-color-selected-widest; }
+							}
+						}
+					}
+				}
+
+				// Show selection for pages that match a menu entry
+				// Note that this setting overrides the setting in .subitem and hence be placed after it.
+				.isActiveSelection {
+					@include medium-layout { background: $menubar-subitem-background-selected-medium; }
+					@include widest-layout { background: $menubar-subitem-background-selected-widest; }
+					p {
+						@include medium-layout { color: $menubar-subitem-color-selected-medium; }
+						@include widest-layout { color: $menubar-subitem-color-selected-widest; }
+					}
+				}
+			}
+		}	
+		
+		// Show selection for pages that match a menu entry
+		// Note that this setting overrides the setting in .item and hence be placed after it.
+		.isActiveSelection {
+			@include medium-layout { background: $menubar-item-background-selected-medium; }
+			@include widest-layout { background: $menubar-item-background-selected-widest; }
+			p {
+				@include medium-layout { color: $menubar-item-color-selected-medium; }
+				@include widest-layout { color: $menubar-item-color-selected-widest; }
+			}
+		}
+	}
+}