improved initial themes

verse/forms/themeform.py

@@ -12,9 +12,9 @@ class ThemeForm(FlaskForm):
     theme = RadioField(
         "Select your theme:",
         choices=[
-            ("hacking", "Hacking"),
-            ("peachsunset", "Peach sunset"),
-            ("wdka", "WdkA"),
+            ("hacking", "Hackers (black background, green text)"),
+            ("peachsunset", "Peach sunset (single column)"),
+            ("masonry", "Masonry (white background, grid layout)"),
         ],
     )
 

verse/themes/hacking.css

@@ -1,6 +1,53 @@
 body {
   font-family: courier monospace;
   background-color: black;
-  color: rgb(0, 255, 0);
-  border: 3px solid rgb(0, 255, 0);
+  color: #00ff00;
+}
+
+body > div {
+  margin: 40px auto;
+  flex-grow: 1;
+  color: #00ff00;
+}
+
+div .image {
+  border: 3px solid #00ff00;
+  min-width: 30%;
+  background-color: #222222;
+  margin: auto;
+}
+
+div .pdf {
+  border: 3px solid #00ff00;
+  min-width: 30%;
+  background-color: #222222;
+  margin: auto;
+}
+
+div > video {
+  border: 3px solid #00ff00;
+  min-width: 30%;
+  background-color: #222222;
+  margin: auto;
+}
+div > audio {
+  border: 3px solid #00ff00;
+  min-width: 30%;
+  background-color: #222222;
+  margin: auto;
+}
+div > pre {
+  border: 3px solid #00ff00;
+  min-width: 30%;
+  background-color: #222222;
+  margin: auto;
+}
+figcaption {
+  background: #00ff00;
+  color: #000000;
+}
+
+img {
+  width: auto;
+  height: auto;
 }

verse/themes/masonry.css

@@ -0,0 +1,61 @@
+body {
+  background: #fff;
+  margin: 30px auto;
+  line-height: 1.6;
+  padding: 0 1px;
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
+  grid-template-rows: repeat(auto-fill, minmax(20%, 1fr));
+  grid-column-gap: 1em;
+  grid-row-gap: 1em;
+}
+
+body > div {
+  margin: 1px;
+  padding: 1px;
+}
+div > figure {
+  margin: 1em;
+}
+
+
+div .image {
+  border: 1px solid black;
+  min-width: auto;
+  background-color: white;
+  box-shadow: 10px 10px 5px #eee;
+}
+
+div .pdf {
+  border:1px solid black;
+  min-width: auto;
+  background-color: white;
+  box-shadow: 10px 10px 5px #eee;
+}
+
+div > video {
+  border:1px solid black;
+  min-width: auto;
+  background-color: white;
+  box-shadow: 10px 10px 5px #eee;
+}
+div > audio {
+  border:1px solid black;
+  min-width: auto;
+  background-color: white;
+  box-shadow: 10px 10px 5px #eee;
+}
+div > pre {
+  border:1px solid black;
+  min-width: auto;
+  background-color: white;
+  color: black;
+  box-shadow: 10px 10px 5px #eee;
+}
+
+
+img {
+  width: auto;
+  height: auto;
+}

verse/themes/peachsunset.css

@@ -1,4 +1,64 @@
 body {
-  background:linear-gradient(to top, #040308, #AD4A28, #DD723C, #FC7001, #DCB697, #9BA5AE, #3E5879, #020B1A);
-  color: white;
+  background:linear-gradient(to top, #f7764a,#f9cc7b);
+  margin: 40px auto;
+  max-width: 70%;
+  color: black;
+  display: flex;
+  height: 100%;
+  width: 90%;
+  flex-wrap: nowrap;
+  flex-direction: column;
+  justify-content: space-evenly;
+  overflow: scroll;
+}
+
+body > div {
+  margin: 40px auto;
+  flex-grow: 1;
+
+}
+
+div .image {
+  border: 3px solid purple;
+  min-width: 30%;
+  background-color: white;
+  margin: auto;
+  box-shadow: 10px 10px 5px Crimson;
+}
+
+div .pdf {
+  border: 3px solid purple;
+  min-width: 30%;
+  background-color: white;
+  margin: auto;
+  box-shadow: 10px 10px 5px Crimson;
+}
+
+div > video {
+  border: 3px solid purple;
+  min-width: 30%;
+  background-color: white;
+  margin: auto;
+  box-shadow: 10px 10px 5px Crimson;
+}
+div > audio {
+  border: 3px solid purple;
+  min-width: 30%;
+  background-color: white;
+  margin: auto;
+  box-shadow: 10px 10px 5px Crimson;
+}
+div > pre {
+  border: 3px solid purple;
+  min-width: 30%;
+  background-color: white;
+  color: black;
+  margin: auto;
+  box-shadow: 10px 10px 5px Crimson;
+}
+
+
+img {
+  width: auto;
+  height: auto;
 }

verse/themes/wdka.css

@@ -1,8 +0,0 @@
-body {
-  color: black;
-  font-family: Arial;
-  font-style: italic;
-  font-weight: 900;
-  letter-spacing: 0;
-  background-color: #FFD300;
-}