basic/_common.scss

@@ -43,6 +43,18 @@
 
 
 
+.txt_center {
+	text-align: center !important;
+}
+.txt_right {
+	text-align: right !important;
+}
+.txt_left {
+	text-align: left !important;
+}
+
+
+
 // Clearing and floating
 // ------------------------------------------------------------------------------
 .clear {

basic/_demo.scss

@@ -58,9 +58,17 @@
 
 .demo__footer {
 	width: 100%;
-	height: 128px;
+	// height: 128px;
+	padding: $space_2 0;
 	background-color: $dark_color;
 	color: $bright_color;
+
+	nav {
+
+		a {
+			color: $bright_color;
+		}
+	}
 }
 
 .demo__avatar {

basic/_grouping.scss

@@ -5,7 +5,6 @@
 p {
 	@extend %basic;
 	margin: $basic_space 0;
-	color: $basic_font_color;
 	code {
 		padding: $tiny_space $half_space;
 		font-size: 1em;

basic/_textlevel.scss

@@ -33,14 +33,17 @@ a {
 	@extend %default_button;
 }
 
-.a__button_border {
+.a__button_text {
 	@extend %default_button;
 	padding: $wide_padding;
 	background-color: transparent;
 	color: $basic_font_color;
-	border: $cell_border;
 }
 
+.a__button_border {
+	@extend .a__button_text;
+	border: $cell_border;
+}
 
 
 // Other elements

basic/_typography.scss

@@ -61,18 +61,3 @@
 	text-overflow: ellipsis;
 	-o-text-overflow: ellipsis; // vendor
 }
-
-
-
-// Specific styles
-// -----------------------------------------------------------------------------
-
-.txt_center {
-	text-align: center !important;
-}
-.txt_right {
-	text-align: right !important;
-}
-.txt_left {
-	text-align: left !important;
-}

code/variables.js

@@ -1,7 +1,7 @@
 var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
 var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
 
-var full_view_hover = true;
+var full_view_hover = false;
 
 var doc_pos_y = 0;
 var basic_ease = 600;

example.html

@@ -396,7 +396,7 @@
 			<p>Aufbau, Standardwerte</p>
 		</header>
 		<article>
-			<p>&ellip;</p>
+			<p>&hellip;</p>
 		</article>
 	</section>
 
@@ -486,12 +486,22 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
 				<header id="js_demo_fix" class="header__page demo__header header__fix">
 					<nav class="nav__right">
 						<ul>
-							<li><a href="" class="a__button">One</a></li>
+							<li><a href="" class="a__button">Eins</a></li>
-							<li><a href="" class="a__button">Two</a></li>
+							<li><a href="" class="a__button">Zwei</a></li>
 						</ul>
 					</nav>
 				</header>
-				<footer class="pos_abs pos_bottom demo__footer"></footer>
+				<footer class="pos_abs pos_bottom demo__footer">
+					<nav class="nav__column">
+						<ul>
+							<li><a href="" class="a__button_text">Alpha</a></li>
+							<li><a href="" class="a__button_text">Bravo</a></li>
+							<li><a href="" class="a__button_text">Charlie</a></li>
+							<li><a href="" class="a__button_text">Delta</a></li>
+						</ul>
+					</nav>
+					<p class="txt_center">👨‍💻 mit ❤ von <a href="https://interaktionsweise.de">Interaktionsweise</a></p>
+				</footer>
 			</div>
 			<div class="flex">
 				<div class="flex_child"></div>

modules/navigation/_nav_module.scss

@@ -14,10 +14,49 @@ nav {
 	ul {
 		@extend .overflow;
 
+		ul {
+			margin: $basic_space 0;
+		}
+
 		li {
 			@extend .float_left;
 			margin-right: $basic_space;
 			margin-bottom: 0;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+	}
+}
+
+.nav__right {
+	float: right;
+	margin-left: $basic_space;
+
+	.align_parent {
+		margin-right: $basic_space * -1;
+	}
+}
+
+.nav__separate_right {
+	float: right;
+	li {
+		position: relative;
+
+		&:first-child {
+			padding-left: $basic_space * 2 + $tiny_space;
+
+			&::before {
+				content: "";
+				position: absolute;
+				width: $tiny_space;
+				height: 100%;
+				left: 0;
+				top: 0;
+				background-color: $bright_color;
+				margin: 0 $basic_space;
+			}
 		}
 	}
 }
@@ -35,6 +74,27 @@ nav {
 	}
 }
 
+.nav__column {
+	position: relative;
+	margin: $basic_space 0;
+
+	ul {
+		@extend .flex;
+		margin: 0 $space_5;
+
+		li {
+			@extend .flex_child;
+			flex-grow: 1;
+			margin: 0;
+			text-align: center;
+
+			a {
+				display: block;
+			}
+		}
+	}
+}
+
 .nav__page_meta {
 	position: fixed;
 	// display: table;
@@ -69,14 +129,6 @@ nav {
 	nav {
 		@extend .nav__horizontal;
 
-		ul {
-			margin: $basic_space 0;
-		}
-
-		li:last-child {
-			margin-right: 0;
-		}
-		
 		a {
 
 			&:active,
@@ -87,35 +139,4 @@ nav {
 			}
 		}
 	}
-
-	.nav__right {
-		float: right;
-		margin-left: $basic_space;
-
-		.align_parent {
-			margin-right: $basic_space * -1;
-		}
-	}
-
-	.nav__separate_right {
-		float: right;
-		li {
-			position: relative;
-
-			&:first-child {
-				padding-left: $basic_space * 2 + $tiny_space;
-
-				&::before {
-					content: "";
-					position: absolute;
-					width: $tiny_space;
-					height: 100%;
-					left: 0;
-					top: 0;
-					background-color: $bright_color;
-					margin: 0 $basic_space;
-				}
-			}
-		}
-	}
 }