mi/sunday
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ comic embed

Browse Source
This commit is contained in:
mi
2025-11-15 16:56:02 +10:00
parent 4ec1feb2a9
commit 742ff0e553
2 changed files with 285 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
templates/embed.html Normal file
View File

@@ -0,0 +1,156 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }} - {{ comic_name }}</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Courier New', Courier, monospace;
background: #fff;
color: #000;
line-height: 1.5;
margin: 0;
padding: 0;
}
.embed-container {
max-width: 100%;
margin: 0;
padding: 0;
text-align: center;
border: 2px solid #000;
background: #fff;
}
.embed-header {
padding: 15px;
border-bottom: 2px solid #000;
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
}
.embed-header-text {
flex: 1;
text-align: left;
}
.embed-logo {
max-width: 120px;
max-height: 60px;
height: auto;
flex-shrink: 0;
}
.embed-title {
font-size: 1.1em;
font-weight: bold;
margin: 0 0 5px 0;
color: #000;
text-transform: uppercase;
letter-spacing: 1px;
}
.embed-date {
font-size: 0.75em;
color: #666;
margin: 0;
}
.embed-image-wrapper {
padding: 0;
background: #fff;
border-bottom: 2px solid #000;
}
.embed-image-link {
display: block;
margin: 0;
line-height: 0;
}
.embed-image {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
border: none;
}
.embed-footer {
padding: 12px 15px;
font-size: 0.75em;
background: #f8f8f8;
border-top: 1px solid #ddd;
}
.embed-footer a {
color: #000;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
.embed-footer a:hover {
text-decoration: underline;
}
.embed-alt-text {
display: none;
}
/* Mobile responsive */
@media (max-width: 480px) {
.embed-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.embed-logo {
max-width: 100px;
max-height: 50px;
align-self: flex-end;
}
.embed-title {
font-size: 0.9em;
}
.embed-date {
font-size: 0.7em;
}
.embed-footer {
font-size: 0.7em;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="embed-container">
<div class="embed-header">
<div class="embed-header-text">
<h1 class="embed-title">{{ comic.title if comic.title else '#' ~ comic.number }}</h1>
<p class="embed-date">{{ comic.formatted_date }}</p>
</div>
{% if logo_image %}
<img src="{{ site_url }}/static/images/{{ logo_image }}" alt="{{ comic_name }}" class="embed-logo">
{% endif %}
</div>
<div class="embed-image-wrapper">
<a href="{{ site_url }}/comic/{{ comic.number }}" class="embed-image-link" target="_blank" rel="noopener noreferrer" aria-label="View {{ comic.title if comic.title else 'comic #' ~ comic.number }} on {{ comic_name }}">
{% if comic.mobile_filename %}
<picture>
<source media="(max-width: 768px)" srcset="{{ url_for('static', filename='images/comics/' + comic.mobile_filename) }}">
<img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
title="{{ comic.alt_text }}"
class="embed-image">
</picture>
{% else %}
<img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
title="{{ comic.alt_text }}"
class="embed-image">
{% endif %}
</a>
</div>
<div class="embed-footer">
<a href="{{ site_url }}/comic/{{ comic.number }}" target="_blank" rel="noopener noreferrer">View on {{ comic_name }} &rarr;</a>
</div>
</div>
</body>
</html>