diff --git a/assets/sass/general.scss b/assets/sass/general.scss index b3c283e..24adc58 100644 --- a/assets/sass/general.scss +++ b/assets/sass/general.scss @@ -37,8 +37,9 @@ h2 { } h3 { - margin-top: .5em; - margin-bottom: .5em; + margin: 0; + padding-top: 1em; + padding-bottom: .5em; } a { diff --git a/assets/sass/prices.scss b/assets/sass/prices.scss index 0faa68b..3c14112 100644 --- a/assets/sass/prices.scss +++ b/assets/sass/prices.scss @@ -1,6 +1,11 @@ .pricing-layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; + column-gap: 1rem; +} + +.forfait-price, .move-price { + font-weight: bold; } .operations-container { @@ -8,24 +13,23 @@ } .operations-mosaic { - // display: grid; - // grid-template-columns: 1fr 1fr; - // grid-gap: 1rem; columns: 2; + grid-gap: 1rem; } .operations-category { - display: flex; - flex-direction: column; + page-break-inside: avoid; } .operations-table { + // card border: 1px solid black; border-radius: 5px; width: 100%; - padding: .5rem; border-collapse: separate; background: lighten($background-dark, 8%); + padding-bottom: .2rem; + th { opacity: 0.6; text-align: left; @@ -33,12 +37,16 @@ margin-bottom: 1rem; border-bottom: 1px solid gray; } - tr { - td { - } + tr:nth-child(even) { + background-color: $background-dark; + } + td, th { + padding: .5rem 1rem; } .operation-price { text-align: right; + min-width: 4rem; + // prevent collapse of the prices } td.operation-price { color: $primary; @@ -59,7 +67,10 @@ .operations-category { margin-bottom: 1rem; } - .operation-price { - min-width: 4rem; +} + +@media (min-width: $lg-breakpoint) { + .operations-mosaic { + columns: 3; } } diff --git a/layouts/tarifs/section.html b/layouts/tarifs/section.html index 598ec2b..f7974a7 100644 --- a/layouts/tarifs/section.html +++ b/layouts/tarifs/section.html @@ -8,7 +8,7 @@
Opération | Prix | @@ -48,6 +49,7 @@
---|