Fix subscribe button wrapping on mobile

Also normalises width selectors into their own file.
This commit is contained in:
Cadence Ember 2021-01-01 01:45:11 +13:00
parent 57fdf4e1b6
commit 0497bba505
No known key found for this signature in database
GPG Key ID: BC1C2C61CF521B17
4 changed files with 18 additions and 16 deletions

View File

@ -0,0 +1,7 @@
@mixin thin
@media screen and (max-width: 499px)
@content
@mixin wide
@media screen and (min-width: 500px)
@content

View File

@ -1,5 +1,6 @@
@use "colors.sass" as c
@use "video-list-item.sass" as *
@use "_dimensions.sass" as dimensions
.channel-page
padding: 40px 20px 20px
@ -22,6 +23,10 @@
.info
display: flex
flex-wrap: wrap
+dimensions.thin
display: block
.thumbnail-image
$size: 120px

View File

@ -1,9 +1,6 @@
@use "colors.sass" as c
@use "buttons.sass" as *
@mixin thin
@media screen and (max-width: 499px)
@content
@use "_dimensions.sass" as dimensions
.main-nav
background-color: c.$bg-accent
@ -11,13 +8,13 @@
padding: 8px
box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.1)
+thin
+dimensions.thin
display: block
.links
display: flex
+thin
+dimensions.thin
margin-bottom: 4px
padding: 1px

View File

@ -1,12 +1,5 @@
@use "colors.sass" as c
@mixin thin
@media screen and (max-width: 499px)
@content
@mixin wide
@media screen and (min-width: 500px)
@content
@use "_dimensions.sass" as dimensions
@mixin video-list-item
display: grid
@ -77,7 +70,7 @@
.title
font-size: 17px
+wide
+dimensions.wide
grid-gap: 16px
grid-template-columns: auto 1fr
margin-bottom: 20px
@ -116,7 +109,7 @@
font-size: 15px
color: c.$fg-dim
+thin
+dimensions.thin
.description
display: none