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:
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 "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
|
||||||
|
@ -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
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user