improved initial themes

This commit is contained in:
crunk 2022-03-19 22:00:06 +01:00
parent a877dcd617
commit 24106b6555
5 changed files with 175 additions and 15 deletions

View File

@ -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)"),
],
)

View File

@ -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;
}

61
verse/themes/masonry.css Normal file
View File

@ -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;
}

View File

@ -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;
}

View File

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