dash index item style and layout tweaks

This commit is contained in:
Ro 2020-06-24 22:30:46 -07:00
parent e1418dd1a1
commit 4387591661
2 changed files with 28 additions and 13 deletions

View file

@ -15,7 +15,7 @@
- for ( index; index < pages.length; index++) - for ( index; index < pages.length; index++)
a.post-link(href="/@/dashboard/page/edit/"+pages[index].page.metadata.uuid id=pages[index].page.metadata.uuid style="background:url("+pages[index].page.metadata.feature+") no-repeat center center / cover") a.post-link(href="/@/dashboard/page/edit/"+pages[index].page.metadata.uuid id=pages[index].page.metadata.uuid style="background:url("+pages[index].page.metadata.feature+") no-repeat center center / cover")
div div
span= pages[index].date
label= pages[index].page.metadata.title label= pages[index].page.metadata.title
#options #options
- var menu = String(pages[index].page.metadata.menu) - var menu = String(pages[index].page.metadata.menu)
@ -24,4 +24,7 @@
span.item-options(data-active=menu) MENU ITEM span.item-options(data-active=menu) MENU ITEM
span.item-options(data-active=published) PUBLISHED span.item-options(data-active=published) PUBLISHED
span.item-options(data-active=featured) FEATURED span.item-options(data-active=featured) FEATURED
span= pages[index].date

View file

@ -122,50 +122,62 @@
position relative position relative
label label
font-size 1.2em font-size 1.4em
font-weight 700 font-weight 700
color $primary - 60% color $white
padding 5px padding 5px
vertical-align top vertical-align top
display inline-block display inline-block
word-wrap break-word word-wrap break-word
width 100% width 100%
text-align center text-align center
text-drop-shadow($black, 1, 2px, 2px, 0)
span span
vertical-align top vertical-align top
width 100% margin 0 auto
display inline-block width 300px
display block
font-family $monoType font-family $monoType
font-size 0.5em font-size 0.5em
padding 7px padding 7px
color $primary - 60% color $white
text-align: center text-align: center
//background $primary - 60%
border-radius 0 0 3px 3px
div div
width 100% width 100%
background $white
position absolute position absolute
bottom 0 bottom 0
border-radius 0 0 3px 3px border-radius 0 0 3px 3px
//background-opacity($black, .35)
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
#options #options
display inline-block display block
vertical-align: top vertical-align: top
width: 100% width 300px
position relative position relative
text-align: center text-align: center
margin 0 auto
background none
.item-options
border-radius 3px
margin 5px
display inline-block
.item-options[data-active='false'] .item-options[data-active='false']
width 65px width 65px
background $primary - 60% background $primary - 60%
color $white color $white
border-radius 3px
margin 5px
.item-options[data-active='true'] .item-options[data-active='true']
width 70px width 70px
background $tertiary + 50% background $tertiary + 50%
color $primary - 60% color $primary - 60%
border-radius 3px
margin 5px
a:nth-child(3) a:nth-child(3)
width 100% width 100%