Antoine/carhop__carhop-theme__DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Antoine:d3edfad1dffa21185a771b743aee5a6614a03a3d
Branches Tags
Antoine:main
..
compare: Antoine:2ae40153fcca2e246665f9ad7a0d27a757fd1cfe
Branches Tags
Antoine:main

No commits in common. "d3edfad1dffa21185a771b743aee5a6614a03a3d" and "2ae40153fcca2e246665f9ad7a0d27a757fd1cfe" have entirely different histories.
d3edfad1df ... 2ae40153fc

22 changed files with 24 additions and 317 deletions
Show Stats Expand all files Collapse all files

9
resources/css/app.css
View File

@ -11,7 +11,6 @@
@import './base/links.css';
@import './base/animation.css';
@import './base/format-types.css';
@import './base/carhop-specific-base.css';
/* ########### FORMS ############ */
@import './forms/forms.css';
@ -72,19 +71,11 @@
@import './blocks/our-collections.css';
@import './blocks/featured-news.css';
@import './blocks/notice-panel.css';
@import './blocks/story-timeline-step.css';
@import './blocks/story-timeline.css';
@import './blocks/image-stack.css';
@import './blocks/highlight-timeline-step.css';
@import './blocks/highlight-timeline.css';
@import './blocks/wp-block-heading.css';
@import './blocks/wp-block-list.css';
@import './blocks/wp-block-table.css';
@import './blocks/wp-block-details.css';
@import './blocks/wp-block-image.css';
@import './blocks/variants.css';
/* ########### LIBS ############ */
@import './libs/swiper.css';

14
resources/css/base/carhop-specific-base.css
View File

@ -1,14 +0,0 @@
body.is-website-carhop {
h3 {
@apply text-3xl;
}
h1,
h2,
h3,
h4,
h5,
h6 {
@apply uppercase;
}
}

15
resources/css/base/typography.css
View File

@ -33,6 +33,21 @@ li {
@apply pb-4;
}
/* body.wp-admin h1:not(.editor-visual-editor h1),
body.wp-admin h2:not(.editor-visual-editor h2),
body.wp-admin h3:not(.editor-visual-editor h3),
body.wp-admin h4:not(.editor-visual-editor h4),
body.wp-admin h5:not(.editor-visual-editor h5),
body.wp-admin h6:not(.editor-visual-editor h6) {
font-family: initial !important;
font-style: initial !important;
font-size: initial !important;
line-height: initial !important;
letter-spacing: initial !important;
text-transform: initial !important;
text-align: initial !important;
} */
.nunito {
font-family: 'Nunito Sans', sans-serif;
}

5
resources/css/blocks/chapter-section.css
View File

@ -162,8 +162,3 @@
+ .chapter-section--width-full.chapter-section--has-background {
@apply !-mt-20;
}
.wp-block-carhop-blocks-content-box .chapter-section {
@apply py-8 md:py-10;
min-height: unset;
}

17
resources/css/blocks/content-box.css
View File

@ -20,16 +20,10 @@
&--bg-light {
--content-box-text-color: var(--wp--preset--color--carhop-green);
--advised-text-color: var(--wp--preset--color--carhop-green, inherit);
}
&--bg-dark {
--content-box-text-color: #fff;
--advised-text-color: #fff;
p {
color: var(--advised-text-color, inherit);
}
.wp-block-carhop-blocks-cta {
--cta-current-color: #fff;
@ -151,14 +145,3 @@ body.page .content-box {
@apply font-bold tracking-bigbig;
}
}
.content-box--variant-backgrounded.alignfull
+ .content-box--variant-backgrounded.alignfull {
@apply !mt-0;
}
.content-box--variant-backgrounded.alignfull:has(
+ .content-box--variant-backgrounded.alignfull
) {
@apply !mb-0;
}

4
resources/css/blocks/heading.css
View File

@ -66,10 +66,8 @@
&.is-style-stroked-after {
@apply flex items-end gap-4;
overflow-wrap: anywhere;
--advised-text-color: currentColor;
&:after {
@apply flex-auto border-b-2 border-solid mb-2;
border-bottom: 2px solid var(--advised-text-color, --wp--preset--color--primary);
@apply flex-auto border-b-2 border-primary border-solid mb-2;
content: '';
display: block;
}

29
resources/css/blocks/highlight-timeline-step.css
View File

@ -1,29 +0,0 @@
.highlight-timeline-step {
&__innerblocks {
@apply pt-12 pb-2;
> p:last-child {
@apply !pb-0 mb-0;
}
.carhop-heading__innerblocks {
@apply gap-2;
}
}
&__year {
@apply h-auto w-full flex !p-12 justify-center items-center text-8xl text-white fjalla;
}
&__year-background {
svg {
polygon {
@apply !fill-purple-200;
}
}
}
&__year-text {
@apply fjalla !pt-12 !pb-10;
font-size: clamp(4rem, 20vw, 20rem) !important;
line-height: 1.2 !important;
}
}

23
resources/css/blocks/highlight-timeline.css
View File

@ -1,23 +0,0 @@
.highlight-timeline {
--current-color: var(--advised-text-color, red);
.swiper-pagination-bullet {
@apply !pb-10 font-normal text-base;
color: var(--current-color, white);
&:after {
top: unset !important;
bottom: 0 !important;
background-color: var(--current-color, white);
}
}
p {
@apply text-lg;
}
.swiper-button-next,
.swiper-button-prev {
--swiper-navigation-size: 32px;
@apply filter-white !p-10;
}
}

21
resources/css/blocks/image-stack.css
View File

@ -1,21 +0,0 @@
.wp-block-carhop-blocks-image-stack {
.image-stack-item {
@apply border-2 border-primary p-4 w-fit bg-white;
img {
@apply block grayscale;
}
&.rotate-right {
@apply rotate-2;
}
&.rotate-left {
@apply -rotate-2;
}
}
&:hover {
img {
@apply grayscale-0;
}
}
}

29
resources/css/blocks/narrative-card.css
View File

@ -75,35 +75,6 @@
}
}
/* Aspect ratio modifiers applied to the cover container */
&__cover--ratio-1-1 {
aspect-ratio: 1 / 1;
}
&__cover--ratio-4-3 {
aspect-ratio: 4 / 3;
}
&__cover--ratio-3-4 {
aspect-ratio: 3 / 4;
}
&__cover--ratio-3-2 {
aspect-ratio: 3 / 2;
}
&__cover--ratio-2-3 {
aspect-ratio: 2 / 3;
}
&__cover--ratio-16-9 {
aspect-ratio: 16 / 9;
}
&__cover--ratio-21-9 {
aspect-ratio: 21 / 9;
}
&__cover--ratio-9-16 {
aspect-ratio: 9 / 16;
}
&__cover--ratio-9-21 {
aspect-ratio: 9 / 21;
}
&__content {
p {
@apply text-primary text-lg;

11
resources/css/blocks/scroll-story-block.css
View File

@ -1,14 +1,3 @@
.scroll-story-block {
@apply py-12 flex flex-col gap-12 overflow-x-hidden;
&--has-numbering {
counter-reset: narrative-card;
.narrative-card .narrative-card__content {
&:before {
@apply bg-primary text-white w-12 h-12 flex items-center justify-center mb-12;
content: counter(narrative-card);
counter-increment: narrative-card;
}
}
}
}

33
resources/css/blocks/story-timeline-step.css
View File

@ -1,33 +0,0 @@
.story-timeline-step {
@apply max-w-screen-xl mx-auto !pb-24;
&__year {
@apply text-center text-primary !font-bold flex items-center justify-center gap-6 tracking-widest !pb-12;
&:after,
&:before {
content: '';
@apply block w-full bg-primary;
height: 1px;
}
}
&__innerblocks {
p {
@apply mt-0;
}
}
.wp-block-image {
img {
@apply grayscale;
&:hover {
@apply grayscale-0;
}
}
}
.wp-block-columns {
@apply !mb-16;
}
}

24
resources/css/blocks/story-timeline.css
View File

@ -1,24 +0,0 @@
.wp-block-carhop-blocks-story-timeline {
@apply flex gap-12 mx-auto max-w-screen-xl;
aside.story-timeline__years {
@apply text-white;
ul {
@apply sticky top-0 left-0 !pt-6;
@apply list-none p-0 m-0 flex flex-col gap-4;
li {
@apply list-none bg-white text-primary p-2 border border-primary text-3xl fjalla;
}
li.story-timeline__year[data-active='false'] {
@apply opacity-30;
}
li.story-timeline__year[data-active='true'] {
@apply opacity-100;
}
}
}
}
.wp-block-carhop-blocks-heading + .wp-block-carhop-blocks-story-timeline {
@apply mt-6;
}

22
resources/css/blocks/variants.css
View File

@ -1,22 +0,0 @@
.block-custom-video.is-style-stacked-background,
.wp-block-embed.is-style-stacked-background {
@apply relative z-10;
> * {
@apply z-10;
}
.wp-block-embed__wrapper {
@apply p-4 bg-white border border-primary;
}
&:after {
@apply content-[''] absolute inset-0 bg-white border border-primary w-full h-full top-0 left-0;
z-index: 0;
transform: translate(16px, 40px) rotate(-4deg);
background: linear-gradient(
var(--wp--preset--color--primary),
var(--wp--preset--color--primary)
)
center/calc(100% - 30px) calc(100% - 30px) no-repeat,
white;
}
}

46
resources/css/blocks/wp-block-image.css
View File

@ -1,46 +0,0 @@
.wp-block-image.is-style-framed {
@apply border-2 p-4 w-fit bg-white;
--advised-text-color: currentColor;
border-color: var(--advised-text-color, --wp--preset--color--primary);
img {
@apply block;
}
&.rotate-right {
@apply rotate-2;
}
&.rotate-left {
@apply -rotate-2;
}
}
.wp-block-image.is-style-stacked {
@apply w-fit bg-green-200 relative z-30 !mb-12;
> * {
@apply relative z-30;
}
img {
@apply block relative z-30 p-4 bg-white border-2;
--advised-text-color: currentColor;
border-color: var(--advised-text-color, --wp--preset--color--primary);
}
&.rotate-right {
@apply rotate-2;
}
&.rotate-left {
@apply -rotate-2;
}
&:after {
@apply content-[''] absolute inset-0 bg-white border border-primary w-full h-full top-0 left-0;
z-index: 10;
transform: translate(40px, 40px) rotate(-4deg);
background: linear-gradient(
var(--wp--preset--color--primary),
var(--wp--preset--color--primary)
)
center/calc(100% - 30px) calc(100% - 30px) no-repeat,
white;
}
}

2
resources/css/layout/footer.css
View File

@ -1,7 +1,7 @@
footer {
@apply w-full mx-auto px-4 md:px-12 pb-6 md:pb-32;
h3.section-title {
.section-title {
@apply text-lg nunito uppercase font-bold tracking-widest mb-6;
}

1
resources/css/libs/swiper.css
View File

@ -32,7 +32,6 @@
.swiper-button-next,
.swiper-button-prev {
@apply static block border border-primary p-12 rounded-full transition-all duration-300;
&:after {
@apply left-1/2 top-1/2 block w-fit;

3
resources/img/shapes/background-shape-A_purple.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="1440" height="1588" viewBox="0 0 1440 1588" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path preserveAspectRatio="none" d="M0 0H1440V1588L0 1559.71V0Z" fill="#EFE8FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 220 B

3
resources/img/shapes/background-shape-B_purple.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="1440" height="1588" viewBox="0 0 1440 1588" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path d="M0 77L1440 0V1588L0 1559.71L0 77Z" fill="#EFE8FF" preserveAspectRatio="none"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 226 B

11
resources/js/alternate-pictures.ts
View File

@ -1,11 +0,0 @@
export default function alternatePictures() {
const images = document.querySelectorAll('.wp-block-image.is-style-framed');
images.forEach((img, index) => {
if (index % 2 === 0) {
img.classList.add('rotate-left');
} else {
img.classList.add('rotate-right');
}
});
}

2
resources/js/app.ts
View File

@ -2,11 +2,9 @@ import menuInit from './header';
import initFooterShapes from './footer';
import handleScrollTop from './utilities/scroll-top';
import handleInsidePageScrolling from './page-scrolling';
import alternatePictures from './alternate-pictures';
window.addEventListener('load', function () {
menuInit();
initFooterShapes();
handleScrollTop();
handleInsidePageScrolling();
alternatePictures();
});

17
theme.json
View File

@ -3,11 +3,7 @@
"settings": {
"layout": {
"contentSize": "960px",
"wideSize": "1280px",
"xWideSize": "1400px",
"custom": {
"xWideSize": "1400px"
}
"wideSize": "1280px"
},
"spacing": {
"blockGap": true,
@ -134,17 +130,6 @@
"size": "1.875rem"
}
]
},
"styles": {
"blocks": {
"core/columns": {
"layout": {
"contentSize": "960px",
"wideSize": "1280px",
"xWideSize": "1400px"
}
}
}
}
}
}