Template:FrDS Styles: Difference between revisions
Content deleted Content added
RLopez-WMF (talk | contribs) No edit summary |
RLopez-WMF (talk | contribs) No edit summary |
||
Line 210:
/* layout.css */
.header {
display: flex;
Line 229 ⟶ 228:
gap: 40px;
padding: 40px 20px;
}
.block--full-width{
padding: 0;
}
.block__wrapper {
Line 296 ⟶ 298:
flex-direction: row;
align-items:center;
}
.block--full-width{
padding: 40px 20px;
}
}
Line 497 ⟶ 502:
line-height: 24px;
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 ⟶ 585:
flex-direction: column;
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;
}
| |||