improve responsive view

This commit is contained in:
Hans Pagel 2020-12-10 16:15:01 +01:00
parent b9129c843d
commit dd0c1044d0
2 changed files with 12 additions and 2 deletions

View File

@ -1,6 +1,8 @@
<template> <template>
<div class="banner"> <div class="banner">
Were about to release <a href="https://blog.ueber.io/post/our-plan-for-tiptap-2/">tiptap 2</a>. Become a sponsor to get early access! <span class="banner__message">
Were about to release <a href="https://blog.ueber.io/post/our-plan-for-tiptap-2/">tiptap 2</a>. Become a sponsor to get early access!
</span>
<a href="https://github.com/sponsors/ueberdosis" class="banner__action"> <a href="https://github.com/sponsors/ueberdosis" class="banner__action">
Sponsor 💖 Sponsor 💖
</a> </a>

View File

@ -6,9 +6,10 @@
color: $color-white; color: $color-white;
border-bottom: 1px solid $color-grey; border-bottom: 1px solid $color-grey;
text-align: center; text-align: center;
padding: 1rem; padding: 0.5rem 1rem;
&__action { &__action {
display: inline-block;
background-color: $color-white; background-color: $color-white;
transition: 0.1s ease-in-out all; transition: 0.1s ease-in-out all;
color: $color-black; color: $color-black;
@ -16,10 +17,17 @@
padding: 0.4rem 0.7rem; padding: 0.4rem 0.7rem;
margin: 0.5rem; margin: 0.5rem;
border-radius: 5px; border-radius: 5px;
white-space: nowrap;
&:hover { &:hover {
background-color: $color-grey; background-color: $color-grey;
} }
} }
&__message {
@media all and (max-width: 600px) {
display: block;
}
}
} }