styled site columns width, global gap

This commit is contained in:
jorge 2024-03-13 20:24:02 +01:00
parent d205cf49d5
commit 7b67eb1895
7 changed files with 71 additions and 57 deletions

View File

@ -1247,7 +1247,7 @@ Add your custom styles in this file so it is easier to update the theme.
.edit-post-visual-editor__content-area .editor-styles-wrapper .site { .edit-post-visual-editor__content-area .editor-styles-wrapper .site {
display: grid; display: grid;
grid-template-columns: 1fr minmax(0, 35em) minmax(0, 35em) 1fr; grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
grid-auto-rows: min-content auto min-content min-content; grid-auto-rows: min-content auto min-content min-content;
grid-template-areas: "header" "main" "aside" "footer"; grid-template-areas: "header" "main" "aside" "footer";
margin: auto; margin: auto;
@ -1272,6 +1272,20 @@ Add your custom styles in this file so it is easier to update the theme.
grid-column: 1 / -1; grid-column: 1 / -1;
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .site :where(.wp-block-columns.is-layout-flex) {
gap: 2rem;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site .xarxaprod-destacats,
.edit-post-visual-editor__content-area .editor-styles-wrapper .site .xarxaprod-featured,
.edit-post-visual-editor__content-area .editor-styles-wrapper .site .xarxaprod-last-convos,
.edit-post-visual-editor__content-area .editor-styles-wrapper .site .xarxaprod-ultimes-convocatories,
.edit-post-visual-editor__content-area .editor-styles-wrapper .site .archive-posts {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 3rem;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-header { .edit-post-visual-editor__content-area .editor-styles-wrapper .site-header {
position: sticky; position: sticky;
top: 0; top: 0;
@ -1379,20 +1393,6 @@ Add your custom styles in this file so it is easier to update the theme.
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-footer ul[id*="menu-social-media"] li a { .edit-post-visual-editor__content-area .editor-styles-wrapper .site-footer ul[id*="menu-social-media"] li a {
font-size: 0; font-size: 0;
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .home-featured {
padding: 0 1rem;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-destacats,
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-featured,
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-last-convos,
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-ultimes-convocatories,
.edit-post-visual-editor__content-area .editor-styles-wrapper .archive-posts {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 3rem;
}
} }
@media screen and (max-width: 48em) { @media screen and (max-width: 48em) {
@ -1409,10 +1409,6 @@ Add your custom styles in this file so it is easier to update the theme.
@media screen and (min-width: 48em) { @media screen and (min-width: 48em) {
.edit-post-visual-editor__content-area .editor-styles-wrapper .site {
grid-template-columns: 1fr 2fr 2fr 1fr;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site > header { .edit-post-visual-editor__content-area .editor-styles-wrapper .site > header {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
@ -1429,9 +1425,13 @@ Add your custom styles in this file so it is easier to update the theme.
grid-column: 1 / -1; grid-column: 1 / -1;
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .site :where(.wp-block-columns.is-layout-flex) {
gap: 4rem;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-header { .edit-post-visual-editor__content-area .editor-styles-wrapper .site-header {
display: grid; display: grid;
grid-template-columns: 1fr 2fr 2fr 1fr; grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
grid-template-areas: "main " "secondary "; grid-template-areas: "main " "secondary ";
margin: auto; margin: auto;
margin-bottom: 2rem; margin-bottom: 2rem;
@ -1921,6 +1921,10 @@ Add your custom styles in this file so it is easier to update the theme.
margin: 0 0 1.5em; margin: 0 0 1.5em;
} }
.edit-post-visual-editor__content-area .editor-styles-wrapper .home-featured {
padding: 0 1rem;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .ratlla-abaix .wp-block-column, .edit-post-visual-editor__content-area .editor-styles-wrapper .ratlla-abaix .wp-block-column,
.edit-post-visual-editor__content-area .editor-styles-wrapper .border-bottom .wp-block-column { .edit-post-visual-editor__content-area .editor-styles-wrapper .border-bottom .wp-block-column {
position: relative; position: relative;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -26,7 +26,9 @@
clear: both; clear: both;
margin: 0 0 1.5em; margin: 0 0 1.5em;
} }
.home-featured {
padding: 0 1rem;
}
/* /*
* blocks columns with line below each block * blocks columns with line below each block
* see Que oferim? * see Que oferim?

View File

@ -8,7 +8,7 @@
} }
.site { .site {
display: grid; display: grid;
grid-template-columns: 1fr minmax(0,35em) minmax(0,35em) 1fr; grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
grid-auto-rows: min-content auto min-content min-content; grid-auto-rows: min-content auto min-content min-content;
grid-template-areas: grid-template-areas:
"header" "header"
@ -31,6 +31,16 @@
> footer { > footer {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
:where(.wp-block-columns.is-layout-flex) {
gap: $grid__gap * 2;
}
.xarxaprod-destacats,.xarxaprod-featured,
.xarxaprod-last-convos,.xarxaprod-ultimes-convocatories,
.archive-posts {
display: grid;
grid-template-columns: repeat(1 , 1fr);
gap: $grid__gap * 3;
}
} }
.site-header { .site-header {
position: sticky; position: sticky;
@ -129,16 +139,6 @@
} }
} }
} }
.home-featured {
padding: 0 1rem;
}
.xarxaprod-destacats,.xarxaprod-featured,
.xarxaprod-last-convos,.xarxaprod-ultimes-convocatories,
.archive-posts {
display: grid;
grid-template-columns: repeat(1 , 1fr);
gap: $grid__gap * 3;
}
} }
@media screen and (max-width: 48em) { @media screen and (max-width: 48em) {
//only smaller than 48em //only smaller than 48em
@ -163,7 +163,7 @@
@media screen and (min-width: 48em) { @media screen and (min-width: 48em) {
//only bigger than 48em //only bigger than 48em
.site { .site {
grid-template-columns: 1fr 2fr 2fr 1fr; //grid-template-columns: 1fr 2fr 2fr 1fr;
> header { > header {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
@ -176,10 +176,14 @@
> footer { > footer {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
:where(.wp-block-columns.is-layout-flex) {
gap: $grid__gap * 4;
}
} }
.site-header { .site-header {
display: grid; display: grid;
grid-template-columns: 1fr 2fr 2fr 1fr; //grid-template-columns: 1fr 2fr 2fr 1fr;
grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
grid-template-areas: grid-template-areas:
"main " "main "
"secondary "; "secondary ";

View File

@ -1106,7 +1106,7 @@ textarea {
.site { .site {
display: grid; display: grid;
grid-template-columns: 1fr minmax(0, 35em) minmax(0, 35em) 1fr; grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
grid-auto-rows: min-content auto min-content min-content; grid-auto-rows: min-content auto min-content min-content;
grid-template-areas: "header" "main" "aside" "footer"; grid-template-areas: "header" "main" "aside" "footer";
margin: auto; margin: auto;
@ -1131,6 +1131,20 @@ textarea {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
.site :where(.wp-block-columns.is-layout-flex) {
gap: 2rem;
}
.site .xarxaprod-destacats,
.site .xarxaprod-featured,
.site .xarxaprod-last-convos,
.site .xarxaprod-ultimes-convocatories,
.site .archive-posts {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 3rem;
}
.site-header { .site-header {
position: sticky; position: sticky;
top: 0; top: 0;
@ -1238,20 +1252,6 @@ textarea {
.site-footer ul[id*="menu-social-media"] li a { .site-footer ul[id*="menu-social-media"] li a {
font-size: 0; font-size: 0;
} }
.home-featured {
padding: 0 1rem;
}
.xarxaprod-destacats,
.xarxaprod-featured,
.xarxaprod-last-convos,
.xarxaprod-ultimes-convocatories,
.archive-posts {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 3rem;
}
} }
@media screen and (max-width: 48em) { @media screen and (max-width: 48em) {
@ -1268,10 +1268,6 @@ textarea {
@media screen and (min-width: 48em) { @media screen and (min-width: 48em) {
.site {
grid-template-columns: 1fr 2fr 2fr 1fr;
}
.site > header { .site > header {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
@ -1288,9 +1284,13 @@ textarea {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
.site :where(.wp-block-columns.is-layout-flex) {
gap: 4rem;
}
.site-header { .site-header {
display: grid; display: grid;
grid-template-columns: 1fr 2fr 2fr 1fr; grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
grid-template-areas: "main " "secondary "; grid-template-areas: "main " "secondary ";
margin: auto; margin: auto;
margin-bottom: 2rem; margin-bottom: 2rem;
@ -1737,6 +1737,10 @@ textarea {
margin: 0 0 1.5em; margin: 0 0 1.5em;
} }
.home-featured {
padding: 0 1rem;
}
/* /*
* blocks columns with line below each block * blocks columns with line below each block
* see Que oferim? * see Que oferim?

File diff suppressed because one or more lines are too long