xdrm-brackets
/
xdrm.io
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix: media queries for the banner

This commit is contained in:
Adrien Marquès 2021-07-10 14:26:57 +02:00
parent d05b75a7c3
commit 8f6981e2b9
Signed by: xdrm-brackets
GPG Key ID: D75243CA236D825E
1 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Banner.vue
View File

@ -61,8 +61,8 @@
$icon-size: 9rem; $icon-size: 9rem;
$wave-height: 6.3rem; $wave-height: 6.3rem;
$mq-noresize: 1250px; $mq-noresize: 990px;
$mq-noicon: 940px; $mq-topicon: $mq-noresize;
$mq-resize: 697px; $mq-resize: 697px;
#banner { #banner {
@ -73,7 +73,7 @@
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
padding-bottom: #{$wave-height*1.5}; padding-bottom: #{$wave-height*1};
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: stretch; justify-content: stretch;
@ -126,6 +126,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.icon { .icon {
flex: $icon-size 0 0; flex: $icon-size 0 0;
@ -206,13 +207,14 @@
} }
// remove icon if less than $mq-noresize px wide // put icon on top instead of left if less than $mq-noresize px wide
@media screen and (max-width: $mq-noicon){ @media screen and (max-width: $mq-topicon){
#banner { #banner {
flex-direction: column; flex-direction: column;
.icon-wrapper { .icon-wrapper {
padding: 2rem 0;
flex: auto; flex: auto;
order: 2; order: 0;
} }
} }
} }