Rozšírenie ľavého stĺpca

LinuxOSsk · Oct 15, 2017 · 50814fa · 50814fa
1 parent 9db68a6
commit 50814fa
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 11 deletions.
diff --git a/static/alpha/scss/_header.scss b/static/alpha/scss/_header.scss
@@ -0,0 +1,58 @@
+#header {
+	background-color: #6b8fc7;
+	background-position: sprite_position(header_shadow);
+	@include sprite_background;
+}
+
+#logo {
+	a {
+		display: block;
+		text-indent: -9999px;
+		overflow: hidden;
+		margin-left: auto;
+		margin-right: auto;
+		@include sprite(logo);
+	}
+}
+
+#main_menu {
+	padding: 0;
+	margin: 0 $base-margin;
+	list-style: none;
+	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
+	background: rgba(0, 0, 0, 0.05);
+
+	li {
+		background: darken($primary-color, 15%);
+		float: left;
+		position: relative;
+		margin-left: 2px;
+
+		&:first-child {
+			margin-left: 0;
+		}
+
+		&.active, &:hover {
+			z-index: 1;
+			background: $primary-color-complement;
+			color: $link-color;
+			a {
+				color: $link-color;
+			}
+		}
+
+		a {
+			display: block;
+			padding: 0.75em 1em;
+			color: $primary-color-complement;
+			&:hover {
+				text-decoration: none;
+			}
+		}
+		.badge {
+			position: absolute;
+			top: -8px;
+			right: 8px;
+		}
+	}
+}
diff --git a/static/alpha/scss/_layout.scss b/static/alpha/scss/_layout.scss
@@ -1,8 +1,12 @@
+$header-height: 120px;
+
 #main_content {
 	float: left;
 	width: 50%;
 	margin-left: 25%;
 	overflow: hidden;
+	margin-top: -(40px + $base-margin);
+	position: relative;
 
 	.module {
 		margin-left: $base-margin;
@@ -14,41 +18,89 @@
 	width: 25%;
 	float: left;
 	margin-left: -75%;
+	margin-top: -($header-height + $base-margin);
+	position: relative;
+
+	&:before {
+		content: " ";
+		display: block;
+		background: lighten($primary-color, 10%);
+		height: 80px;
+		position: absolute;
+		top: $base-margin;
+		left: 0;
+		right: 0px;
+		box-shadow: -3px -3px 4px rgba(0, 0, 0, 0.25);
+	}
 
 	.module {
-		margin-left: $base-margin;
+		padding-top: 80px;
 	}
 }
 
 #sidebar_2 {
 	width: 25%;
 	float: left;
+	margin-top: -(20px + $base-margin);
+	position: relative;
 
 	.module {
 		margin-right: $base-margin;
 	}
 }
 
+#header {
+	height: $header-height;
+	position: relative;
+}
+
+#logo {
+	top: 0;
+	left: $base-margin;
+	position: absolute;
+	z-index: 1;
+}
+
+#main_menu {
+	position: absolute;
+	left: 25%;
+	bottom: 40px;
+}
+
 @media #{$xlarge-down} {
 	#main_content {
 		width: 66%;
 		margin-left: 0;
-		float: right;
+		float: left;
 	}
 
 	#sidebar_1 {
 		width: 34%;
-		margin-left: 0;
+		float: right;
+		margin-top: -(20px + $base-margin);
+		&:before {
+			display: none;
+		}
+		.module {
+			padding-top: 0;
+		}
 	}
 
 	#sidebar_2 {
 		width: 34%;
+		float: right;
+		clear: right;
+		margin-top: -$base-margin;
+	}
+
+	#sidebar_1 .module, #sidebar_2 .module {
 		margin-left: 0;
-		clear: left;
-		.module {
-			margin-left: $base-margin;
-			margin-right: 0;
-		}
+		margin-right: $base-margin;
+	}
+
+	#main_menu {
+		left: auto;
+		right: 34%;
 	}
 }
 
@@ -62,4 +114,20 @@
 			margin-right: 0;
 		}
 	}
+
+	#main_content {
+		margin-top: -40px;
+	}
+
+	#sidebar_1, #sidebar_2 {
+		margin-top: 0;
+	}
+
+	#sidebar_1 {
+		margin-bottom: 0;
+	}
+
+	#main_menu {
+		right: 0;
+	}
 }
diff --git a/static/alpha/scss/style.scss b/static/alpha/scss/style.scss
@@ -4,4 +4,5 @@
 @import "alpha/scss/mixins";
 @import "alpha/scss/base";
 @import "alpha/scss/components";
+@import "alpha/scss/header";
 @import "alpha/scss/layout";
diff --git a/templates/partials/site_menu.html b/templates/partials/site_menu.html
@@ -19,7 +19,4 @@
 		<a href="{{ url('wiki:home') }}">Wiki</a>
 		{% if count_new and count_new.wiki_page %}<span class="badge important">{{ count_new.wiki_page }}</span>{% endif %}
 	</li>
-	<li{% if 'blackhole' in namespaces %} class="active"{% endif %}>
-		<a href="{{ url('blackhole:story_list') }}">Blackhole</a>
-	</li>
 {% endwith %}