From 47b221d422c84b0be1973eca6109d41081d62acb Mon Sep 17 00:00:00 2001 From: Benjamin Bach Date: Tue, 4 May 2021 22:21:50 +0200 Subject: [PATCH] Responsive menu --- .../datacoop2020/assets/static/css/style.scss | 47 +++++++++++++++---- .../datacoop2020/layouts/_default/baseof.html | 4 +- 2 files changed, 38 insertions(+), 13 deletions(-) diff --git a/themes/datacoop2020/assets/static/css/style.scss b/themes/datacoop2020/assets/static/css/style.scss index 0620d85..e5e7f7b 100644 --- a/themes/datacoop2020/assets/static/css/style.scss +++ b/themes/datacoop2020/assets/static/css/style.scss @@ -75,8 +75,11 @@ body { } .everything-container { - height: 100%; - max-width: 1200px; + // Desktop + @include media-breakpoint-up(md) { + height: 100%; + max-width: 1200px; + } padding: 0; // Overwrites .container-fluid margin: 0; // Overwrites .container-fluid @@ -84,11 +87,20 @@ body { { max-width: 1200px; margin: 0; // Overwrites .row - height: 100%; + height: 100%; } } +// Mobile +@include media-breakpoint-down(sm) { + display: block; + .datacoop-sidebar { + height: 0; + display: block; + } +} + .datacoop-sidebar { background-color: $datacoop-light-blue; } @@ -104,12 +116,25 @@ body { color: $datacoop-purple; } - .datacoop-menulists - { - /*position: absolute;*/ - /*bottom: 20px;*/ + // Mobile + @include media-breakpoint-down(sm) { + display: block; + width: 100%; } + // Desktop + @include media-breakpoint-up(md) { + height: 100%; + width: 340px; + + // Overwrite because of usage of flexbox stuff, we use display: block + .navbar-collapse, + .datacoop-menulists + { + display: block !important; + } + + } .data-coop-sidebar-logo { display: block; @@ -118,8 +143,9 @@ body { display: block; width: 100%; margin-left: 2px; + max-width: 400px; } - font-size: 20px; + margin-bottom: 30px; } ul @@ -138,14 +164,15 @@ body { ul > li > a { - font-size: 40px; + font-size: 30px; } ul.datacoop-langchooser { + display: block !important; margin-top: 20px; li { - display: inline-block; + display: block; margin-right: 20px; a { font-size: 18px; diff --git a/themes/datacoop2020/layouts/_default/baseof.html b/themes/datacoop2020/layouts/_default/baseof.html index 6f461b3..443d40d 100644 --- a/themes/datacoop2020/layouts/_default/baseof.html +++ b/themes/datacoop2020/layouts/_default/baseof.html @@ -9,10 +9,8 @@
-