First commit

2017-09-23 10:36:14 +02:00
commit aaceec4e1a
4 changed files with 327 additions and 0 deletions
@@ -0,0 +1,210 @@
+body {
+  padding: 0;
+  margin: 0;
+
+  font-size: 1.25em;
+
+  background-color: #000;
+
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+
+#content-wrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  min-height: 100%;
+}
+
+/* Main Body */
+main {
+  position: absolute;
+  top: 0;
+  left: 18ch;
+  right: 0;
+  min-height: 100%;
+
+  padding: 0;
+  margin: 0;
+
+  background-color: rgba(0, 0, 0, 0.50);
+}
+
+article {
+  width: 80ch;
+  max-width: 95%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Front Page */
+.menu-item {
+  background-color: #222;
+  margin-top: 0.5em;
+}
+
+  .mi-icon {
+    display: inline-block;
+    width: 2ch;
+    height: 100%;
+    text-align: center;
+
+    font-size: 2em;
+
+    background-color: #333;
+    color: #ccc;
+  }
+
+  .mi-body {
+    display: inline-block;
+    width: calc(95% - 5ch);
+
+    color: #777;
+  }
+
+    .mi-title {
+      display: block;
+      color: #ccc;
+    }
+      
+    .mi-meta {
+      font-size: 0.50em;
+      padding-top: 0.25em;
+    }
+
+      .mi-segment {
+        display: inline-block;
+        padding-right: 1ch;
+      }
+
+        .mi-tag {
+          display: inline-block;
+
+          margin-right: 0.5ch;
+          padding: 0.05em 0.50em;
+          border-radius: 12px;
+
+          color: #ccc;
+          border: 0.5px solid;
+          background-color: #333;
+          border-color: #777;
+        }
+
+          .ttype-special {
+            color: #000;
+            background-color: #194;
+            border-color: #000;
+          }
+
+          .ttype-character {
+            color: #2ad;
+            border-color: #2ad;
+          }
+
+          .ttype-location {
+            color: #d93;
+            border-color: #d93;
+          }
+          
+/* Side Menu */
+nav {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 18ch;
+  height: 100%;
+
+  background-color: #222;
+  color: #aaa;
+
+  padding: 0;
+  margin: 0;
+
+  overflow-y: auto;
+}
+
+nav h1 {
+  text-align: center;
+}
+
+nav a {
+  display: block;
+  cursor: pointer;
+}
+
+nav ul {
+  display: block;
+  padding: 0;
+  margin: 0;
+
+  margin-bottom: 0.5em;
+}
+
+nav li {
+  list-style: none;
+  padding: 0.1em;
+  padding-left: 1ch;
+}
+
+nav li:hover {
+  color: #ccc;
+  background-color: #333;
+}
+
+nav .mg-icon {
+  display: inline-block;
+  text-align: center;
+  width: 2ch;
+  padding: 0em 0.5ch;
+}
+
+nav .mg-label {
+  display: inline-block;
+
+  padding: 0 0.5ch;
+
+  color: #555;
+}
+
+nav li:hover .mg-label {
+  color: #777;
+}
+
+@media screen and (max-width: 900px) {
+  nav {
+    width: 4ch;
+  }
+
+  nav h1 {
+    display: none;
+  }
+
+  nav li {
+    padding-left: 0;
+    text-align: center;
+  }
+
+  nav .mg-label {
+    display: none;
+  }
+
+  nav .mg-icon {
+    width: 3ch;
+    margin-left: 0;
+    padding: 0;
+  }
+
+  main {
+    left: 4ch;
+  } 
+
+  .mi-icon {
+    font-size: 2.55em;
+  }
+
+  .mis-tags {
+    display: block;
+    padding-top: 0.25em;
+  }
+}