diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/glasses.png | bin | 0 -> 14633 bytes | |||
| -rw-r--r-- | static/logo-bg.png | bin | 0 -> 74788 bytes | |||
| -rw-r--r-- | static/logo-dark-bg.png | bin | 0 -> 31159 bytes | |||
| -rw-r--r-- | static/style.css | 402 |
4 files changed, 335 insertions, 67 deletions
diff --git a/static/glasses.png b/static/glasses.png Binary files differnew file mode 100644 index 0000000..eaae9a4 --- /dev/null +++ b/static/glasses.png diff --git a/static/logo-bg.png b/static/logo-bg.png Binary files differnew file mode 100644 index 0000000..4762622 --- /dev/null +++ b/static/logo-bg.png diff --git a/static/logo-dark-bg.png b/static/logo-dark-bg.png Binary files differnew file mode 100644 index 0000000..36dbb9e --- /dev/null +++ b/static/logo-dark-bg.png diff --git a/static/style.css b/static/style.css index fb3fb3a..e31e6d1 100644 --- a/static/style.css +++ b/static/style.css @@ -1,97 +1,136 @@ body { background: #ffffff; margin: 4rem; - font-family: sans-serif, monospace, serif; - line-height: 1.4; + font-family: sans, monospace, sans-serif; + line-height: 1.5; +} + +@font-face { + font-family: "Bad Script"; + src: local("Bad Script"), + url: ("/static/fonts/BadScript-Regular.ttf") format ("opentype"); +} + +* { + box-sizing: border-box; +} + +a { + color: #529b57; + font-weight: bold; } nav { - margin-bottom: 0.5rem; + margin-bottom: 2rem; + font-size: 1.25rem; } -ol { - padding-left: 0; - margin-top: 0; +nav a.active { + text-decoration: none; + opacity: 0.5; } .container { display: flex; flex-wrap: wrap; - gap: 4rem; + gap: 1rem 2rem; } -.button-wrapper { - display: block; - margin-top: 0.5rem; - margin-bottom: 1.5rem; +.logo { + height: 95px; + position: relative; + display: flex; + gap: 1.25rem; + align-items: center; + margin-bottom: 1rem; } -.button { - border: 0.1875rem solid; - box-shadow: 1px 1px 0 0, 2px 2px 0 0, 3px 3px 0 0, 4px 4px 0 0; - color: #000000; - display: inline-block; - font-size: 1rem; - font-weight: bold; - padding: 0.75rem 2.5rem; - position: relative; - text-decoration: none; - text-transform: uppercase; - transition: box-shadow 0.2s, top 0.2s, left: 0.2s; +.logo::before { + background-image: url("/static/logo-bg.png"); + background-repeat: no-repeat; + background-size: cover; + position: absolute; + left: -50px; + top: -58px; + z-index: -1; + content: ""; + width: 215px; + height: 215px; } -.button:active { - box-shadow: 0px 0px 0px 0px; - top: 5px; - left: 5px; +.logo-glasses { + position: absolute; + top: -10px; + left: 35px; + width: 70px; + object-fit: contain; + pointer-events: none; } -.logo { - width: 227px; - height: 200px; +.logo img, +.logo a { + height: 95px; } h1, -h2 { - font-weight: 900; - font-style: italic; +h2, +h3, +h4, +h5, +h6 { + margin-top: 0; margin-bottom: 0.5rem; - line-height: 1.1; + font-family: sans; } h1 { - font-size: 2rem; + font-size: 1.75rem; + line-height: 1.2; } h2 { + font-size: 1.75rem; +} + +h3 { font-size: 1.375rem; } +.h5 { + font-size: 1.125rem; + font-style: normal; +} + +.side { + max-width: 23rem; +} + +.side h2 { + font-weight: 900; +} + .content { - max-width: 30rem; - font-size: 1.25rem; + max-width: 56rem; + width: 100%; } -.article + .article { - margin-top: 2rem; +.content h2 { + font-size: 3.5rem; + font-weight: 900; + line-height: 1.2; } p { margin-top: 0; } -.form-row { - display: block; - margin: 0.5rem 0; -} - .gallery { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(16, 5rem); grid-gap: 1rem; max-width: calc(100vw - 6rem); - width: 56rem; + width: 100%; } .gallery > div { @@ -139,52 +178,277 @@ p { object-fit: cover; } -@media screen and (max-width: 50rem) { - body { - margin: 2rem; - } +.shop-items { + display: flex; + gap: 2.5rem 1.5rem; + flex-wrap: wrap; +} - ol { - counter: ol-counter; - } +.shop-item { + width: 17.5rem; +} - ol li { - counter-increment: ol-counter; - } +.shop-item-not-published { + opacity: 0.5; +} - ol li::before { - display: block; - content: counter(ol-counter) "."; - } +.shop-item-imgs { + background-color: #00000011; + position: relative; + width: 17.5rem; + margin-bottom: 1rem; + aspect-ratio: 1; + overflow: hidden; +} + +.shop-item-img { + position: absolute; + left: 0; + top: 0; + object-fit: cover; + object-position: center; + height: 100%; + width: 100%; + opacity: 0; +} + +.shop-item-img:first-child { + opacity: 1; +} - ol li::marker { - content: ''; +.shop-item-img:hover { + opacity: 1; + left: 0 !important; + width: 100% !important; + z-index: 2 !important; +} + +.shop-item-price { + font-size: 1.25rem; + margin-bottom: 0.5rem; +} + +.shop-item-title { + font-size: 1.25rem; + margin-top: 0.25rem;; + margin-bottom: 0.25rem; +} + +.product-page-layout { + display: flex; + gap: 2rem; +} + +.product-page-layout > div { + flex: 50%; +} + +.product-page-imgs { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.product-page-img, +.product-page-img-mobile { + max-width: 100%; + width: 100%; +} + +.product-page-img-mobile { + display: none; +} + +.basket-item { + display: flex; + gap: 0.75rem; +} + +.basket-item { + margin-top: 1rem; +} + +.basket-item-title { + font-size: 1rem; +} + +.basket-item-image img { + width: 5.25rem; + height: 5.25rem; + object-fit: cover; + object-position: center; +} + +.basket-item-price { + font-size: 1rem; + font-style: italic; +} + +.basket-item-remove { + margin-top: 0.25rem; +} + +.form { + display: flex; + flex-direction: column; + gap: 2rem; + max-width: 35rem; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.form-row label { + display: block; + margin-bottom: 0.25rem; + font-weight: 600; +} + +.form-row input[type=checkbox] { + vertical-align: middle; + margin-left: 0; +} + +.form-row input[type=checkbox] + label { + display: inline; +} + +.form-row select, +.form-row textarea, +.form-row input:not([type=checkbox]) { + width: 100%; +} + +.form-row input:not([type=checkbox]), +.form-row select { + height: 1.75rem; +} + +.form-file-img { + width: 3.5rem; + height: 3.5rem; + object-fit: cover; + object-position: center; +} + +.form textarea { + min-height: 4rem; +} + +.form-required-marker { + font-size: 0.75rem; + opacity: 0.4; +} + +.form-error { + font-style: italic; + color: crimson; + font-size: 0.75rem; + font-weight: bold; + margin-top: 0.375rem; +} + +.form-subheader { + margin-bottom: -0.375rem; +} + +.form-help { + opacity: 0.4; + font-size: 0.75rem; + margin-top: 0.375rem; +} + +.form-error + .form-help { + margin-top: 0.25rem; +} + +.d-flex { + display: flex; +} + +.gap-1 { + gap: 1rem; +} + +.d-inline-block { + display: inline-block; +} + +.mb-0 { + margin-bottom: 0; +} + +.mb-0-5 { + margin-bottom: 0.5rem; +} + +.mb-1 { + margin-bottom: 1rem; +} + +.mb-1-5 { + margin-bottom: 1.5rem; +} + +.mb-2 { + margin-bottom: 2rem; +} + +@media screen and (max-width: 50rem) { + body { + margin: 2rem; } - .content { + .side { max-width: 100%; } + .content h2 { + font-size: 3rem; + } + .container { - gap: 2rem; + gap: 1rem; } .gallery { display: flex; flex-direction: column; gap: 1rem; - max-width: calc(100vw - 2rem); } .gallery img, .gallery video { position: static; } + + .product-page-layout { + flex-direction: column; + } + + .product-page-img-mobile { + display: block; + } + + .product-page-imgs > *:first-child { + display: none; + } +} + +@media screen and (max-width: 41rem) { + .shop-item, + .shop-item-imgs, + .shop-item-img { + width: 100%; + } } @media (prefers-color-scheme: dark) { body { - background-color: #000000; + background-color: #211e1c; color: #ffffff; } @@ -196,7 +460,11 @@ p { background-color: #ffffff22; } - .button { - color: #ffffff; + .shop-item-imgs { + background-color: #ffffff22; + } + + .logo::before { + background-image: url("/static/logo-dark-bg.png"); } } |
