197 lines
6.7 KiB
CSS
197 lines
6.7 KiB
CSS
:root { --cTxt: #222;
|
|
--cBg1: #FAF9F7; --cBg2: #EAE9E7; --cBg3: #9A9997;
|
|
--cRed1: #DC3A59; --cRed2: #AA203A; --cRed3: #EE6A84;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root { --cTxt: #DDD;
|
|
--cBg1: #191816; --cBg2: #292725; --cBg3: #373635;
|
|
--cRed1: #B31; --cRed2: #F64; --cRed3: #FB9;
|
|
}
|
|
}
|
|
|
|
.center { text-align: center }
|
|
.small { font-size: 0.8em }
|
|
.large { font-size: 1.3em }
|
|
.xlarge { font-size: 1.6em }
|
|
.italic { font-style: italic }
|
|
.bold { font-weight: bold }
|
|
.dark-red { color: var(--cRed2) }
|
|
.light-red { color: var(--cRed3) }
|
|
.mrgTopMd { margin-top: 0.7em }
|
|
.v-scroll { overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch }
|
|
|
|
ul.no-bullets { padding: unset; margin: unset; list-style: none }
|
|
ul.li-lg-space li { padding-bottom: 0.3em }
|
|
|
|
i.icon:before {
|
|
content: '';
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
width: 1em; height: 1em
|
|
}
|
|
i.icon.gf:before {background-image: url('../img/icon-glutenfree.svg')}
|
|
i.icon.raw:before {background-image: url('../img/icon-raw.svg')}
|
|
i.icon.veg:before {background-image: url('../img/icon-vegan.svg')}
|
|
i.icon.yield:before {background-image: url('../img/icon-yield.svg')}
|
|
i.icon.pdf:before {background-image: url('/img/icon-pdf.svg')}
|
|
.h1em { height: 1.5ex }
|
|
|
|
/*
|
|
* General
|
|
*/
|
|
a { color: var(--cRed2); text-decoration: none }
|
|
a:hover { color: var(--cRed1) }
|
|
body {
|
|
font-family: 'Verdana', sans-serif;
|
|
margin: unset;
|
|
background: var(--cBg3); color: var(--cTxt);
|
|
}
|
|
#logo { font-size: 42px; display: block; margin-bottom: 15px }
|
|
#cache-status {
|
|
position: absolute; right: 10px; top: 10px;
|
|
border-radius: 50%; width: 10px; height: 10px;
|
|
}
|
|
header { position: relative }
|
|
header a { color: var(--cTxt) }
|
|
header, h1 { text-align: center }
|
|
header, footer, .page {
|
|
background: var(--cBg2);
|
|
max-width: 1060px;
|
|
margin: 0 auto;
|
|
padding: 20px 30px;
|
|
}
|
|
.page { background: var(--cBg1) }
|
|
nav ul { padding: unset }
|
|
nav ul li { display: inline-block; margin: 0.1em 0.5em }
|
|
nav ul li a.active { text-decoration: overline }
|
|
footer table { margin: -10px 0 }
|
|
footer .buttons { width: 3em; }
|
|
footer .buttons a { margin-left: .5em; }
|
|
|
|
@media screen and (max-width: 485px) { body { font-size: 1.4em } }
|
|
@media print {
|
|
header, footer { display: none }
|
|
body, .page { background: #FFF }
|
|
}
|
|
|
|
/*
|
|
* Parts & Components
|
|
*/
|
|
.tags { display: flex; flex-wrap: wrap; justify-content: center }
|
|
.tags > * {
|
|
background: var(--cBg1);
|
|
border: 1px solid var(--cRed1);
|
|
border-radius: 0.3em;
|
|
padding: 0.3em 0.5em;
|
|
margin: 0.2em;
|
|
}
|
|
.tags a:hover, .tags .active, a:hover .recipe-tile, .recipe-tile .hover .time {
|
|
background: var(--cRed1); color: #FFF;
|
|
}
|
|
header .tags { max-width: 600px; margin: 0 auto }
|
|
.cluster dt { margin-top: 0.7em; font-size: 1.6em }
|
|
.cluster dd { margin-top: 0.4em }
|
|
.cluster dd a { white-space: nowrap }
|
|
|
|
@media(max-width: 32em) {
|
|
.cluster dd { margin-left: 0 }
|
|
.cluster dd a { white-space: unset }
|
|
}
|
|
|
|
/*
|
|
* Grid overview
|
|
*/
|
|
.pagination { text-align: center; margin-top: 1em }
|
|
.recipe-tile {
|
|
background: var(--cBg2); color: var(--cTxt);
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin: 6px;
|
|
width: 200px;
|
|
text-align: center;
|
|
}
|
|
.recipe-tile .placeholder {
|
|
font: bold 25px/150px 'Courier New', monospace;
|
|
background: #777; color: var(--cBg2);
|
|
}
|
|
.recipe-tile p { height: 2.5em; margin: 0.3em 10px; overflow-y: auto }
|
|
.recipe-tile img, .recipe-tile .overlay { display: block; width: 200px; height: 150px }
|
|
.recipe-tile .overlay { position: absolute }
|
|
.recipe-tile .icon-bar { position: absolute; bottom: 3px; right: 3px }
|
|
.recipe-tile .icon-bar i.icon { margin-left: 2px; font-size: 28px }
|
|
a:hover .recipe-tile .hover { display: block; background: #0006 }
|
|
.recipe-tile .hover { display: none; height: 100% }
|
|
.recipe-tile .hover .time {
|
|
position: relative; top: -1.25em;
|
|
font: bold 1.1em/1.3em monospace;
|
|
}
|
|
/* snap to column grid */
|
|
.tile-grid { width: fit-content; max-width: 1060px; margin: 0 auto }
|
|
.latest .tile-grid { max-width: 636px }
|
|
/* max-width = prev + 2*30; width = x * (200 + 2*6); */
|
|
@media screen and (max-width: 1120px) { .tile-grid { max-width: 848px } }
|
|
@media screen and (max-width: 908px) { .tile-grid { max-width: 636px } }
|
|
@media screen and (max-width: 696px) { .tile-grid { max-width: 424px !important } }
|
|
@media screen and (max-width: 484px) { .tile-grid { max-width: 212px !important } }
|
|
|
|
@media print and (orientation: portrait) { .tile-grid { width: 636px } }
|
|
@media print and (orientation: landscape) { .tile-grid { width: 1060px } }
|
|
@media print {
|
|
.recipe-tile .overlay { display: none }
|
|
.recipe-tile, a:hover .recipe-tile, .recipe-tile .placeholder {
|
|
background: #FFF; color: #000 }
|
|
}
|
|
|
|
/*
|
|
* Individual recipe
|
|
*/
|
|
.recipe h2 { font-size: 0.8em; margin: 0 0 1em 0 }
|
|
.recipe #img-carousel { padding: 0 50px; margin: 0 -30px }
|
|
.recipe #source { margin-left: -1em; margin-bottom: -1.5em }
|
|
.recipe #metrics { float: right; margin: 0 0 15px 25px; max-width: 180px }
|
|
.recipe #metrics > * { text-indent: -20px; margin-left: 20px; padding-top: 0.3em }
|
|
.recipe #ingredients { float: left; margin: 0 30px 15px 0; max-width: 300px }
|
|
.recipe #ingredients a { line-height: 1em }
|
|
.recipe #directions ul { list-style-type: circle }
|
|
.recipe #directions dl dt { color: var(--cRed2); font-weight: bold }
|
|
.recipe #directions dl dd { margin-bottom: 1em }
|
|
/* Colored, 3-part, difficulty bar */
|
|
.difficulty.easy > div:nth-child(1) { background: #3C3 }
|
|
.difficulty.medium > div:nth-child(1),
|
|
.difficulty.medium > div:nth-child(2) { background: #FC3 }
|
|
.difficulty.hard > div:nth-child(1),
|
|
.difficulty.hard > div:nth-child(2),
|
|
.difficulty.hard > div:nth-child(3) { background: #F30 }
|
|
.difficulty > * { vertical-align: middle }
|
|
.difficulty > div:nth-child(1) { border-radius: 50% 0 0 50% }
|
|
.difficulty > div:nth-child(3) { border-radius: 0 50% 50% 0 }
|
|
.difficulty > div {
|
|
display: inline-block;
|
|
width: 1em; height: 1em;
|
|
border: 1px solid #555;
|
|
}
|
|
|
|
@media screen and (max-width: 50em) {
|
|
.recipe h1 { margin-bottom: 0 }
|
|
.recipe #img-carousel { height: calc(75vw - 2*50px) }
|
|
.recipe #img-carousel img { height: 100%; max-width: 100%; padding: 0 }
|
|
.recipe #metrics { float: unset; max-width: max-content; margin: .5em auto 2em }
|
|
.recipe #metrics > *:not(:first-child) { margin-right: -100vw; max-width: 50vw }
|
|
}
|
|
@media screen and (max-width: 40em), print and (orientation: portrait) {
|
|
.recipe #ingredients { float: unset; max-width: 100% }
|
|
}
|
|
@media screen and (max-width: 32em) {
|
|
.recipe #img-carousel { padding: 0 10px; height: calc(75vw - 2*10px) }
|
|
}
|
|
|
|
@media print {
|
|
h1 { margin-top:0 }
|
|
#source, #rating, .difficulty, #img-carousel { display: none }
|
|
}
|
|
/*@media print and (orientation: landscape) { #img-carousel img { display: none } }
|
|
@media print and (orientation: portrait) {
|
|
#img-carousel img:not(:first-child) { display: none }
|
|
.recipe #metrics { float: unset; padding-bottom: 1em }
|
|
}*/
|