From 0c6d6caf0aea77b88b54e43f0f080df19270bacf Mon Sep 17 00:00:00 2001 From: Antoine M Date: Wed, 5 Feb 2025 17:16:04 +0100 Subject: [PATCH] bundling --- css/app.css | 300 ++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 278 insertions(+), 22 deletions(-) diff --git a/css/app.css b/css/app.css index bf67f82..6ff7a7a 100644 --- a/css/app.css +++ b/css/app.css @@ -95,11 +95,23 @@ .wp-admin.post-type-portfolio .block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright):not(.wp-admin.post-type-portfolio .chapter-section)) { } +.wp-block-post-title { + text-transform: unset; + line-height: 1; +} + +.wp-block-post-title:before { + content: none; +} + .wp-admin.post-type-portfolio .is-root-container, .portfolio-single{ margin-left: auto; margin-right: auto; padding-top: 7rem; + /* & + *:not(.simple-screen) { + @apply xl:mt-32; + } */ } .wp-admin.post-type-portfolio .is-root-container h1, @@ -127,8 +139,8 @@ .portfolio-single p, .portfolio-single span { font-family: "Montserrat", sans-serif; - font-size: 0.875rem; - line-height: 1.25rem; + font-size: 0.75rem; + line-height: 1rem; line-height: 1.625; } @@ -151,16 +163,200 @@ .wp-admin.post-type-portfolio .is-root-container h2, .portfolio-single h2{ padding-bottom: 1.5rem; - font-size: 3rem; - line-height: 1; + line-height: 2.5rem; + font-weight: 700 !important; + font-size: 2.5rem; } -.project-card{ +.chapter-section + .peertube-integration{ + margin-top: 2rem; +} + +.portfolio-archive{ + padding-top: 8rem !important; +} + +/* @apply bigCaslon; */ + +.portfolio-archive h1:before, .portfolio-archive h2:before, .portfolio-archive h3:before, .portfolio-archive h4:before, .portfolio-archive h5:before, .portfolio-archive h6:before, .old-projects h1:before, .old-projects h2:before, .old-projects h3:before, .old-projects h4:before, .old-projects h5:before, .old-projects h6:before{ + --tw-content: none; + content: var(--tw-content); +} + +.portfolio-archive p, + .portfolio-archive span, + .old-projects p, + .old-projects span { + font-family: "Montserrat", sans-serif; + font-size: 0.875rem; + line-height: 1.25rem; + line-height: 1.625; +} + +.portfolio-archive strong, .old-projects strong{ + font-weight: 600; +} + +.portfolio-project-card{ margin-left: auto; margin-right: auto; - max-width: 1440px; + padding-left: 3rem; + padding-right: 3rem; + padding-top: 8rem; + max-width: 1800px; } +.portfolio-project-card__cover{ + display: block; + overflow: hidden; + --tw-bg-opacity: 1; + background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1)); + /* &:hover { + img { + transform: scale(1.02); + } + } */ +} + +.portfolio-project-card__cover img{ + width: 100%; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: center; + object-position: center; + mix-blend-mode: multiply; + transition: transform 0.3s ease-in-out; +} + +.portfolio-project-card--active .portfolio-project-card__cover:hover img { + transform: scale(1.02); +} + +.portfolio-project-card__details{ + display: grid; +} + +@media (min-width: 782px){ + .portfolio-project-card__details{ + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +.portfolio-project-card__details .client-name{ + padding-top: 1rem; + font-size: 1.125rem; + line-height: 1.75rem; + font-weight: 400; + text-decoration-line: underline; + text-underline-offset: 4px; +} + +.portfolio-project-card__details .excerpt{ + padding-top: 1rem; +} + +.portfolio-project-card__details .excerpt h3{ + font-size: 1.25rem; + /* @apply bigCaslon text-4xl; */ + /* @apply bigCaslon text-4xl; */ +} + +.portfolio-project-card__details .excerpt p{ + margin-bottom: 0px; + padding-bottom: 0px; + font-size: 0.875rem; + line-height: 1.25rem; + --tw-text-opacity: 1; + color: rgb(115 115 115 / var(--tw-text-opacity, 1)); +} + +.portfolio-project-card__details .terms{ + display: flex; + gap: 0.5rem; +} + +.portfolio-project-card .cta--read-project{ + margin-top: 1.5rem; + margin-bottom: 0px; + display: block; + width: -moz-fit-content; + width: fit-content; + font-size: 0.875rem; + line-height: 1.25rem; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); + position: relative; + display: flex; + align-items: center; + justify-content: center; + border-radius: 9999px; + --tw-bg-opacity: 1; + background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1)); + padding-top: 0.75rem; + padding-bottom: 0.75rem; + padding-left: 1.25rem; + padding-right: 1.25rem; +} + +.portfolio-project-card .cta--read-project:hover{ + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.portfolio-project-card .cta--read-project { + box-sizing: content-box; + transition: all 0.3s ease-in-out; + text-decoration: none; +} + +/* background-color: #34113F; */ + +/* background-color: #0033DA; */ + +.portfolio-project-card .cta--read-project span{ + font-size: 0.75rem; + line-height: 1rem; + font-weight: 500; + text-decoration: none; + transition: all 0.4s ease-in-out; + margin-right: 0px; +} + +.portfolio-project-card .cta--read-project img{ + position: absolute; + right: 1.5rem; + height: 1.5rem; + width: 1.5rem; + --tw-translate-x: -2rem; + 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)); + opacity: 0; + filter: invert(1); +} + +.portfolio-project-card .cta--read-project:hover{ + /* background-color: #0033DA; */ + --tw-bg-opacity: 1; + background-color: rgb(233 25 105 / var(--tw-bg-opacity, 1)); +} + +.portfolio-project-card .cta--read-project:hover span{ + margin-right: 2rem; +} + +.portfolio-project-card .cta--read-project:hover img{ + --tw-translate-x: 0px; + 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)); + opacity: 1; + transition: opacity .6s ease-in-out, translate 0.4s ease-in-out; +} + +/* $couleur = array( + 'web' => '#1CC7C7', + 'print' => '#C14FE3', + 'motiondesign' => '#21D5F5', + 'video' => '#21D5F5', +); */ + .portfolio-header{ position: relative; width: 100vw !important; @@ -176,8 +372,6 @@ inset: 0px; height: 100% !important; width: 100%; - --tw-bg-opacity: 1; - background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1)); -o-object-fit: cover; object-fit: cover; z-index: -1; @@ -202,8 +396,6 @@ display: flex; align-items: center; justify-content: space-between; - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); font-size: 0.75rem; line-height: 1rem; } @@ -215,6 +407,7 @@ } .portfolio-header .client-logo{ + position: relative; margin-left: auto; margin-right: auto; margin-top: 3rem; @@ -237,8 +430,6 @@ text-align: center; font-size: 0.875rem; line-height: 1.25rem; - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .gallery-website-screens{ @@ -289,6 +480,15 @@ flex-wrap: nowrap; } +.gallery-website-screens ul.is-mobile-capture{ + gap: 6rem; +} + +.gallery-website-screens ul.is-mobile-capture img{ + max-width: 15rem; + border-radius: 1.5rem; +} + .gallery-website-screens ul{ max-width: 1800px; } @@ -299,6 +499,8 @@ display: flex; align-items: center; justify-content: center; + padding-left: 3rem; + padding-right: 3rem; } @media (min-width: 1440px){ @@ -322,11 +524,9 @@ margin-right: auto; } -@media (min-width: 1280px){ - .chapter-section + *:not(.simple-screen){ - margin-top: 8rem; - } -} +/* & + *:not(.simple-screen) { + @apply xl:mt-32; + } */ .chapter-section--right{ flex-direction: row-reverse; @@ -334,19 +534,18 @@ .chapter-section__content { flex-shrink: 0; + max-width: 32rem; } .chapter-section__content p{ + max-width: 24rem; --tw-text-opacity: 1; color: rgb(82 82 82 / var(--tw-text-opacity, 1)); } -.chapter-section__innerblocks{ - max-width: 36rem; -} +/* @apply max-w-xl; */ -.chapter-section__innerblocks p{ - max-width: 28rem; +.chapter-section__innerblocks p { } .chapter-section__cover{ @@ -396,12 +595,69 @@ width: 100%; } +.simple-screen--large{ + padding: 6rem; +} + .simple-screen--large img{ height: auto; width: 100%; max-width: 1440px; } +.simple-screen--white{ + padding-top: 0px; + padding-bottom: 0px; +} + +.peertube-integration{ + display: flex; + width: 100%; + --tw-bg-opacity: 1; + background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1)); + padding-left: 2rem; + padding-right: 2rem; + padding-top: 3rem; + padding-bottom: 3rem; +} + +@media (min-width: 782px){ + .peertube-integration{ + padding-left: 3rem; + padding-right: 3rem; + } +} + +@media (min-width: 1280px){ + .peertube-integration{ + padding-left: 6rem; + padding-right: 6rem; + } +} + +.peertube-integration iframe{ + margin-left: auto; + margin-right: auto; +} + +@media (min-width: 960px){ + .peertube-integration iframe{ + max-width: 80vw; + } +} + +@media (min-width: 1280px){ + .peertube-integration iframe{ + max-width: 60vw; + } +} + +.peertube-integration iframe { + width: 100%; + height: auto; + aspect-ratio: 16/9; +} + .case-button{ margin-top: 1.5rem; display: block;