From efaaf86c6bf55a642e4f10aa20dc302c3182d03b Mon Sep 17 00:00:00 2001
From: queensferry <queensferry.me@gmail.com>
Date: Wed, 26 Feb 2020 19:05:57 +0800
Subject: feat: better index page design

---
 static/css/common.css | 83 +++++++++++++++++++++++++++++++++++++++++++++++++++
 static/css/index.css  | 35 ++++++++++++++++++++++
 static/css/main.css   | 76 ----------------------------------------------
 3 files changed, 118 insertions(+), 76 deletions(-)
 create mode 100644 static/css/common.css
 create mode 100644 static/css/index.css
 delete mode 100644 static/css/main.css

(limited to 'static/css')

diff --git a/static/css/common.css b/static/css/common.css
new file mode 100644
index 0000000..6acd636
--- /dev/null
+++ b/static/css/common.css
@@ -0,0 +1,83 @@
+/* global styles */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+a.link {
+  box-shadow: inset 0 -.2em #84DCC6;
+  transition: box-shadow .2s;
+}
+
+a.link:hover {
+  box-shadow: inset 0 -1em #84DCC6;
+}
+
+body {
+  background-color: #FAFAFA;
+  color: #222222;
+  font-family: 'trebuchet ms', 'Verdana', 'verdana ref', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::selection {
+  background-color: #84DCC6;
+}
+
+#wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin: 0 auto;
+  max-width: 1440px;
+  min-height: 100vh;
+  padding: .5rem .5rem;
+}
+
+/* header styles */
+#header {
+  align-items: center;
+  display: inherit;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+#header > .title {
+  font-size: 2rem;
+  padding: .5rem 3rem;
+}
+
+#header > .nav-bar > .nav-bar-item {
+  font-size: 1rem;
+  margin-left: 1.5rem;
+}
+
+/* main styles */
+#main {
+  flex: 1 0 auto;
+}
+
+/* footer styles */
+#footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-size: small;
+}
+
+#footer > * {
+  font-size: .8rem;
+}
+
+#footer > .footnote {
+  text-align: center;
+}
diff --git a/static/css/index.css b/static/css/index.css
new file mode 100644
index 0000000..1243a9b
--- /dev/null
+++ b/static/css/index.css
@@ -0,0 +1,35 @@
+.index {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.avatar > img {
+  height: 10rem;
+  width: 10rem;
+}
+
+.avatar > img.round {
+  border-radius: 100%;
+  border: #BFBDC1 .3rem solid;
+}
+
+.slogan {
+  margin: .5rem 0 1rem 0;
+  text-align: center;
+}
+
+.social-links > a {
+  background-color: #222222;
+  display: inline-block;
+  height: 2rem;
+  margin: 0 .7rem;
+  transition: background-color .3s;
+  width: 2rem;
+}
+
+.social-links > a:hover {
+  background-color: #84DCC6;
+}
+
diff --git a/static/css/main.css b/static/css/main.css
deleted file mode 100644
index cb862e6..0000000
--- a/static/css/main.css
+++ /dev/null
@@ -1,76 +0,0 @@
-/* global styles */
-* {
-  box-sizing: border-box;
-  color: #3A353F;
-  margin: 0;
-  padding: 0;
-}
-
-a {
-  color: black;
-  text-decoration: none;
-}
-
-body {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.link {
-  box-shadow: inset 0 -3px 0 #C05850;
-  display: inline-block;
-  transition: box-shadow .1s;
-}
-
-.link:hover {
-  box-shadow: inset 0 -6px 0 #C05850;
-}
-
-#wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  margin: 0 auto;
-  max-width: 1024px;
-  min-height: 100vh;
-}
-
-#main {
-  flex: 1 0 auto;
-}
-
-/* header styles */
-#header {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-around;
-}
-
-#header > .title {
-  font-size: 2rem;
-}
-
-#header > .nav-bar > .nav-bar-item {
-  font-size: 1rem;
-  margin-left: 1.5rem;
-}
-
-/* footer styles */
-#footer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  font-size: small;
-}
-
-#footer a {
-  color: #a6a6a6;
-  transition: all 0.2s linear;
-}
-
-#footer a:hover {
-  color: #263238;
-}
-- 
cgit v1.2.3