From ee653dec646e4da447e8c0edbb989209ef04a4f9 Mon Sep 17 00:00:00 2001 From: ohjian Date: Mon, 13 Jun 2022 17:15:12 +0200 Subject: [PATCH] copy style.css week 06 to archive --- archive/06/style.css | 156 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 archive/06/style.css diff --git a/archive/06/style.css b/archive/06/style.css new file mode 100644 index 0000000..41924a8 --- /dev/null +++ b/archive/06/style.css @@ -0,0 +1,156 @@ +* { + box-sizing: border-box; +} + +html, +body { + font-size: 24px; + line-height: 1.6; + font-family: sans-serif; + background-color: #e6b0aa; +} + +#app { + width: 100%; + display: flex; + flex-wrap: wrap; +} + +#app > * { + flex-shrink: 0; +} + +section.recipe { + display: inline-block; + margin: 48px; + padding: 32px; + width: 50ch; + border-radius: 0.5rem; + box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, 0.1); +} + +.recipe label, +.recipe input, +.recipe textarea { + font-family: sans-serif; + display: block; + width: 100%; + max-width: 100%; +} + +input, +textarea, +button { + color: currentColor; + background: none; + border: 1px solid currentColor; + padding: 8px; + font-size: 1rem; +} + +button { + cursor: pointer; +} + +button.add { + display: block; + width: 48px; + height: 48px; + margin: 0 auto; + margin-top: 16px; + cursor: pointer; + border-radius: 50%; +} + +button:disabled { + border: 1px dashed currentColor; + cursor: default; + opacity: 0.5; +} + +textarea + textarea { + margin-top: 16px; +} + +label { + font-style: italic; + font-size: 19px; +} + +.entry + .entry { + margin-top: 32px; +} + +.archive { + position: absolute; + right: 24px; + top: 48px; + color: currentColor; + cursor: pointer; + background-color: white; + border-radius: 1em; + padding: 0 0.5em; + text-decoration: none; +} + +.cookbook { + display: inline-block; + position: relative; + min-width: 50ch; + height: 100%; +} + +.cookbook .recipe { + position: absolute; + top: 0; + left: 0; + background-color: #e6b0aa; + cursor: pointer; + user-select: none; +} + +.cookbook .recipe .title { + margin: 0; +} + +.cookbook .recipe .description { + font-style: italic; + margin-top: 4px; +} + +.cookbook .recipe .label { + margin-top: 24px; +} + +.cookbook .recipe .from { + margin: 0; + margin-top: 32px; + text-align: right; +} + +.nature { + text-transform: lowercase; +} + +@media print { + .form.recipe, + .archive { + display: none; + } + + .recipe .title { + margin: 0; + } + + .cookbook .recipe { + margin: 24px 16px; + padding: 24px; + font-size: 18px; + border-radius: 4px; + position: relative; + break-after: always; + transform: none !important; + box-shadow: none; + border: 1px dashed currentColor; + } +}