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

Compare commits

base: Antoine:1a29a57d0fa24063fceb2ab3ad931e89a01a92c7
Branches Tags
Antoine:main
..
compare: Antoine:83bdaf0682cccb9f21a05b0ef82d844b25c43097
Branches Tags
Antoine:main

No commits in common. "1a29a57d0fa24063fceb2ab3ad931e89a01a92c7" and "83bdaf0682cccb9f21a05b0ef82d844b25c43097" have entirely different histories.
1a29a57d0f ... 83bdaf0682

7 changed files with 62 additions and 244 deletions
Show Stats Expand all files Collapse all files

182
css/app.css
View File

@ -991,11 +991,6 @@ h2{
line-height: 1; line-height: 1;
} }
p{
font-weight: 300;
line-height: 1.6;
}
body.wp-admin h1:not(.editor-visual-editor h1), body.wp-admin h1:not(.editor-visual-editor h1),
body.wp-admin h2:not(.editor-visual-editor h2), body.wp-admin h2:not(.editor-visual-editor h2),
body.wp-admin h3:not(.editor-visual-editor h3), body.wp-admin h3:not(.editor-visual-editor h3),
@ -1094,60 +1089,12 @@ body.wp-admin h6:not(.editor-visual-editor h6) {
} }
.article-card{ .article-card{
position: relative;
border-width: 1px; border-width: 1px;
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(19 111 99 / var(--tw-border-opacity)); border-color: rgb(19 111 99 / var(--tw-border-opacity));
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity)); background-color: rgb(255 255 255 / var(--tw-bg-opacity));
padding: 1.5rem; padding: 1rem;
}
.article-card:after{
pointer-events: none;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
height: 100%;
width: 100%;
--tw-border-opacity: 1;
border-color: rgb(19 111 99 / var(--tw-border-opacity));
--tw-content: '';
content: var(--tw-content);
border-width: 4px;
opacity: 0;
}
.article-card:hover:after {
opacity: 1;
}
.article-card:hover .article-card__link-button svg{
--tw-translate-x: 0.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.article-card__link-button{
margin-top: 2rem;
display: block;
width: 100px;
height: 100px;
}
.article-card__link-button svg {
transition: transform 0.3s ease-in-out;
}
.article-card__link-button svg path,
.article-card__link-button svg circle{
stroke: #136F63;
}
.article-card .content-meta{
--tw-text-opacity: 1;
color: rgb(19 111 99 / var(--tw-text-opacity));
} }
.article-card__title{ .article-card__title{
@ -1216,16 +1163,25 @@ body.wp-admin h6:not(.editor-visual-editor h6) {
width: -webkit-fit-content; width: -webkit-fit-content;
width: -moz-fit-content; width: -moz-fit-content;
width: fit-content; width: fit-content;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(19 111 99 / var(--tw-border-opacity));
background-color: transparent; background-color: transparent;
padding-left: 0.75rem; padding-left: 0.75rem;
padding-right: 0.75rem; padding-right: 0.75rem;
padding-top: 0.5rem; padding-top: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
--tw-text-opacity: 1; }
color: rgb(19 111 99 / var(--tw-text-opacity));
.article-tag:after {
content: '';
position: absolute;
top: 0px;
left: 50%;
height: 100%;
width: 100%;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(19 111 99 / var(--tw-border-opacity));
translate: -50% 0;
transform: perspective(800px) rotateY(10deg);
} }
.article-tag:hover{ .article-tag:hover{
@ -2031,12 +1987,11 @@ article > *:not(.entry-content),
.block-dernieres-dynamiques{ .block-dernieres-dynamiques{
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(19 111 99 / var(--tw-bg-opacity)); background-color: rgb(255 248 235 / var(--tw-bg-opacity));
padding-left: 3rem; padding-left: 3rem;
padding-right: 3rem; padding-right: 3rem;
padding-top: 5rem; padding-top: 8rem;
--tw-text-opacity: 1; padding-bottom: 8rem;
color: rgb(255 255 255 / var(--tw-text-opacity));
} }
@media (min-width: 1280px){ @media (min-width: 1280px){
@ -2046,15 +2001,6 @@ article > *:not(.entry-content),
} }
} }
.block-dernieres-dynamiques {
overflow: hidden;
}
.block-dernieres-dynamiques *:not(.article-card *){
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.block-dernieres-dynamiques__inner{ .block-dernieres-dynamiques__inner{
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -2094,7 +2040,7 @@ article > *:not(.entry-content),
display: block; display: block;
width: 100%; width: 100%;
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity)); background-color: rgb(19 111 99 / var(--tw-bg-opacity));
height: 1px; height: 1px;
content: ' '; content: ' ';
} }
@ -2122,7 +2068,7 @@ article > *:not(.entry-content),
.block-dernieres-dynamiques__header .header-link svg path, .block-dernieres-dynamiques__header .header-link svg path,
.block-dernieres-dynamiques__header .header-link svg circle{ .block-dernieres-dynamiques__header .header-link svg circle{
stroke: #fff; stroke: #136F63;
stroke-width: 2; stroke-width: 2;
} }
@ -2162,7 +2108,7 @@ article > *:not(.entry-content),
.block-dernieres-dynamiques__issue-title{ .block-dernieres-dynamiques__issue-title{
padding-bottom: 3rem; padding-bottom: 3rem;
font-size: 4.5rem; font-size: 3.75rem;
text-transform: uppercase; text-transform: uppercase;
line-height: 1.1; line-height: 1.1;
} }
@ -2170,7 +2116,7 @@ article > *:not(.entry-content),
.block-dernieres-dynamiques__issue-content-wrapper{ .block-dernieres-dynamiques__issue-content-wrapper{
display: grid; display: grid;
gap: 3rem; gap: 3rem;
padding-bottom: 6rem; padding-bottom: 3rem;
} }
@media (min-width: 1440px){ @media (min-width: 1440px){
@ -2183,13 +2129,20 @@ article > *:not(.entry-content),
grid-template-columns: 61.8fr 38.2fr; grid-template-columns: 61.8fr 38.2fr;
} }
.block-dernieres-dynamiques__issue-content {
}
.block-dernieres-dynamiques__issue-thumbnail-wrapper{ .block-dernieres-dynamiques__issue-thumbnail-wrapper{
position: relative; position: relative;
} }
.block-dernieres-dynamiques__issue-thumbnail-wrapper .card-background{ .block-dernieres-dynamiques__issue-thumbnail-wrapper .card-background{
position: absolute; position: absolute;
top: 5rem; top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
top: 1.25rem;
left: 2rem; left: 2rem;
border-width: 1px; border-width: 1px;
--tw-border-opacity: 1; --tw-border-opacity: 1;
@ -2214,10 +2167,10 @@ article > *:not(.entry-content),
background-color: rgb(239 232 255 / var(--tw-bg-opacity)); background-color: rgb(239 232 255 / var(--tw-bg-opacity));
--tw-content: ''; --tw-content: '';
content: var(--tw-content); content: var(--tw-content);
width: calc(100% - 42px); width: calc(100% - 32px);
height: calc(100% - 42px); height: calc(100% - 32px);
left: 21px; left: 16px;
top: 21px; top: 16px;
z-index: 0; z-index: 0;
} }
@ -2227,68 +2180,24 @@ article > *:not(.entry-content),
border-color: rgb(19 111 99 / var(--tw-border-opacity)); border-color: rgb(19 111 99 / var(--tw-border-opacity));
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity)); background-color: rgb(255 255 255 / var(--tw-bg-opacity));
/* transform: perspective(800px) rotateY(10deg) skewX(2deg); */ transform: perspective(800px) rotateY(10deg) skewX(2deg);
height: 330px; height: 300px;
position: relative; position: relative;
z-index: 10; z-index: 10;
} }
.block-dernieres-dynamiques__issue-thumbnail img { .block-dernieres-dynamiques__issue-thumbnail img {
width: calc(100% - 42px); height: 100%;
height: calc(100% - 42px);
left: 21px;
top: 21px;
-o-object-fit: cover; -o-object-fit: cover;
object-fit: cover; object-fit: cover;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
.block-dernieres-dynamiques__issue-description-title{
padding-bottom: 1rem;
font-size: 1.25rem;
font-weight: 700;
text-transform: uppercase;
font-family: 'Nunito Sans', sans-serif;
letter-spacing: 4px;
}
.block-dernieres-dynamiques__issue-description{ .block-dernieres-dynamiques__issue-description{
font-size: 1.25rem; font-size: 1.25rem;
} }
.block-dernieres-dynamiques .related-articles{
position: relative;
padding-bottom: 2rem;
}
.block-dernieres-dynamiques .related-articles > *{
position: relative;
z-index: 10;
}
.block-dernieres-dynamiques .related-articles:after{
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;
left: 50%;
width: 100vw;
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
--tw-bg-opacity: 1;
background-color: rgb(239 232 255 / var(--tw-bg-opacity));
--tw-content: '';
content: var(--tw-content);
z-index: 0;
/* opacity: 0.5; */
top: 100px;
height: calc(100% - 150px);
transform: translateY(100px) translateX(-50%)
perspective(800px) skewX(1deg) rotateZ(-2deg)
rotateY(-4deg) scaleX(1.98);
}
.block-dernieres-dynamiques .related-articles__title{ .block-dernieres-dynamiques .related-articles__title{
padding-bottom: 2rem; padding-bottom: 2rem;
font-size: 1rem; font-size: 1rem;
@ -2299,23 +2208,6 @@ article > *:not(.entry-content),
font-family: 'Nunito Sans', sans-serif; font-family: 'Nunito Sans', sans-serif;
} }
.block-dernieres-dynamiques .related-articles__show-all{
margin-left: auto;
margin-right: auto;
margin-top: 3rem;
display: block;
padding-bottom: 2rem;
text-align: center;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
--tw-text-opacity: 1;
color: rgb(19 111 99 / var(--tw-text-opacity));
font-family: 'Nunito Sans', sans-serif;
}
/* Home */ /* Home */
@media (min-width: 600px){ @media (min-width: 600px){

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

@ -23,11 +23,6 @@ h2 {
@apply text-5xl; @apply text-5xl;
} }
p {
@apply font-light;
line-height: 1.6;
}
body.wp-admin h1:not(.editor-visual-editor h1), body.wp-admin h1:not(.editor-visual-editor h1),
body.wp-admin h2:not(.editor-visual-editor h2), body.wp-admin h2:not(.editor-visual-editor h2),
body.wp-admin h3:not(.editor-visual-editor h3), body.wp-admin h3:not(.editor-visual-editor h3),

62
resources/css/blocks/dernieres-dynamiques.css
View File

@ -1,11 +1,5 @@
.block-dernieres-dynamiques { .block-dernieres-dynamiques {
@apply bg-primary text-white px-12 xl:px-24 pt-20; @apply bg-carhop-orange-50 px-12 xl:px-24 py-32;
overflow: hidden;
*:not(.article-card *) {
@apply text-white;
}
&__inner { &__inner {
@apply max-w-screen-2xl mx-auto; @apply max-w-screen-2xl mx-auto;
} }
@ -19,7 +13,7 @@
@apply block shrink-0; @apply block shrink-0;
} }
&:after { &:after {
@apply w-full z-50 bg-white block mb-2; @apply w-full z-50 bg-primary block mb-2;
height: 1px; height: 1px;
content: ' '; content: ' ';
} }
@ -36,7 +30,7 @@
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
path, path,
circle { circle {
@apply stroke-white stroke-2; @apply stroke-primary stroke-2;
} }
} }
&:hover { &:hover {
@ -62,19 +56,20 @@
} }
&__issue-title { &__issue-title {
@apply text-7xl uppercase pb-12; @apply text-6xl uppercase pb-12;
line-height: 1.1; line-height: 1.1;
} }
&__issue-content-wrapper { &__issue-content-wrapper {
@apply grid gap-12 2xl:gap-24 pb-24; @apply grid gap-12 2xl:gap-24 pb-12;
grid-template-columns: 61.8fr 38.2fr; grid-template-columns: 61.8fr 38.2fr;
} }
&__issue-content {
}
&__issue-thumbnail-wrapper { &__issue-thumbnail-wrapper {
@apply relative; @apply relative;
.card-background { .card-background {
@apply absolute border-primary border bg-white top-20 left-8; @apply absolute inset-0 border-primary border bg-white top-5 left-8;
height: 94%; height: 94%;
width: 104%; width: 104%;
transform: perspective(800px) rotateY(10deg) transform: perspective(800px) rotateY(10deg)
@ -84,10 +79,10 @@
&::before { &::before {
@apply content-[''] absolute inset-0 bg-carhop-purple-100 w-full h-full; @apply content-[''] absolute inset-0 bg-carhop-purple-100 w-full h-full;
width: calc(100% - 42px); width: calc(100% - 32px);
height: calc(100% - 42px); height: calc(100% - 32px);
left: 21px; left: 16px;
top: 21px; top: 16px;
z-index: 0; z-index: 0;
} }
@ -95,51 +90,26 @@
} }
&__issue-thumbnail { &__issue-thumbnail {
@apply bg-white border-primary border relative; @apply bg-white border-primary border relative;
/* transform: perspective(800px) rotateY(10deg) skewX(2deg); */ transform: perspective(800px) rotateY(10deg) skewX(2deg);
height: 330px; height: 300px;
position: relative; position: relative;
z-index: 10; z-index: 10;
img { img {
width: calc(100% - 42px); height: 100%;
height: calc(100% - 42px);
left: 21px;
top: 21px;
object-fit: cover; object-fit: cover;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
} }
&__issue-description-title {
@apply uppercase nunito text-xl pb-4 font-bold;
letter-spacing: 4px;
}
&__issue-description { &__issue-description {
@apply text-xl; @apply text-xl;
} }
.related-articles { .related-articles {
@apply relative pb-8;
& > * {
@apply relative z-10;
}
&:after {
@apply content-[''] absolute inset-0 bg-carhop-purple-100 w-screen left-1/2 -translate-x-1/2;
z-index: 0;
/* opacity: 0.5; */
top: 100px;
height: calc(100% - 150px);
transform: translateY(100px) translateX(-50%)
perspective(800px) skewX(1deg) rotateZ(-2deg)
rotateY(-4deg) scaleX(1.98);
}
&__title { &__title {
@apply text-base font-extrabold uppercase pb-8 tracking-widest nunito; @apply text-base font-extrabold uppercase pb-8 tracking-widest nunito;
} }
&__show-all {
@apply text-base font-extrabold uppercase pb-8 tracking-widest nunito text-primary text-center mx-auto block mt-12;
}
} }
} }

33
resources/css/components/article-card.css
View File

@ -1,37 +1,6 @@
.article-card { .article-card {
@apply bg-white border border-primary p-6 relative; @apply bg-white border border-primary p-4;
&:after {
@apply content-[''] absolute inset-0 border-primary w-full h-full pointer-events-none;
border-width: 4px;
opacity: 0;
}
&:hover {
&:after {
opacity: 1;
}
.article-card__link-button {
svg {
@apply translate-x-2;
}
}
}
&__link-button {
@apply block mt-8;
width: 100px;
height: 100px;
svg {
transition: transform 0.3s ease-in-out;
path,
circle {
@apply stroke-primary;
}
}
}
.content-meta {
@apply text-primary;
}
&__title { &__title {
@apply text-3xl font-medium uppercase pb-4; @apply text-3xl font-medium uppercase pb-4;
} }

8
resources/css/components/article-tag.css
View File

@ -1,5 +1,11 @@
.article-tag { .article-tag {
@apply w-fit bg-transparent px-3 py-2 relative text-primary border border-primary; @apply w-fit bg-transparent px-3 py-2 relative;
&:after {
content: '';
@apply w-full h-full absolute top-0 left-1/2 border border-primary;
translate: -50% 0;
transform: perspective(800px) rotateY(10deg);
}
&:hover { &:hover {
@apply bg-primary text-white; @apply bg-primary text-white;

15
resources/img/carhop-fleche-full.svg
View File

@ -1,15 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="fleche-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77 77">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #000;
stroke-width: 2px;
}
</style>
</defs>
<path class="cls-1" d="M50.77,37.45h-23.13"/>
<path class="cls-1" d="M36.09,51.64l14.68-14.19-14.68-14.19"/>
<circle class="cls-1" cx="38.5" cy="38.5" r="37.5"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 427 B

1
style.css
View File

@ -3,4 +3,5 @@ Theme Name: Carhop
Author: Deligraph Author: Deligraph
Author URI: https://deligraph.com/ Author URI: https://deligraph.com/
Version: 1.0.0 Version: 1.0.0
*/ */