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