Тема магазина по макету Figma
Каталог, карточка товара, корзина, оформление заказа и блог на WooCommerce. Стили разложены по слоям: токены из Figma, база, компоненты, страницы, брейкпоинты. Цвета, типографика, радиусы и отступы взяты из Variables и текстовых стилей макета, ниже по слоям хардкода нет. Иконки — Phosphor, вставляются инлайном как SVG, символами ничего не рисуется. Стили WooCommerce отключены, вёрстка своя, !important не используется.
This commit is contained in:
f1den committed
commit
29d10ce4cf
72 files changed
+7465
No files matched your search
@@ -0,0 +1,548 @@
|
||||
/*
|
||||
* Breakpoints. Must stay after every layer it overrides
|
||||
*/
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1439px) {
|
||||
.container {
|
||||
width: min(calc(100% - 48px), 1200px);
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.category-card {
|
||||
grid-template-columns: minmax(0, 1fr) 40%;
|
||||
}
|
||||
|
||||
.archive-shell {
|
||||
grid-template-columns: 250px minmax(0, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.archive-results .product-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.product-layout {
|
||||
grid-template-columns: minmax(0, 1.43fr) minmax(440px, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.home .site-header {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.hero-copy,
|
||||
.hero h1 {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: grid;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
inset: 88px 0 0;
|
||||
display: none;
|
||||
margin: 0;
|
||||
padding: 30px 24px;
|
||||
background: var(--bg-main);
|
||||
}
|
||||
|
||||
.menu-open .main-nav {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.main-nav ul {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.main-nav a {
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid var(--border-main);
|
||||
font: var(--lead);
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.category-grid,
|
||||
.news-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.archive-shell,
|
||||
.product-layout,
|
||||
.cart-layout,
|
||||
.checkout-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.cart-order-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filters {
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.archive-results .product-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.product-gallery {
|
||||
height: min(70vw, 580px);
|
||||
}
|
||||
|
||||
.product-summary {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
.footer-bottom > span:nth-child(2) {
|
||||
order: 3;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.home .site-header {
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
inset: 72px 0 0;
|
||||
}
|
||||
|
||||
.cart-link {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.shop-toast-stack,
|
||||
.home .shop-toast-stack {
|
||||
top: 88px;
|
||||
right: 16px;
|
||||
width: calc(100vw - 32px);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 48px 0;
|
||||
}
|
||||
|
||||
.hero {
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
padding: 44px 0 48px;
|
||||
}
|
||||
|
||||
.hero-title-group > p,
|
||||
.hero-features {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.hero-features {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.products-section {
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.product-grid,
|
||||
.category-grid,
|
||||
.news-grid,
|
||||
.archive-results .product-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.category-card {
|
||||
height: 230px;
|
||||
grid-template-columns: minmax(0, 1fr) 38%;
|
||||
}
|
||||
|
||||
.news-card {
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
.pagination .nav-links,
|
||||
.woocommerce nav.woocommerce-pagination ul {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pagination .page-numbers,
|
||||
.woocommerce nav.woocommerce-pagination ul li a,
|
||||
.woocommerce nav.woocommerce-pagination ul li span {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.slider-controls {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* The design keeps the filter button and the sort control on one row; the
|
||||
sort label stacks above its value so the pair fits at 360px. */
|
||||
.archive-toolbar {
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.archive-toolbar .sort-control {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
margin-left: auto;
|
||||
align-items: flex-end;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.archive-toolbar .sort-control > span {
|
||||
font: var(--caption);
|
||||
}
|
||||
|
||||
/* The mobile layout does not expose the per-page control. */
|
||||
.archive-toolbar .per-page-control {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-gallery {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.product-summary {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.product-summary form.cart {
|
||||
grid-template-columns: 120px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tab-list a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.article-media,
|
||||
.article-media-wide {
|
||||
height: 62vw;
|
||||
}
|
||||
|
||||
.article-lead {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.cart-table thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cart-table tr,
|
||||
.cart-table td {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cart-table tr {
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid var(--border-main);
|
||||
}
|
||||
|
||||
.cart-table td {
|
||||
padding: 7px 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.cart-page {
|
||||
width: 100%;
|
||||
height: 622px;
|
||||
padding: 8px 16px 32px;
|
||||
}
|
||||
|
||||
|
||||
.checkout-fields {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.checkout-page {
|
||||
width: 100%;
|
||||
min-height: 1278px;
|
||||
padding: 8px 16px 32px;
|
||||
}
|
||||
|
||||
.checkout-page .page-heading {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.checkout-layout {
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.checkout-input,
|
||||
.checkout-map {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.checkout-input,
|
||||
.checkout-input input {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.checkout-delivery,
|
||||
.checkout-payment-options {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.checkout-delivery legend,
|
||||
.checkout-payment-options legend {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.delivery-switch {
|
||||
height: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.delivery-switch span {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.checkout-radio {
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.checkout-map {
|
||||
height: auto;
|
||||
margin-top: 16px;
|
||||
aspect-ratio: 1.44;
|
||||
}
|
||||
|
||||
.checkout-payment-options {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.checkout-order-card {
|
||||
width: 100%;
|
||||
min-height: 408px;
|
||||
height: 408px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
height: auto;
|
||||
min-height: 210px;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.footer-bottom > span:nth-child(2) {
|
||||
grid-column: auto;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
/* The mobile frame shows the same row, edge to edge and without the
|
||||
desktop next button — a touch drag does that job. */
|
||||
.subcategories {
|
||||
margin-inline: calc(var(--container-gutter) * -1);
|
||||
padding-inline: var(--container-gutter);
|
||||
}
|
||||
|
||||
.subcategory-next {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.subcategory-card {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.quick-filters {
|
||||
flex-wrap: nowrap;
|
||||
margin-inline: calc(var(--container-gutter) * -1);
|
||||
padding-inline: var(--container-gutter);
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.quick-filters::-webkit-scrollbar {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.quick-filter {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* The cart row needs about 550px before its columns start colliding, and the
|
||||
* summary beside it is a fixed 432px. Below the width where both fit, they
|
||||
* stack — otherwise the summary ends up sitting on top of the items.
|
||||
*/
|
||||
@media (max-width: 1199px) {
|
||||
.cart-layout,
|
||||
.checkout-layout {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.cart-order-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Once the summary drops below the fields the checkout is one column, so
|
||||
centre it rather than leaving both blocks pinned to the left edge. */
|
||||
.checkout-layout .checkout-fields,
|
||||
.checkout-layout .checkout-order-card {
|
||||
width: 432px;
|
||||
max-width: 100%;
|
||||
margin-inline: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* The cart row needs about 550px before its columns collide. Below that it
|
||||
* takes the stacked shape from the mobile frame — thumbnail top left, copy
|
||||
* beside it, price and controls on the bottom row.
|
||||
*/
|
||||
@media (max-width: 767px) {
|
||||
.cart-page .page-heading {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.cart-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.cart-items {
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 150px;
|
||||
height: 150px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.cart-thumb {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
width: 88px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.cart-thumb .product-badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cart-item-copy {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 12px;
|
||||
left: 112px;
|
||||
}
|
||||
|
||||
.cart-item-price {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cart-item-quantity {
|
||||
position: absolute;
|
||||
right: 64px;
|
||||
bottom: 16px;
|
||||
width: 104px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.cart-item-remove {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
bottom: 16px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.cart-order-card {
|
||||
width: 100%;
|
||||
min-height: 212px;
|
||||
height: 212px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.cart-order-card .order-row {
|
||||
min-height: 28px;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.cart-order-card .order-row.total {
|
||||
min-height: 36px;
|
||||
margin: 0;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.cart-order-card .button {
|
||||
height: 56px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.checkout-input input {
|
||||
padding: 25px 20px 15px;
|
||||
}
|
||||
|
||||
.checkout-input input:focus + .field-label,
|
||||
.checkout-input input:not(:placeholder-shown) + .field-label {
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user