You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
2.3 KiB
103 lines
2.3 KiB
<svg width="800" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<foreignObject width="800" height="200">
|
|
<div xmlns="http://www.w3.org/1999/xhtml" class="container">
|
|
|
|
<style>
|
|
|
|
div {
|
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
|
|
}
|
|
|
|
.main {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 20px; /* Optional: Adds spacing between book items */
|
|
}
|
|
|
|
.book-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between; /* Ensures titles are at the bottom */
|
|
width: 150px; /* Adjust to fit your needs */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.container {
|
|
border-radius: 5px;
|
|
padding: 10px 10px 10px 0px;
|
|
}
|
|
|
|
.reading {
|
|
font-weight: bold;
|
|
color: #53b14f;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.not-read {
|
|
color: #ff1616;
|
|
}
|
|
|
|
.art {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: auto; /* Pushes the text to the bottom */
|
|
}
|
|
|
|
.cover {
|
|
border-radius: 2px;
|
|
max-height: 200px; /* Fixed height for book covers */
|
|
width: auto; /* Maintains aspect ratio */
|
|
display: block;
|
|
}
|
|
|
|
.text {
|
|
text-align: center;
|
|
margin-top: auto; /* Ensures the text stays at the bottom */
|
|
}
|
|
|
|
.book {
|
|
font-size: 18px;
|
|
color: #666;
|
|
}
|
|
|
|
.author {
|
|
font-size: 14px;
|
|
color: #b3b3b3;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.logo {
|
|
margin-left: 5px;
|
|
margin-top: 5px;
|
|
}
|
|
</style>
|
|
<div class="main">
|
|
{% if books|length > 0 %}
|
|
{% for book in books %}
|
|
<div class="book-item">
|
|
<center>
|
|
<a class="art" href="" target="_BLANK">
|
|
<img src="data:image/png;base64, {{ book.img }}" class="cover" />
|
|
</a>
|
|
</center>
|
|
|
|
<div class="text">
|
|
<div class="book">{{ book.title }}</div>
|
|
<div class="author">by {{ book.author }}</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="reading not-read">Nothing on Goodreads</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
</div>
|
|
</foreignObject>
|
|
</svg>
|