Add skeleton of a Haunt web site.

2 files changed, 354 insertions, 0 deletions

diff --git a/static/css/code.css b/static/css/code.css
new file mode 100644
index 0000000..c308845
--- /dev/null
+++ b/static/css/code.css
@@ -0,0 +1,33 @@
+/* Syntax highlighting code, by David Thompson, borrowed
+   from:
+     https://git.dthompson.us/blog.git/blob_plain/refs/heads/haunt-migration:/css/dthompson.css
+   David Thompson gives permission for this to be GPLv3+ and CC BY-SA 4.0
+
+   Modified significantly since.
+*/
+
+
+.syntax-special, .syntax-element {
+    color: #856;
+    font-weight: bold;
+}
+
+.syntax-symbol {
+    color: #423;
+}
+
+.syntax-string {
+    color: #484;
+}
+
+.syntax-keyword, .syntax-attribute {
+    color: #921;
+}
+
+.syntax-comment {
+    color: #666;
+}
+
+.syntax-open, .syntax-close {
+    color: #688;
+}
diff --git a/static/css/main.css b/static/css/main.css
new file mode 100644
index 0000000..16f4836
--- /dev/null
+++ b/static/css/main.css
@@ -0,0 +1,321 @@
+@import url("code.css");
+
+@font-face {
+    font-family: 'Roboto';
+    src: url('/static/fonts/Roboto-Light.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Roboto-Italic';
+    src: url('/static/fonts/Roboto-LightItalic.ttf') format('truetype');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Roboto-Bold';
+    src: url('/static/fonts/Roboto-Bold.ttf') format('truetype');
+    font-weight: normal;
+    font-style: bold;
+}
+
+@font-face {
+    font-family: 'FiraMono';
+    src: url('/static/fonts/FiraMono-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: bold;
+}
+
+@media all {html {font-size: 20px;}}
+@media all and (max-width:1260px){html {font-size: 20px;}}
+@media all and (max-width:1000px){html {font-size: 20px;}}
+@media all and (max-width:960px){html {font-size: 19px;}}
+@media all and (max-width:920px){html {font-size: 18px;}}
+@media all and (max-width:880px){html {font-size: 17px;}}
+@media all and (max-width:840px){html {font-size: 16px;}}
+@media all and (max-width:800px){html {font-size: 16px;}}
+@media all and (max-width:760px){html {font-size: 16px;}}
+
+/*#ffbf2d*/
+
+body,html {
+    background-color: #fff;
+    width: 100%;
+    height: 100%;
+    line-height: 1.6em;
+    padding: 0px;
+    margin: 0px;
+    font-family: 'Roboto', sans-serif;
+}
+
+pre {
+    border-style: none;
+    border-radius: 0.3em;
+    background-color: #f2efe4;
+    border-width: thin;
+    color: #423;
+    font-size: 0.9em;
+    padding: 10px;
+    text-align: left;
+    font-family: fixed-width;
+    overflow-x: auto;
+    margin-bottom: 0.8rem;
+}
+
+code {
+    font-family: 'FiraMono', monospace;
+    border-radius: 0.3em;
+}
+
+/* Arrange to have between 40 and 70 characters per line.  */
+
+.width-control {
+    max-width: 800px;
+    width: 65%;
+}
+
+@media all and (max-width: 760px) { .width-control { width: 90%; } };
+
+p {
+    max-width: 70rem;
+    margin-bottom: 0;
+}
+
+p + p {
+    /*text-indent: 0.5rem;*/
+    margin-top: 1.0rem;
+}
+
+#header {
+    background: #fff;
+    height: 90px;
+    width: 100%;
+    box-shadow: 0 3px 8px #ccc;
+}
+
+#header .logo {
+    padding: 10px;
+    display: block;
+}
+
+#header .baseline {
+    color: #073b4c;
+    font-size: 16px;
+    font-family: 'Roboto', sans-serif;
+    font-weight: bold;
+    display: none;  /* overridden below */
+    padding: 10px;
+    padding-top: 2px;
+}
+
+#header .members {
+    float: right;
+}
+
+@media screen and (min-width: 640px) {
+    #header .baseline {
+        display: block;
+    }
+    #header {
+        height: 110px;
+    }
+}
+
+#header.frontpage {
+    height: auto;
+    margin-bottom: 1em;
+    text-align: center;
+    padding-top: 2rem;
+    padding-bottom: 1rem;
+}
+
+#header.frontpage .logo {
+    padding: 0;
+    margin: 0 auto;
+    max-width: 100%;
+}
+
+#header.frontpage .baseline {
+    padding-top: 1rem;
+}
+
+#menubar {
+    margin: auto;
+    padding: 0px;
+    clear: both;
+}
+
+#header-inner {
+    margin: auto;
+    padding: 0px;
+}
+
+
+.latest-news {
+    margin-top: 20px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    padding-left: 10pt;
+    border-left: solid 10px #ffbf2d;
+    color: #533;
+}
+
+.news-brief {
+}
+
+#collaboration {
+    border-top: solid 4px #aaaaaa;
+    border-bottom: solid 4px #aaaaaa;
+    background: #ffffff;
+    width: 100%;
+    bottom: 0px;
+}
+#collaboration-inner { margin: 10px auto 10px auto; }
+#collaboration .members { text-align: center; }
+#collaboration p { padding: 0px 10px 0px 10px; }
+#collaboration .members ul { display: inline-block; padding: 0px; margin: 0px; }
+#collaboration .members li {
+    display: inline-block; padding: 0px 10px; 0px 0px;
+    vertical-align: middle;
+}
+
+.post {
+    background: #ffffff;
+    padding: 10px;
+    margin-bottom: 25px;
+}
+
+hr {
+    height: 3px;
+    background: url('/static/images/h-separator-darker.png');
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 100%;
+    border: none;
+}
+
+.post h1 { color: #433; }
+.post h2 { color: #433; padding: 0pt; font-size: 1.3rem; }
+
+.post-about {
+    color: #4D4D4D;
+    font-size: 0.9em;
+    margin-top: -3em;
+}
+
+#menubar ul { display: inline-block; padding: 0px; margin: 0px; }
+#menubar li {
+    display: inline-block;
+    color: #000000;
+    height: 32px;
+    line-height: 32px;
+    list-style-type: none;
+    margin: 0px;
+    margin: 0px 13px 0px 0px;
+    text-transform: uppercase;
+    text-decoration: none;
+    font-size: small;
+}
+
+#menubar li img {
+    vertical-align: middle;
+}
+
+#menubar ul:first-child {
+    padding-left: 10px;
+}
+
+#content {
+    margin: auto;
+    padding: 0px;
+}
+
+#content .search-field {
+    border: solid thin #aaaaaa;
+    width: 100%;
+    padding: 7px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+#content table {
+    border-spacing: 0px;
+    padding: 0px;
+}
+
+#content table td { padding: 3px 5px 3px 5px; height: 25px; }
+
+#packages-table-wrapper {
+    font-size: 16px;
+}
+
+#stand-by {
+    background: #decd87;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    font-size: 16px;
+}
+
+#stand-by p { padding: 7px }
+
+#footer-box {
+    width: 100%;
+    margin: auto;
+    text-align: center;
+    color: #333333;
+    font-size: 0.8rem;
+}
+
+#footer-box p {
+    max-width: 100%;
+    text-align: center;
+}
+
+h1 {
+    clear: both;
+    line-height: 125%;
+    margin-top: 1.3rem;
+    margin-bottom: .3rem;
+    padding: 0px;
+    display: block;
+    font-size: 1.6rem;
+    font-weight: 800;
+}
+
+h1:first-child {
+    font-size: 1.8rem;
+    margin-bottom: 3rem;
+    margin-top: 0;
+}
+
+.title a { border: none; }
+a {
+    color: #000000;
+    outline: none;
+    border-style: none none solid none;
+    border-width: 2px;
+    border-color: #ef476f;
+    text-decoration: none;
+}
+a:visited {
+    color: #433;
+    border-color: #06d6a0;
+    border-style: none none solid none;
+    border-width: 2px;
+    text-decoration: none;
+}
+a img { outline : none; }
+img { border: none; }
+
+audio, video, .full-width {
+    display: block;
+    margin: 50px auto;
+    max-width: 100%;
+}
+
+#footer-box a { color: #333333; }
+#footer-box a:visited { color: #333333; }