xarxaprod-wp-theme/sass/components/content/_posts-and-pages.scss

217 lines
4.1 KiB
SCSS
Raw Normal View History

2024-01-09 16:13:20 +01:00
@media screen {
.sticky {
display: block;
}
.post,
.page {
margin: 0 0 5em;
2024-01-09 16:13:20 +01:00
}
.updated:not(.published) {
display: none;
}
.page-content,
.entry-content,
.entry-summary {
margin: 1.5em 0 0;
}
.page-links {
clear: both;
margin: 0 0 1.5em;
}
/* used in
* ./template-parts/section-eachpost.php
* */
.xarxaprod-card-each {
display: flex;
flex-direction: column;
2024-01-09 16:13:20 +01:00
.entry-title,h6 {
border-bottom: 1px solid $color__black;
margin: 0;
padding: 0.5rem 0;
}
p {
padding: 0.5rem 0;
margin:0;
}
.more-link {
// display: inline-blocK;
margin-top: 2rem;
}
.button-more {
padding:0;
margin:0;
}
2024-01-09 16:13:20 +01:00
}
/* used in
* ./template-parts/content-xarxaprod-ajut.php
* ./template-parts/section-eachpost.php
* */
.xarxaprod-fund-info-fields,
.xarxaprod-fund-info-contact-fields {
2024-01-09 16:13:20 +01:00
display: grid;
.xarxaprod-fund-info-field {
2024-01-09 16:13:20 +01:00
padding-bottom: 1rem;
border-bottom: 1px solid $color__black;
}
h6 {
font-size: 2.4rem;
font-variant: all-petite-caps;
}
p {
margin: 0.5rem 0 0 0;
}
li {
font-size: 1.3rem;
}
}
.xarxaprod-fund-info-contact-fields {
.xarxaprod-fund-info-field {
2024-01-09 16:13:20 +01:00
margin: 0;
}
}
.xarxaprod-fund-info-fields {
.xarxaprod-fund-info-field {
2024-01-09 16:13:20 +01:00
margin: 1rem 0 0.5rem 0;
}
}
.xarxaprod-funder-name,
.xarxaprod-fund-contact-name,
.xarxaprod-fund-web {
2024-01-09 16:13:20 +01:00
display: flex;
margin:0;
padding: 0;
font-variant: all-petite-caps;
font-size: 1.1rem;
line-height: 0.9;
align-items: center;
a {
text-decoration: none;
font-size: 0.8rem;
}
}
/* filters form custom fields
*/
.xarxaprod-filtered-funds {
display:grid;
grid: 1fr;
.os_fund_target,
.os_fund_source,
.os_fund_field {
.filter {
display: none;
}
2024-01-09 16:13:20 +01:00
}
}
.xarxaprod-filters {
section {
margin: 1em 0;
}
.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
grid-template-columns: repeat(1 , minmax(0,1fr));
}
.xarxaprod-titol-opcions {
// applied in forms and contactforms
display: inline-block;
width: 100%;
max-width: 13em;
margin-bottom: 0;
margin-bottom: 1rem;
padding: 0.6em 1em 0.4em;
clear: both;
cursor: pointer;
font-family: $font__black;
font-size: $font__size-body*0.9;
border: 1px solid $color__border-button;
text-transform: uppercase;
&:after {
content: ">";
display: inline;
float:right;
}
&:hover {
&:after {
transform: rotate(90deg);
animation: rotate 0.5s;
}
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(90deg);
}
}
}
2024-01-09 16:13:20 +01:00
}
@media screen and (max-width: 48em) {
//only smaller than 48em
.post,
.page {
margin: 0 0 1em;
}
.xarxaprod-filters {
section {
display: block;
h5 {
display: block;
width: 100%;
}
.filter {
display: inline-block;
width: 45%;
margin-top: 0.5rem;
margin-right: 0.3em;
float: left;
&:last-of-type {
margin-bottom: 2rem;
}
}
}
}
2024-01-09 16:13:20 +01:00
}
@media screen and (min-width: 48em) {
//only bigger than 48em
.xarxaprod-filters {
padding-right: 2em;
section {
margin: 1em 0;
}
}
.xarxaprod-filtered-funds {
grid-template-columns: 1fr 2fr;
2024-01-09 16:13:20 +01:00
}
.archive-posts {
grid-template-columns: repeat(2 , minmax(0,1fr));
grid-gap: 3em;
2024-01-09 16:13:20 +01:00
}
}
@media screen and (min-width: 80em) {
//only bigger than 80rem
.xarxaprod-filtered-funds {
2024-01-09 16:13:20 +01:00
grid-template-columns: 1fr 3fr;
}
.archive-posts {
grid-template-columns: repeat(3 , minmax(0,1fr));
2024-01-09 16:13:20 +01:00
}
}