1 files changed, 202 insertions, 0 deletions
diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..a8142fb
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,202 @@
+:root {
+  --color-dark:         #1b1b1b;
+  --color-darker:       #141414;
+  --color-light-blue:   #75AFE9;
+  --color-lighter-blue: #89D0F2;
+  --color-grey:         #2D3436;
+  --color-light-grey:   #636E72;
+}
+
+@font-face {
+  font-family: OpenSans;
+  font-weight: normal;
+  src: url(font/OpenSans/OpenSans-Regular.ttf);
+}
+
+@font-face {
+  font-family: OpenSans;
+  font-weight: bold;
+  src: url(font/OpenSans/OpenSans-Bold.ttf);
+}
+
+@font-face {
+  font-family: OpenSans;
+  font-weight: normal;
+  font-style: italic;
+  src: url(font/OpenSans/OpenSans-Italic.ttf);
+}
+
+html {
+  background-color: var(--color-dark);
+  min-height: 100%;
+  font-family: OpenSans, sans-serif;
+  font-size: 1.1rem;
+}
+
+body {
+  margin: 0;
+}
+
+@media screen and (max-width: 48rem) {
+  html {
+    font-size: 1.0rem;
+  }
+}
+
+/*****************************************************************************/
+/* header                                                                    */
+
+header {
+  display: flex;
+  margin-bottom: 20px;
+  background-color: #191919;
+  padding: 10px;
+}
+
+header div {
+  margin-right: 30px;
+  color: #ccc;
+}
+
+a.header-link {
+  color: #ccc;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+a.header-link:hover {
+  color: #fff;
+}
+
+/*****************************************************************************/
+/* main                                                                      */
+
+main {
+  color: #fafafa;
+  line-height: 1.80;
+  margin: 2rem auto 1rem;
+  max-width: 55rem;
+  padding: 1.5rem;
+}
+
+/*****************************************************************************/
+/* common tags                                                               */
+
+/* link */
+
+a {
+  text-decoration: none;
+}
+
+a, a:visited {
+  color: var(--color-lighter-blue);
+}
+
+a:hover, a:focus, a:active {
+  color: var(--color-light-blue);
+}
+
+/* title */
+
+@font-face {
+  font-family: Montserrat, sans-serif;
+  font-weight: bold;
+  src: url(font/Montserrat/Montserrat-Bold.ttf);
+}
+
+h1, h2, h3, h4 {
+  margin: 10px 0 5px 0;
+  line-height: 1.42;
+  font-weight: bold;
+  font-family: Montserrat;
+  letter-spacing: 0.1rem;
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 2.3rem;
+}
+
+h2 { font-size: 2.0rem; }
+h3 { font-size: 1.7rem; }
+h4 { font-size: 1.5rem; }
+h5 { font-size: 1.3rem; }
+h6 { font-size: 1.1rem; }
+
+/* code */
+
+@font-face {
+  font-family: FiraMono;
+  font-weight: normal;
+  src: url(font/FiraMono/FiraMono-Regular.ttf);
+}
+
+pre, code {
+  font-family: FiraMono, "Courier New", monospace;
+}
+
+code {
+  background-color: var(--color-grey);
+  padding: 0.2rem 0.3rem;
+  border: 1px solid var(--color-light-grey);
+  font-size: 82%;
+}
+
+pre {
+  padding: 0.5rem;
+  line-height: 1.25;
+  overflow-x: auto;
+}
+
+pre > code {
+  border: none;
+  font-size: 100%;
+  padding: 0;
+  line-height: 1.4;
+}
+
+pre {
+  background-color: var(--color-grey);
+}
+
+/* other */
+
+p {
+  font-size: 1rem;
+  margin: 1.3rem 0;
+}
+
+
+blockquote {
+  margin-left: 1rem;
+  border-left: 3px solid var(--color-light-grey);
+  padding-left: 0.5rem;
+}
+
+img, canvas, iframe, video, svg, select, textarea {
+  max-width: 100%;
+}
+
+hr {
+  border: 1px solid var(--color-light-grey);
+}
+
+table {
+  margin: 20px 10px;
+}
+
+table, td, th {
+  border-collapse: collapse;
+  border: 1px solid var(--color-light-grey);
+}
+
+td, th {
+  vertical-align: top;
+  text-align: left;
+  padding: 3px 6px;
+}
+
+th {
+  font-weight: bold;
+  background-color: var(--color-grey);
+}