8 500
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 467: | Linha 467: | ||
/* Tests */ | /* Tests */ | ||
body{ | |||
/* Created with https://www.css-gradient.com */ | |||
background: #161616; | |||
} | |||
h1{ | |||
color:#fff; | |||
} | |||
.lead{ | |||
color:#aaa; | |||
} | |||
.wrapper{margin:10vh} | |||
//post card styles | |||
.card{ | |||
border: none; | |||
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); | |||
overflow:hidden; | |||
border-radius:20px; | |||
min-height:450px; | |||
box-shadow: 0 0 12px 0 rgba(0,0,0,0.2); | |||
@media (max-width: 768px) { | |||
min-height:350px; | |||
} | |||
@media (max-width: 420px) { | |||
min-height:300px; | |||
} | |||
&.card-has-bg{ | |||
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); | |||
background-size:120%; | |||
background-repeat:no-repeat; | |||
background-position: center center; | |||
&:before { | |||
content: ''; | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
bottom: 0; | |||
left: 0; | |||
background: inherit; | |||
-webkit-filter: grayscale(1); | |||
-moz-filter: grayscale(100%); | |||
-ms-filter: grayscale(100%); | |||
-o-filter: grayscale(100%); | |||
filter: grayscale(100%);} | |||
&:hover { | |||
transform: scale(0.98); | |||
box-shadow: 0 0 5px -2px rgba(0,0,0,0.3); | |||
background-size:130%; | |||
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); | |||
.card-img-overlay { | |||
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1); | |||
background: rgb(255,186,33); | |||
background: linear-gradient(0deg, rgba(255,186,33,0.5) 0%, rgba(255,186,33,1) 100%); | |||
} | |||
} | |||
} | |||
.card-footer{ | |||
background: none; | |||
border-top: none; | |||
.media{ | |||
img{ | |||
border:solid 3px rgba(255,255,255,0.3); | |||
} | |||
} | |||
} | |||
.card-title{font-weight:800} | |||
.card-meta{color:rgba(0,0,0,0.3); | |||
text-transform:uppercase; | |||
font-weight:500; | |||
letter-spacing:2px;} | |||
.card-body{ | |||
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); | |||
} | |||
&:hover { | |||
.card-body{ | |||
margin-top:30px; | |||
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1); | |||
} | |||
cursor: pointer; | |||
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1); | |||
} | |||
.card-img-overlay { | |||
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1); | |||
background: rgb(255,186,33); | |||
background: linear-gradient(0deg, rgba(255,186,33,0.3785889355742297) 0%, rgba(255,186,33,1) 100%); | |||
} | |||
} | |||
@media (max-width: 767px){ | |||
} |