From 977b10b038d741830dff4b26561f47244bf3117a Mon Sep 17 00:00:00 2001 From: Nonimart Date: Thu, 2 Oct 2025 17:55:15 +0200 Subject: [PATCH] FIX Few responsive tweaks --- css/app.css | 152 +++++++++++++++--- js/app.js | 8 +- resources/css/blocks/chapter-section.css | 11 +- .../css/blocks/gallery-website-screens.css | 6 +- resources/css/blocks/portfolio-header.css | 7 +- resources/css/blocks/simple-screen.css | 2 +- resources/css/pages/archive-portfolio.css | 18 ++- resources/css/pages/single-portfolio.css | 8 +- 8 files changed, 170 insertions(+), 42 deletions(-) diff --git a/css/app.css b/css/app.css index b6dc395..18ba540 100644 --- a/css/app.css +++ b/css/app.css @@ -183,7 +183,18 @@ .portfolio-single{ margin-left: auto; margin-right: auto; - padding-top: 7rem; + padding-top: 0px; +} + +@media (min-width: 782px){ + .wp-admin.post-type-portfolio .is-root-container, +.portfolio-single{ + padding-top: 7rem; + } +} + +.wp-admin.post-type-portfolio .is-root-container, +.portfolio-single { /* & + *:not(.simple-screen) { @apply xl:mt-32; } */ @@ -253,7 +264,14 @@ padding-bottom: 1.5rem; line-height: 2.5rem; font-weight: 700 !important; - font-size: 2.5rem; + font-size: 1.5rem; + line-height: 1; +} + +@media (min-width: 782px) { + .wp-admin.post-type-portfolio .is-root-container h2, .portfolio-single h2 { + font-size: 2.5rem + } } .chapter-section + .peertube-integration{ @@ -261,7 +279,13 @@ } .portfolio-archive{ - padding-top: 8rem !important; + padding-top: 0px !important; +} + +@media (min-width: 782px){ + .portfolio-archive{ + padding-top: 8rem !important; + } } /* @apply bigCaslon; */ @@ -286,17 +310,34 @@ } .portfolio-project-card { - position: absolute; + /* position: absolute; */ z-index: 2; position: relative; margin-left: auto; margin-right: auto; - padding-left: 3rem; - padding-right: 3rem; - padding-top: 8rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 5rem; +} + +@media (min-width: 782px){ + .portfolio-project-card{ + padding-left: 3rem; + padding-right: 3rem; + padding-top: 8rem; + } +} + +.portfolio-project-card { max-width: 1800px; } +@media (max-width: 768px) { + .portfolio-project-card:first-child{ + padding-top: 3rem; + } +} + .portfolio-project-card__cover{ display: block; overflow: hidden; @@ -508,12 +549,29 @@ .portfolio-header__heading-infos{ display: flex; - align-items: center; - justify-content: space-between; + flex-direction: column; + row-gap: 0.5rem; + -moz-column-gap: 1.5rem; + column-gap: 1.5rem; +} + +@media (min-width: 782px){ + .portfolio-header__heading-infos{ + flex-direction: row; + align-items: center; + justify-content: space-between; + } +} + +.portfolio-header__heading-infos{ font-size: 0.75rem; line-height: 1rem; } +.portfolio-header__heading-infos > *{ + display: block; +} + .portfolio-header__heading-infos .project-type{ margin-top: 0px; margin-bottom: 0px; @@ -541,17 +599,28 @@ margin-right: auto; max-width: 32rem; border-radius: 0.5rem; - padding: 2rem; text-align: center; font-size: 0.875rem; line-height: 1.25rem; } +@media (min-width: 960px){ + .portfolio-header__innerblocks{ + padding: 2rem; + } +} + .gallery-website-screens{ width: 100vw; --tw-bg-opacity: 1; background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1)); - padding: 2.5rem; + padding: 1rem; +} + +@media (min-width: 782px){ + .gallery-website-screens{ + padding: 2.5rem; + } } .gallery-website-screens--padding-simple{ @@ -560,8 +629,14 @@ } .gallery-website-screens--padding-double{ - padding-top: 4rem; - padding-bottom: 4rem; + padding: 1rem; +} + +@media (min-width: 782px){ + .gallery-website-screens--padding-double{ + padding-top: 4rem; + padding-bottom: 4rem; + } } .gallery-website-screens{ @@ -605,9 +680,16 @@ .gallery-website-screens__screens-grid.is-flex{ display: flex; + flex-direction: column; flex-wrap: nowrap; } +@media (min-width: 782px){ + .gallery-website-screens__screens-grid.is-flex{ + flex-direction: row; + } +} + .gallery-website-screens__screens-grid.is-flex img{ max-height: 24rem; } @@ -665,12 +747,19 @@ .chapter-section{ margin-top: 0px !important; margin-bottom: 0px !important; - display: flex; align-items: center; justify-content: center; gap: 2rem; - padding-left: 3rem; - padding-right: 3rem; + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +@media (min-width: 782px){ + .chapter-section{ + display: flex; + padding-left: 3rem; + padding-right: 3rem; + } } @media (min-width: 1440px){ @@ -681,6 +770,7 @@ .chapter-section { /* min-height: 80vh; */ + padding-top: 1.5rem; } @media (min-width: 1280px){ @@ -704,7 +794,13 @@ .chapter-section__content { flex-shrink: 0; - max-width: 32rem; + max-width: 100%; +} + +@media (min-width: 960px){ + .chapter-section__content{ + max-width: 32rem; + } } .chapter-section__content p{ @@ -728,8 +824,10 @@ display: block; } -.chapter-section__cover--large{ - height: 24rem !important; +@media (min-width: 782px){ + .chapter-section__cover--large{ + height: 24rem !important; + } } .chapter-section__cover--grande{ @@ -744,6 +842,13 @@ height: 3rem !important; } +@media (max-width: 768px) { + .chapter-section__cover{ + height: auto; + width: 100%; + } +} + .simple-screen{ margin-top: 0px; margin-bottom: 0px; @@ -766,7 +871,14 @@ } .simple-screen--large{ - padding: 6rem; + padding-left: 0px; + padding-right: 0px; +} + +@media (min-width: 782px){ + .simple-screen--large{ + padding: 6rem; + } } .simple-screen--large img{ diff --git a/js/app.js b/js/app.js index 7f289b6..6a03724 100644 --- a/js/app.js +++ b/js/app.js @@ -21,9 +21,9 @@ return __reExport(__markAsModule(__defProp(module != null ? __create(__getProtoOf(module)) : {}, "default", module && module.__esModule && "default" in module ? { get: () => module.default, enumerable: true } : { value: module, enumerable: true })), module); }; - // node_modules/@popperjs/core/dist/cjs/popper.js + // node_modules/.pnpm/@popperjs+core@2.11.8/node_modules/@popperjs/core/dist/cjs/popper.js var require_popper = __commonJS({ - "node_modules/@popperjs/core/dist/cjs/popper.js"(exports) { + "node_modules/.pnpm/@popperjs+core@2.11.8/node_modules/@popperjs/core/dist/cjs/popper.js"(exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); function getWindow(node) { @@ -1366,9 +1366,9 @@ } }); - // node_modules/bootstrap/dist/js/bootstrap.js + // node_modules/.pnpm/bootstrap@5.3.3_@popperjs+core@2.11.8/node_modules/bootstrap/dist/js/bootstrap.js var require_bootstrap = __commonJS({ - "node_modules/bootstrap/dist/js/bootstrap.js"(exports, module) { + "node_modules/.pnpm/bootstrap@5.3.3_@popperjs+core@2.11.8/node_modules/bootstrap/dist/js/bootstrap.js"(exports, module) { (function(global, factory) { typeof exports === "object" && typeof module !== "undefined" ? module.exports = factory(require_popper()) : typeof define === "function" && define.amd ? define(["@popperjs/core"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, global.bootstrap = factory(global.Popper)); })(exports, function(Popper) { diff --git a/resources/css/blocks/chapter-section.css b/resources/css/blocks/chapter-section.css index de292c7..42c5fe4 100644 --- a/resources/css/blocks/chapter-section.css +++ b/resources/css/blocks/chapter-section.css @@ -1,7 +1,7 @@ .chapter-section { - @apply flex items-center justify-center gap-8 2xl:gap-12 !my-0 px-12; + @apply md:flex items-center justify-center gap-8 2xl:gap-12 !my-0 px-6 md:px-12; /* min-height: 80vh; */ - @apply xl:pt-32; + @apply pt-6 xl:pt-32; @apply mx-auto; @@ -13,7 +13,7 @@ } &__content { flex-shrink: 0; - @apply max-w-lg; + @apply max-w-full lg:max-w-lg; p { @apply text-neutral-600 max-w-sm; } @@ -31,7 +31,7 @@ display: block; &--large { - @apply !h-96; + @apply md:!h-96; } &--grande { @apply !h-80; @@ -42,5 +42,8 @@ &--small { @apply !h-12; } + @media (max-width: 768px) { + @apply w-full h-auto; + } } } diff --git a/resources/css/blocks/gallery-website-screens.css b/resources/css/blocks/gallery-website-screens.css index 9cb468b..dcd99a7 100644 --- a/resources/css/blocks/gallery-website-screens.css +++ b/resources/css/blocks/gallery-website-screens.css @@ -1,10 +1,10 @@ .gallery-website-screens { - @apply bg-neutral-100 p-10 w-screen; + @apply bg-neutral-100 p-4 md:p-10 w-screen; &--padding-simple { @apply py-10; } &--padding-double { - @apply py-16; + @apply p-4 md:py-16; } margin: 0 calc(50% - 50vw); @@ -14,7 +14,7 @@ @apply grid grid-cols-2 lg:grid-cols-3; } &.is-flex { - @apply flex flex-nowrap; + @apply flex flex-nowrap flex-col md:flex-row; img { @apply max-h-96; } diff --git a/resources/css/blocks/portfolio-header.css b/resources/css/blocks/portfolio-header.css index 3f485b7..170bced 100644 --- a/resources/css/blocks/portfolio-header.css +++ b/resources/css/blocks/portfolio-header.css @@ -24,8 +24,11 @@ } &__heading-infos { - @apply flex items-center justify-between; + @apply flex flex-col md:flex-row md:items-center md:justify-between gap-y-2 gap-x-6; @apply text-xs; + > * { + @apply block; + } .project-type { @apply my-0 leading-relaxed; } @@ -37,6 +40,6 @@ } &__innerblocks { - @apply mx-auto max-w-lg p-8 rounded-lg text-center text-sm; + @apply mx-auto max-w-lg lg:p-8 rounded-lg text-center text-sm; } } diff --git a/resources/css/blocks/simple-screen.css b/resources/css/blocks/simple-screen.css index 6ede0cf..17ce2b9 100644 --- a/resources/css/blocks/simple-screen.css +++ b/resources/css/blocks/simple-screen.css @@ -10,7 +10,7 @@ } } &--large { - @apply p-24; + @apply px-0 md:p-24; img { @apply w-full max-w-screen-2xl h-auto; } diff --git a/resources/css/pages/archive-portfolio.css b/resources/css/pages/archive-portfolio.css index ebc8523..8e1b48d 100644 --- a/resources/css/pages/archive-portfolio.css +++ b/resources/css/pages/archive-portfolio.css @@ -1,5 +1,5 @@ .portfolio-archive { - @apply !pt-32; + @apply !pt-0 md:!pt-32; } .portfolio-archive, .old-projects { @@ -26,12 +26,18 @@ } .portfolio-project-card { - position: absolute; - z-index: 2; - position: relative; - @apply mx-auto px-12 pt-32; + /* position: absolute; */ + z-index: 2; + position: relative; + @apply mx-auto px-4 md:px-12 pt-20 md:pt-32; max-width: 1800px; + @media (max-width: 768px) { + &:first-child { + @apply pt-12; + } + } + &__cover { @apply bg-neutral-100 block overflow-hidden; img { @@ -69,7 +75,7 @@ } p { @apply text-sm text-black pb-0 mb-0; - a{ + a { @apply text-black; text-decoration: underline; text-decoration-color: #999999; diff --git a/resources/css/pages/single-portfolio.css b/resources/css/pages/single-portfolio.css index bdfbb32..2e1b4e2 100644 --- a/resources/css/pages/single-portfolio.css +++ b/resources/css/pages/single-portfolio.css @@ -1,6 +1,6 @@ .wp-admin.post-type-portfolio .is-root-container, .portfolio-single { - @apply pt-28 mx-auto; + @apply pt-0 md:pt-28 mx-auto; h1, h2, @@ -41,7 +41,11 @@ h2 { @apply text-4xl pb-6 !font-bold; - font-size: 2.5rem; + font-size: 1.5rem; + line-height: 1; + @screen md { + font-size: 2.5rem; + } } /* & + *:not(.simple-screen) { @apply xl:mt-32;