swiftfire-jekyll-theme 0.2.0

data/_sass/classic/_page.scss

@@ -0,0 +1,12 @@
+// SCCS for the page design.
+
+.page-meta {
+	color: $grey-color;
+	font-size: $small-1-font-size;
+}
+
+.page-title {
+	text-align: center;
+	margin-top: 2 * $vspacing-unit;
+	margin-bottom: 2 * $vspacing-unit;
+}

data/_sass/classic/_post.scss

@@ -0,0 +1,10 @@
+// SCCS for the post design.
+
+.post-meta {
+	color: $grey-color;
+	font-size: $small-1-font-size;
+}
+
+.post-title {
+	text-align: center;
+}

data/_sass/classic/_swiftfire.scss

@@ -0,0 +1,54 @@
+// This file contains class definitions for swiftfire extension
+// to the classic-jekyll-theme.
+//
+// ===============================================================
+
+
+// Fix the layout of the domain menu subitem labels
+
+.menubar {
+	@include narrow-layout {
+		.item .dropdown .subitem .title .text form button {
+			display: flex;
+			justify-content: start;
+			align-items: center;
+			padding-left: $menubar-subitem-indent-narrow;
+		}
+	}
+	@include medium-and-widest-layout {
+		.item .dropdown .subitem .title .text form button {
+			@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 { padding: $menubar-subitem-padding-medium; }
+			@include widest-layout { padding: $menubar-subitem-padding-widest; }
+		}
+	}
+}
+
+
+// Swiftfire items
+
+.sf-loginlogout {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+	padding-right: $hspacing-unit/2;
+	width: 100%;
+	font-size: $small-2-font-size;
+	.sf-loginlogout-firstoption {
+		margin: 0 $hspacing-unit/2 0 0;
+	}
+	.sf-loginlogout-secondoption {
+		margin: 0 $hspacing-unit/2 0 $hspacing-unit/2;
+	}
+	p {
+		margin: 0 0 0 0;
+	}
+	button {
+		margin: 0 0 0 0;
+		font-size: $small-2-font-size;
+		color: black;
+	}
+}

data/_sass/classic/_syntax-highlighting.scss

@@ -0,0 +1,71 @@
+/**
+ * Syntax highlighting styles
+ */
+.highlight {
+  background: #fff;
+  margin-bottom: $vspacing-unit / 2; // Replaces :  @extend %vertical-rhythm;
+
+  .highlighter-rouge & {
+    background: #eef;
+  }
+
+  .c     { color: #998; font-style: italic } // Comment
+  .err   { color: #a61717; background-color: #e3d2d2 } // Error
+  .k     { font-weight: bold } // Keyword
+  .o     { font-weight: bold } // Operator
+  .cm    { color: #998; font-style: italic } // Comment.Multiline
+  .cp    { color: #999; font-weight: bold } // Comment.Preproc
+  .c1    { color: #998; font-style: italic } // Comment.Single
+  .cs    { color: #999; font-weight: bold; font-style: italic } // Comment.Special
+  .gd    { color: #000; background-color: #fdd } // Generic.Deleted
+  .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
+  .ge    { font-style: italic } // Generic.Emph
+  .gr    { color: #a00 } // Generic.Error
+  .gh    { color: #999 } // Generic.Heading
+  .gi    { color: #000; background-color: #dfd } // Generic.Inserted
+  .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
+  .go    { color: #888 } // Generic.Output
+  .gp    { color: #555 } // Generic.Prompt
+  .gs    { font-weight: bold } // Generic.Strong
+  .gu    { color: #aaa } // Generic.Subheading
+  .gt    { color: #a00 } // Generic.Traceback
+  .kc    { font-weight: bold } // Keyword.Constant
+  .kd    { font-weight: bold } // Keyword.Declaration
+  .kp    { font-weight: bold } // Keyword.Pseudo
+  .kr    { font-weight: bold } // Keyword.Reserved
+  .kt    { color: #458; font-weight: bold } // Keyword.Type
+  .m     { color: #099 } // Literal.Number
+  .s     { color: #d14 } // Literal.String
+  .na    { color: #008080 } // Name.Attribute
+  .nb    { color: #0086B3 } // Name.Builtin
+  .nc    { color: #458; font-weight: bold } // Name.Class
+  .no    { color: #008080 } // Name.Constant
+  .ni    { color: #800080 } // Name.Entity
+  .ne    { color: #900; font-weight: bold } // Name.Exception
+  .nf    { color: #900; font-weight: bold } // Name.Function
+  .nn    { color: #555 } // Name.Namespace
+  .nt    { color: #000080 } // Name.Tag
+  .nv    { color: #008080 } // Name.Variable
+  .ow    { font-weight: bold } // Operator.Word
+  .w     { color: #bbb } // Text.Whitespace
+  .mf    { color: #099 } // Literal.Number.Float
+  .mh    { color: #099 } // Literal.Number.Hex
+  .mi    { color: #099 } // Literal.Number.Integer
+  .mo    { color: #099 } // Literal.Number.Oct
+  .sb    { color: #d14 } // Literal.String.Backtick
+  .sc    { color: #d14 } // Literal.String.Char
+  .sd    { color: #d14 } // Literal.String.Doc
+  .s2    { color: #d14 } // Literal.String.Double
+  .se    { color: #d14 } // Literal.String.Escape
+  .sh    { color: #d14 } // Literal.String.Heredoc
+  .si    { color: #d14 } // Literal.String.Interpol
+  .sx    { color: #d14 } // Literal.String.Other
+  .sr    { color: #009926 } // Literal.String.Regex
+  .s1    { color: #d14 } // Literal.String.Single
+  .ss    { color: #990073 } // Literal.String.Symbol
+  .bp    { color: #999 } // Name.Builtin.Pseudo
+  .vc    { color: #008080 } // Name.Variable.Class
+  .vg    { color: #008080 } // Name.Variable.Global
+  .vi    { color: #008080 } // Name.Variable.Instance
+  .il    { color: #099 } // Literal.Number.Integer.Long
+}

data/_sass/classic/_theme-internal.scss

@@ -0,0 +1,37 @@
+// *********************************************************************************************************************
+// Internals
+// ---------------------------------------------------------------------------------------------------------------------
+// Do not change these definitions
+//
+
+// Caculate the width ranges where the layout changes take place
+//
+$widest-min-width:				$primary-column-min-width + $secondary-column-width + $tertiary-column-width;
+$medium-max-width:				$widest-min-width - 1;
+$medium-min-width:				$primary-column-min-width + $secondary-column-width;
+$narrow-max-width:				$medium-min-width - 1;
+
+
+@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 widest-layout {
+	@media screen and (min-width: $widest-min-width) {
+		@content
+	}
+}
+
+@mixin medium-and-widest-layout {
+	@media screen and (min-width: $medium-min-width) {
+		@content
+	}
+}

data/_sass/classic/_theme-library.scss

@@ -0,0 +1,85 @@
+// *********************************************************************************************************************
+// Insets
+// ---------------------------------------------------------------------------------------------------------------------
+// Defines the insets used in the columns and the footer-panel. I.e the empty spaces between text and separators.
+//
+.theme-insets {
+	padding-top: $vspacing-unit;
+	padding-right: $hspacing-unit;
+	padding-bottom: $vspacing-unit;
+	padding-left: $hspacing-unit;
+}
+
+
+// *********************************************************************************************************************
+// Overlay
+// ---------------------------------------------------------------------------------------------------------------------
+// Will place an element over its parent and make it the exact same size.
+//
+// The parent must have its css 'position' property set to 'relative'.
+//
+.overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+}
+
+
+// *********************************************************************************************************************
+// display-flex-...
+// ---------------------------------------------------------------------------------------------------------------------
+// Will switch a display property to 'flex' for the narrow, medium resp wide layout and 'none' for all others.
+//
+// Can be used in custom html code to enable/disable elements.
+//
+.display-flex-narrow {
+	@include narrow-layout { display: flex; }
+	@include medium-layout { display: none; }
+	@include widest-layout { display: none; }
+}
+.display-flex-medium {
+	@include narrow-layout { display: none; }
+	@include medium-layout { display: flex; }
+	@include widest-layout { display: none; }
+}
+.display-flex-widest {
+	@include narrow-layout { display: none; }
+	@include medium-layout { display: none; }
+	@include widest-layout { display: flex; }
+}
+.display-flex-medium-and-wide {
+	@include narrow-layout { display: none; }
+	@include medium-layout { display: flex; }
+	@include widest-layout { display: flex; }
+}
+
+
+// *********************************************************************************************************************
+// display-block-...
+// ---------------------------------------------------------------------------------------------------------------------
+// Will switch a display property to 'block' for the narrow, medium resp wide layout and 'none' for all others.
+//
+// Can be used in custom html code to enable/disable elements.
+//
+.display-block-narrow {
+	@include narrow-layout { display: block; }
+	@include medium-layout { display: none; }
+	@include widest-layout { display: none; }
+}
+.display-block-medium {
+	@include narrow-layout { display: none; }
+	@include medium-layout { display: block; }
+	@include widest-layout { display: none; }
+}
+.display-block-widest {
+	@include narrow-layout { display: none; }
+	@include medium-layout { display: none; }
+	@include widest-layout { display: block; }
+}
+.display-block-medium-and-wide {
+	@include narrow-layout { display: none; }
+	@include medium-layout { display: block; }
+	@include widest-layout { display: block; }
+}

data/_sass/classic/_vertical-menu.scss

@@ -0,0 +1,252 @@
+// For the vertical menu that can be used on top of the secondary column (wide & mediaum layout) or the
+// primary column (narrow layout).
+//
+// This menu is shown when site.data.setup.navbanner-drop-down-menu is set to 'no'.
+//
+.vmenu-container {
+
+	// Enable disable
+	@include medium-layout { @if $vmenu-enable-medium { display: flex; } @else { display: none; } }
+	@include widest-layout { @if $vmenu-enable-widest { display: flex; } @else { display: none; } }
+	
+	// Ordering vertical
+	flex-direction: column;
+	
+	// Border of the entire vmenu
+	@include medium-layout { border: $vmenu-border-medium; }
+	@include widest-layout { border: $vmenu-border-widest; }
+
+	// Backgound for the entire vmenu
+	@include medium-layout { background: $vmenu-background-medium; }
+	@include widest-layout { background: $vmenu-background-widest; }
+
+	// Box appearance for the entire vmenu
+	@include medium-layout { box-shadow: $vmenu-box-shadow-medium; }
+	@include widest-layout { box-shadow: $vmenu-box-shadow-widest; }
+}
+
+.vmenu-container .topTitle {
+
+	@include medium-layout { @if $vmenu-topTitle-enable-medium { display: flex; } @else { display: none; } }
+	@include widest-layout { @if $vmenu-topTitle-enable-widest { display: flex; } @else { display: none; } }
+
+	@include medium-layout { justify-content: $vmenu-topTitle-justify-content-medium; }
+	@include widest-layout { justify-content: $vmenu-topTitle-justify-content-widest; }
+	
+	@include medium-layout { font: $vmenu-topTitle-font-medium; }
+	@include widest-layout { font: $vmenu-topTitle-font-widest; }
+
+	@include medium-layout { color: $vmenu-topTitle-color-medium; }
+	@include widest-layout { color: $vmenu-topTitle-color-widest; }
+	
+	@include medium-layout { background: $vmenu-topTitle-background-medium; }
+	@include widest-layout { background: $vmenu-topTitle-background-widest; }
+
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	
+	@include medium-layout { h1 { padding: $vmenu-topTitle-padding-medium; } }
+	@include widest-layout { h1 { padding: $vmenu-topTitle-padding-widest; } }
+
+	@include medium-layout { h1 { margin: $vmenu-topTitle-margin-medium; } }
+	@include widest-layout { h1 { margin: $vmenu-topTitle-margin-widest; } }
+}
+
+.vmenu-container .vmenu {
+
+	// Stack the child elements on top of each other (the child elements are of class 'item')
+	display: flex;
+	flex-direction: column;
+	
+	// The p's should not drive the display, make them as small as possible
+	p { margin: 0px; }
+
+	a {
+		// Remove link underline
+	 	text-decoration: none;
+
+		// Make sure the whole width and height of the link area is clickable
+		display: block;
+	}
+		
+	// Make sure the title takes up available space (and since the link is displayed as block, this makes the
+	// entire area clickable.
+	.title { flex-grow: 1; }
+
+	
+	.subitem {
+			
+		// Make the input checkbox invisible
+		input { display: none }
+
+		// Place the components below each other.
+		display: flex;
+		flex-direction: column;
+	
+		input:checked ~ {
+		
+			// Show the correct symbol for this state.
+			.sub,
+			.sub-hasLink,
+			.sub-isActivePage  {
+				label .symbol:after { content: $vmenu-subitem-disclosure-symbol-open; }
+			}
+			
+			// Show the subsub's
+			.subsub,
+			.subsub-hasLink,
+			.subsub-isActivePage { display: flex }
+		}
+		
+		input:disabled ~ {
+		
+			// Show the correct symbol for this state.
+			.sub,
+			.sub-hasLink,
+			.sub-isActivePage  {
+				label .symbol:after { content: $vmenu-subitem-disclosure-symbol-closed; }
+			}
+			
+			// Show the subsub's
+			.subsub,
+			.subsub-hasLink,
+			.subsub-isActivePage { display: none }
+		}
+
+		.sub-isActivePage {
+			 @include medium-layout { background: $vmenu-subitem-title-background-selected-medium; }
+			 @include widest-layout { background: $vmenu-subitem-title-background-selected-widest; }
+		}
+		
+		.sub,
+		.sub-hasLink {
+			// Background of the entire subitem
+			@include medium-layout { background: $vmenu-subitem-background-medium; }
+			@include widest-layout { background: $vmenu-subitem-background-widest; }
+		}
+		
+		.sub-hasLink:hover {
+			@include medium-layout { background: $vmenu-subitem-title-background-hover-medium; }
+			@include widest-layout { background: $vmenu-subitem-title-background-hover-widest; }
+		}
+		
+		.sub,
+		.sub-hasLink,
+		.sub-isActivePage {
+			
+			// Place the components next to each other
+			display: flex;
+					
+			.disclosure {
+		
+				// Center the disclosure symbol
+				display: flex;
+				justify-content: center;
+				align-items: center;
+								
+				// Display the proper disclosure symbol
+				.symbol:after { content: $vmenu-subitem-disclosure-symbol-closed; }
+			}
+
+			// Border of the entire subitem
+			@include medium-layout { border: $vmenu-subitem-border-medium; }
+			@include widest-layout { border: $vmenu-subitem-border-widest; }
+				
+				
+			.disclosure {
+				// Create a small separator between symbol and title
+				@include medium-layout { border-right: $vmenu-subitem-disclosure-area-border-right-medium; }
+				@include widest-layout { border-right: $vmenu-subitem-disclosure-area-border-right-widest; }
+					
+				// Create an indent that can be filled with a disclosure symbol
+				@include medium-layout { width: $vmenu-subitem-disclosure-area-width-medium; }
+				@include widest-layout { width: $vmenu-subitem-disclosure-area-width-widest; }
+			}
+				
+			.title {
+
+				// The show-hover class is used to show hovering for non-link subitems
+				a:hover, .show-hover:hover {
+					@include medium-layout { color: $vmenu-subitem-color-hover-medium; }
+					@include widest-layout { color: $vmenu-subitem-color-hover-widest; }
+				}
+
+				p {
+					// Allow for some padding to position and change the size of this element
+					@include medium-layout { padding: $vmenu-subitem-title-padding-medium; }
+					@include widest-layout { padding: $vmenu-subitem-title-padding-widest; }				
+
+					// Font for the sub menu title
+					@include medium-layout { font: $vmenu-subitem-font-medium; }
+					@include widest-layout { font: $vmenu-subitem-font-widest; }
+
+					// Color for the sub menu title
+					@include medium-layout { color: $vmenu-subitem-color-medium; }
+					@include widest-layout { color: $vmenu-subitem-color-widest; }
+				}
+			}
+		}
+			
+		.subsub-isActivePage {
+			@include medium-layout { background: $vmenu-subsubitem-background-selected-medium; }
+			@include widest-layout { background: $vmenu-subsubitem-background-selected-widest; }
+		}
+
+		.subsub,
+		.subsub-hasLink {
+			@include medium-layout { background: $vmenu-subsubitem-background-medium; }
+			@include widest-layout { background: $vmenu-subsubitem-background-widest; }
+		}
+			
+		.subsub-hasLink:hover {
+			@include medium-layout { background: $vmenu-subsubitem-background-hover-medium; }
+			@include widest-layout { background: $vmenu-subsubitem-background-hover-widest; }
+		}
+
+		.subsub,
+		.subsub-hasLink,
+		.subsub-isActivePage {
+			
+			// Not visible unless the checkbox is active
+			display: none;
+							
+			// Set border and background
+			@include medium-layout { border: $vmenu-subsubitem-border-medium; }
+			@include widest-layout { border: $vmenu-subsubitem-border-widest; }
+				
+			.disclosure {
+
+				// Create a small separator between symbol and title
+				@include medium-layout { border-right: $vmenu-subsubitem-disclosure-area-border-right-medium; }
+				@include widest-layout { border-right: $vmenu-subsubitem-disclosure-area-border-right-widest; }
+					
+				// Create an indent that can be filled with a disclosure symbol
+				@include medium-layout { width: $vmenu-subsubitem-disclosure-area-width-medium; }
+				@include widest-layout { width: $vmenu-subsubitem-disclosure-area-width-widest; }
+			}
+				
+			.title {
+				
+				a:hover {						
+					@include medium-layout { color: $vmenu-subsubitem-color-hover-medium; }
+					@include widest-layout { color: $vmenu-subsubitem-color-hover-widest; }
+				}
+
+				p {
+					// Allow for some padding to position and change the size of this element
+					@include medium-layout { padding: $vmenu-subsubitem-title-padding-medium; }
+					@include widest-layout { padding: $vmenu-subsubitem-title-padding-widest; }				
+
+					// Font for the sub menu title
+					@include medium-layout { font: $vmenu-subsubitem-font-medium; }
+					@include widest-layout { font: $vmenu-subsubitem-font-widest; }
+
+					// Color for the sub menu title
+					@include medium-layout { color: $vmenu-subsubitem-color-medium; }
+					@include widest-layout { color: $vmenu-subsubitem-color-widest; }
+				}
+			}
+		}			
+	}		
+}