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

fix: for mobile banner adapts forever

This commit is contained in:
Adrien Marquès 2019-05-10 16:31:09 +02:00
parent 4cc9dd9a81
commit d72ebdba61
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Banner.vue
View File

@ -63,6 +63,7 @@
$mq-noresize: 1250px; $mq-noresize: 1250px;
$mq-noicon: 940px; $mq-noicon: 940px;
$mq-resize: 697px;
#banner { #banner {
flex: #{$banner-size + $wave-height*1.5} 0 0; flex: #{$banner-size + $wave-height*1.5} 0 0;
@ -80,6 +81,7 @@
align-items: stretch; align-items: stretch;
color: #fff; color: #fff;
font-size: 1rem;
font-family: 'Roboto'; font-family: 'Roboto';
font-weight: 300; font-weight: 300;
white-space: nowrap; white-space: nowrap;
@ -190,7 +192,7 @@
color: rgba(#fff, .7); color: rgba(#fff, .7);
span { span {
margin: 0 2rem; margin: 0 2em;
} }
} }
@ -198,7 +200,7 @@
display: block; display: block;
position: relative; position: relative;
font-size: 5rem; font-size: 5em;
.lastname { .lastname {
font-weight: 100; font-weight: 100;
@ -228,4 +230,11 @@
padding: 0 calc( 50% - #{$mq-noresize/2} ); padding: 0 calc( 50% - #{$mq-noresize/2} );
} }
} }
// shring text forever
@media screen and (max-width: $mq-resize){
#banner {
font-size: 2vw;
}
}
</style> </style>