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

FIX Few responsive tweaks
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Nonimart 2025-10-02 17:55:15 +02:00
parent 5f502c81a7
commit 977b10b038
8 changed files with 170 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
css/app.css
View File

@ -183,7 +183,18 @@
.portfolio-single{ .portfolio-single{
margin-left: auto; margin-left: auto;
margin-right: 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) { /* & + *:not(.simple-screen) {
@apply xl:mt-32; @apply xl:mt-32;
} */ } */
@ -253,7 +264,14 @@
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
line-height: 2.5rem; line-height: 2.5rem;
font-weight: 700 !important; 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{ .chapter-section + .peertube-integration{
@ -261,7 +279,13 @@
} }
.portfolio-archive{ .portfolio-archive{
padding-top: 8rem !important; padding-top: 0px !important;
}
@media (min-width: 782px){
.portfolio-archive{
padding-top: 8rem !important;
}
} }
/* @apply bigCaslon; */ /* @apply bigCaslon; */
@ -286,17 +310,34 @@
} }
.portfolio-project-card { .portfolio-project-card {
position: absolute; /* position: absolute; */
z-index: 2; z-index: 2;
position: relative; position: relative;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-left: 3rem; padding-left: 1rem;
padding-right: 3rem; padding-right: 1rem;
padding-top: 8rem; 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; max-width: 1800px;
} }
@media (max-width: 768px) {
.portfolio-project-card:first-child{
padding-top: 3rem;
}
}
.portfolio-project-card__cover{ .portfolio-project-card__cover{
display: block; display: block;
overflow: hidden; overflow: hidden;
@ -508,12 +549,29 @@
.portfolio-header__heading-infos{ .portfolio-header__heading-infos{
display: flex; display: flex;
align-items: center; flex-direction: column;
justify-content: space-between; 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; font-size: 0.75rem;
line-height: 1rem; line-height: 1rem;
} }
.portfolio-header__heading-infos > *{
display: block;
}
.portfolio-header__heading-infos .project-type{ .portfolio-header__heading-infos .project-type{
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
@ -541,17 +599,28 @@
margin-right: auto; margin-right: auto;
max-width: 32rem; max-width: 32rem;
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 2rem;
text-align: center; text-align: center;
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.25rem; line-height: 1.25rem;
} }
@media (min-width: 960px){
.portfolio-header__innerblocks{
padding: 2rem;
}
}
.gallery-website-screens{ .gallery-website-screens{
width: 100vw; width: 100vw;
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(245 245 245 / var(--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{ .gallery-website-screens--padding-simple{
@ -560,8 +629,14 @@
} }
.gallery-website-screens--padding-double{ .gallery-website-screens--padding-double{
padding-top: 4rem; padding: 1rem;
padding-bottom: 4rem; }
@media (min-width: 782px){
.gallery-website-screens--padding-double{
padding-top: 4rem;
padding-bottom: 4rem;
}
} }
.gallery-website-screens{ .gallery-website-screens{
@ -605,9 +680,16 @@
.gallery-website-screens__screens-grid.is-flex{ .gallery-website-screens__screens-grid.is-flex{
display: flex; display: flex;
flex-direction: column;
flex-wrap: nowrap; 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{ .gallery-website-screens__screens-grid.is-flex img{
max-height: 24rem; max-height: 24rem;
} }
@ -665,12 +747,19 @@
.chapter-section{ .chapter-section{
margin-top: 0px !important; margin-top: 0px !important;
margin-bottom: 0px !important; margin-bottom: 0px !important;
display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 2rem; gap: 2rem;
padding-left: 3rem; padding-left: 1.5rem;
padding-right: 3rem; padding-right: 1.5rem;
}
@media (min-width: 782px){
.chapter-section{
display: flex;
padding-left: 3rem;
padding-right: 3rem;
}
} }
@media (min-width: 1440px){ @media (min-width: 1440px){
@ -681,6 +770,7 @@
.chapter-section { .chapter-section {
/* min-height: 80vh; */ /* min-height: 80vh; */
padding-top: 1.5rem;
} }
@media (min-width: 1280px){ @media (min-width: 1280px){
@ -704,7 +794,13 @@
.chapter-section__content { .chapter-section__content {
flex-shrink: 0; flex-shrink: 0;
max-width: 32rem; max-width: 100%;
}
@media (min-width: 960px){
.chapter-section__content{
max-width: 32rem;
}
} }
.chapter-section__content p{ .chapter-section__content p{
@ -728,8 +824,10 @@
display: block; display: block;
} }
.chapter-section__cover--large{ @media (min-width: 782px){
height: 24rem !important; .chapter-section__cover--large{
height: 24rem !important;
}
} }
.chapter-section__cover--grande{ .chapter-section__cover--grande{
@ -744,6 +842,13 @@
height: 3rem !important; height: 3rem !important;
} }
@media (max-width: 768px) {
.chapter-section__cover{
height: auto;
width: 100%;
}
}
.simple-screen{ .simple-screen{
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
@ -766,7 +871,14 @@
} }
.simple-screen--large{ .simple-screen--large{
padding: 6rem; padding-left: 0px;
padding-right: 0px;
}
@media (min-width: 782px){
.simple-screen--large{
padding: 6rem;
}
} }
.simple-screen--large img{ .simple-screen--large img{

8
js/app.js
View File

@ -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); 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({ 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"; "use strict";
Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "__esModule", { value: true });
function getWindow(node) { 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({ 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) { (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)); 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) { })(exports, function(Popper) {

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

@ -1,7 +1,7 @@
.chapter-section { .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; */ /* min-height: 80vh; */
@apply xl:pt-32; @apply pt-6 xl:pt-32;
@apply mx-auto; @apply mx-auto;
@ -13,7 +13,7 @@
} }
&__content { &__content {
flex-shrink: 0; flex-shrink: 0;
@apply max-w-lg; @apply max-w-full lg:max-w-lg;
p { p {
@apply text-neutral-600 max-w-sm; @apply text-neutral-600 max-w-sm;
} }
@ -31,7 +31,7 @@
display: block; display: block;
&--large { &--large {
@apply !h-96; @apply md:!h-96;
} }
&--grande { &--grande {
@apply !h-80; @apply !h-80;
@ -42,5 +42,8 @@
&--small { &--small {
@apply !h-12; @apply !h-12;
} }
@media (max-width: 768px) {
@apply w-full h-auto;
}
} }
} }

6
resources/css/blocks/gallery-website-screens.css
View File

@ -1,10 +1,10 @@
.gallery-website-screens { .gallery-website-screens {
@apply bg-neutral-100 p-10 w-screen; @apply bg-neutral-100 p-4 md:p-10 w-screen;
&--padding-simple { &--padding-simple {
@apply py-10; @apply py-10;
} }
&--padding-double { &--padding-double {
@apply py-16; @apply p-4 md:py-16;
} }
margin: 0 calc(50% - 50vw); margin: 0 calc(50% - 50vw);
@ -14,7 +14,7 @@
@apply grid grid-cols-2 lg:grid-cols-3; @apply grid grid-cols-2 lg:grid-cols-3;
} }
&.is-flex { &.is-flex {
@apply flex flex-nowrap; @apply flex flex-nowrap flex-col md:flex-row;
img { img {
@apply max-h-96; @apply max-h-96;
} }

7
resources/css/blocks/portfolio-header.css
View File

@ -24,8 +24,11 @@
} }
&__heading-infos { &__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 text-xs;
> * {
@apply block;
}
.project-type { .project-type {
@apply my-0 leading-relaxed; @apply my-0 leading-relaxed;
} }
@ -37,6 +40,6 @@
} }
&__innerblocks { &__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;
} }
} }

2
resources/css/blocks/simple-screen.css
View File

@ -10,7 +10,7 @@
} }
} }
&--large { &--large {
@apply p-24; @apply px-0 md:p-24;
img { img {
@apply w-full max-w-screen-2xl h-auto; @apply w-full max-w-screen-2xl h-auto;
} }

18
resources/css/pages/archive-portfolio.css
View File

@ -1,5 +1,5 @@
.portfolio-archive { .portfolio-archive {
@apply !pt-32; @apply !pt-0 md:!pt-32;
} }
.portfolio-archive, .portfolio-archive,
.old-projects { .old-projects {
@ -26,12 +26,18 @@
} }
.portfolio-project-card { .portfolio-project-card {
position: absolute; /* position: absolute; */
z-index: 2; z-index: 2;
position: relative; position: relative;
@apply mx-auto px-12 pt-32; @apply mx-auto px-4 md:px-12 pt-20 md:pt-32;
max-width: 1800px; max-width: 1800px;
@media (max-width: 768px) {
&:first-child {
@apply pt-12;
}
}
&__cover { &__cover {
@apply bg-neutral-100 block overflow-hidden; @apply bg-neutral-100 block overflow-hidden;
img { img {
@ -69,7 +75,7 @@
} }
p { p {
@apply text-sm text-black pb-0 mb-0; @apply text-sm text-black pb-0 mb-0;
a{ a {
@apply text-black; @apply text-black;
text-decoration: underline; text-decoration: underline;
text-decoration-color: #999999; text-decoration-color: #999999;

8
resources/css/pages/single-portfolio.css
View File

@ -1,6 +1,6 @@
.wp-admin.post-type-portfolio .is-root-container, .wp-admin.post-type-portfolio .is-root-container,
.portfolio-single { .portfolio-single {
@apply pt-28 mx-auto; @apply pt-0 md:pt-28 mx-auto;
h1, h1,
h2, h2,
@ -41,7 +41,11 @@
h2 { h2 {
@apply text-4xl pb-6 !font-bold; @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) { /* & + *:not(.simple-screen) {
@apply xl:mt-32; @apply xl:mt-32;