moved github to header

magicalyak · May 19, 2019 · 4daf054 · 4daf054
1 parent 473ed63
commit 4daf054
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 29 deletions.
diff --git a/public/index.html b/public/index.html
@@ -24,8 +24,16 @@
 						<div class="double-bounce2"></div>
 					</div>
 				</div>
+
 				<img src="assets/img/logo-light.svg" class="logo" alt="nginxconfig.io">
 
+				<div class="github">
+					<iframe class="github-star" src="https://ghbtns.com/github-btn.html?user=valentinxxx&repo=nginxconfig.io&type=star&count=true&size=large"></iframe>
+					<div class="github-link">
+						<ng-include src="'/assets/img/brands/github.svg'"></ng-include> <a href="https://github.com/valentinxxx/nginxconfig.io" target="_blank"><small>valentinxxx /</small> <strong>nginxconfig.io</strong></a>
+					</div>
+				</div>
+
 				<div class="sites">
 					<div class="title">Sites:</div>
 					<button class="btn btn-sm btn-outline-light" ng-repeat="(key, value) in data.sites" ng-click="setSite(key)" ng-class="{ 'active': site === key }" ng-cloak>
@@ -955,10 +963,6 @@
 					</div>
 					<div class="col-lg-4">
 						<aside class="sidebar">
-							<iframe class="github-star" src="https://ghbtns.com/github-btn.html?user=valentinxxx&repo=nginxconfig.io&type=star&count=true&size=large"></iframe>
-							<div class="github-link">
-								<img src="assets/img/brands/github.svg" alt="GitHub"> <a href="https://github.com/valentinxxx/nginxconfig.io" target="_blank"><small>valentinxxx /</small> <strong>nginxconfig.io</strong></a>
-							</div>
 							<div class="adsbygoogle-container">
 								<div class="note">▾ advertisement ▾</div>
 								<ins class="adsbygoogle"

diff --git a/resources/scss/_header.scss b/resources/scss/_header.scss
@@ -1,12 +1,15 @@
 header {
-	position: relative;
 	background-color: #000;
 	padding: 0.5rem 0;
 	text-align: center;
 	margin-bottom: 0.5rem;
 	color: #fff;
 	font-size: 2.2rem;
 
+	.container {
+		position: relative;
+	}
+
 	.loader {
 		position: absolute;
 		top: 5px;
@@ -43,6 +46,50 @@ header {
 		margin-bottom: 0.5rem;
 	}
 
+	.github {
+		@include media-breakpoint-up(lg) {
+			position: absolute;
+			right: 0;
+			top: 10px;
+		}
+
+		.github-link {
+			text-align: center;
+			font-size: 1rem;
+			margin-bottom: 0.5rem;
+
+			a {
+				color: #fff;
+			}
+
+			small {
+				font-size: 90%;
+			}
+
+			svg {
+				height: 1.2rem;
+				vertical-align: -4px;
+
+				g {
+					fill: #fff;
+				}
+			}
+		}
+
+		.github-star {
+			width: 144px;
+			height: 30px;
+			display: block;
+			border: 0;
+			overflow: hidden;
+			margin: 0 auto 0.25rem;
+
+			@include media-breakpoint-up(lg) {
+				margin-left: auto;
+			}
+		}
+	}
+
 	.sites {
 		@include media-breakpoint-up(lg) {
 			margin-top: -1rem;

diff --git a/resources/scss/_sidebar.scss b/resources/scss/_sidebar.scss
@@ -5,30 +5,6 @@ aside.sidebar {
 		margin-top: 0;
 	}
 
-	.github-link {
-		text-align: center;
-		font-size: 1rem;
-		margin-bottom: 0.5rem;
-
-		small {
-			font-size: 90%;
-		}
-
-		img {
-			height: 1.2rem;
-			vertical-align: -4px;
-		}
-	}
-
-	.github-star {
-		width: 144px;
-		height: 30px;
-		display: block;
-		border: 0;
-		overflow: hidden;
-		margin: 0 auto 0.25rem;
-	}
-
 	.buttons {
 		text-align: center;
 		margin-top: 1.5rem;