Template:FrDS Styles: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
RLopez-WMF (talk | contribs) No edit summary |
RLopez-WMF (talk | contribs) No edit summary |
||
| Line 210: | Line 210: | ||
/* layout.css */ |
/* layout.css */ |
||
.header { |
.header { |
||
display: flex; |
display: flex; |
||
| Line 229: | Line 228: | ||
gap: 40px; |
gap: 40px; |
||
padding: 40px 20px; |
padding: 40px 20px; |
||
} |
|||
.block--full-width{ |
|||
padding: 0; |
|||
} |
} |
||
.block__wrapper { |
.block__wrapper { |
||
| Line 296: | Line 298: | ||
flex-direction: row; |
flex-direction: row; |
||
align-items:center; |
align-items:center; |
||
} |
|||
.block--full-width{ |
|||
padding: 40px 20px; |
|||
} |
} |
||
} |
} |
||
| Line 497: | Line 502: | ||
line-height: 24px; |
line-height: 24px; |
||
font-family: 'Source Serif Pro', Georgia, 'Times New Roman', Times, serif; |
font-family: 'Source Serif Pro', Georgia, 'Times New Roman', Times, serif; |
||
} |
|||
.bg--purple-light .steps li::before{ |
|||
border: 1px solid #D5D1EC !important; |
|||
background-color: #FFFFFF; |
|||
} |
} |
||
| Line 576: | Line 585: | ||
flex-direction: column; |
flex-direction: column; |
||
gap: 8px; |
gap: 8px; |
||
} |
|||
/* blocks/card-large.css */ |
|||
.card-large{ |
|||
display: flex; |
|||
padding: 0; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
gap: 16px; |
|||
align-self: stretch; |
|||
border-radius: 16px; |
|||
border: 1px solid #FBEEBF; |
|||
background-color: #FFFDF8; |
|||
} |
|||
.block--full-width .card-large{ |
|||
border-radius: 0; |
|||
} |
|||
.card-large.bg--purple-light{ |
|||
border: 1px solid #D5D1EC !important; |
|||
background-color: #F9F7FF !important; |
|||
} |
|||
.card-large .top{ |
|||
padding: 40px 20px 20px 20px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16px; |
|||
} |
|||
.card-large .top ol{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16px; |
|||
} |
|||
.card-large .bottom{ |
|||
padding: 20px 20px 40px 20px; |
|||
background-color: #FDF6DF; |
|||
} |
|||
.card-large .single{ |
|||
padding: 20px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16px; |
|||
} |
|||
@media only screen and (min-width:960px) { |
|||
.card-large .top{ |
|||
padding: 80px 80px 40px 80px; |
|||
} |
|||
.card-large .bottom{ |
|||
padding: 40px 80px 80px 80px; |
|||
} |
|||
.card-large .single { |
|||
padding: 60px; |
|||
} |
|||
.block--full-width .card-large{ |
|||
border-radius: 16px; |
|||
} |
|||
} |
|||
/* blocks/card-testimonial.css */ |
|||
.cards, |
|||
.card-donor-love{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16px; |
|||
} |
|||
.card{ |
|||
display: flex; |
|||
padding: 20px; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
gap: 16px; |
|||
align-self: stretch; |
|||
border-radius: 16px; |
|||
border: 2px solid #FBEEBF; |
|||
} |
|||
.card .author{ |
|||
font-family: 'Source Serif Pro', Georgia, 'Times New Roman', Times, serif; |
|||
} |
|||
.card-donor-love .card{ |
|||
border: 1px solid #FBEEBF; |
|||
flex-direction: column; |
|||
gap: 16px; |
|||
} |
|||
.card-donor-love .card::before{ |
|||
content: ''; |
|||
width: 32px; |
|||
height: 32px; |
|||
background-image: url('https://upload.wikimedia.org/wikipedia/donate/a/a2/Icon-quote-yellow.png'); |
|||
background-size: contain; |
|||
background-repeat: no-repeat; |
|||
background-position: top center; |
|||
flex: none; |
|||
} |
|||
.card-donor-love .card .author{ |
|||
padding-top: 16px; |
|||
display: block; |
|||
} |
|||
@media only screen and (min-width:960px) { |
|||
.cards{ |
|||
flex-direction: row; |
|||
align-items: flex-start; |
|||
align-self: stretch; |
|||
} |
|||
.cards p{ |
|||
font-size: 16px; |
|||
line-height: 24px; |
|||
} |
|||
.card-donor-love .card{ |
|||
flex-direction: row; |
|||
gap: 30px; |
|||
} |
|||
} |
|||
/* block/cta.css */ |
|||
.cta { |
|||
text-align: center; |
|||
} |
|||
@media only screen and (min-width:960px) { |
|||
.cta{ |
|||
padding: 120px 20px 0 20px; |
|||
} |
|||
.cta .image img{ |
|||
max-width: 960px; |
|||
} |
|||
} |
|||
/* block/card-video.css */ |
|||
.card-video-wrapper{ |
|||
flex: none; |
|||
} |
|||
.card-video { |
|||
display: flex; |
|||
max-width: 332px; |
|||
padding: 20px; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
gap: 16px; |
|||
border-radius: 16px; |
|||
border: 1px solid #CCCCCC; |
|||
background: #F7F8F0; |
|||
} |
|||
.card-video img { |
|||
max-width: 100%; |
|||
} |
|||
.card-video .caption { |
|||
color: #202122; |
|||
font-size: 16px; |
|||
font-weight: 590; |
|||
line-height: 24px; |
|||
text-decoration: none; |
|||
} |
} |
||
Revision as of 23:33, 14 October 2024