yogsototh/plainoldrecipe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

📏 Responsify recipes page

Browse source
This commit is contained in:
himynameisdave 2020-08-06 16:15:55 -07:00
parent 7c098316aa
commit c7e69b54b3
No known key found for this signature in database
GPG key ID: CF799D9C390BE444
2 changed files with 93 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
static/styles/recipe.css Normal file
View file

@ -0,0 +1,77 @@
a {
border-bottom: 1px solid #444444;
color: #444444;
text-decoration: none;
}
a:hover {
border-bottom: 0;
}
.recipe-image {
font-size: 0;
}
.recipe-image img {
width: 100%;
}
li {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.ingredients-list {
columns: 1;
padding-left: 2rem;
}
@media screen and (min-width: 480px) {
.recipe-image {
float: right;
margin: 0.75rem;
}
.recipe-image img {
width: 250px;
}
}
@media screen and (min-width: 660px) {
.ingredients-list {
columns: 2;
}
}
@media screen and (min-width: 1220px) {
.ingredients-list {
columns: 3;
}
}
/* Print styles */
@media print {
@page {
size: 6in 4in landscape;
margin: 0.125in;
}
body {
width: 6in;
height: 4in;
margin: 0.125in;
font-size: 9pt;
overflow: visible;
font-family: Helvetica, sans-serif;
}
h1 {
font-size: 10pt;
font-weight: bold;
}
h2 {
display: none;
}
img {
display: none;
}
a {
color: black;
text-decoration: none
}
}

90
templates/recipe.html
View file

@ -1,83 +1,26 @@
<html>
<head>
{% set page_title %}
<title>{{recipe['name']}} - Plain Old Recipe</title>
<style>
@media print {
@page {
size: 6in 4in landscape;
margin: 0.125in;
}
body {
width: 6in;
height: 4in;
margin: 0.125in;
font-size: 9pt;
overflow: visible;
font-family: Helvetica;
/*
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
*/
}
h1 {
font-size: 10pt;
font-weight: bold;
}
h2 {
display: none;
}
img {
display: none;
}
a {
color: black;
text-decoration: none
}
}
@media screen {
body {
margin: 0.25in auto;
background: #f2f2f2;
color: #444444;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.8;
text-shadow: 0 1px 0 #ffffff;
max-width: 95%;
}
a {
border-bottom: 1px solid #444444;
color: #444444;
text-decoration: none;
}
a:hover {
border-bottom: 0;
}
{% endset %}
{% set extra_css %}
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/recipe.css') }}">
{% endset %}
{% set hide_nav = true %}
.recipe_image {
float: right;
margin: 10px;
}
{% include 'header.html' %}
li {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
}
</style>
</head>
<body>
<div class="recipe_image">
<img width="250" src="{{recipe['image']}}">
<div class="recipe-image">
<img src="{{recipe['image']}}" alt="An image of {{recipe['name']}}" />
</div>
<h1>{{recipe['name']}}</h1>
<p><i>{{recipe['description']}}</i></p>
{% if recipe['description'] %}
<p>
<i>{{recipe['description']}}</i>
</p>
{% endif %}
<h2>Ingredients</h2>
<ul style="columns: 3; margin:0.125in; padding:0">
<ul class="ingredients-list">
{% for i in recipe['ingredients'] %}
<li>{{i}}</li>
{% endfor %}
@ -93,5 +36,4 @@
<a href="{{recipe['url']}}">{{recipe['url']}}</a>
</body>
</html>
{% include 'footer.html' %}