Add style

linux-taiwan · Dec 21, 2015 · bafe358 · bafe358
1 parent 3caa564
commit bafe358
Show file tree

Hide file tree

Showing 7 changed files with 183 additions and 4 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,11 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+_site/
+sass-cache/
diff --git a/images/bg.png b/images/bg.png
diff --git a/images/kde_icon.svg b/images/kde_icon.svg
diff --git a/images/menu_icon.svg b/images/menu_icon.svg
diff --git a/index.html b/index.html
@@ -3,12 +3,21 @@
   <head>
     <meta  content="text/html; charset=UTF-8"  http-equiv="content-type">
     <title>KDE 正體中文支援站</title>
+	<link rel="stylesheet" href="/style.css">
   </head>
   <body>
+    <img src="/images/menu_icon.svg" alt="menu icon" id="menu" width="20" height="20">
+    <main>
     <h1>KDE 正體中文支援站</h1>
-    <main>這裡是 KDE 的非官方正體中文支援站，您可以在此獲得協助。<br>
-      <br>
-      <a  href="https://www.kde.org/">KDE 官方網站</a></main>
-    <br>
+    <p>這裡是 KDE 的非官方正體中文支援站，您可以在此獲得協助。</p>
+      <a  href="https://www.kde.org/">KDE 官方網站</a>
+    </main>
+    <footer>
+      <img src="/images/kde_icon.svg" alt="kde icon" width="30" height="30">
+      <div class="status_bar">
+        <time>16:49</time>
+        <img src="/images/menu_icon.svg" alt="menu icon">
+      </div>
+    </footer>
   </body>
 </html>
diff --git a/style.scss b/style.scss
@@ -0,0 +1,53 @@
+---
+---
+
+body {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  background: url('images/bg.png') repeat no-repeat;
+  background-size: contain;
+}
+
+#menu {
+  float: left;
+  padding: .25rem;
+  background-color: rgba(255,255,255, .5);
+}
+
+main {
+  flex: 1;
+  color: #fff;
+  a {
+    color: #fff;
+  }
+}
+
+footer {
+  box-sizing: border-box;
+  padding: .25rem;
+  min-height: 1rem;
+  width: 100%;
+  background-color: #fff;
+  box-shadow: 0 -2px 5px 1px rgba(0,0,0,.4);
+  img {
+    vertical-align: top;
+  }
+  .status_bar {
+    float: right;
+    display: inline-block;
+    time {
+      margin: 0 .5rem;
+      font-size: 1.2rem;
+      font-weight: 300;
+    }
+  }
+}
+
+h1 {
+  margin: 0;
+}
+
+