Lomanic/cloudtube
1
0
Fork 0
mirror of https://git.sr.ht/~cadence/cloudtube synced 2024-11-22 15:47:30 +00:00
Code Issues Releases Wiki Activity

Nav and search better mobile support

Browse Source
This commit is contained in:
Cadence Ember 2020-10-03 01:32:56 +13:00
parent 1ea272600c
commit 8998c472ef
No known key found for this signature in database
GPG Key ID: BC1C2C61CF521B17
6 changed files with 162 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
pug/includes/layout.pug
View File

@ -9,6 +9,7 @@ html
body.show-focus
nav.main-nav
.links
a(href="/").link.home CloudTube
a(href="/subscriptions" title="Subscriptions").link.icon-link
img(src=getStaticURL("html", "/static/images/subscriptions.svg") width=30 height=25 alt="Subscriptions.").icon

1
sass/includes/base.sass
View File

@ -22,6 +22,7 @@ code
input, select, button
font-family: inherit
font-size: 16px
min-width: 0px
button
cursor: pointer

58
sass/includes/buttons.sass Normal file
View File

@ -0,0 +1,58 @@
@use "sass:selector"
@use "colors.sass" as c
@mixin button-base
-webkit-appearance: none
-moz-appearance: none
color: c.$fg-bright
border: none
border-radius: 4px
padding: 8px
margin: 0
text-decoration: none
line-height: 1.25
@at-root #{selector.unify(&, "select")}
padding: 8px 27px 8px 8px
background: url(/static/images/arrow-down-wide.svg) right 53% no-repeat c.$bg-accent-x
@at-root #{selector.unify(&, "a")}
padding: 7px 8px
@at-root #{selector.unify(&, "button")}
cursor: pointer
.button-icon
position: relative
top: 3px
margin-right: 8px
margin-left: 2px
@mixin button-bg
@include button-base
background-color: c.$bg-accent-x
@mixin border-button
@include button-bg
border: 1px solid c.$edge-grey
@mixin button-size
margin: 4px
font-size: 16px
@mixin button-hover
&:hover
background-color: c.$bg-accent
&:active
background-color: c.$bg-dark
.base-border-look
@include border-button
.border-look
@include border-button
@include button-size
@include button-hover

54
sass/includes/nav.sass Normal file
View File

@ -0,0 +1,54 @@
@use "colors.sass" as c
@use "buttons.sass" as *
@mixin thin
@media screen and (max-width: 499px)
@content
.main-nav
background-color: c.$bg-accent
display: flex
padding: 8px
box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.1)
+thin
display: block
.links
display: flex
+thin
margin-bottom: 4px
padding: 1px
.link
@include button-base
text-decoration: none
margin: 1px 8px 1px 0px
font-size: 20px
display: flex
align-items: center
&.home
font-weight: bold
&, &:visited
color: #fff
&:focus, &:hover
background-color: c.$bg-accent-x
.search-form
display: flex
flex: 1
align-items: center
.search
@include button-bg
padding: 10px
flex: 1
margin: 1px
&:hover, &:focus
border: 1px solid c.$edge-grey
margin: 0px

18
sass/includes/video-list-item.sass
View File

@ -1,5 +1,13 @@
@use "colors.sass" as c
@mixin thin
@media screen and (max-width: 499px)
@content
@mixin wide
@media screen and (min-width: 500px)
@content
@mixin video-list-item
display: grid
grid-template-columns: 160px 1fr
@ -55,8 +63,12 @@
@mixin large-item
@include video-list-item
.title
font-size: 17px
+wide
grid-gap: 16px
grid-template-columns: 240px 1fr
grid-template-columns: auto 1fr
margin-bottom: 20px
overflow: hidden
max-height: 150px
@ -86,6 +98,10 @@
font-size: 15px
color: c.$fg-dim
+thin
.description
display: none
@mixin search-result
@include large-item

95
sass/main.sass
View File

@ -8,105 +8,12 @@
@use "includes/subscriptions-page.sass"
@use "includes/settings-page.sass"
@use "includes/forms.sass"
@use "includes/nav.sass"
@font-face
font-family: "Bariol"
src: url(/static/fonts/bariol.woff?statichash=1)
@mixin button-base
-webkit-appearance: none
-moz-appearance: none
color: c.$fg-bright
border: none
border-radius: 4px
padding: 8px
margin: 0
text-decoration: none
line-height: 1.25
@at-root #{selector.unify(&, "select")}
padding: 8px 27px 8px 8px
background: url(/static/images/arrow-down-wide.svg) right 53% no-repeat c.$bg-accent-x
@at-root #{selector.unify(&, "a")}
padding: 7px 8px
@at-root #{selector.unify(&, "button")}
cursor: pointer
.button-icon
position: relative
top: 3px
margin-right: 8px
margin-left: 2px
@mixin button-bg
@include button-base
background-color: c.$bg-accent-x
@mixin border-button
@include button-bg
border: 1px solid c.$edge-grey
@mixin button-size
margin: 4px
font-size: 16px
@mixin button-hover
&:hover
background-color: c.$bg-accent
&:active
background-color: c.$bg-dark
.base-border-look
@include border-button
.border-look
@include border-button
@include button-size
@include button-hover
.main-nav
background-color: c.$bg-accent
display: flex
padding: 8px
box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.1)
.link
@include button-base
text-decoration: none
margin: 1px 8px 1px 0px
font-size: 20px
display: flex
align-items: center
&.home
font-weight: bold
&, &:visited
color: #fff
&:focus, &:hover
background-color: c.$bg-accent-x
.search-form
display: flex
flex: 1
align-items: center
.search
@include button-bg
padding: 10px
flex: 1
margin: 1px
&:hover, &:focus
border: 1px solid c.$edge-grey
margin: 0px
.icon-link:hover, .icon-link:focus
.icon
filter: brightness(2)