1
0
mirror of https://git.sr.ht/~cadence/cloudtube synced 2024-11-10 02:27:29 +00:00

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

View File

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

View File

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