From 64be35067702f8cb960c4807b538db9158b5cce9 Mon Sep 17 00:00:00 2001 From: Oriol Carbonell Date: Mon, 8 Apr 2024 09:19:52 +0200 Subject: [PATCH] Add styles for small screens --- web/static/numerus.css | 63 ++++++++++++++++++++++++++++++++++++++---- 1 file changed, 58 insertions(+), 5 deletions(-) diff --git a/web/static/numerus.css b/web/static/numerus.css index 8fc3580..2bc1591 100644 --- a/web/static/numerus.css +++ b/web/static/numerus.css @@ -10322,9 +10322,8 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r } .web nav ul { - margin: 0; - justify-content: space-around; - } + margin: 0; + justify-content: space-around; } .web nav ul li { @@ -10388,7 +10387,7 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r padding: 5rem 0 0 0; display: flex; justify-content: space-between; - align-items: center; + align-items: flex-start; } .web nav ul { @@ -10494,7 +10493,6 @@ grid-row-gap: 0px; justify-content: start; padding: 1rem; border-bottom: 1px solid var(--numerus--color--black); ->>>>>>> Stashed changes } .mondrian3 { grid-area: 2 / 1 / 3 / 2; @@ -10631,7 +10629,18 @@ margin: 5rem 0; width: 100%; font-size: calc(16px + 1vw); color: var(--numerus--color--black); + display: flex; + gap: 2.5rem; } + +.download a { + text-decoration: none; +} + +.download svg { + width: 30px; +} + .deco_2 { grid-area: 4 / 5 / 5 / 6; background: white; @@ -10673,3 +10682,47 @@ margin: 5rem 0; .price_cta p { margin: 2rem 0; } + + +/* home mobile */ + +@media screen and (max-width: 600px) { + + .mondrian { + display: flex; + flex-direction: column; + } + + .mondrian-element.mondrian1, .mondrian-element.mondrian3, .mondrian-element.mondrian5, .mondrian-element.mondrian6, .mondrian-element.mondrian7, .mondrian-element.mondrian8, .mondrian-element.mondrian9, .mondrian-element.mondrian11, .mondrian-element.mondrian12, .mondrian-element.mondrian13, .mondrian-element.mondrian15 { + display: none; + } + + .description { + display: flex; + flex-direction: column; + gap: 30px; + margin-top: 60px; + } + .open { + display: flex; + flex-direction: column; + } + + .price { + display: flex; + flex-direction: column; + gap: 30px; + margin: 60px 0; + border-top: 1px solid; + padding-top: 30px; + } + + footer { + flex-direction: column; + gap: 30px; + } + + footer nav ul { + padding-top: 30px !important; + } +}