Add gnome-shell top bar

linux-taiwan · Dec 16, 2015 · 57d8706 · 57d8706
1 parent baa3386
commit 57d8706
Show file tree

Hide file tree

Showing 5 changed files with 229 additions and 3 deletions.
diff --git a/_includes/githublogo.svg b/_includes/githublogo.svg
diff --git a/_includes/githublogo2.svg b/_includes/githublogo2.svg
diff --git a/_includes/gnomelogo.svg b/_includes/gnomelogo.svg
diff --git a/index.html b/index.html
@@ -1,12 +1,27 @@
+---
+---
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Gnome 台灣社群支援站</title>
+	<link rel="stylesheet" href="/style.css">
 </head>
 <body>
-	<header>Gnome 台灣社群支援站</header>
-	<main>這裡是 Gnome 台灣非官方社群支援站，你可以在這裡獲得協助或是聯絡管道。</main>
-	<footer>Gnome Taiwan</footer>
+	<header>
+		<span class="overview">概覽</span>
+		<h1>
+			{% include gnomelogo.svg %}
+			Gnome 台灣社群支援站
+		</h1>
+		<time>12月17日 01:37</time>
+		<span class="github">
+			<a href="https://github.com/linux-taiwan/gnome.linux.org.tw">
+			{% include githublogo.svg %}
+			</a>
+		</span>
+	</header>
+	<main>這裡是 Gnome 台灣非官方社群支援站，你可以在這裡獲得協助。</main>
 </body>
 </html>
diff --git a/style.scss b/style.scss
@@ -0,0 +1,63 @@
+---
+---
+
+@mixin bg-gradient-t2b($start-colour, $end-colour) {
+    background-color: $start-colour;
+    background-image: -webkit-gradient(linear, left top, left bottom, from($start-colour), to($end-colour));
+    background-image: -webkit-linear-gradient(top, $start-colour, $end-colour);
+    background-image:    -moz-linear-gradient(top, $start-colour, $end-colour);
+    background-image:     -ms-linear-gradient(top, $start-colour, $end-colour);
+    background-image:      -o-linear-gradient(top, $start-colour, $end-colour);
+    background-image:         linear-gradient(top, $start-colour, $end-colour);
+    filter:            progid:DXImageTransform.Microsoft.gradient(start-colourStr='#{$start-colour}', end-colourStr='#{$end-colour}');
+}
+
+
+body {
+	margin: 0;
+	padding: 0;
+	min-height: 100vh;
+	@include bg-gradient-t2b(#8FB3D9, #fff);
+}
+
+header {
+	padding: .3rem .25rem .25rem;
+	background-color: #000;
+	color: #ccc;
+	h1 {
+		display: inline-block;
+		padding: 0;
+		margin: 0 2rem;
+		font-size: 1rem;
+		font-weight: 500;
+		&:hover {
+			color: #fff;
+		}
+		svg {
+			height: 20px;
+			width: 18px;
+			vertical-align: top;
+		}
+	}
+	time {
+		position: absolute;
+		left: 45vw;
+		&:hover {
+			color: #fff;
+		}
+	}
+	.github {
+		float:right;
+		&:hover {
+			color: #fff;
+		}
+		svg {
+			&:hover path{
+				fill: #fff;
+			}
+			path {
+				fill: #ccc;
+			}
+		}
+	}
+}