Skip to content

Fix/194 banner on mobile #198

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 16, 2020
Merged

Fix/194 banner on mobile #198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3020a7e
fix (#194): update mobile banner styles
bencodezen Jul 16, 2020
a54f94f
feature: add responsive mixin for future styles
bencodezen Jul 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 25 additions & 2 deletions src/.vuepress/components/BetaBanner.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,32 @@ export default {}
<aside class="beta-banner">
<p>
⚠️ Beta Version: Docs are still under development and are subject to
change. ⚠️
change.
</p>
</aside>
</template>

<style></style>
<style lang="scss" scoped>
.beta-banner {
position: fixed;
z-index: 20;
top: 3.6rem;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #fffedb;
box-sizing: border-box;
border-bottom: 1px solid #eaecef;
font-weight: bold;
text-align: center;
padding: 10px 20px;
box-sizing: border-box;

p {
margin: 0;
line-height: 1.4;
}
}
</style>
15 changes: 0 additions & 15 deletions src/.vuepress/styles/index.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,21 +125,6 @@
}
}

.beta-banner
position fixed
z-index 20
top $navbarHeight
left 0
right 0
height 3rem
display flex
align-items center
justify-content center
background-color #fffedb
box-sizing border-box
border-bottom 1px solid $borderColor
font-weight bold

.scrimba,
.vueschool {
background-color: #e7ecf3;
Expand Down
2 changes: 1 addition & 1 deletion src/.vuepress/theme/styles/index.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ body
position fixed
z-index 10
margin 0
top $navbarHeight
top 6.6rem // $navbarHeight + $betaBannerHeight
left 0
bottom 0
box-sizing border-box
Expand Down
5 changes: 5 additions & 0 deletions src/.vuepress/theme/styles/mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@mixin breakpoint($breakpoint) {
@media (min-width: $breakpoint) {
@content;
}
}
2 changes: 1 addition & 1 deletion src/.vuepress/theme/styles/mobile.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
// wide mobile
@media (max-width: $MQMobile)
.sidebar
top 0
top $navbarHeight
padding-top $navbarHeight
transform translateX(-100%)
transition transform .2s ease
Expand Down