FIX Few responsive tweaks
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
Nonimart
parent
5f502c81a7
commit
977b10b038
120
css/app.css
120
css/app.css
|
|
@ -183,7 +183,18 @@
|
|||
.portfolio-single{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
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,16 +264,29 @@
|
|||
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{
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.portfolio-archive{
|
||||
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: 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;
|
||||
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,28 +599,45 @@
|
|||
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: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 782px){
|
||||
.gallery-website-screens{
|
||||
padding: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-website-screens--padding-simple{
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.gallery-website-screens--padding-double{
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 782px){
|
||||
.gallery-website-screens--padding-double{
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-website-screens{
|
||||
margin: 0 calc(50% - 50vw);
|
||||
|
|
@ -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,13 +747,20 @@
|
|||
.chapter-section{
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
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){
|
||||
.chapter-section{
|
||||
|
|
@ -681,6 +770,7 @@
|
|||
|
||||
.chapter-section {
|
||||
/* min-height: 80vh; */
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px){
|
||||
|
|
@ -704,8 +794,14 @@
|
|||
|
||||
.chapter-section__content {
|
||||
flex-shrink: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 960px){
|
||||
.chapter-section__content{
|
||||
max-width: 32rem;
|
||||
}
|
||||
}
|
||||
|
||||
.chapter-section__content p{
|
||||
max-width: 24rem;
|
||||
|
|
@ -728,9 +824,11 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
@media (min-width: 782px){
|
||||
.chapter-section__cover--large{
|
||||
height: 24rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.chapter-section__cover--grande{
|
||||
height: 20rem !important;
|
||||
|
|
@ -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;
|
||||
|
|
@ -765,9 +870,16 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.simple-screen--large{
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
@media (min-width: 782px){
|
||||
.simple-screen--large{
|
||||
padding: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.simple-screen--large img{
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
}
|
||||
}
|
||||
&--large {
|
||||
@apply p-24;
|
||||
@apply px-0 md:p-24;
|
||||
img {
|
||||
@apply w-full max-w-screen-2xl h-auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
/* position: absolute; */
|
||||
z-index: 2;
|
||||
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;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
&:first-child {
|
||||
@apply pt-12;
|
||||
}
|
||||
}
|
||||
|
||||
&__cover {
|
||||
@apply bg-neutral-100 block overflow-hidden;
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -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,8 +41,12 @@
|
|||
|
||||
h2 {
|
||||
@apply text-4xl pb-6 !font-bold;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
@screen md {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
/* & + *:not(.simple-screen) {
|
||||
@apply xl:mt-32;
|
||||
} */
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user