Merge pull request #1558 from syuilo/better-mobile-design

Better mobile design
This commit is contained in:
syuilo 2018-04-27 21:34:03 +09:00 committed by GitHub
commit 0bbfbfc762
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 189 additions and 122 deletions

View file

@ -8,6 +8,10 @@
html html
height 100% height 100%
background #ececed
&[data-darkmode]
background #191B22
body body
display flex display flex

View file

@ -31,6 +31,9 @@ export default Vue.extend({
font-size 0.9em font-size 0.9em
padding 16px padding 16px
@media (min-width 600px)
padding 24px 32px
&:after &:after
content "" content ""
display block display block

View file

@ -238,7 +238,7 @@ export default Vue.extend({
root(isDark) root(isDark)
font-size 12px font-size 12px
border-bottom solid 1px #eaeaea border-bottom solid 1px isDark ? #1c2023 : #eaeaea
&:first-child &:first-child
border-radius 8px 8px 0 0 border-radius 8px 8px 0 0
@ -266,6 +266,9 @@ root(isDark)
@media (min-width 500px) @media (min-width 500px)
padding 16px padding 16px
@media (min-width 600px)
padding 16px 32px
.avatar-anchor .avatar-anchor
display inline-block display inline-block
@ -308,7 +311,10 @@ root(isDark)
background transparent background transparent
> article > article
padding 14px 16px 9px 16px padding 16px 16px 9px
@media (min-width 600px)
padding 32px 32px 22px
&:after &:after
content "" content ""

View file

@ -199,10 +199,13 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.mk-notes root(isDark)
background #fff background isDark ? #282C37 : #fff
border-radius 8px border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2) box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
@media (min-width 500px)
box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
.transition .transition
.mk-notes-enter .mk-notes-enter
@ -260,8 +263,8 @@ export default Vue.extend({
> footer > footer
text-align center text-align center
border-top solid 1px #eaeaea border-top solid 1px #eaeaea
border-bottom-left-radius 4px border-bottom-left-radius 8px
border-bottom-right-radius 4px border-bottom-right-radius 8px
&:empty &:empty
display none display none
@ -270,10 +273,18 @@ export default Vue.extend({
margin 0 margin 0
padding 16px padding 16px
width 100% width 100%
color $theme-color
border-radius 0 0 8px 8px border-radius 0 0 8px 8px
@media (min-width 500px)
padding 20px
&:disabled &:disabled
opacity 0.7 opacity 0.7
.mk-notes[data-darkmode]
root(true)
.mk-notes:not([data-darkmode])
root(false)
</style> </style>

View file

@ -1,15 +1,15 @@
<template> <template>
<div class="mk-notification"> <div class="mk-notification">
<div class="notification reaction" v-if="notification.type == 'reaction'"> <div class="notification reaction" v-if="notification.type == 'reaction'">
<mk-time :time="notification.createdAt"/>
<router-link class="avatar-anchor" :to="notification.user | userPage"> <router-link class="avatar-anchor" :to="notification.user | userPage">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
</router-link> </router-link>
<div class="text"> <div>
<p> <header>
<mk-reaction-icon :reaction="notification.reaction"/> <mk-reaction-icon :reaction="notification.reaction"/>
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link> <router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
</p> <mk-time :time="notification.createdAt"/>
</header>
<router-link class="note-ref" :to="notification.note | notePage"> <router-link class="note-ref" :to="notification.note | notePage">
%fa:quote-left%{{ getNoteSummary(notification.note) }} %fa:quote-left%{{ getNoteSummary(notification.note) }}
%fa:quote-right% %fa:quote-right%
@ -18,38 +18,54 @@
</div> </div>
<div class="notification renote" v-if="notification.type == 'renote'"> <div class="notification renote" v-if="notification.type == 'renote'">
<mk-time :time="notification.createdAt"/>
<router-link class="avatar-anchor" :to="notification.user | userPage"> <router-link class="avatar-anchor" :to="notification.user | userPage">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
</router-link> </router-link>
<div class="text"> <div>
<p> <header>
%fa:retweet% %fa:retweet%
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link> <router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
</p> <mk-time :time="notification.createdAt"/>
</header>
<router-link class="note-ref" :to="notification.note | notePage"> <router-link class="note-ref" :to="notification.note | notePage">
%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right% %fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
</router-link> </router-link>
</div> </div>
</div> </div>
<div class="notification follow" v-if="notification.type == 'follow'">
<router-link class="avatar-anchor" :to="notification.user | userPage">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
</router-link>
<div>
<header>
%fa:user-plus%
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
<mk-time :time="notification.createdAt"/>
</header>
</div>
</div>
<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
<router-link class="avatar-anchor" :to="notification.user | userPage">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
</router-link>
<div>
<header>
%fa:chart-pie%
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
<mk-time :time="notification.createdAt"/>
</header>
<router-link class="note-ref" :to="notification.note | notePage">
%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
</router-link>
</div>
</div>
<template v-if="notification.type == 'quote'"> <template v-if="notification.type == 'quote'">
<mk-note :note="notification.note"/> <mk-note :note="notification.note"/>
</template> </template>
<div class="notification follow" v-if="notification.type == 'follow'">
<mk-time :time="notification.createdAt"/>
<router-link class="avatar-anchor" :to="notification.user | userPage">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
</router-link>
<div class="text">
<p>
%fa:user-plus%
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
</p>
</div>
</div>
<template v-if="notification.type == 'reply'"> <template v-if="notification.type == 'reply'">
<mk-note :note="notification.note"/> <mk-note :note="notification.note"/>
</template> </template>
@ -57,22 +73,6 @@
<template v-if="notification.type == 'mention'"> <template v-if="notification.type == 'mention'">
<mk-note :note="notification.note"/> <mk-note :note="notification.note"/>
</template> </template>
<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
<mk-time :time="notification.createdAt"/>
<router-link class="avatar-anchor" :to="notification.user | userPage">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
</router-link>
<div class="text">
<p>
%fa:chart-pie%
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
</p>
<router-link class="note-ref" :to="notification.note | notePage">
%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
</router-link>
</div>
</div>
</div> </div>
</template> </template>
@ -95,44 +95,57 @@ export default Vue.extend({
> .notification > .notification
padding 16px padding 16px
font-size 12px
overflow-wrap break-word overflow-wrap break-word
@media (min-width 350px)
font-size 14px
@media (min-width 500px)
font-size 16px
@media (min-width 600px)
padding 32px
&:after &:after
content "" content ""
display block display block
clear both clear both
> .mk-time
display inline
position absolute
top 16px
right 12px
vertical-align top
color rgba(0, 0, 0, 0.6)
font-size 0.9em
> .avatar-anchor > .avatar-anchor
display block display block
float left float left
img img
min-width 36px width 36px
min-height 36px height 36px
max-width 36px
max-height 36px
border-radius 6px border-radius 6px
> .text @media (min-width 500px)
width 42px
height 42px
> div
float right float right
width calc(100% - 36px) width calc(100% - 36px)
padding-left 8px padding-left 8px
p @media (min-width 500px)
margin 0 width calc(100% - 42px)
> header
display flex
align-items center
white-space nowrap
i, .mk-reaction-icon i, .mk-reaction-icon
margin-right 4px margin-right 4px
> .mk-time
margin-left auto
color rgba(0, 0, 0, 0.3)
font-size 0.9em
> .note-preview > .note-preview
color rgba(0, 0, 0, 0.7) color rgba(0, 0, 0, 0.7)
@ -147,11 +160,11 @@ export default Vue.extend({
margin-right 3px margin-right 3px
&.renote &.renote
.text p i > div > header i
color #77B255 color #77B255
&.follow &.follow
.text p i > div > header i
color #53c7ce color #53c7ce
</style> </style>

View file

@ -1,18 +1,20 @@
<template> <template>
<div class="mk-notifications"> <div class="mk-notifications">
<div class="notifications" v-if="notifications.length != 0"> <transition-group name="mk-notifications" class="transition notifications">
<template v-for="(notification, i) in _notifications"> <template v-for="(notification, i) in _notifications">
<mk-notification :notification="notification" :key="notification.id"/> <mk-notification :notification="notification" :key="notification.id"/>
<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date"> <p class="date" :key="notification.id + '_date'" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date">
<span>%fa:angle-up%{{ notification._datetext }}</span> <span>%fa:angle-up%{{ notification._datetext }}</span>
<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span> <span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
</p> </p>
</template> </template>
</div> </transition-group>
<button class="more" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications"> <button class="more" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template> <template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>
{{ fetchingMoreNotifications ? '%i18n:!common.loading%' : '%i18n:!@more%' }} {{ fetchingMoreNotifications ? '%i18n:!common.loading%' : '%i18n:!@more%' }}
</button> </button>
<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p> <p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p>
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p> <p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
</div> </div>
@ -102,23 +104,26 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-notifications .mk-notifications
margin 8px auto margin 0 auto
padding 0
max-width 500px
width calc(100% - 16px)
background #fff background #fff
border-radius 8px border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2) box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
@media (min-width 500px) @media (min-width 500px)
margin 16px auto box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
width calc(100% - 32px)
.transition
.mk-notifications-enter
.mk-notifications-leave-to
opacity 0
transform translateY(-30px)
> *
transition transform .3s ease, opacity .3s ease
> .notifications > .notifications
> .mk-notification > .mk-notification
margin 0 auto
max-width 500px
border-bottom solid 1px rgba(0, 0, 0, 0.05) border-bottom solid 1px rgba(0, 0, 0, 0.05)
&:last-child &:last-child

View file

@ -175,11 +175,15 @@ export default Vue.extend({
margin 8px auto margin 8px auto
background #fff background #fff
border-radius 8px border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2) box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
@media (min-width 500px) @media (min-width 500px)
margin 16px auto margin 16px auto
width calc(100% - 32px) width calc(100% - 32px)
box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
@media (min-width 600px)
margin 32px auto
> header > header
z-index 1 z-index 1

View file

@ -143,14 +143,14 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.header root(isDark)
$height = 48px $height = 48px
position fixed position fixed
top 0 top 0
z-index 1024 z-index 1024
width 100% width 100%
box-shadow 0 1px 0 rgba(#000, 0.075) //box-shadow 0 1px 0 rgba(#000, 0.075)
&, * &, *
user-select none user-select none
@ -167,7 +167,7 @@ export default Vue.extend({
-webkit-backdrop-filter blur(12px) -webkit-backdrop-filter blur(12px)
backdrop-filter blur(12px) backdrop-filter blur(12px)
//background-color rgba(#1b2023, 0.75) //background-color rgba(#1b2023, 0.75)
background-color #1b2023 background-color isDark ? #313543 : #595f6f
> p > p
display none display none
@ -244,4 +244,10 @@ export default Vue.extend({
line-height $height line-height $height
border-left solid 1px rgba(#000, 0.1) border-left solid 1px rgba(#000, 0.1)
.header[data-darkmode]
root(true)
.header:not([data-darkmode])
root(false)
</style> </style>

View file

@ -65,9 +65,3 @@ export default Vue.extend({
} }
}); });
</script> </script>
<style lang="stylus" scoped>
.mk-user-timeline
max-width 600px
margin 0 auto
</style>

View file

@ -102,7 +102,6 @@ export default Vue.extend({
mounted() { mounted() {
document.title = 'Misskey'; document.title = 'Misskey';
document.documentElement.style.background = '#313a42';
}, },
methods: { methods: {

View file

@ -40,9 +40,6 @@ export default Vue.extend({
created() { created() {
this.fetch(); this.fetch();
}, },
mounted() {
document.documentElement.style.background = '#313a42';
},
methods: { methods: {
fetch() { fetch() {
Progress.start(); Progress.start();

View file

@ -39,9 +39,6 @@ export default Vue.extend({
created() { created() {
this.fetch(); this.fetch();
}, },
mounted() {
document.documentElement.style.background = '#313a42';
},
methods: { methods: {
fetch() { fetch() {
Progress.start(); Progress.start();

View file

@ -77,7 +77,6 @@ export default Vue.extend({
mounted() { mounted() {
document.title = 'Misskey'; document.title = 'Misskey';
document.documentElement.style.background = '#313a42';
Progress.start(); Progress.start();
}, },
@ -163,11 +162,14 @@ main
background #eee background #eee
> .tl > .tl
max-width 600px max-width 680px
margin 0 auto margin 0 auto
padding 8px padding 8px
@media (min-width 500px) @media (min-width 500px)
padding 16px padding 16px
@media (min-width 600px)
padding 32px
</style> </style>

View file

@ -30,7 +30,6 @@ export default Vue.extend({
}, },
mounted() { mounted() {
document.title = 'Misskey'; document.title = 'Misskey';
document.documentElement.style.background = '#313a42';
}, },
methods: { methods: {
fetch() { fetch() {

View file

@ -2,7 +2,10 @@
<mk-ui> <mk-ui>
<span slot="header">%fa:R bell%%i18n:@notifications%</span> <span slot="header">%fa:R bell%%i18n:@notifications%</span>
<template slot="func"><button @click="fn">%fa:check%</button></template> <template slot="func"><button @click="fn">%fa:check%</button></template>
<main>
<mk-notifications @fetched="onFetched"/> <mk-notifications @fetched="onFetched"/>
</main>
</mk-ui> </mk-ui>
</template> </template>
@ -13,7 +16,6 @@ import Progress from '../../../common/scripts/loading';
export default Vue.extend({ export default Vue.extend({
mounted() { mounted() {
document.title = 'Misskey | %i18n:@notifications%'; document.title = 'Misskey | %i18n:@notifications%';
document.documentElement.style.background = '#313a42';
Progress.start(); Progress.start();
}, },
@ -30,3 +32,20 @@ export default Vue.extend({
} }
}); });
</script> </script>
<style lang="stylus" scoped>
@import '~const.styl'
main
width 100%
max-width 680px
margin 0 auto
padding 8px
@media (min-width 500px)
padding 16px
@media (min-width 600px)
padding 32px
</style>

View file

@ -59,7 +59,6 @@ export default Vue.extend({
}, },
mounted() { mounted() {
document.title = 'Misskey | %i18n:@title%'; document.title = 'Misskey | %i18n:@title%';
document.documentElement.style.background = '#313a42';
}, },
methods: { methods: {
setAvatar() { setAvatar() {

View file

@ -39,7 +39,6 @@ export default Vue.extend({
}, },
mounted() { mounted() {
document.title = `%i18n:@search%: ${this.q} | Misskey`; document.title = `%i18n:@search%: ${this.q} | Misskey`;
document.documentElement.style.background = '#313a42';
this.fetch(); this.fetch();
}, },

View file

@ -34,7 +34,6 @@ export default Vue.extend({
}, },
mounted() { mounted() {
document.title = 'Misskey | %i18n:@settings%'; document.title = 'Misskey | %i18n:@settings%';
document.documentElement.style.background = '#313a42';
}, },
methods: { methods: {
signout() { signout() {

View file

@ -1,7 +1,7 @@
<template> <template>
<mk-ui> <mk-ui>
<template slot="header" v-if="!fetching"><img :src="`${user.avatarUrl}?thumbnail&size=64`" alt="">{{ user | userName }}</template> <template slot="header" v-if="!fetching"><img :src="`${user.avatarUrl}?thumbnail&size=64`" alt="">{{ user | userName }}</template>
<main v-if="!fetching"> <main v-if="!fetching" :data-darkmode="_darkmode_">
<div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div> <div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div>
<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div> <div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div>
<header> <header>
@ -45,9 +45,9 @@
</header> </header>
<nav> <nav>
<div class="nav-container"> <div class="nav-container">
<a :data-active="page == 'home'" @click="page = 'home'">%i18n:@overview%</a> <a :data-active="page == 'home'" @click="page = 'home'">%fa:home% %i18n:@overview%</a>
<a :data-active="page == 'notes'" @click="page = 'notes'">%i18n:@timeline%</a> <a :data-active="page == 'notes'" @click="page = 'notes'">%fa:R comment-alt% %i18n:@timeline%</a>
<a :data-active="page == 'media'" @click="page = 'media'">%i18n:@media%</a> <a :data-active="page == 'media'" @click="page = 'media'">%fa:image% %i18n:@media%</a>
</div> </div>
</nav> </nav>
<div class="body"> <div class="body">
@ -88,9 +88,6 @@ export default Vue.extend({
created() { created() {
this.fetch(); this.fetch();
}, },
mounted() {
document.documentElement.style.background = '#313a42';
},
methods: { methods: {
fetch() { fetch() {
Progress.start(); Progress.start();
@ -110,7 +107,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
main root(isDark)
> .is-suspended > .is-suspended
> .is-remote > .is-remote
&.is-suspended &.is-suspended
@ -138,7 +135,7 @@ main
> .banner > .banner
padding-bottom 33.3% padding-bottom 33.3%
background-color #1b1b1b background-color isDark ? #0e0e0e : #cacaca
background-size cover background-size cover
background-position center background-position center
@ -165,13 +162,13 @@ main
left -2px left -2px
bottom -2px bottom -2px
width 100% width 100%
border 3px solid #313a42 border 3px solid isDark ? #191b22 : #ececed
border-radius 6px border-radius 6px
@media (min-width 500px) @media (min-width 500px)
left -4px left -4px
bottom -4px bottom -4px
border 4px solid #313a42 border 4px solid isDark ? #191b22 : #ececed
border-radius 12px border-radius 12px
> .mk-follow-button > .mk-follow-button
@ -185,14 +182,14 @@ main
margin 0 margin 0
line-height 22px line-height 22px
font-size 20px font-size 20px
color #fff color isDark ? #fff : #757c82
> .username > .username
display inline-block display inline-block
line-height 20px line-height 20px
font-size 16px font-size 16px
font-weight bold font-weight bold
color #657786 color isDark ? #657786 : #969ea5
> .followed > .followed
margin-left 8px margin-left 8px
@ -204,7 +201,7 @@ main
> .description > .description
margin 8px 0 margin 8px 0
color #fff color isDark ? #fff : #757c82
> .info > .info
margin 8px 0 margin 8px 0
@ -212,14 +209,14 @@ main
> p > p
display inline display inline
margin 0 16px 0 0 margin 0 16px 0 0
color #a9b9c1 color isDark ? #a9b9c1 : #90989c
> i > i
margin-right 4px margin-right 4px
> .status > .status
> a > a
color #657786 color isDark ? #657786 : #818a92
&:not(:last-child) &:not(:last-child)
margin-right 16px margin-right 16px
@ -227,7 +224,7 @@ main
> b > b
margin-right 4px margin-right 4px
font-size 16px font-size 16px
color #fff color isDark ? #fff : #787e86
> i > i
font-size 14px font-size 14px
@ -235,9 +232,9 @@ main
> nav > nav
position -webkit-sticky position -webkit-sticky
position sticky position sticky
top 48px top 47px
box-shadow 0 4px 4px rgba(0, 0, 0, 0.3) box-shadow 0 4px 4px isDark ? rgba(#000, 0.3) : rgba(#000, 0.07)
background-color #313a42 background-color isDark ? #191b22 : #ececed
z-index 1 z-index 1
> .nav-container > .nav-container
@ -253,7 +250,7 @@ main
line-height 52px line-height 52px
font-size 14px font-size 14px
text-decoration none text-decoration none
color #657786 color isDark ? #657786 : #9ca1a5
border-bottom solid 2px transparent border-bottom solid 2px transparent
&[data-active] &[data-active]
@ -262,9 +259,20 @@ main
border-color $theme-color border-color $theme-color
> .body > .body
max-width 680px
margin 0 auto
padding 8px padding 8px
@media (min-width 500px) @media (min-width 500px)
padding 16px padding 16px
@media (min-width 600px)
padding 32px
main[data-darkmode]
root(true)
main:not([data-darkmode])
root(false)
</style> </style>

View file

@ -64,11 +64,14 @@ export default Vue.extend({
> section > section
background #eee background #eee
border-radius 8px border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2) box-shadow 0 4px 16px rgba(#000, 0.1)
&:not(:last-child) &:not(:last-child)
margin-bottom 8px margin-bottom 8px
@media (min-width 500px)
margin-bottom 16px
> h2 > h2
margin 0 margin 0
padding 8px 10px padding 8px 10px