pagesassos/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity

fix: pricing style adjustements

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

34
assets/development/styles/organization.css
View file

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

2
views/organization.twig
View file

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