ADDED: Component: sections: Use sections (.banner) to define a full-w…

…idth banner which stretch/shrink across different viewports.

src/css/components/components.css

@@ -5,22 +5,24 @@
  * VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
  */
 
+@import "containers.css";
 @import "preloaders.css";
-@import "sidebar2.css";
-@import "navbar.css";
-@import "tables.css";
-@import "cards.css";
-@import "modals.css";
 @import "buttons.css";
-@import "SGNForms/SGNForms.css";
-@import "snackbar.css";
-@import "progressbars.css";
-@import "SGNLoadingDialog.css";
+@import "cards.css";
 @import "code.css";
 @import "ellipsify.css";
 @import "listgroup.css";
+@import "modals.css";
+@import "navbar.css";
+@import "progressbars.css";
+@import "sections.css";
+@import "SGNForms/SGNForms.css";
+@import "SGNLoadingDialog.css";
+@import "sidebar2.css";
+@import "snackbar.css";
 @import "tablayout.css";
+@import "tables.css";
 @import "views.css";
-@import "wizard.css";
 @import "windows.css";
+@import "wizard.css";
 

src/css/components/sections.css

@@ -0,0 +1,125 @@
+/*
+ * Copyright (c) 2022-2023 SGNetworks. All rights reserved.
+ *
+ * The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification",  "Alteration", "Re-distribution" is completely prohibited.
+ * VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
+ */
+
+section.banner,
+section.banner * {
+	--banner-container-bg-blur-intensity: 5px;
+}
+
+@media all and (prefers-color-scheme: light) {
+	section.banner,
+	section.banner * {
+		--banner-container-bg-color: hsla(0, 0%, 50%, .5);
+	}
+}
+
+@media all and (prefers-color-scheme: dark) {
+	section.banner,
+	section.banner * {
+		--banner-container-bg-color: hsla(0, 0%, 0%, .5);
+	}
+}
+
+section.banner {
+	/*! display: flex; */
+	justify-content: center;
+	align-items: center;
+	position: relative;
+	overflow: hidden;
+}
+
+section.banner > .section-img-overlay {
+	width: 100%;
+	height: 100vh;
+	z-index: -1;
+}
+
+section.banner > .section-img-overlay > img {
+	width: 100%;
+	max-height: 100%;
+	display: flex;
+}
+
+section.banner > .section-img-overlay.blur {
+	filter: blur(4px);
+}
+
+section.banner > .container-fluid,
+section.banner > .container,
+section.banner > .welcome {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	color: var(--sgn-accent-primary-text);
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	overflow: visible;
+}
+
+section.banner > .container-fluid,
+section.banner > .container {
+	margin: 0;
+	padding: 0;
+	min-width: 100%;
+	min-height: 100%;
+	max-width: 100%;
+	max-height: 100%;
+	background-color: var(--banner-container-bg-color, hsla(210, 50%, 50%, .5));
+	backdrop-filter: var(--banner-container-bg-blur-intensity, blur(5px));
+}
+
+section.banner > .container-fluid > .welcome,
+section.banner > .container > .welcome,
+section.banner > .welcome {
+	max-width: calc(100% - 10rem);
+	max-height: calc(100% - (60px * 2));
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+section.banner > .container-fluid > .welcome > h1,
+section.banner > .container > .welcome > h1,
+section.banner > .container-fluid > .welcome > h6,
+section.banner > .container > .welcome > h6,
+section.banner > .welcome > h1,
+section.banner > .welcome > h6 {
+	margin: 0;
+}
+
+section.banner > .container-fluid > .welcome > h1,
+section.banner > .container > .welcome > h1,
+section.banner > .welcome > h1 {
+	font-size: 3rem;
+	color: var(--sgn-accent-primary);
+}
+
+section.banner > .container-fluid > .welcome > h6,
+section.banner > .container > .welcome > h6,
+section.banner > .welcome > h6 {
+	font-size: 1.4rem;
+	color: var(--sgn-text-secondary-light);
+}
+
+section.banner > .container > .auto-grid,
+section.banner > .container > .row,
+section.banner > .container > .card {
+	width: 100%;
+}
+
+section.banner > .container > .title {
+	color: var(--sgn-accent-primary);
+	mix-blend-mode: hard-light;
+	text-transform: uppercase;
+	font-size: 3.5rem;
+	font-family: var(--sgn-font-default-bold);
+}