Nav and search better mobile support
This commit is contained in:
Cadence Ember
parent
1ea272600c
commit
8998c472ef
|
|
@ -9,11 +9,12 @@ html
|
|||
|
||||
body.show-focus
|
||||
nav.main-nav
|
||||
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
|
||||
a(href="/settings" title="Settings").link.icon-link
|
||||
img(src=getStaticURL("html", "/static/images/settings.svg") width=25 height=25 alt="Settings.").icon
|
||||
.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
|
||||
a(href="/settings" title="Settings").link.icon-link
|
||||
img(src=getStaticURL("html", "/static/images/settings.svg") width=25 height=25 alt="Settings.").icon
|
||||
form(method="get" action="/search").search-form
|
||||
input(type="text" placeholder="Search" name="q" autocomplete="off" value=query).search
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ code
|
|||
input, select, button
|
||||
font-family: inherit
|
||||
font-size: 16px
|
||||
min-width: 0px
|
||||
|
||||
button
|
||||
cursor: pointer
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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,36 +63,44 @@
|
|||
@mixin large-item
|
||||
@include video-list-item
|
||||
|
||||
grid-gap: 16px
|
||||
grid-template-columns: 240px 1fr
|
||||
margin-bottom: 20px
|
||||
overflow: hidden
|
||||
max-height: 150px
|
||||
|
||||
.image
|
||||
width: 240px
|
||||
height: 135px
|
||||
|
||||
.duration
|
||||
font-size: 17px
|
||||
padding: 4px 5px
|
||||
right: 5px
|
||||
bottom: 5px
|
||||
|
||||
.title
|
||||
font-size: 24px
|
||||
font-size: 17px
|
||||
|
||||
.author-line
|
||||
font-size: 15px
|
||||
color: c.$fg-main
|
||||
+wide
|
||||
grid-gap: 16px
|
||||
grid-template-columns: auto 1fr
|
||||
margin-bottom: 20px
|
||||
overflow: hidden
|
||||
max-height: 150px
|
||||
|
||||
.author
|
||||
color: c.$fg-main
|
||||
.image
|
||||
width: 240px
|
||||
height: 135px
|
||||
|
||||
.description
|
||||
margin-top: 16px
|
||||
font-size: 15px
|
||||
color: c.$fg-dim
|
||||
.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
|
||||
|
||||
+thin
|
||||
.description
|
||||
display: none
|
||||
|
||||
@mixin search-result
|
||||
@include large-item
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue