Initial commit.

Signed-off-by: Andreas Widen <aw@luflow.net>

static/css/index.css

@@ -0,0 +1,130 @@
+/* luflow.net web site */
+/* Public domain 2025. All rights waived */
+
+h2 {
+    color: #4d4d4d;
+    font-size: 2.5em;
+    margin: 50px 0px;
+}
+
+h3 {
+    color: #4d4d4d;
+    font-size: 2em;
+    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;
+}
+
+.featured-content > ul {
+    list-style-image: url('../img/white-star.png');
+    margin: auto;
+    max-width: 960px;
+    padding: 0px 30px;
+}
+
+.featured-content li {
+    padding: 10px 0px;
+}
+
+.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-description {
+    padding-top: 8px;
+    color: #e6e6e6;
+}
+
+.screenshot-preview a:link,
+.screenshot-preview a:visited {
+    border-color: transparent;
+    border-style: solid;
+    border-width: thin;
+    box-shadow: 0 0 4px gray;
+    color: #e6e6e6;
+    position: relative;
+}
+
+.screenshot-preview a:active,
+.screenshot-preview a:focus,
+.screenshot-preview a:hover {
+    border-color: black;
+    box-shadow: 0 0 4px black;
+}
+
+.screenshot-viewer {
+    background-color: black;
+}
+
+@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;
+    }
+}