studio-variable/index-shop
4
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

thanks : style
All checks were successful
Deploy / Deploy to Production (push) Successful in 10s
Details

Browse source
This commit is contained in:
isUnknown 2025-12-22 10:07:03 +01:00
parent 57037fc435
commit 010c4f6c20
12 changed files with 95 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

7
.claude/settings.local.json
View file

@ -1,7 +1,12 @@
{ {
"permissions": { "permissions": {
"allow": [ "allow": [
"WebSearch" "WebSearch",
"Bash(git add:*)",
"Bash(git commit:*)",
"Bash(find:*)",
"Bash(curl:*)",
"WebFetch(domain:snipcart.com)"
] ]
} }
} }

2
assets/css/components/_text.scss
View file

@ -1,7 +1,7 @@
[data-template="subscription-newsletter"], [data-template="subscription-newsletter"],
[data-template="thanks"], [data-template="thanks"],
[data-template="support"], [data-template="support"],
[data-template="store"] { [data-template="home"] {
.p__baseline-big { .p__baseline-big {
font-family: var(--title); font-family: var(--title);
font-size: var(--fs-big); font-size: var(--fs-big);

74
assets/css/style.css
View file

@ -399,7 +399,7 @@ main {
[data-template=subscription-newsletter] .p__baseline-big, [data-template=subscription-newsletter] .p__baseline-big,
[data-template=thanks] .p__baseline-big, [data-template=thanks] .p__baseline-big,
[data-template=support] .p__baseline-big, [data-template=support] .p__baseline-big,
[data-template=store] .p__baseline-big { [data-template=home] .p__baseline-big {
font-family: var(--title); font-family: var(--title);
font-size: var(--fs-big); font-size: var(--fs-big);
font-weight: var(--fw-bold); font-weight: var(--fw-bold);
@ -410,14 +410,14 @@ main {
[data-template=subscription-newsletter] .p__baseline-big strong, [data-template=subscription-newsletter] .p__baseline-big strong,
[data-template=thanks] .p__baseline-big strong, [data-template=thanks] .p__baseline-big strong,
[data-template=support] .p__baseline-big strong, [data-template=support] .p__baseline-big strong,
[data-template=store] .p__baseline-big strong { [data-template=home] .p__baseline-big strong {
font-weight: var(--fw-bolf); font-weight: var(--fw-bolf);
color: var(--color-accent); color: var(--color-accent);
} }
[data-template=subscription-newsletter] .p__baseline-big .link-don, [data-template=subscription-newsletter] .p__baseline-big .link-don,
[data-template=thanks] .p__baseline-big .link-don, [data-template=thanks] .p__baseline-big .link-don,
[data-template=support] .p__baseline-big .link-don, [data-template=support] .p__baseline-big .link-don,
[data-template=store] .p__baseline-big .link-don { [data-template=home] .p__baseline-big .link-don {
display: block; display: block;
color: var(--color-accent); color: var(--color-accent);
text-decoration: none; text-decoration: none;
@ -425,7 +425,7 @@ main {
[data-template=subscription-newsletter] .p__baseline-big .link-don:hover, [data-template=subscription-newsletter] .p__baseline-big .link-don:hover,
[data-template=thanks] .p__baseline-big .link-don:hover, [data-template=thanks] .p__baseline-big .link-don:hover,
[data-template=support] .p__baseline-big .link-don:hover, [data-template=support] .p__baseline-big .link-don:hover,
[data-template=store] .p__baseline-big .link-don:hover { [data-template=home] .p__baseline-big .link-don:hover {
-webkit-text-decoration: underline 2px; -webkit-text-decoration: underline 2px;
text-decoration: underline 2px; text-decoration: underline 2px;
text-underline-offset: 4px; text-underline-offset: 4px;
@ -433,7 +433,7 @@ main {
[data-template=subscription-newsletter] .p__baseline, [data-template=subscription-newsletter] .p__baseline,
[data-template=thanks] .p__baseline, [data-template=thanks] .p__baseline,
[data-template=support] .p__baseline, [data-template=support] .p__baseline,
[data-template=store] .p__baseline { [data-template=home] .p__baseline {
font-size: var(--fs-medium); font-size: var(--fs-medium);
font-weight: var(--fw-medium); font-weight: var(--fw-medium);
line-height: 1.1; line-height: 1.1;
@ -444,7 +444,7 @@ main {
[data-template=subscription-newsletter] .p__baseline, [data-template=subscription-newsletter] .p__baseline,
[data-template=thanks] .p__baseline, [data-template=thanks] .p__baseline,
[data-template=support] .p__baseline, [data-template=support] .p__baseline,
[data-template=store] .p__baseline { [data-template=home] .p__baseline {
text-align: center; text-align: center;
margin: var(--spacing) 0; margin: var(--spacing) 0;
} }
@ -452,7 +452,7 @@ main {
[data-template=subscription-newsletter] .p__details, [data-template=subscription-newsletter] .p__details,
[data-template=thanks] .p__details, [data-template=thanks] .p__details,
[data-template=support] .p__details, [data-template=support] .p__details,
[data-template=store] .p__details { [data-template=home] .p__details {
font-size: var(--fs-small); font-size: var(--fs-small);
margin-bottom: 0.5em; margin-bottom: 0.5em;
color: var(--grey-400); color: var(--grey-400);
@ -460,7 +460,7 @@ main {
[data-template=subscription-newsletter] .section__heading, [data-template=subscription-newsletter] .section__heading,
[data-template=thanks] .section__heading, [data-template=thanks] .section__heading,
[data-template=support] .section__heading, [data-template=support] .section__heading,
[data-template=store] .section__heading { [data-template=home] .section__heading {
font-size: var(--fs-normal); font-size: var(--fs-normal);
font-weight: var(--fw-medium); font-weight: var(--fw-medium);
line-height: 1; line-height: 1;
@ -474,8 +474,8 @@ main {
[data-template=thanks] ol, [data-template=thanks] ol,
[data-template=support] ul, [data-template=support] ul,
[data-template=support] ol, [data-template=support] ol,
[data-template=store] ul, [data-template=home] ul,
[data-template=store] ol { [data-template=home] ol {
margin-left: 3ch; margin-left: 3ch;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
@ -1016,39 +1016,39 @@ body.is-fullscreen {
overflow: hidden; overflow: hidden;
} }
[data-template=store] main { [data-template=home] main {
margin-bottom: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 2);
} }
[data-template=store] .p__baseline-big { [data-template=home] .p__baseline-big {
margin-top: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 2);
} }
[data-template=store] #store__container { [data-template=home] #store__container {
margin-top: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 2);
margin-bottom: calc(var(--spacing) * 4); margin-bottom: calc(var(--spacing) * 4);
width: 100%; width: 100%;
max-width: 1000px; max-width: 1000px;
} }
[data-template=store] #store__container .store__product { [data-template=home] #store__container .store__product {
position: relative; position: relative;
} }
[data-template=store] #store__container .store__product figure { [data-template=home] #store__container .store__product figure {
aspect-ratio: 4/3; aspect-ratio: 4/3;
background-color: var(--color-bg); background-color: var(--color-bg);
background-color: var(--data-bg); background-color: var(--data-bg);
margin-bottom: calc(var(--spacing) * 0.5); margin-bottom: calc(var(--spacing) * 0.5);
overflow: hidden; overflow: hidden;
} }
[data-template=store] #store__container .store__product img { [data-template=home] #store__container .store__product img {
width: 100%; width: 100%;
height: 100%; height: 100%;
-o-object-fit: contain; -o-object-fit: contain;
object-fit: contain; object-fit: contain;
transition: var(--curve) 0.5s; transition: var(--curve) 0.5s;
} }
[data-template=store] #store__container .store__product a { [data-template=home] #store__container .store__product a {
text-decoration: none; text-decoration: none;
} }
[data-template=store] #store__container .store__product .link-block { [data-template=home] #store__container .store__product .link-block {
display: block; display: block;
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -1057,23 +1057,23 @@ body.is-fullscreen {
left: 0; left: 0;
cursor: pointer; cursor: pointer;
} }
[data-template=store] #store__container .store__product:hover figure { [data-template=home] #store__container .store__product:hover figure {
overflow: hidden; overflow: hidden;
} }
[data-template=store] #store__container .store__product:hover img { [data-template=home] #store__container .store__product:hover img {
transform: scale(1.05); transform: scale(1.05);
} }
[data-template=store] #store__container .store__product:hover .line-1 { [data-template=home] #store__container .store__product:hover .line-1 {
text-decoration: underline; text-decoration: underline;
} }
@media screen and (max-width: 720px) { @media screen and (max-width: 720px) {
[data-template=store] #store__container .store__product { [data-template=home] #store__container .store__product {
margin-top: calc(var(--spacing) * 1.5); margin-top: calc(var(--spacing) * 1.5);
margin-bottom: calc(var(--spacing) * 0.5); margin-bottom: calc(var(--spacing) * 0.5);
} }
} }
@media screen and (min-width: 720px) { @media screen and (min-width: 720px) {
[data-template=store] #store__container { [data-template=home] #store__container {
display: grid; display: grid;
grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(6, 1fr);
-moz-column-gap: calc(var(--padding-body) * 0.75); -moz-column-gap: calc(var(--padding-body) * 0.75);
@ -1082,11 +1082,11 @@ body.is-fullscreen {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
[data-template=store] #store__container .store__product { [data-template=home] #store__container .store__product {
grid-column: span 2; grid-column: span 2;
} }
[data-template=store] #store__container .store__product:nth-of-type(1), [data-template=home] #store__container .store__product:nth-of-type(1),
[data-template=store] #store__container .store__product:nth-of-type(2) { [data-template=home] #store__container .store__product:nth-of-type(2) {
grid-column: span 3; grid-column: span 3;
} }
} }
@ -1244,24 +1244,26 @@ body.is-fullscreen {
justify-content: center; justify-content: center;
padding: calc(var(--spacing) * 4) var(--spacing); padding: calc(var(--spacing) * 4) var(--spacing);
} }
[data-template=thanks] .thanks-content { [data-template=thanks] .thanks-page .thanks-content {
text-align: center; text-align: center;
max-width: 600px; max-width: 600px;
display: flex;
flex-direction: column;
align-items: center;
} }
[data-template=thanks] .thanks-content h1 { [data-template=thanks] .thanks-page .thanks-content h1 {
font-size: var(--fs-x-big);
margin-bottom: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 2);
} }
[data-template=thanks] .thanks-content .thanks-message { [data-template=thanks] .thanks-page .thanks-content .thanks-message {
font-size: var(--fs-big); font-size: var(--fs-medium);
margin-bottom: calc(var(--spacing) * 3); line-height: 1.1;
line-height: 1.6;
} }
[data-template=thanks] .thanks-content .thanks-message p { [data-template=thanks] .thanks-page .thanks-content .thanks-message p {
margin-bottom: var(--spacing); margin-bottom: var(--spacing);
} }
[data-template=thanks] .thanks-content .thanks-actions { [data-template=thanks] .thanks-page .thanks-content .thanks-actions {
margin-top: calc(var(--spacing) * 3); width: -moz-max-content;
width: max-content;
} }
[data-template=thanks] #site-footer { [data-template=thanks] #site-footer {
border-top: none; border-top: none;

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

2
assets/css/template/shop/_layout.scss
View file

@ -1,4 +1,4 @@
[data-template="store"] { [data-template="home"] {
main { main {
margin-bottom: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 2);
} }

39
assets/css/template/shop/_thanks.scss
View file

@ -5,29 +5,30 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: calc(var(--spacing) * 4) var(--spacing); padding: calc(var(--spacing) * 4) var(--spacing);
}
.thanks-content { .thanks-content {
text-align: center; text-align: center;
max-width: 600px; max-width: 600px;
display: flex;
flex-direction: column;
align-items: center;
h1 { h1 {
font-size: var(--fs-x-big); margin-bottom: calc(var(--spacing) * 2);
margin-bottom: calc(var(--spacing) * 2);
}
.thanks-message {
font-size: var(--fs-big);
margin-bottom: calc(var(--spacing) * 3);
line-height: 1.6;
p {
margin-bottom: var(--spacing);
} }
}
.thanks-actions { .thanks-message {
margin-top: calc(var(--spacing) * 3); font-size: var(--fs-medium);
line-height: 1.1;
p {
margin-bottom: var(--spacing);
}
}
.thanks-actions {
width: max-content;
}
} }
} }

BIN
content/1_tshirt-index-01/test.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 262 KiB

9
content/1_tshirt-index-01/test.png.fr.txt Normal file
View file

@ -0,0 +1,9 @@
Sort: 2
----
Uuid: elxkhcta8dkjhr60
----
Template: image

13
content/thanks/thanks.en.txt Normal file
View file

@ -0,0 +1,13 @@
Title: Thank you for your order
----
Text:
Your order has been confirmed! You will receive a confirmation email shortly.
Thank you for your purchase.
----
Template: thanks

4
content/thanks/thanks.fr.txt
View file

@ -7,3 +7,7 @@ Text:
Votre commande a été confirmée ! Vous allez recevoir un email de confirmation sous peu. Votre commande a été confirmée ! Vous allez recevoir un email de confirmation sous peu.
Merci pour votre achat. Merci pour votre achat.
----
Template: thanks

10
content/thanks/thanks.txt
View file

@ -1,9 +1 @@
Title: Thank you for your order Title: Thanks
----
Text:
Your order has been confirmed! You will receive a confirmation email shortly.
Thank you for your purchase.

2
site/snippets/header.php
View file

@ -13,7 +13,7 @@
<link rel="stylesheet" type="text/css" href="<?= url('assets/fonts/stylesheet.css') ?>?version-cache-prevent<?= rand(0, 1000)?>" /> <link rel="stylesheet" type="text/css" href="<?= url('assets/fonts/stylesheet.css') ?>?version-cache-prevent<?= rand(0, 1000)?>" />
<link rel="stylesheet" type="text/css" href="<?= url('assets/css/style.css') ?>" /> <link rel="stylesheet" type="text/css" href="<?= url('assets/css/style.css') ?>" />
</head> </head>
<body data-template="<?= $template ?? 'default' ?>"> <body data-template="<?= $page->template() ?>">
<header id="site-header"> <header id="site-header">
<div class="header-left"></div> <div class="header-left"></div>