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