fix: pricing style adjustements

This commit is contained in:
Matthieu Bessat 2020-08-04 17:28:44 +02:00
parent e49dbcdca3
commit 19438d6a19
2 changed files with 31 additions and 5 deletions

View file

@ -442,11 +442,13 @@ section {
.pricing {
display: flex;
justify-content: center;
margin-bottom: -1em;
}
.pricing-card {
min-width: 10em;
max-width: 14em;
height: 10em;
min-height: 10em;
width: 100%;
padding: 1.5em 1em;
text-align: center;
@ -454,9 +456,10 @@ section {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-right: 1.5em;
color: white;
background-color: rgba(253, 110, 11, .780);
margin-right: 1.5em;
margin-bottom: 1em;
}
.pricing .pricing-card:nth-child(1) {
@ -483,6 +486,10 @@ section {
font-size: 1.8em;
}
.pricing-description {
opacity: 0.9;
}
/* *****************************************************************************
* CONTACT
@ -495,9 +502,10 @@ section {
}
.contact-item {
display: flex;
justify-content: space-between;
align-items: center;
display: grid;
grid-template-columns: 2.5em 1fr;
padding-top: .75em;
padding-bottom: .75em;
padding-left: 2em;
@ -697,6 +705,9 @@ RESPONSIVE
.media-modal {
width: 70%;
}
.pricing {
flex-wrap: wrap;
}
}
@ -793,10 +804,25 @@ RESPONSIVE
flex-direction: column;
align-items: center;
}
.pricing.dense {
flex-direction: row;
}
.pricing.dense .pricing-card {
min-height: 6em;
margin-right: .5em;
margin-left: .5em;
padding: 1em;
}
.pricing.dense .pricing-name {
font-size: 1.2em;
}
.pricing-card {
margin-left: 0;
margin-right: 0;
margin-bottom: 1em;
}
.org-container {

View file

@ -154,7 +154,7 @@
<h2>Tarifs</h2>
<div class="section-divider"></div>
</div>
<div class="pricing">
<div class="pricing {% if data.pricing|length > 3 %}dense{% endif %}">
{% for item in data.pricing %}
<div class="pricing-card">
<div class="pricing-label">