157 lines
4.9 KiB
HTML
157 lines
4.9 KiB
HTML
<!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 }} →</a>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|