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;
}
p{
font-weight: 300;
line-height: 1.6;
}
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),
@ -1094,60 +1089,12 @@ body.wp-admin h6:not(.editor-visual-editor h6) {
}
.article-card{
position: relative;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(19 111 99 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
padding: 1.5rem;
}
.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));
padding: 1rem;
}
.article-card__title{
@ -1216,16 +1163,25 @@ body.wp-admin h6:not(.editor-visual-editor h6) {
width: -webkit-fit-content;
width: -moz-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;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 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{
@ -2031,12 +1987,11 @@ article > *:not(.entry-content),
.block-dernieres-dynamiques{
--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-right: 3rem;
padding-top: 5rem;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
padding-top: 8rem;
padding-bottom: 8rem;
}
@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{
margin-left: auto;
margin-right: auto;
@ -2094,7 +2040,7 @@ article > *:not(.entry-content),
display: block;
width: 100%;
--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;
content: ' ';
}
@ -2122,7 +2068,7 @@ article > *:not(.entry-content),
.block-dernieres-dynamiques__header .header-link svg path,
.block-dernieres-dynamiques__header .header-link svg circle{
stroke: #fff;
stroke: #136F63;
stroke-width: 2;
}
@ -2162,7 +2108,7 @@ article > *:not(.entry-content),
.block-dernieres-dynamiques__issue-title{
padding-bottom: 3rem;
font-size: 4.5rem;
font-size: 3.75rem;
text-transform: uppercase;
line-height: 1.1;
}
@ -2170,7 +2116,7 @@ article > *:not(.entry-content),
.block-dernieres-dynamiques__issue-content-wrapper{
display: grid;
gap: 3rem;
padding-bottom: 6rem;
padding-bottom: 3rem;
}
@media (min-width: 1440px){
@ -2183,13 +2129,20 @@ article > *:not(.entry-content),
grid-template-columns: 61.8fr 38.2fr;
}
.block-dernieres-dynamiques__issue-content {
}
.block-dernieres-dynamiques__issue-thumbnail-wrapper{
position: relative;
}
.block-dernieres-dynamiques__issue-thumbnail-wrapper .card-background{
position: absolute;
top: 5rem;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
top: 1.25rem;
left: 2rem;
border-width: 1px;
--tw-border-opacity: 1;
@ -2214,10 +2167,10 @@ article > *:not(.entry-content),
background-color: rgb(239 232 255 / var(--tw-bg-opacity));
--tw-content: '';
content: var(--tw-content);
width: calc(100% - 42px);
height: calc(100% - 42px);
left: 21px;
top: 21px;
width: calc(100% - 32px);
height: calc(100% - 32px);
left: 16px;
top: 16px;
z-index: 0;
}
@ -2227,68 +2180,24 @@ article > *:not(.entry-content),
border-color: rgb(19 111 99 / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
/* transform: perspective(800px) rotateY(10deg) skewX(2deg); */
height: 330px;
transform: perspective(800px) rotateY(10deg) skewX(2deg);
height: 300px;
position: relative;
z-index: 10;
}
.block-dernieres-dynamiques__issue-thumbnail img {
width: calc(100% - 42px);
height: calc(100% - 42px);
left: 21px;
top: 21px;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
position: relative;
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{
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{
padding-bottom: 2rem;
font-size: 1rem;
@ -2299,23 +2208,6 @@ article > *:not(.entry-content),
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 */
@media (min-width: 600px){

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

@ -23,11 +23,6 @@ h2 {
@apply text-5xl;
}
p {
@apply font-light;
line-height: 1.6;
}
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),

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

@ -1,11 +1,5 @@
.block-dernieres-dynamiques {
@apply bg-primary text-white px-12 xl:px-24 pt-20;
overflow: hidden;
*:not(.article-card *) {
@apply text-white;
}
@apply bg-carhop-orange-50 px-12 xl:px-24 py-32;
&__inner {
@apply max-w-screen-2xl mx-auto;
}
@ -19,7 +13,7 @@
@apply block shrink-0;
}
&:after {
@apply w-full z-50 bg-white block mb-2;
@apply w-full z-50 bg-primary block mb-2;
height: 1px;
content: ' ';
}
@ -36,7 +30,7 @@
transition: transform 0.3s ease-in-out;
path,
circle {
@apply stroke-white stroke-2;
@apply stroke-primary stroke-2;
}
}
&:hover {
@ -62,19 +56,20 @@
}
&__issue-title {
@apply text-7xl uppercase pb-12;
@apply text-6xl uppercase pb-12;
line-height: 1.1;
}
&__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;
}
&__issue-content {
}
&__issue-thumbnail-wrapper {
@apply relative;
.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%;
width: 104%;
transform: perspective(800px) rotateY(10deg)
@ -84,10 +79,10 @@
&::before {
@apply content-[''] absolute inset-0 bg-carhop-purple-100 w-full h-full;
width: calc(100% - 42px);
height: calc(100% - 42px);
left: 21px;
top: 21px;
width: calc(100% - 32px);
height: calc(100% - 32px);
left: 16px;
top: 16px;
z-index: 0;
}
@ -95,51 +90,26 @@
}
&__issue-thumbnail {
@apply bg-white border-primary border relative;
/* transform: perspective(800px) rotateY(10deg) skewX(2deg); */
height: 330px;
transform: perspective(800px) rotateY(10deg) skewX(2deg);
height: 300px;
position: relative;
z-index: 10;
img {
width: calc(100% - 42px);
height: calc(100% - 42px);
left: 21px;
top: 21px;
height: 100%;
object-fit: cover;
position: relative;
z-index: 2;
}
}
&__issue-description-title {
@apply uppercase nunito text-xl pb-4 font-bold;
letter-spacing: 4px;
}
&__issue-description {
@apply text-xl;
}
.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 {
@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 {
@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 {
@apply text-3xl font-medium uppercase pb-4;
}

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

@ -1,5 +1,11 @@
.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 {
@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 URI: https://deligraph.com/
Version: 1.0.0
*/