671 views
1.post-card { 2 width: 320px; 3 background: lightgrey; 4 background-color: rgb(24 27 32); 5 border: 1px solid rgb(84 90 106); 6 border-radius: 20px; 7 display: flex; 8 flex-direction: column; 9 padding: 10px 20px; 10} 11 12.avatar { 13 height: 35px; 14 width: 35px; 15 border-radius: 50%; 16 background-color: blueviolet; 17 background-image: linear-gradient(to top left, blueviolet,rgb(73, 31, 112)); 18} 19 20.title { 21 font-size: 20px; 22 line-height: 22px; 23 font-weight: 600; 24 margin-top: 10px; 25 color: #fff; 26 text-decoration: none; 27 transition: all .35s ease-in; 28} 29 30.title:hover { 31 text-decoration: underline blueviolet; 32} 33 34.datetime { 35 font-size: 12px; 36 color: rgb(168 179 207); 37 margin: 10px 0; 38} 39 40.image-preview { 41 flex: 1; 42 min-height: 150px; 43 width: 100%; 44 border-radius: 20px; 45 background-color: blueviolet; 46 background-image: linear-gradient(to top left, blueviolet,rgb(73, 31, 112)); 47 margin-bottom: 4px; 48} 49 50.comment-like { 51 display: flex; 52 justify-content: space-around; 53 align-items: center; 54 padding: 2px 0; 55} 56 57.comment-like span { 58 cursor: pointer; 59 height: 40px; 60 width: 50px; 61 padding: 0 3px; 62 display: flex; 63 align-items: center; 64 justify-content: center; 65 font-weight: 900; 66 border-radius: 10px; 67 background-color: transparent; 68 transition: all .15s ease; 69} 70 71.comment-like span:hover { 72 background-color: rgba(137, 43, 226, 0.096); 73} 74 75.comment-like span svg { 76 fill: rgb(255, 255, 255); 77 margin-right: 2px; 78}
MIT License