forked from La_Bureautique/zeg1jeux
500 lines
6.6 KiB
CSS
500 lines
6.6 KiB
CSS
:root {
|
|
|
|
--item-size: 32px;
|
|
|
|
--marron: hsl(350, 20%, 25%);
|
|
--marron-medium: hsl(30, 50%, 50%);
|
|
--marron-clair: hsl(30, 70%, 66%);
|
|
--marron-transparent: hsla(350, 20%, 25%, 0.80);
|
|
--blanc: hsl(0, 100%, 100%);
|
|
--noir: hsl(0, 100%, 0%);
|
|
--vert-pomme: hsl(100, 70%, 90%);
|
|
}
|
|
|
|
|
|
|
|
@font-face {
|
|
font-family: 'Comic Neue';
|
|
src: url("../../fonts/Comic_Neue/ComicNeue-Regular.ttf") format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Comic Neue';
|
|
src: url("../../fonts/Comic_Neue/ComicNeue-Bold.ttf") format('truetype');
|
|
font-weight: 700;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Patrick Hand';
|
|
src: url("../../fonts/Patrick_Hand/PatrickHand-Regular.ttf") format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'MinecraftFifty';
|
|
src: url("../../fonts/MinecraftFifty-Solid.otf") format('opentype');
|
|
}
|
|
|
|
body {
|
|
|
|
font-family: 'Comic Neue', fantasy;
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'MinecraftFifty', 'Comic Neue', fantasy;
|
|
}
|
|
|
|
#usp {
|
|
font-family: 'Patrick Hand', fantasy;
|
|
}
|
|
|
|
q:after {
|
|
|
|
content: " »";
|
|
}
|
|
|
|
q:before {
|
|
|
|
content: "« ";
|
|
}
|
|
|
|
body > footer {
|
|
|
|
margin-top: 10rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
body > footer blockquote {
|
|
|
|
font-family: cursive;
|
|
font-size: 1.5rem;
|
|
color: hsl(30, 15%, 90%);
|
|
}
|
|
|
|
body > footer blockquote cite {
|
|
|
|
display: block;
|
|
text-align: right;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
body > footer blockquote cite:before {
|
|
|
|
content: "― ";
|
|
}
|
|
|
|
iframe {
|
|
|
|
max-width: 100%;
|
|
}
|
|
|
|
.recipe-name:before {
|
|
|
|
content: "« ";
|
|
}
|
|
|
|
.recipe-name:after {
|
|
|
|
content: " »";
|
|
}
|
|
|
|
|
|
main {
|
|
|
|
display: flex;
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#recipe-main,
|
|
#recipe-aux {
|
|
|
|
visibility: hidden;
|
|
}
|
|
|
|
@media screen and (max-width: 39.999rem) {
|
|
|
|
main {
|
|
|
|
flex-direction: column;
|
|
}
|
|
|
|
#recipe-main {
|
|
|
|
order: 1;
|
|
}
|
|
|
|
#recipe-aux {
|
|
|
|
order: 2;
|
|
}
|
|
|
|
#collections {
|
|
|
|
order: 3;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 40rem) {
|
|
|
|
.recipe {
|
|
|
|
width: 48%;
|
|
padding: 0% 2% 0% 0%;
|
|
}
|
|
|
|
#collections {
|
|
|
|
width: 100%;
|
|
padding: 0% 0% 0% 2%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60rem) {
|
|
|
|
.recipe {
|
|
|
|
width: 31.333%;
|
|
padding: 0% 2% 0% 0%;
|
|
}
|
|
|
|
#collections {
|
|
|
|
width: 31.334%;
|
|
padding: 0% 0% 0% 2%;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
.recipe > .recipe-signature {
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
@keyframes blinking {
|
|
0% {
|
|
|
|
text-shadow: 0 0 0px transparent;
|
|
}
|
|
|
|
50% {
|
|
|
|
text-shadow: 0 0 5px var(--vert-pomme),
|
|
0 0 10px var(--vert-pomme),
|
|
0 0 15px var(--vert-pomme),
|
|
0 0 20px var(--vert-pomme),
|
|
0 0 25px var(--vert-pomme);
|
|
}
|
|
|
|
100% {
|
|
|
|
text-shadow: 0 0 0px transparent;
|
|
}
|
|
}
|
|
|
|
.recipe .action {
|
|
|
|
padding: 0 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.recipe .action a,
|
|
.recipe .action a:visited {
|
|
|
|
text-decoration: none;
|
|
color: var(--noir);
|
|
background-color: var(--blanc);
|
|
transition: text-shadow 0.666s;
|
|
}
|
|
|
|
.recipe .action.has-details a,
|
|
.recipe .action.has-details a:visited {
|
|
|
|
animation: blinking 3s infinite;
|
|
}
|
|
|
|
.recipe .action:hover a,
|
|
.recipe .action:hover a:before {
|
|
|
|
}
|
|
|
|
.recipe .action *:before {
|
|
|
|
content: "⇒";
|
|
display: block;
|
|
font-size: 2rem;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.recipe .ingredients {
|
|
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: grid;
|
|
grid-gap: 0;
|
|
border: 2px solid var(--marron);
|
|
}
|
|
|
|
|
|
.recipe .ingredients.grid-4 {
|
|
|
|
grid-template-columns: 50% 50%;
|
|
max-width: calc(2 * (var(--item-size) + 24px + 4px * 2));
|
|
|
|
}
|
|
|
|
.recipe .ingredients.grid-9 {
|
|
|
|
grid-template-columns: 33.333% 33.333% 33.333%;
|
|
max-width: calc(3 * (var(--item-size) + 24px + 4px * 2));
|
|
|
|
}
|
|
|
|
.recipe .ingredients.grid-16 {
|
|
|
|
grid-template-columns: 25% 25% 25% 25%;
|
|
max-width: calc(4 * (var(--item-size) + 24px + 4px * 2));
|
|
|
|
}
|
|
|
|
.recipe .ingredients.grid-25 {
|
|
|
|
grid-template-columns: 20% 20% 20% 20% 20%;
|
|
max-width: calc(5 * (var(--item-size) + 24px + 4px * 2));
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.result {
|
|
|
|
border: 4px solid var(--marron);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#items-list,
|
|
.items-list,
|
|
#collections nav ul {
|
|
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#collections nav {
|
|
|
|
display: flex;
|
|
}
|
|
|
|
#collections nav ul {
|
|
|
|
margin-bottom: 1rem;
|
|
border: 0.25rem solid var(--marron);
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#collections nav ul li.selected {
|
|
|
|
background-color: var(--marron-clair);
|
|
}
|
|
|
|
/*
|
|
#collections nav ul li {
|
|
|
|
border-left: 0.5rem solid var(--marron);
|
|
border-right: 0.5rem solid var(--marron);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
#collections nav ul li:first-child {
|
|
|
|
border-left: 0;
|
|
}
|
|
|
|
#collections nav ul li:last-child {
|
|
|
|
border-right: 0;
|
|
}
|
|
*/
|
|
|
|
.recipe .ingredients .ingredient,
|
|
#items-list li,
|
|
.items-list li {
|
|
|
|
border: 2px solid var(--marron);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
#items-list li,
|
|
.items-list li,
|
|
#collections nav ul li {
|
|
|
|
height: 48px;
|
|
width: 48px;
|
|
|
|
}
|
|
|
|
.recipe .ingredients .ingredient a,
|
|
#items-list li a,
|
|
.items-list li a,
|
|
#collections nav ul li a {
|
|
|
|
z-index: 10;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.recipe .ingredients .ingredient:hover a,
|
|
#items-list li:hover a,
|
|
.items-list li:hover a,
|
|
#collections nav ul li:hover a {
|
|
|
|
background-color: var(--marron-clair);
|
|
}
|
|
|
|
.recipe .ingredients .ingredient:hover a {
|
|
|
|
border: 2px solid var(--marron-medium);
|
|
}
|
|
|
|
|
|
.recipe .ingredients .ingredient,
|
|
.recipe .result,
|
|
#items-list li,
|
|
#collections nav ul li {
|
|
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.recipe .ingredients .ingredient {
|
|
}
|
|
|
|
.recipe .ingredients .ingredient img {
|
|
|
|
flex-basis: var(--item-size);
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.recipe .ingredients .ingredient .qty {
|
|
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
font-weight: bold;
|
|
font-size: 1.25rem;
|
|
background-color: var(--marron-transparent);
|
|
color: var(--blanc);
|
|
padding-left: 0.375rem;
|
|
padding-right: 0.125rem;
|
|
padding-top: 0.25rem;
|
|
border-top-left-radius: 0.33em;
|
|
}
|
|
|
|
|
|
.recipe .ingredients .ingredient,
|
|
.recipe .result {
|
|
|
|
height: 64px;
|
|
width: 64px;
|
|
|
|
}
|
|
|
|
.other-recipes ul {
|
|
|
|
list-style: none;
|
|
padding: 0;
|
|
padding-top: 0px;
|
|
margin: 0;
|
|
display: flex;
|
|
}
|
|
|
|
.other-recipes ul {
|
|
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
height: 2.5rem;
|
|
padding-top: 1rem;
|
|
width: auto;
|
|
width: auto;
|
|
overflow-y: hidden;
|
|
overflow-x: visible;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.other-recipes li {
|
|
|
|
margin: 0;
|
|
margin-right: 0.5rem;
|
|
padding: 0;
|
|
display: inline;
|
|
flex-basis: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.other-recipes li > * {
|
|
|
|
width: 2rem;
|
|
text-align: center;
|
|
height: 2rem;
|
|
display: inline;
|
|
|
|
padding: 0.25rem 0.5em;
|
|
|
|
border-radius: 1rem;
|
|
text-decoration: none;
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
|
|
|
|
border-color: var(--marron);
|
|
background-color: var(--blanc);
|
|
color: var(--marron);
|
|
|
|
}
|
|
|
|
.other-recipes li *:not(a) {
|
|
|
|
border-color: var(--marron);
|
|
color: var(--blanc);
|
|
background-color: var(--marron);
|
|
|
|
}
|
|
|
|
.recipe-details {
|
|
|
|
visibility: hidden;
|
|
}
|