993
edições
sem sumário de edição
Sem resumo de edição |
Sem resumo de edição |
||
| (20 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
| Linha 1: | Linha 1: | ||
<style> | <style> | ||
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap'); | |||
a { | a, a:hover { | ||
text-decoration: none; | text-decoration: none; | ||
color: inherit; | color: inherit; | ||
} | } | ||
#app { | .card h2 { | ||
padding: 1rem | margin-top:0; | ||
border-bottom: 0 !important; | |||
font-family: "Sora" !important; | |||
} | |||
.custom-checkbox { | |||
cursor: pointer; | |||
} | |||
#app-quests{ | |||
box-sizing: border-box; | |||
padding: 1rem 0; | |||
width: 100%; | width: 100%; | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr)); | grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr)); | ||
gap: | place-items: center; | ||
gap: 2rem; | |||
} | } | ||
| Linha 36: | Linha 43: | ||
.card { | .card { | ||
width: clamp( | font-family: "Sora"; | ||
height: clamp( | width: clamp(33.5rem, 2vw, 45rem); | ||
height: clamp(10.7rem, 2vh, 14rem); | |||
display: flex; | display: flex; | ||
align-items: flex-start; | align-items: flex-start; | ||
| Linha 45: | Linha 53: | ||
overflow: hidden; | overflow: hidden; | ||
border: 2px solid #9D72D6; | border: 2px solid #9D72D6; | ||
transition: all .25s ease; | |||
} | |||
.card:hover { | |||
transform: scale(.975); | |||
} | } | ||
.card main { | .card main { | ||
position: relative; | |||
flex-basis: 60%; | flex-basis: 60%; | ||
height: 100%; | height: 100%; | ||
padding: 1rem; | padding: 1rem; | ||
padding-top: .5rem; | |||
} | } | ||
| Linha 57: | Linha 72: | ||
font-weight: 500; | font-weight: 500; | ||
color: #200245; | color: #200245; | ||
margin-bottom: | margin-bottom: 0; | ||
} | } | ||
| Linha 66: | Linha 81: | ||
-ms-box-orient: vertical; | -ms-box-orient: vertical; | ||
box-orient: vertical; | box-orient: vertical; | ||
-webkit-line-clamp: | -webkit-line-clamp: 3; | ||
-moz-line-clamp: | -moz-line-clamp: 3; | ||
-ms-line-clamp: | -ms-line-clamp: 3; | ||
line-clamp: | line-clamp: 3; | ||
overflow: hidden; | overflow: hidden; | ||
| Linha 85: | Linha 100: | ||
aside { | aside { | ||
flex-basis: 40%; | flex-basis: 40%; | ||
aspect-ratio: 9/8; | |||
aspect-ratio: 9/ | |||
display: flex; | display: flex; | ||
| Linha 94: | Linha 108: | ||
aside img { | aside img { | ||
width: | width: 105%; | ||
height: auto; | height: auto; | ||
transition: transform .25s ease; | transition: transform .25s ease; | ||
} | } | ||
.icon-container { | .icon-container { | ||
position: absolute; | |||
bottom: 1.4rem; | |||
display: flex; | display: flex; | ||
align-items: flex-start; | align-items: flex-start; | ||
| Linha 112: | Linha 124: | ||
.icon-container img { | .icon-container img { | ||
width: | width: 28px; | ||
} | |||
.search-button { | |||
font-family: 'Sora', sans-serif; | |||
font-size: 1rem; | |||
background: #9e63c3; | |||
border: 2px solid #c981f5; | |||
padding: .4rem 1.5rem; | |||
color: #fff; | |||
border-radius: 6px; | |||
cursor: pointer; | |||
transition: all .25s ease; | |||
} | |||
.search-button:hover { | |||
transform: scale(.97); | |||
} | } | ||