first commit
This commit is contained in:
hubaceks
236
output/katalog.html
Normal file
236
output/katalog.html
Normal file
@@ -0,0 +1,236 @@
|
||||
<!doctype html>
|
||||
<html lang="cs">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>BistroUšky</title>
|
||||
<style>
|
||||
@page {
|
||||
size: A4 landscape;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "DejaVu Sans", Arial, sans-serif;
|
||||
color: #383633;
|
||||
background: #f4efe5;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 297mm;
|
||||
height: 210mm;
|
||||
position: relative;
|
||||
page-break-after: always;
|
||||
overflow: hidden;
|
||||
padding: 20mm 19mm 18mm 19mm;
|
||||
background-color: #f4efe5;
|
||||
|
||||
background-image: linear-gradient(rgba(246,241,231,.82), rgba(246,241,231,.82)), url("static/background.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
}
|
||||
|
||||
.page::before,
|
||||
.page::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 19mm;
|
||||
right: 19mm;
|
||||
border-top: 1px solid rgba(56,54,51,.65);
|
||||
}
|
||||
.page::before { top: 14mm; }
|
||||
.page::after { bottom: 14mm; }
|
||||
|
||||
.cover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cover-title {
|
||||
font-size: 34pt;
|
||||
font-weight: 300;
|
||||
letter-spacing: .02em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cover-subtitle {
|
||||
font-size: 16pt;
|
||||
letter-spacing: .35em;
|
||||
margin-top: 2mm;
|
||||
}
|
||||
|
||||
.cover-logo {
|
||||
margin-top: 26mm;
|
||||
max-width: 48mm;
|
||||
max-height: 48mm;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
h1.category-title {
|
||||
font-size: 18pt;
|
||||
font-weight: 400;
|
||||
text-decoration: underline;
|
||||
margin: 6mm 0 14mm 0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
column-gap: 9mm;
|
||||
row-gap: 10mm;
|
||||
}
|
||||
|
||||
.product { break-inside: avoid; }
|
||||
|
||||
.photo-wrap {
|
||||
width: 100%;
|
||||
height: 48mm;
|
||||
border-radius: 6mm;
|
||||
overflow: hidden;
|
||||
background: rgba(255,255,255,.45);
|
||||
}
|
||||
|
||||
.photo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.photo.placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10pt;
|
||||
color: #777;
|
||||
border: 1px dashed #aaa;
|
||||
}
|
||||
|
||||
.name-row {
|
||||
margin-top: 2.5mm;
|
||||
border-top: 1px solid rgba(56,54,51,.7);
|
||||
border-bottom: 1px solid rgba(56,54,51,.45);
|
||||
min-height: 9mm;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 2mm;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 8.5pt;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .28em;
|
||||
line-height: 1.35;
|
||||
padding: 1.5mm 0;
|
||||
}
|
||||
|
||||
.allergen-icon {
|
||||
width: 6.8mm;
|
||||
height: 6.8mm;
|
||||
object-fit: contain;
|
||||
flex: 0 0 auto;
|
||||
opacity: .85;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: center;
|
||||
font-size: 11pt;
|
||||
letter-spacing: .18em;
|
||||
margin-top: 2mm;
|
||||
min-height: 6mm;
|
||||
}
|
||||
|
||||
.note {
|
||||
text-align: center;
|
||||
font-size: 7pt;
|
||||
margin-top: 1mm;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section class="page cover">
|
||||
<div>
|
||||
<h1 class="cover-title">BistroUšky</h1>
|
||||
<div class="cover-subtitle">CAKE AND PATISSERIE</div>
|
||||
<img class="cover-logo" src="static/logo.png" alt="logo">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="page">
|
||||
<h1 class="category-title">
|
||||
Klasické zákusky
|
||||
</h1>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<article class="product">
|
||||
<div class="photo-wrap">
|
||||
|
||||
<img class="photo" src="images/likerova_spicka.jpg" alt="Likérová špička">
|
||||
|
||||
</div>
|
||||
<div class="name-row">
|
||||
<div class="product-name">Likérová špička</div>
|
||||
|
||||
<img class="allergen-icon" src="static/allergen_icon.png" alt="ikona">
|
||||
|
||||
</div>
|
||||
<div class="price">103,-</div>
|
||||
|
||||
</article>
|
||||
|
||||
<article class="product">
|
||||
<div class="photo-wrap">
|
||||
|
||||
<img class="photo" src="images/laskonka_mini.jpg" alt="Laskonka - mini">
|
||||
|
||||
</div>
|
||||
<div class="name-row">
|
||||
<div class="product-name">Laskonka - mini</div>
|
||||
|
||||
<img class="allergen-icon" src="static/allergen_icon.png" alt="ikona">
|
||||
|
||||
</div>
|
||||
<div class="price">45,-</div>
|
||||
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="page">
|
||||
<h1 class="category-title">
|
||||
Dortíky
|
||||
</h1>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<article class="product">
|
||||
<div class="photo-wrap">
|
||||
|
||||
<img class="photo" src="images/red_velvet.jpg" alt="Red Velvet">
|
||||
|
||||
</div>
|
||||
<div class="name-row">
|
||||
<div class="product-name">Red Velvet</div>
|
||||
|
||||
<img class="allergen-icon" src="static/allergen_icon.png" alt="ikona">
|
||||
|
||||
</div>
|
||||
<div class="price">145,-</div>
|
||||
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
output/katalog.pdf
Normal file
BIN
output/katalog.pdf
Normal file
Binary file not shown.
Reference in New Issue
Block a user