Fix side navigation padding outside Help (#204)

* Only apply Help.vue style to the Help page

* Linting
This commit is contained in:
Soitora 2020-05-16 15:38:40 +02:00 committed by GitHub
parent 9e716b406a
commit 126ec8a287
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -22,7 +22,10 @@
:href="helpItem.link"
tabindex="1"
>
<div class="card" :class="'card__' + helpItem.title">
<div
class="card"
:class="'card__' + helpItem.title"
>
<header v-if="helpItem.faqApp">
<CellphoneAndroidIcon />
<h3>{{ helpItem.title }}</h3>
@ -60,7 +63,10 @@
rel="noreferrer"
tabindex="1"
>
<div class="card" :class="'card__' + helpItem.title">
<div
class="card"
:class="'card__' + helpItem.title"
>
<header v-if="helpItem.discord">
<DiscordIcon />
<span>
@ -125,7 +131,7 @@ export default {
DiscordIcon,
RedditIcon,
GithubIcon,
LifebuoyIcon
LifebuoyIcon,
},
computed: {
@ -145,18 +151,18 @@ export default {
return (
this.algolia && this.algolia.apiKey && this.algolia.indexName
);
}
}
},
},
};
</script>
<style lang="stylus">
.page
.help-page
.page
padding-left 0 !important
padding-bottom 2rem
display block
.theme-custom-content
.theme-custom-content
max-width 75rem
margin 0 auto
padding 2rem 2.5rem
@ -181,7 +187,7 @@ export default {
input
background #ffffff url('/assets/img/search.83621669.svg') 0.6rem 0.9rem no-repeat
background-size 1rem
box-shadow 0 0 30px rgba(177,174,174,0.322)
box-shadow 0 0 30px rgba(177, 174, 174, 0.322)
border 1px solid #cfd4db
font-size 1.2rem
height 3rem
@ -218,7 +224,7 @@ export default {
h3
display inline-block
margin-left 1.8rem
margin-bottom 0px
margin-bottom 0
h3
margin 10px
p
@ -227,8 +233,8 @@ export default {
font-size 0.95rem
&:hover
border-bottom 2px solid $accentColor
border-bottom-left-radius 0px
border-bottom-right-radius 0px
border-bottom-left-radius 0
border-bottom-right-radius 0
position relative
.material-design-icon
color $accentColor
@ -252,7 +258,6 @@ export default {
border-bottom 2px solid $githubAccentColor
h3
color $githubAccentColor
.column
border 1px solid #cfd4db
border-radius 6px
@ -264,11 +269,10 @@ export default {
.card
box-shadow 0 0 30px #b1aeae52, 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4)
outline none
.row
display grid
grid-template-columns repeat(4, 1fr);
grid-auto-rows: 1fr;
grid-template-columns repeat(4, 1fr)
grid-auto-rows 1fr
grid-gap 1rem
&:after
content ''
@ -276,6 +280,8 @@ export default {
clear both
@media screen and (max-width $MQMobile)
.help-page
.page
.theme-custom-content
padding 2rem 0.75rem
padding-bottom 0
@ -316,8 +322,8 @@ export default {
right 0
top -4px
h3
margin-left 0px
margin-bottom 0px
margin-left 0
margin-bottom 0
h3
font-size 1.5rem
display inline-block
@ -342,9 +348,7 @@ export default {
h3
color $githubAccentColor
.row
grid-template-columns repeat(1, 1fr);
.help-page
grid-template-columns repeat(1, 1fr)
.navbar
padding-left 1rem
.logo
@ -356,6 +360,7 @@ export default {
.site-name.can-hide
display none
.nav-links.can-hide
.nav-item, .repo-link
.nav-item,
.repo-link
padding-left 0.8em
</style>