188 lines
3.3 KiB
Django/Jinja
188 lines
3.3 KiB
Django/Jinja
<!doctype html>
|
|
<html lang="cs">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
@page {
|
|
size: 1024px 768px;
|
|
margin: 0;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: "DejaVu Sans", Arial, sans-serif;
|
|
color: #333;
|
|
}
|
|
|
|
.page {
|
|
width: 1024px;
|
|
height: 768px;
|
|
position: relative;
|
|
padding: 68px 68px 64px 68px;
|
|
page-break-after: always;
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,.58), rgba(255,255,255,.58)),
|
|
url("file://{{ assets_dir }}/background.png");
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.page::before,
|
|
.page::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 66px;
|
|
right: 66px;
|
|
height: 1px;
|
|
background: rgba(45,45,45,.65);
|
|
}
|
|
|
|
.page::before { top: 67px; }
|
|
.page::after { bottom: 68px; }
|
|
|
|
.cover {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.cover-title {
|
|
font-size: 42px;
|
|
font-weight: 300;
|
|
margin-top: 140px;
|
|
letter-spacing: -1px;
|
|
}
|
|
|
|
.cover-subtitle {
|
|
font-size: 23px;
|
|
letter-spacing: 9px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.cover-logo {
|
|
margin-top: 130px;
|
|
width: 190px;
|
|
opacity: .82;
|
|
}
|
|
|
|
.category-title {
|
|
font-size: 26px;
|
|
font-weight: 400;
|
|
text-decoration: underline;
|
|
margin: 28px 0 50px 0;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
column-gap: 31px;
|
|
row-gap: 38px;
|
|
}
|
|
|
|
.product {
|
|
width: 205px;
|
|
break-inside: avoid;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.product-image {
|
|
width: 205px;
|
|
height: 169px;
|
|
object-fit: cover;
|
|
border-radius: 18px;
|
|
display: block;
|
|
}
|
|
|
|
.product-name-row {
|
|
margin-top: 9px;
|
|
border-top: 1px solid rgba(50,50,50,.7);
|
|
border-bottom: 1px solid rgba(50,50,50,.7);
|
|
min-height: 31px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.product-name {
|
|
font-size: 13px;
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
line-height: 1.25;
|
|
padding-right: 6px;
|
|
}
|
|
|
|
.allergen {
|
|
width: 23px;
|
|
height: 23px;
|
|
object-fit: contain;
|
|
flex: 0 0 auto;
|
|
opacity: .85;
|
|
}
|
|
|
|
.price {
|
|
text-align: center;
|
|
font-size: 16px;
|
|
letter-spacing: 4px;
|
|
margin-top: 7px;
|
|
}
|
|
|
|
.placeholder {
|
|
width: 205px;
|
|
height: 169px;
|
|
border-radius: 18px;
|
|
background: rgba(230,230,230,.75);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #888;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<section class="page cover">
|
|
<div class="cover-title">{{ catalog.title }}</div>
|
|
<div class="cover-subtitle">{{ catalog.subtitle|upper }}</div>
|
|
|
|
{% if logo_exists %}
|
|
<img class="cover-logo" src="file://{{ assets_dir }}/logo.png">
|
|
{% endif %}
|
|
</section>
|
|
|
|
{% for category in catalog.categories %}
|
|
<section class="page">
|
|
<h1 class="category-title">{{ category.name }}</h1>
|
|
|
|
<div class="grid">
|
|
{% for product in category.products %}
|
|
<div class="product">
|
|
{% if product.image %}
|
|
<img class="product-image" src="file://{{ images_dir }}/{{ product.image }}">
|
|
{% else %}
|
|
<div class="placeholder">bez fotky</div>
|
|
{% endif %}
|
|
|
|
<div class="product-name-row">
|
|
<div class="product-name">{{ product.name }}</div>
|
|
{% if product.show_allergen_icon %}
|
|
<img class="allergen" src="file://{{ assets_dir }}/allergen.png">
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="price">{{ product.price }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
{% endfor %}
|
|
|
|
</body>
|
|
</html>
|