1 files changed, 170 insertions, 0 deletions
diff --git a/static/base/css/index.css b/static/base/css/index.css
new file mode 100644
index 0000000..5f275b1
--- /dev/null
+++ b/static/base/css/index.css
@@ -0,0 +1,170 @@
+/* Harmonic Flow web site */
+/* Public domain 2017. All rights waived */
+
+h2 {
+    color: #4D4D4D;
+    font-size: 2.5em;
+    margin: 50px 0px;
+}
+
+h3 {
+    color: #4D4D4D;
+    font-size: 2.0em;
+    font-weight: normal;
+    margin: 50px 0px;
+}
+
+.action-box {
+    padding: 40px 0px;
+}
+
+.featured-content {
+    background-color: #3D3D3D;
+    background-image: url("../img/checkerboard-bg.png"),
+                      url("../img/featured-box-bg.png");
+    background-position: top, bottom;
+    background-repeat: repeat, repeat-x;
+    color: white;
+    font-size: 17px;
+    padding: 40px 20px;
+    position: relative;
+}
+
+.featured-content > ul {
+    list-style-image: url("../img/white-star.png");
+    margin: auto;
+    max-width: 960px;
+}
+
+.featured-content li {
+    padding: 10px 0px;
+}
+
+.h-separator {
+    display: block;
+    margin: auto;
+    padding: 60px 0px 30px 0px;
+    width: 100%;
+}
+
+.button-big:link,
+.button-big:visited {
+    display: block;
+}
+
+.discovery-box {
+    background-color: #333;
+    background-image: url("../img/depression-shadow-top.png"),
+                      url("../img/noise-bg.png");
+    background-repeat: repeat-x, repeat;
+    color: #E6E6E6;
+    padding: 40px 10px;
+    text-align: center;
+}
+
+.discovery-box h2,
+.discovery-box h3 {
+    color: #E6E6E6;
+}
+
+.screenshots-box {
+    padding: 40px 0px 0px 0px;
+}
+
+.screenshot-preview {
+    font-size: 0.7em;
+    margin: 40px auto;
+    max-width: 250px;
+    text-align: center;
+}
+
+.screenshot-preview a,
+.screenshot-preview img {
+    border-radius: 5px;
+    display: block;
+}
+
+.screenshot-preview a:link,
+.screenshot-preview a:visited {
+    border-color: transparent;
+    border-style: solid;
+    border-width: thin;
+    box-shadow: 0 0 4px gray;
+    color: white;
+    position: relative;
+}
+
+.screenshot-preview a:active,
+.screenshot-preview a:focus,
+.screenshot-preview a:hover {
+    border-color: black;
+    box-shadow: 0 0 4px black;
+}
+
+.fields-box {
+    padding: 40px 0px 0px 0px;
+}
+
+.info-box {
+    display: inline-block;
+    margin: 0px 20px 20px 20px;
+    vertical-align: top;
+}
+
+.contact-box {
+    background-color: #F5F5F5;
+    background-image: url("../img/h-separator-dark.png"),
+                      url("../img/h-separator-dark.png");
+    background-position: top center, bottom center;
+    background-repeat: no-repeat;
+    box-sizing: border-box;
+    color: #4D4D4D;
+    padding: 10px;
+}
+
+
+
+@media screen and (min-width: 300px) {
+    .screenshot-inset-shadow {
+	border-radius: 5px;
+	box-shadow: inset 0 0 4px black;
+	display: block;
+	height: 140px;
+	position: absolute;
+	top: 0px;
+	width: 250px;
+    }
+
+    .screenshot-preview a:active .screenshot-inset-shadow,
+    .screenshot-preview a:focus .screenshot-inset-shadow,
+    .screenshot-preview a:hover .screenshot-inset-shadow {
+	box-shadow: none;
+    }
+}
+
+
+
+@media screen and (min-width: 480px) {
+    .button-big:link,
+    .button-big:visited {
+	display: inline-block;
+    }
+
+    .screenshot-preview {
+	display: inline-block;
+	margin: 15px;
+	vertical-align: top;
+    }
+}
+
+
+
+@media screen and (min-width: 1024px) {
+    .info-box {
+        width: 420px;
+    }
+
+    .h-separator {
+	width: auto;
+    }
+}