body { font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal; } @media only screen and (min-width: 800px) { /* For bigger than phones */ #block-container { max-width: 800px; } #loader { max-width: 800px; } } #block-container { display: flex; flex-wrap: wrap; justify-content: center; margin-inline: auto; width: 100%; } .block { width: calc(100% - 16px); margin: 8px; border-radius: 3px; transition: all 200ms ease-in-out; } .block:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .pfp { max-width: 64px; max-height: 64px; float: left; border-radius: 50%; } .post-actions { margin: 8px; padding: 16px 0; display: flex; justify-content: space-between; align-items: center; } #loader { display: flex; justify-content: center; margin-inline: auto; } .skeleton-post { height: 55vh; width: calc(100% - 16px); margin: 8px; border-radius: 3px; transition: all 200ms ease-in-out; position: relative; background-color: #eaeaea; } .skeleton-post::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0)); }