xarxaprod
/
xarxaprod-wp-theme
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

home page moved sections into main content. styled css for screen sizes

This commit is contained in:
jorge 2024-02-29 12:04:10 +01:00
parent 23217498c5
commit 4c5fbefc99
11 changed files with 242 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
adminstyles.css
View File

@ -1244,7 +1244,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 {
display: grid;
grid-template-columns: 1fr minmax(0, 35em) minmax(0, 35em) 1fr;
grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
grid-auto-rows: min-content auto min-content min-content;
grid-template-areas: "header" "main" "aside" "footer";
margin: auto;
@ -1257,11 +1257,11 @@ 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 > main {
grid-column: 2 / 4;
grid-column: 1 / -1;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site > aside {
grid-column: 2 / 4;
grid-column: 1 / -1;
padding: 4em 0;
}
@ -1271,20 +1271,23 @@ 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-header {
position: sticky;
z-index: 500;
top: 0;
margin-bottom: 2rem;
z-index: 500;
display: grid;
grid-template-areas: "main" "secondary ";
grid-template-columns: 1fr minmax(0, 35em) minmax(0, 35em) 1fr;
grid-row: auto;
align-items: center;
margin-bottom: 2rem;
padding: 0.5rem 0;
width: 100vw;
background-color: transparent;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-header .main {
display: flex;
flex-flow: column;
align-items: initial;
justify-content: space-between;
flex-flow: row;
align-items: center;
justify-content: space-around;
z-index: 900;
}
@ -1298,11 +1301,21 @@ Add your custom styles in this file so it is easier to update the theme.
padding: 0 1rem;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-main > section {
padding: 4em 0;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-main > section > header {
padding: 2em 0;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-footer {
display: flex;
flex-flow: row;
background: #000;
color: #fff;
margin-top: 4em;
padding: 2em 4em;
padding: 2em 1em;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-footer a {
@ -1317,7 +1330,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-footer img {
height: 2.5em;
margin: 0 0.5em;
margin: 0;
filter: invert(1);
}
@ -1332,25 +1345,39 @@ Add your custom styles in this file so it is easier to update the theme.
.edit-post-visual-editor__content-area .editor-styles-wrapper .archive-posts {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 1rem;
gap: 3rem;
}
}
@media screen and (max-width: 48em) {
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-header {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0.5rem 0;
align-items: center;
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-footer .is-layout-flex {
flex-flow: column;
align-items: flex-start;
}
}
@media screen and (min-width: 48em) {
.edit-post-visual-editor__content-area .editor-styles-wrapper .site > header {
grid-column: 1 / -1;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site > main {
grid-column: 2 / 4;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site > aside {
grid-column: 2 / 4;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site > footer {
grid-column: 1 / -1;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-header {
display: grid;
grid-template-columns: 1fr minmax(0, 35em) minmax(0, 35em) 1fr;
grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
grid-template-areas: "main " "secondary ";
margin: auto;
padding: 0;
@ -1358,7 +1385,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-header .main {
grid-column: 2/4;
flex-flow: row;
align-items: center;
width: 100%;
}
@ -1373,6 +1399,15 @@ Add your custom styles in this file so it is easier to update the theme.
padding: 0 2rem;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-footer {
flex-flow: column;
padding: 2em 4em;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-footer img {
margin: 0 0.5em;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .home-featured {
padding: 0 2rem;
}
@ -1900,7 +1935,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 .xarxaprod-agenda .xarxaprod-card-each {
display: flex;
flex-direction: row-reverse;
flex-direction: column;
justify-content: space-between;
padding: 1em 0;
border-bottom: 0.1em solid #000;
@ -1910,11 +1945,6 @@ Add your custom styles in this file so it is easier to update the theme.
border-top: 0.1em solid #000;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-agenda .xarxaprod-card-each header,
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-agenda .xarxaprod-card-each .entry-header {
width: 60%;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-agenda .xarxaprod-card-each .entry-title,
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-agenda .xarxaprod-card-each h6 {
border-bottom: none;
@ -1924,16 +1954,6 @@ Add your custom styles in this file so it is easier to update the theme.
font-size: 1.5em;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-agenda .xarxaprod-card-each .activity-organizer,
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-agenda .xarxaprod-card-each .organiza-activitat {
width: 24%;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-agenda .xarxaprod-card-each .agenda-date,
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-agenda .xarxaprod-card-each .agenda-data {
width: 15%;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-filtered-content {
display: grid;
grid-template-columns: 1fr;
@ -1993,7 +2013,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 .post,
.edit-post-visual-editor__content-area .editor-styles-wrapper .page {
margin: 0 0 1em;
margin: 0;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-filters section {
@ -2024,8 +2044,7 @@ Add your custom styles in this file so it is easier to update the theme.
padding-right: 2em;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-filters section,
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-filters xarxaprod-filtered-calls {
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-filters section {
margin: 1em 0;
}
@ -2035,7 +2054,25 @@ Add your custom styles in this file so it is easier to update the theme.
.edit-post-visual-editor__content-area .editor-styles-wrapper .archive-posts {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-gap: 3em;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-agenda .xarxaprod-card-each {
flex-direction: row-reverse;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-agenda .xarxaprod-card-each header,
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-agenda .xarxaprod-card-each .entry-header {
width: 60%;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-agenda .xarxaprod-card-each .activity-organizer,
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-agenda .xarxaprod-card-each .organiza-activitat {
width: 24%;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-agenda .xarxaprod-card-each .agenda-date,
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-agenda .xarxaprod-card-each .agenda-data {
width: 15%;
}
}

2
adminstyles.css.map
View File

File diff suppressed because one or more lines are too long

2
assets/css/adminstyles.css
View File

File diff suppressed because one or more lines are too long

2
footer.php
View File

@ -10,8 +10,6 @@
*/
?>
<aside>
</aside>
<footer id="colophon" class="site-footer">
<div class="site-info">
<?php dynamic_sidebar( 'footer-widgets' ); ?>

20
page.php
View File

@ -27,15 +27,27 @@ get_header();
endif; // End if have_post.
?>
</main><!-- #main -->
<?php
if ( is_front_page() ) :
<?php
if ( is_front_page() ) :
//get_template_part( 'template-parts/section', 'featured' );
get_template_part( 'template-parts/section', 'last-convos' );
get_template_part( 'template-parts/section', 'agenda' );
//echo '<aside id="extra" class="extra-content contingut-extra">';
// dynamic_sidebar( 'front-page-widgets' ); // including widget front page
//echo '</aside>';
endif;
?>
</main><!-- #main -->
<?php
if ( is_front_page() ) :
//get_template_part( 'template-parts/section', 'featured' );
//get_template_part( 'template-parts/section', 'last-convos' );
//get_template_part( 'template-parts/section', 'agenda' );
echo '<aside id="extra" class="extra-content contingut-extra">';
dynamic_sidebar( 'front-page-widgets' ); // including widget front page
echo '</aside>';
echo '</aside>';
endif;
?>

47
sass/components/content/_posts-and-pages.scss
View File

@ -98,7 +98,8 @@
.xarxaprod-agenda {
.xarxaprod-card-each {
display: flex;
flex-direction: row-reverse;
flex-direction: column;
//flex-direction: row-reverse;
justify-content: space-between;
padding: 1em 0;
border-bottom: 0.1em solid $color__black;
@ -106,7 +107,7 @@
border-top: 0.1em solid $color__black;
}
header,.entry-header {
width: 60%;
// width: 60%;
}
.entry-title,h6 {
border-bottom: none;
@ -115,10 +116,10 @@
font-size: 1.5em;
}
.activity-organizer, .organiza-activitat {
width: 24%;
// width: 24%;
}
.agenda-date, .agenda-data {
width: 15%;
// width: 15%;
}
}
}
@ -136,13 +137,6 @@
display: none;
}
}
//.button-more {
// width: 100%;
// max-width: 11.7em;
// &::after {
// margin-left: 1rem;
// }
//}
}
.archive-posts {
// https://stackoverflow.com/questions/47601564/equal-width-columns-in-css-grid#61240964
@ -190,7 +184,7 @@
.post,
.page {
margin: 0 0 1em;
margin: 0;
}
.xarxaprod-filters {
@ -217,22 +211,33 @@
//only bigger than 48em
.xarxaprod-filters {
padding-right: 2em;
section , xarxaprod-filtered-calls{
section {
margin: 1em 0;
}
}
//.xarxaprod-filtered-content, .xarxaprod-filtered-funds, .xarxaprod-filtered-calls {
.xarxaprod-filtered-content {
grid-template-columns: 1fr 2fr;
.xarxaprod-filtered-content {
grid-template-columns: 1fr 2fr;
}
.archive-posts {
grid-template-columns: repeat(2 , minmax(0,1fr));
}
.xarxaprod-agenda {
.xarxaprod-card-each {
flex-direction: row-reverse;
header,.entry-header {
width: 60%;
}
.activity-organizer, .organiza-activitat {
width: 24%;
}
.agenda-date, .agenda-data {
width: 15%;
}
}
.archive-posts {
grid-template-columns: repeat(2 , minmax(0,1fr));
grid-gap: 3em;
}
}
}
@media screen and (min-width: 80em) {
//only bigger than 80rem
//.xarxaprod-filtered-content, .xarxaprod-filtered-funds, xarxaprod-filtered-calls {
.xarxaprod-filtered-content {
grid-template-columns: 1fr 3fr;
}

76
sass/layouts/_no-sidebar.scss
View File

@ -8,8 +8,9 @@
}
.site {
display: grid;
grid-template-columns: 1fr minmax(0,35em) minmax(0,35em) 1fr;
grid-auto-rows: min-content auto min-content min-content; // adjuts height to min content and auto fill on main
//grid-template-columns: 1fr minmax(0,35em) minmax(0,35em) 1fr;
grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
grid-auto-rows: min-content auto min-content min-content;
grid-template-areas:
"header"
"main"
@ -22,10 +23,10 @@
grid-column: 1 / -1;
}
> main {
grid-column: 2 / 4;
grid-column: 1 / -1;
}
> aside {
grid-column: 2 / 4;
grid-column: 1 / -1;
padding: 4em 0;
}
> footer {
@ -34,33 +35,24 @@
}
.site-header {
position: sticky;
z-index: 500;
top: 0;
margin-bottom: 2rem;
z-index: 500;
display: grid;
grid-template-areas:
"main"
"secondary ";
grid-template-columns: 1fr minmax(0,35em) minmax(0,35em) 1fr;
grid-row: auto;
align-items: center;
margin-bottom: 2rem;
padding: 0.5rem 0;
width: 100vw;
background-color: transparent;
//&::before {
// display: inline-block;
// content: "";
// background-image: linear-gradient(
// #fff 0%
// transparent 100%,
// );
// width: 100vw;
// height: 100%;
// position: absolute;
// left: 0;
// top: 0;
//}
.main {
display: flex;
flex-flow: column;
align-items: initial;
justify-content: space-between;
flex-flow: row;
align-items: center;
justify-content: space-around;
z-index: 900;
}
.secondary {
@ -71,12 +63,20 @@
}
.site-main {
padding: 0 1rem;
> section {
padding: 4em 0;
> header {
padding: 2em 0;
}
}
}
.site-footer {
display: flex;
flex-flow: row;
background: $color__black;
color: $color__white;
margin-top: 4em;
padding: 2em 4em;
padding: 2em 1em;
a {
color: $color__white;
&:hover,&:visited,&:active {
@ -85,7 +85,7 @@
}
img {
height: 2.5em;
margin: 0 0.5em;
margin: 0;
filter: invert(1);
}
}
@ -97,20 +97,20 @@
.archive-posts {
display: grid;
grid-template-columns: repeat(1 , 1fr);
gap: $grid__gap;
gap: $grid__gap * 3;
}
}
@media screen and (max-width: 48em) {
//only smaller than 48em
.site-header {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0.5rem 0;
align-items: center;
}
.site-main {
}
.site-footer {
.is-layout-flex {
flex-flow: column;
align-items: flex-start;
}
}
.page-template-funds-search {
}
@ -121,17 +121,21 @@
//only bigger than 48em
.site {
> header {
grid-column: 1 / -1;
}
> main {
grid-column: 2 / 4;
}
> aside {
grid-column: 2 / 4;
}
> footer {
grid-column: 1 / -1;
}
}
.site-header {
display: grid;
grid-template-columns: 1fr minmax(0, 35em) minmax(0, 35em) 1fr;
grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
grid-template-areas:
"main "
"secondary ";
@ -140,7 +144,7 @@
.main {
grid-column: 2/4;
flex-flow: row;
//flex-flow: row;
align-items: center;
width: 100%;
}
@ -154,6 +158,11 @@
padding: 0 2rem;
}
.site-footer {
flex-flow: column;
padding: 2em 4em;
img {
margin: 0 0.5em;
}
}
.home-featured {
padding: 0 2rem;
@ -195,9 +204,6 @@
}
.site-header {
.main {
//width: 80em;
//margin: auto;
//flex-flow: row;
}
.secondary {
}

115
style.css
View File

@ -1111,7 +1111,7 @@ textarea {
.site {
display: grid;
grid-template-columns: 1fr minmax(0, 35em) minmax(0, 35em) 1fr;
grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
grid-auto-rows: min-content auto min-content min-content;
grid-template-areas: "header" "main" "aside" "footer";
margin: auto;
@ -1124,11 +1124,11 @@ textarea {
}
.site > main {
grid-column: 2 / 4;
grid-column: 1 / -1;
}
.site > aside {
grid-column: 2 / 4;
grid-column: 1 / -1;
padding: 4em 0;
}
@ -1138,20 +1138,23 @@ textarea {
.site-header {
position: sticky;
z-index: 500;
top: 0;
margin-bottom: 2rem;
z-index: 500;
display: grid;
grid-template-areas: "main" "secondary ";
grid-template-columns: 1fr minmax(0, 35em) minmax(0, 35em) 1fr;
grid-row: auto;
align-items: center;
margin-bottom: 2rem;
padding: 0.5rem 0;
width: 100vw;
background-color: transparent;
}
.site-header .main {
display: flex;
flex-flow: column;
align-items: initial;
justify-content: space-between;
flex-flow: row;
align-items: center;
justify-content: space-around;
z-index: 900;
}
@ -1165,11 +1168,21 @@ textarea {
padding: 0 1rem;
}
.site-main > section {
padding: 4em 0;
}
.site-main > section > header {
padding: 2em 0;
}
.site-footer {
display: flex;
flex-flow: row;
background: #000;
color: #fff;
margin-top: 4em;
padding: 2em 4em;
padding: 2em 1em;
}
.site-footer a {
@ -1184,7 +1197,7 @@ textarea {
.site-footer img {
height: 2.5em;
margin: 0 0.5em;
margin: 0;
filter: invert(1);
}
@ -1199,25 +1212,39 @@ textarea {
.archive-posts {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 1rem;
gap: 3rem;
}
}
@media screen and (max-width: 48em) {
.site-header {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0.5rem 0;
align-items: center;
.site-footer .is-layout-flex {
flex-flow: column;
align-items: flex-start;
}
}
@media screen and (min-width: 48em) {
.site > header {
grid-column: 1 / -1;
}
.site > main {
grid-column: 2 / 4;
}
.site > aside {
grid-column: 2 / 4;
}
.site > footer {
grid-column: 1 / -1;
}
.site-header {
display: grid;
grid-template-columns: 1fr minmax(0, 35em) minmax(0, 35em) 1fr;
grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
grid-template-areas: "main " "secondary ";
margin: auto;
padding: 0;
@ -1225,7 +1252,6 @@ textarea {
.site-header .main {
grid-column: 2/4;
flex-flow: row;
align-items: center;
width: 100%;
}
@ -1240,6 +1266,15 @@ textarea {
padding: 0 2rem;
}
.site-footer {
flex-flow: column;
padding: 2em 4em;
}
.site-footer img {
margin: 0 0.5em;
}
.home-featured {
padding: 0 2rem;
}
@ -1757,7 +1792,7 @@ textarea {
* */
.xarxaprod-agenda .xarxaprod-card-each {
display: flex;
flex-direction: row-reverse;
flex-direction: column;
justify-content: space-between;
padding: 1em 0;
border-bottom: 0.1em solid #000;
@ -1767,11 +1802,6 @@ textarea {
border-top: 0.1em solid #000;
}
.xarxaprod-agenda .xarxaprod-card-each header,
.xarxaprod-agenda .xarxaprod-card-each .entry-header {
width: 60%;
}
.xarxaprod-agenda .xarxaprod-card-each .entry-title,
.xarxaprod-agenda .xarxaprod-card-each h6 {
border-bottom: none;
@ -1781,16 +1811,6 @@ textarea {
font-size: 1.5em;
}
.xarxaprod-agenda .xarxaprod-card-each .activity-organizer,
.xarxaprod-agenda .xarxaprod-card-each .organiza-activitat {
width: 24%;
}
.xarxaprod-agenda .xarxaprod-card-each .agenda-date,
.xarxaprod-agenda .xarxaprod-card-each .agenda-data {
width: 15%;
}
/* filters form custom fields
*/
.xarxaprod-filtered-content {
@ -1852,7 +1872,7 @@ textarea {
.post,
.page {
margin: 0 0 1em;
margin: 0;
}
.xarxaprod-filters section {
@ -1883,8 +1903,7 @@ textarea {
padding-right: 2em;
}
.xarxaprod-filters section,
.xarxaprod-filters xarxaprod-filtered-calls {
.xarxaprod-filters section {
margin: 1em 0;
}
@ -1894,7 +1913,25 @@ textarea {
.archive-posts {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-gap: 3em;
}
.xarxaprod-agenda .xarxaprod-card-each {
flex-direction: row-reverse;
}
.xarxaprod-agenda .xarxaprod-card-each header,
.xarxaprod-agenda .xarxaprod-card-each .entry-header {
width: 60%;
}
.xarxaprod-agenda .xarxaprod-card-each .activity-organizer,
.xarxaprod-agenda .xarxaprod-card-each .organiza-activitat {
width: 24%;
}
.xarxaprod-agenda .xarxaprod-card-each .agenda-date,
.xarxaprod-agenda .xarxaprod-card-each .agenda-data {
width: 15%;
}
}

2
style.css.map
View File

File diff suppressed because one or more lines are too long

4
template-parts/section-agenda.php
View File

@ -9,7 +9,7 @@
?>
<aside id="agenda" class="agenda ">
<section id="agenda" class="agenda ">
<header>
<h2> <?php echo esc_html__('Agenda', 'xarxaprod'); ?></h2>
</header>
@ -65,4 +65,4 @@
<?php endif; //end query ?>
</main>
</aside>
</section>

4
template-parts/section-last-convos.php
View File

@ -9,7 +9,7 @@
?>
<aside id="convos" class="last-convos ultimes-convocatories">
<section id="convos" class="last-convos ultimes-convocatories">
<?php
// Detect plugin. For use on Front End only.
include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
@ -81,4 +81,4 @@
</main>
<?php } //closing if is_plugin_active ?>
</aside>
</section>