Add code for building stats pages

build/fic4.css

@@ -0,0 +1,157 @@
+/* ----- COLOURS ----- */
+
+body, details > summary::marker {
+    color: #222;
+}
+
+body {
+    background-color: white;
+}
+
+a, a:link, a:hover, a:visited, a:active, h1, h2, h3, details > summary {
+    color: var(--colourone);
+}
+
+li:before {
+    color: #9e9e9e;
+}
+
+details, blockquote {
+    border: 2px solid var(--colourone);
+    box-shadow: 8px 8px 0px var(--colourone);
+}
+
+body {
+    font-family: 'Lato', sans-serif;
+    font-size: 13px; word-wrap: break-word;
+}
+
+img {
+    max-width: 100%;
+}
+
+a, a:link, a:hover, a:visited, a:active {
+    text-decoration: none;
+}
+
+a:hover {
+    border-bottom: 1px solid;
+}
+
+/* ---- BOXES ---- */
+
+details > summary {
+  cursor: pointer;
+  font-weight: bold;
+}
+
+details, blockquote {
+    padding: 20px;
+    margin-bottom: 15px !important;
+}
+
+blockquote {
+    max-width: 100%;
+    min-width: 10%;
+    display: inline-block;
+}
+
+blockquote p, details p {
+    margin: 0;
+    padding: 0;
+}
+
+blockquote ul {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+blockquote > * + *, details > * + * {
+    margin-top: 20px !important;
+}
+
+/* ---- CONTENT ---- */
+
+@media only screen and (min-width: 900px) {
+    
+    div#site-wrapper {
+        width: 90%;
+        margin: 1em auto;
+    }
+}
+
+@media only screen and (max-width: 900px) {
+
+    div#site-wrapper {
+        width: 99%; margin: 1em auto;
+    }
+}
+
+input, select {
+    background-color: white;
+    font-family: 'Lato', sans-serif;
+}
+
+textarea {
+    font-family: 'Inconsolata', monospace;
+}
+
+code, pre, .timestamp {
+    background: #f0f0f0;
+    font-family: 'Inconsolata', monospace !important;
+}
+
+pre {
+    display: inline-block;
+    padding: 2px;
+    max-width: 100%;
+    overflow: auto;
+}
+
+
+ul {
+    list-style: none;
+}
+
+ul li:before {
+    content: "+ ";
+    font-weight: bold;
+}
+
+ol {
+    list-style: none;
+    counter-reset: li
+}
+
+ol li:before {
+    content: counter(li)". ";
+    font-weight: bold;
+}
+
+ol li {
+    counter-increment: li;
+}
+
+/* ----- GIFSETS ----- */
+
+div.figure {
+    text-align: center;
+    padding: 0;
+}
+
+div.figure img {
+    display: inline;
+    margin: 5px;
+}
+
+div.figure.oneup img {
+    width: 90%;
+}
+
+div.figure.twoup img {
+    width: 40%;
+}
+
+div.figure.threeup img {
+  width: 30%;
+}