From faffb15366f6d57ea6907592189a5af4690c0855 Mon Sep 17 00:00:00 2001
From: Zack Scholl <zack.scholl@gmail.com>
Date: Fri, 28 Dec 2018 15:16:24 -0800
Subject: [PATCH] inline css

---
 templates/header.html | 336 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 334 insertions(+), 2 deletions(-)
diff --git a/templates/header.html b/templates/header.html
index 4c9c46d..bdc63c8 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -5,8 +5,6 @@
 <head>
     <title>{{.Title}}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" href="/static/css/rwtxt.css">
-    {{if .Languages}}<link rel="stylesheet" type="text/css" href="/static/css/prism.css">{{end}}
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <link rel="apple-touch-icon" sizes="57x57" href="/static/img/favicon/apple-icon-57x57.png">
     <link rel="apple-touch-icon" sizes="60x60" href="/static/img/favicon/apple-icon-60x60.png">
@@ -25,6 +23,340 @@
     <meta name="msapplication-TileColor" content="#375EAB">
     <meta name="msapplication-TileImage" content="/static/img/favicon/ms-icon-144x144.png">
     <meta name="theme-color" content="#375EAB">
+<style>
+[contenteditable]:focus {
+    outline: 0px solid transparent;
+}
+
+body {
+    background: rgb(253, 253, 253);
+}
+
+.main {
+    margin: 1em auto;
+    max-width: 32em;
+}
+
+h2 {
+    margin-top: 1.5em;
+}
+
+a {
+    /* border-bottom: 0.5px solid #0000FF;*/
+    color: #0000FF;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.main,
+textarea {
+    font-family: "Times New Roman", Times, serif;
+    font-size: 1.3rem;
+    line-height: 1.3;
+    background: rgb(253, 253, 253);
+}
+
+textarea {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    border: 0;
+    border: none;
+    outline: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    resize: none;
+    overflow: hidden;
+}
+
+li {
+    line-height: 140%;
+}
+
+.smaller {
+    font-size: 70%;
+}
+
+.grayed {
+    color: #aaa;
+    text-align: right;
+    padding-top: 3em;
+}
+
+a.grayed {
+    border-bottom: 0.5px solid #aaa;
+}
+
+.grey {
+    color: #aaa; 
+}
+
+pre {
+    white-space: pre-wrap;
+    /* css-3 */
+    white-space: -moz-pre-wrap;
+    /* Mozilla, since 1999 */
+    white-space: -pre-wrap;
+    /* Opera 4-6 */
+    white-space: -o-pre-wrap;
+    /* Opera 7 */
+    word-wrap: break-word;
+    /* Internet Explorer 5.5+ */
+}
+
+code {
+    font-size: 90%;
+    font-family: "Courier New", Courier, monospace;
+}
+
+.fr {
+    float: right;
+}
+
+.icons {
+    float: right;
+    position: fixed;
+    top: 1em;
+    right: 1em;
+    display: none;
+}
+
+#editlink:hover {
+    cursor: pointer;
+}
+
+@media screen and (min-width: 0em) and (max-width: 30em) {
+    textarea,
+    .main {
+        font-size: 1.1rem;
+    }
+    .main {
+        margin-left: 0.1em;
+        margin-right: 0.1em;
+    }
+}
+
+@media screen and (min-width: 30em) and (max-width: 60em) {
+    textarea,
+    .main {
+        font-size: 1.2rem;
+    }
+    .main {
+        margin-left: 1em;
+        margin-right: 1em;
+    }
+}
+
+/* 
+snackbar */
+
+#snackbar {
+    visibility: hidden;
+    min-width: 250px;
+    margin-left: -125px;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+    padding: 16px;
+    position: fixed;
+    z-index: 1;
+    left: 50%;
+    bottom: 30px;
+    font-size: 17px;
+}
+
+#snackbar.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+img {
+    width: 100%;
+}
+
+@-webkit-keyframes fadein {
+    from {
+        bottom: 0;
+        opacity: 0;
+    }
+    to {
+        bottom: 30px;
+        opacity: 1;
+    }
+}
+
+@keyframes fadein {
+    from {
+        bottom: 0;
+        opacity: 0;
+    }
+    to {
+        bottom: 30px;
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes fadeout {
+    from {
+        bottom: 30px;
+        opacity: 1;
+    }
+    to {
+        bottom: 0;
+        opacity: 0;
+    }
+}
+
+@keyframes fadeout {
+    from {
+        bottom: 30px;
+        opacity: 1;
+    }
+    to {
+        bottom: 0;
+        opacity: 0;
+    }
+}
+
+
+
+/* stuff for log in*/
+/* Full-width input fields */
+input[type=text], input[type=password] {
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: inline-block;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+}
+
+.button1 {
+    padding: 14px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+}
+
+
+.login {
+    width: 100%;
+}
+
+/* Set a style for all buttons */
+button {
+    background-color: #4CAF50;
+    color: white;
+    padding: 14px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+}
+
+button:hover {
+    opacity: 0.8;
+}
+
+/* Extra styles for the cancel button */
+.cancelbtn {
+    width: auto;
+    padding: 10px 18px;
+    background-color: #f44336;
+}
+
+/* Center the image and position the close button */
+.imgcontainer {
+    text-align: center;
+    margin: 24px 0 12px 0;
+    position: relative;
+}
+
+img.avatar {
+    width: 40%;
+    border-radius: 50%;
+}
+
+.container {
+    padding: 16px;
+}
+
+span.psw {
+    float: right;
+    padding-top: 16px;
+}
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    padding-top: 60px;
+}
+
+/* Modal Content/Box */
+.modal-content {
+    max-width: 30em;
+    background-color: #fefefe;
+    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+    border: 1px solid #888;
+    width: 80%; /* Could be more or less, depending on screen size */
+}
+
+/* The Close Button (x) */
+.close {
+    position: absolute;
+    right: 25px;
+    top: 0;
+    color: #000;
+    font-size: 35px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: red;
+    cursor: pointer;
+}
+
+/* Add Zoom Animation */
+.animate {
+    -webkit-animation: animatezoom 0.6s;
+    animation: animatezoom 0.6s
+}
+
+@-webkit-keyframes animatezoom {
+    from {-webkit-transform: scale(0)} 
+    to {-webkit-transform: scale(1)}
+}
+    
+@keyframes animatezoom {
+    from {transform: scale(0)} 
+    to {transform: scale(1)}
+}
+
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 300px) {
+    span.psw {
+       display: block;
+       float: none;
+    }
+    .cancelbtn {
+       width: 100%;
+    }
+}</style>
+    {{if .Languages}}<link rel="stylesheet" type="text/css" href="/static/css/prism.css">{{end}}
 
 </head>
 
