mirror of
https://git.sr.ht/~cadence/cloudtube
synced 2026-03-02 02:31:35 +00:00
Add channels page
This commit is contained in:
parent
fc8b54d07b
commit
b9b1463cff
6 changed files with 152 additions and 0 deletions
63
sass/includes/channel-page.sass
Normal file
63
sass/includes/channel-page.sass
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
@use "colors.sass" as c
|
||||
@use "video-list-item.sass" as *
|
||||
|
||||
.channel-page
|
||||
padding: 40px 20px 20px
|
||||
max-width: 900px
|
||||
margin: 0 auto
|
||||
|
||||
.banner
|
||||
display: flex
|
||||
|
||||
.banner-image
|
||||
width: 100%
|
||||
height: auto
|
||||
border-radius: 8px
|
||||
|
||||
.channel-data
|
||||
background-color: c.$bg-darker
|
||||
padding: 24px
|
||||
margin: 12px 0px 24px
|
||||
border-radius: 8px
|
||||
|
||||
.info
|
||||
display: flex
|
||||
|
||||
.thumbnail-image
|
||||
$size: 120px
|
||||
|
||||
width: $size
|
||||
height: $size
|
||||
border-radius: 50%
|
||||
margin-right: 24px
|
||||
|
||||
.about
|
||||
flex: 1
|
||||
margin-top: 10px
|
||||
|
||||
.name
|
||||
font-size: 30px
|
||||
color: c.$fg-bright
|
||||
|
||||
.subscribers
|
||||
color: c.$fg-main
|
||||
font-size: 18px
|
||||
|
||||
.subscribe
|
||||
margin-top: 24px
|
||||
|
||||
.subscribe-button
|
||||
$padding: 14px
|
||||
|
||||
padding: $padding - 2px $padding $padding
|
||||
line-height: 1
|
||||
border-radius: 8px
|
||||
font-size: 22px
|
||||
background-color: c.$power-deep
|
||||
border: none
|
||||
|
||||
.description
|
||||
margin-top: 16px
|
||||
|
||||
.channel-video
|
||||
@include channel-video
|
||||
|
|
@ -12,3 +12,5 @@ $fg-dim: #bbb
|
|||
$edge-grey: #808080
|
||||
|
||||
$link: #72b4f6
|
||||
|
||||
$power-deep: #c62727
|
||||
|
|
|
|||
|
|
@ -48,3 +48,49 @@
|
|||
&:hover, &:active
|
||||
color: c.$fg-bright
|
||||
text-decoration: underline
|
||||
|
||||
@mixin recommendation-item
|
||||
@include video-list-item
|
||||
|
||||
@mixin large-item
|
||||
@include video-list-item
|
||||
|
||||
grid-gap: 16px
|
||||
grid-template-columns: 240px 1fr
|
||||
margin-bottom: 20px
|
||||
overflow: hidden
|
||||
|
||||
.image
|
||||
width: 240px
|
||||
height: 135px
|
||||
|
||||
.duration
|
||||
font-size: 17px
|
||||
padding: 4px 5px
|
||||
right: 5px
|
||||
bottom: 5px
|
||||
|
||||
.title
|
||||
font-size: 24px
|
||||
|
||||
.author-line
|
||||
font-size: 15px
|
||||
color: c.$fg-main
|
||||
|
||||
.author
|
||||
color: c.$fg-main
|
||||
|
||||
.description
|
||||
margin-top: 16px
|
||||
font-size: 15px
|
||||
color: c.$fg-dim
|
||||
|
||||
@mixin search-result
|
||||
@include large-item
|
||||
|
||||
.description b
|
||||
font-weight: normal
|
||||
color: c.$fg-main
|
||||
|
||||
@mixin channel-video
|
||||
@include large-item
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue