swiftfire-jekyll-theme 0.2.0

data/_sass/classic/_banner-area.scss

@@ -0,0 +1,552 @@
+#banner-menu-symbol {
+
+	// Don't display the checkbox
+	display: none;
+			
+	// When selected, display the menu bar and bottom separator
+	&:checked ~ {
+		@include narrow-layout {
+			.banner-area .menubar {
+				@if $menubar-enabled-narrow { display: flex; } @else { display: none; }
+			}
+			.banner-area .menubar-bottom-separator,
+			.banner-area .add-to-banner-area-height {
+				@if $menubar-bottom-separator-enabled-narrow { display: block; } @else { display: none; }
+			}
+		}
+		@include medium-layout {
+			@if $banner-menu-symbol-enabled-medium {
+				.banner-area .menubar { display: none; }
+				.banner-area .menubar-bottom-separator,
+				.banner-area .add-to-banner-area-height { display: none }
+			} @else {
+				.banner-area .menubar {
+					@if $menubar-enabled-medium { display: flex; } @else { display: none; }
+				}
+				.banner-area .menubar-bottom-separator,
+				.banner-area .add-to-banner-area-height {
+					@if $menubar-bottom-separator-enabled-medium { display: block; } @else { display: none; }
+				}
+			}
+		}
+		@include widest-layout {
+			@if $banner-menu-symbol-enabled-widest {
+				.banner-area .menubar { display: none; }
+				.banner-area .menubar-bottom-separator,
+				.banner-area .add-to-banner-area-height { display: none }
+			} @else {
+				.banner-area .menubar  {
+					@if $menubar-enabled-widest { display: flex; } @else { display: none; }
+				}
+				.banner-area .menubar-bottom-separator,
+				.banner-area .add-to-banner-area-height {
+					@if $menubar-bottom-separator-enabled-widest { display: block; } @else { display: none; }
+				}
+			}
+		}
+	}
+}
+
+.banner-area {
+
+	// Layout
+	width: 100%;
+
+	.banner {
+	
+		// Sizing: The container occupies the entire width and height as specified
+		width: 100%;
+		@include narrow-layout { @if $banner-enabled-narrow { height: $banner-height-narrow; } }
+		@include medium-layout { @if $banner-enabled-medium { height: $banner-height-medium; } }
+		@include widest-layout { @if $banner-enabled-widest { height: $banner-height-widest; } }
+
+		// background
+		@include narrow-layout { background: $banner-background-narrow; }
+		@include medium-layout { background: $banner-background-medium; }
+		@include widest-layout { background: $banner-background-widest; }
+		
+		z-index: 1;
+	}
+
+	.icon-container {
+		
+		// Sizing: This is an overlay container over the entire banner
+		@extend .overlay;
+		@include narrow-layout { height: $banner-height-narrow; }
+		@include medium-layout { height: $banner-height-medium; }
+		@include widest-layout { height: $banner-height-widest; }
+
+		// Display or not
+		@include narrow-layout {
+			@if ($banner-enabled-narrow and $banner-icon-enabled-narrow) { display: flex; }
+			@else { display: none; }
+		}
+		@include medium-layout {
+			@if ($banner-enabled-medium and $banner-icon-enabled-medium) { display: flex; }
+			@else { display: none; }
+		}
+		@include widest-layout {
+			@if ($banner-enabled-widest and $banner-icon-enabled-widest) { display: flex; }
+			@else { display: none; }
+		}
+
+		// Position the icon
+		@include narrow-layout {
+			justify-content: $banner-icon-justify-content-narrow;
+			align-items: $banner-icon-align-items-narrow;
+		}
+		@include medium-layout {
+			justify-content: $banner-icon-justify-content-medium;
+			align-items: $banner-icon-align-items-medium;
+		}
+		@include widest-layout {
+			justify-content: $banner-icon-justify-content-widest;
+			align-items: $banner-icon-align-items-widest;
+		}
+		
+		// Ordering
+		@include narrow-layout { z-index: $banner-icon-z-index-narrow; }
+		@include medium-layout { z-index: $banner-icon-z-index-medium; }
+		@include widest-layout { z-index: $banner-icon-z-index-widest; }
+
+			
+		.banner-icon {				
+
+			// Position tweaks
+			@include narrow-layout { padding: $banner-icon-padding-narrow; }
+			@include medium-layout { padding: $banner-icon-padding-medium; }
+			@include widest-layout { padding: $banner-icon-padding-widest; }
+
+			// Sizing
+			@include narrow-layout { width: $banner-icon-width-narrow; }
+			@include medium-layout { width: $banner-icon-width-medium; }
+			@include widest-layout { width: $banner-icon-width-widest; }
+
+			@include narrow-layout { height: $banner-icon-height-narrow; }
+			@include medium-layout { height: $banner-icon-height-medium; }
+			@include widest-layout { height: $banner-icon-height-widest; }
+							
+			// Background
+			@include narrow-layout { background: $banner-icon-background-narrow; }
+			@include medium-layout { background: $banner-icon-background-medium; }
+			@include widest-layout { background: $banner-icon-background-widest; }			
+		}
+		
+		// Content (icon image)
+		// Note: Firefox needs the 'after' attribute to display the icon. Other browsers seem fine without it.
+		// Issue no 19.
+		.banner-icon::after {
+			@include narrow-layout { content: $banner-icon-url-narrow; }
+			@include medium-layout { content: $banner-icon-url-medium; }
+			@include widest-layout { content: $banner-icon-url-widest; }
+		}
+	}
+		
+	.title-area-container {
+		
+		// Sizing: This is an overlay container over the entire banner
+		@extend .overlay;
+		@include narrow-layout { height: $banner-height-narrow; }
+		@include medium-layout { height: $banner-height-medium; }
+		@include widest-layout { height: $banner-height-widest; }
+		
+		// Display or not
+		@include narrow-layout {
+			@if ($banner-enabled-narrow and ($banner-title-enabled-narrow or $banner-subtitle-enabled-narrow)) { display: flex; }
+			@else { display: none; }
+		}
+		@include medium-layout {
+			@if ($banner-enabled-medium and ($banner-title-enabled-medium or $banner-subtitle-enabled-medium)) { display: flex; }
+			@else { display: none; }
+		}
+		@include widest-layout {
+			@if ($banner-enabled-widest and ($banner-title-enabled-widest or $banner-subtitle-enabled-widest)) { display: flex; }
+			@else { display: none; }
+		}
+
+		// Ordering
+		@include narrow-layout { z-index: $banner-title-area-z-index-narrow; }
+		@include medium-layout { z-index: $banner-title-area-z-index-medium; }
+		@include widest-layout { z-index: $banner-title-area-z-index-widest; }
+
+		// Position the title area
+		@include narrow-layout {			
+			justify-content: $banner-title-area-justify-content-narrow;
+			align-items: $banner-title-area-align-items-narrow;
+		}		
+		@include medium-layout {
+			justify-content: $banner-title-area-justify-content-medium;
+			align-items: $banner-title-area-align-items-medium;
+		}
+		@include widest-layout {
+			justify-content: $banner-title-area-justify-content-widest;
+			align-items: $banner-title-area-align-items-widest;
+		}
+		
+		.title-area {
+			
+			// Sizing
+			@include narrow-layout {
+				width: $banner-title-area-width-narrow;
+				height: $banner-title-area-height-narrow;
+			}
+			@include medium-layout {
+				width: $banner-title-area-width-medium;
+				height: $banner-title-area-height-medium;
+			}
+			@include widest-layout {
+				width: $banner-title-area-width-widest;
+				height: $banner-title-area-height-widest;
+			}
+
+			// Positioning of title and subtitle
+			display: flex;
+			@include narrow-layout {
+				flex-direction: $banner-title-subtitle-flex-direction-narrow;
+				justify-content: $banner-title-subtitle-justify-content-narrow;
+				align-items: $banner-title-subtitle-align-items-narrow;
+			}
+			@include medium-layout {
+				flex-direction: $banner-title-subtitle-flex-direction-medium;
+				justify-content: $banner-title-subtitle-justify-content-medium;
+				align-items: $banner-title-subtitle-align-items-medium;
+			}
+			@include widest-layout {
+				flex-direction: $banner-title-subtitle-flex-direction-widest;
+				justify-content: $banner-title-subtitle-justify-content-widest;
+				align-items: $banner-title-subtitle-align-items-widest;
+			}
+
+			// background
+			@include narrow-layout { background: $banner-title-area-background-narrow; }
+			@include medium-layout { background: $banner-title-area-background-medium; }
+			@include widest-layout { background: $banner-title-area-background-widest; }
+
+			// Title appearance
+			@include narrow-layout {
+				@if ($banner-title-enabled-narrow) {
+	
+					.title p {
+			
+						// Set the margins to zero to avoid shifts in placing.
+						margin: 0;
+					
+						// Position fine tuning uses padding
+						padding: $banner-title-padding-narrow;
+					
+						// Appearance of the title
+						font: $banner-title-font-narrow;
+						color: $banner-title-color-narrow;
+					}
+					
+				} @else {
+				
+					.title { display: none; }
+				}
+			}
+			@include medium-layout {
+				@if ($banner-title-enabled-medium) {
+	
+					.title p {
+			
+						// Set the margins to zero to avoid shifts in placing.
+						margin: 0;
+					
+						// Position fine tuning uses padding
+						padding: $banner-title-padding-medium;
+					
+						// Appearance of the title
+						font: $banner-title-font-medium;
+						color: $banner-title-color-medium;
+					}
+					
+				} @else {
+				
+					.title { display: none; }
+				}
+			}
+			@include widest-layout {
+				@if ($banner-title-enabled-widest) {
+	
+					.title p {
+			
+						// Set the margins to zero to avoid shifts in placing.
+						margin: 0;
+					
+						// Position fine tuning uses padding
+						padding: $banner-title-padding-widest;
+					
+						// Appearance of the title
+						font: $banner-title-font-widest;
+						color: $banner-title-color-widest;
+					}
+					
+				} @else {
+				
+					.title { display: none; }
+				}
+			}
+			
+			// Subtitle appearance
+			@include narrow-layout {
+				@if ($banner-subtitle-enabled-narrow) {
+
+					.subtitle p {
+			
+						// Set the margins to zero to avoid shifts in placing.
+						margin: 0;
+					
+						// Position fine tuning uses padding
+						padding: $banner-subtitle-padding-narrow;
+					
+						// Appearance of the title
+						font: $banner-subtitle-font-narrow;
+						color: $banner-subtitle-color-narrow;
+					}
+				
+				} @else {
+				
+					.subtitle { display: none; }
+				}
+			}
+			@include medium-layout {
+				@if ($banner-subtitle-enabled-medium) {
+
+					.subtitle p {
+			
+						// Set the margins to zero to avoid shifts in placing.
+						margin: 0;
+					
+						// Position fine tuning uses padding
+						padding: $banner-subtitle-padding-medium;
+					
+						// Appearance of the title
+						font: $banner-subtitle-font-medium;
+						color: $banner-subtitle-color-medium;
+					}
+				
+				} @else {
+				
+					.subtitle { display: none; }
+				}
+			}
+			@include widest-layout {
+				@if ($banner-subtitle-enabled-widest) {
+
+					.subtitle p {
+			
+						// Set the margins to zero to avoid shifts in placing.
+						margin: 0;
+					
+						// Position fine tuning uses padding
+						padding: $banner-subtitle-padding-widest;
+					
+						// Appearance of the title
+						font: $banner-subtitle-font-widest;
+						color: $banner-subtitle-color-widest;
+					}
+				
+				} @else {
+				
+					.subtitle { display: none; }
+				}
+			}
+		}
+	}
+		
+	.label-container {
+			
+		// The container occupies the entire banner area
+		@extend .overlay;
+		@include narrow-layout { height: $banner-height-narrow; }
+		@include medium-layout { height: $banner-height-medium; }
+		@include widest-layout { height: $banner-height-widest; }
+
+		// Display or not
+		@include narrow-layout {
+			@if ($banner-enabled-narrow and $banner-menu-symbol-enabled-narrow) { display: flex; }
+			@else { display: none; }
+		}
+		@include medium-layout {
+			@if ($banner-enabled-medium and $banner-menu-symbol-enabled-medium) { display: flex; }
+			@else { display: none; }
+		}
+		@include widest-layout {
+			@if ($banner-enabled-widest and $banner-menu-symbol-enabled-widest) { display: flex; }
+			@else { display: none; }
+		}
+
+		// Position the label (tap area)
+		display: flex;
+		@include narrow-layout {
+			justify-content: $banner-menu-symbol-justify-content-narrow;
+			align-items: $banner-menu-symbol-align-items-narrow;
+		}
+		@include medium-layout {
+			justify-content: $banner-menu-symbol-justify-content-medium;
+			align-items: $banner-menu-symbol-align-items-medium;
+		}
+		@include widest-layout {
+			justify-content: $banner-menu-symbol-justify-content-widest;
+			align-items: $banner-menu-symbol-align-items-widest;
+		}
+
+		// Ordering
+		@include narrow-layout { z-index: $banner-menu-symbol-z-index-narrow; }
+		@include medium-layout { z-index: $banner-menu-symbol-z-index-medium; }
+		@include widest-layout { z-index: $banner-menu-symbol-z-index-widest; }
+
+		label {
+
+			// Position the menu symbol
+			display:flex;
+			justify-content: center;
+			align-items: center;
+
+			// Insert the menu symbol		
+			@include narrow-layout { p:after { content: $banner-menu-symbol-code-narrow; } }
+			@include medium-layout { p:after { content: $banner-menu-symbol-code-medium; } }
+			@include widest-layout { p:after { content: $banner-menu-symbol-code-widest; } }
+
+			// Size the tap area 
+			@include narrow-layout { width: $banner-menu-symbol-tap-area-width-narrow; }
+			@include medium-layout { width: $banner-menu-symbol-tap-area-width-medium; }
+			@include widest-layout { width: $banner-menu-symbol-tap-area-width-widest; }
+			
+			@include narrow-layout { height: $banner-menu-symbol-tap-area-height-narrow; }
+			@include medium-layout { height: $banner-menu-symbol-tap-area-height-medium; }
+			@include widest-layout { height: $banner-menu-symbol-tap-area-height-widest; }
+					
+			// The background
+			@include narrow-layout { background: $banner-menu-symbol-tap-area-background-narrow; }
+			@include medium-layout { background: $banner-menu-symbol-tap-area-background-medium; }
+			@include widest-layout { background: $banner-menu-symbol-tap-area-background-widest; }
+					
+			// The border
+			@include narrow-layout { border: $banner-menu-symbol-tap-area-border-narrow; }
+			@include medium-layout { border: $banner-menu-symbol-tap-area-border-medium; }
+			@include widest-layout { border: $banner-menu-symbol-tap-area-border-widest; }
+
+			// The label is used as checkbox-label, it should show a pointer when the mouse is above it.
+			cursor: pointer;
+				
+			p {
+				// Fine tune the position of the menu symbol in the tap area
+				@include narrow-layout { padding: $banner-menu-symbol-padding-narrow; }
+				@include medium-layout { padding: $banner-menu-symbol-padding-medium; }
+				@include widest-layout { padding: $banner-menu-symbol-padding-widest; }
+				
+				// The font
+				@include narrow-layout { font: $banner-menu-symbol-font-narrow; }
+				@include medium-layout { font: $banner-menu-symbol-font-medium; }
+				@include widest-layout { font: $banner-menu-symbol-font-widest; }
+						
+				// The color
+				@include narrow-layout { color: $banner-menu-symbol-color-narrow; }
+				@include medium-layout { color: $banner-menu-symbol-color-medium; }
+				@include widest-layout { color: $banner-menu-symbol-color-widest; }
+			}
+		}
+	}		
+	
+	.menubar-top-separator {
+
+		// Use the entire width to force vertical appearance
+		width: 100%;
+		
+		// Sizing
+		@include narrow-layout { height: $menubar-top-separator-height-narrow; }
+		@include medium-layout { height: $menubar-top-separator-height-medium; }
+		@include widest-layout { height: $menubar-top-separator-height-widest; }
+
+		// Appearance
+		@include narrow-layout { background: $menubar-top-separator-background-narrow; }
+		@include medium-layout { background: $menubar-top-separator-background-medium; }
+		@include widest-layout { background: $menubar-top-separator-background-widest; }
+
+		// Enable or disable display
+		@include narrow-layout {
+			@if $menubar-top-separator-enabled-narrow { display: block; } @else { display: none; }
+		}
+		@include medium-layout {
+			@if $menubar-top-separator-enabled-medium { display: block; } @else { display: none; }
+		}
+		@include widest-layout {
+			@if $menubar-top-separator-enabled-widest { display: block; } @else { display: none; }
+		}
+	}
+		
+	.menubar-bottom-separator {
+
+		// Use the entire width to force vertical appearance
+		width: 100%;
+
+		// Sizing
+		@include narrow-layout { height: $menubar-bottom-separator-height-narrow; }
+		@include medium-layout { height: $menubar-bottom-separator-height-medium; }
+		@include widest-layout { height: $menubar-bottom-separator-height-widest; }
+
+		// Appearance
+		@include narrow-layout { background: $menubar-bottom-separator-background-narrow; }
+		@include medium-layout { background: $menubar-bottom-separator-background-medium; }
+		@include widest-layout { background: $menubar-bottom-separator-background-widest; }
+
+		// Enable or disable display
+		@include narrow-layout {
+			@if $menubar-bottom-separator-enabled-narrow { display: none; } @else { display: none; }
+		}
+		@include medium-layout {
+			@if $menubar-bottom-separator-enabled-medium { display: block; } @else { display: none; }
+		}
+		@include widest-layout {
+			@if $menubar-bottom-separator-enabled-widest { display: block; } @else { display: none; }
+		}
+	}
+	
+	.add-to-banner-area-height {
+		width: 100%;
+		@include narrow-layout { height: $add-to-banner-area-height-narrow; }
+		@include medium-layout { height: $add-to-banner-area-height-medium; }
+		@include widest-layout { height: $add-to-banner-area-height-widest; }
+	}
+}
+
+// This bit is needed to fix the banner and menubar in place at the top of the screen.
+//
+.banner-area-outside-dom {
+
+	// Fix the banner to the top of the screen
+	position: fixed;
+	top: 0;
+}
+
+// The banner area is placed inside the DOM
+//
+.banner-area-in-dom {
+	position: relative;
+}
+
+// Added to the banner-area that is used as a placeholder to keep the column-panel from appearing below the
+// banner-area. It does not seem to be necessary though. Still,it could prevent future problems, hence 
+//
+.invisible {
+	width: 100%;
+	opacity: 0;
+	z-index: -1;
+	position: relative;
+}
+
+// For anchor links when using top-fixed banner positioning
+//
+.anchor::before {
+	display: block;
+	content: " ";
+	@include narrow-layout { margin-top: -$anchor-top-fixed-offset-narrow; }
+	@include narrow-layout { height: $anchor-top-fixed-offset-narrow; }
+	@include medium-layout { margin-top: -$anchor-top-fixed-offset-medium; }
+	@include medium-layout { height: $anchor-top-fixed-offset-medium; }
+	@include widest-layout { margin-top: -$anchor-top-fixed-offset-widest; }
+	@include widest-layout { height: $anchor-top-fixed-offset-widest; }
+	visibility: hidden;
+	pointer-events: none;
+}