mirror of
https://git.sr.ht/~cadence/cloudtube
synced 2024-11-12 19:37:29 +00:00
Fix subscribe button wrapping on mobile
Also normalises width selectors into their own file.
This commit is contained in:
parent
57fdf4e1b6
commit
0497bba505
7
sass/includes/_dimensions.sass
Normal file
7
sass/includes/_dimensions.sass
Normal file
@ -0,0 +1,7 @@
|
||||
@mixin thin
|
||||
@media screen and (max-width: 499px)
|
||||
@content
|
||||
|
||||
@mixin wide
|
||||
@media screen and (min-width: 500px)
|
||||
@content
|
@ -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
|
||||
|
@ -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
|
||||
|
||||
|
@ -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
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user