diff --git a/verse/forms/themeform.py b/verse/forms/themeform.py index 8844bba..83e2029 100644 --- a/verse/forms/themeform.py +++ b/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)"), ], ) diff --git a/verse/themes/hacking.css b/verse/themes/hacking.css index 8aa9f6e..a8410cd 100644 --- a/verse/themes/hacking.css +++ b/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; } diff --git a/verse/themes/masonry.css b/verse/themes/masonry.css new file mode 100644 index 0000000..b6e417e --- /dev/null +++ b/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; +} diff --git a/verse/themes/peachsunset.css b/verse/themes/peachsunset.css index 7c1553c..2a27e32 100644 --- a/verse/themes/peachsunset.css +++ b/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; } diff --git a/verse/themes/wdka.css b/verse/themes/wdka.css deleted file mode 100644 index 2585409..0000000 --- a/verse/themes/wdka.css +++ /dev/null @@ -1,8 +0,0 @@ -body { - color: black; - font-family: Arial; - font-style: italic; - font-weight: 900; - letter-spacing: 0; - background-color: #FFD300; -}