xssbook/public/css/home.css

body {
    background-color: #f0f2f5;
}

#posts {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.post, .create {
    width: 40em;
    height: fit-content;
    background-color: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
    margin-bottom: 1.5em;
}

.post {
    padding-bottom: 0;
}

.create {
    display: flex;
    flex-direction: row;
}

.create button {
    all: unset;
    background-color: #f0f2f5;
    border-radius: 3em;
    margin-left: 1em;
    flex: 1;
}

.create button:hover {
    background-color: #e4e6e8;
    cursor: pointer;
}

.create button  p {
    margin-left: 1em;
    font-size: 18px;
}

.postheader {
    display: flex;
    flex-direction: row;
    margin-bottom: .5em;
}

.postbuttons {
    display: flex;
    flex-direction: row;
}

.postbuttons>span {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 7px;
    border-radius: 5px;
    color: #606770;
    margin: 3px
}

.postbuttons>span:hover {
    background-color: #e4e6e8;
}

.postname {
    margin-left: 1em;
    display: flex;
    flex-direction: column;
}

.icons {
    background-image: url('data:image/png;base64,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');
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: auto;
    background-repeat: no-repeat;
    margin-right: .5em;
    filter: invert(39%) sepia(21%) saturate(200%) saturate(109.5%) hue-rotate(174deg) brightness(94%) contrast(86%);
}

.blue {
    filter: invert(39%) sepia(57%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(147.75%) hue-rotate(202deg) brightness(97%) contrast(96%);
}

.like {
    background-position: 0px -132px;
}

.comm {
    background-position: 0px -113px;
}

.createpost {
    position: relative;
    background-color: white;
    width: 450px;
    padding: 20px;
    border-radius: .5em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1);
}

.createpost .postheader {
    margin-top: 20px;
}

.createpost textarea {
    border: none;
    resize: none;
    outline: none;
    font-family: sfpro;
    font-size: 24px;
    margin-top: 10px;
    width: 100%;
    height: 120px;
    margin-bottom: 20px;
}

.createpost>span {
    margin-top: -10px;
}

.primary {
    margin: 0;
    width: calc(100% - 20px);
    font-family: sfprobold;
    height: 15px;
}

.close {
    top: 1em;
    right: 1em;
}

.comment {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
}

.comment>span {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    background-color: #f0f2f5;
    border-radius: 10px;
    padding: 10px;
    padding-right: 10px;
}

.larger {
    font-size: 18px;
}

.newcomment {
    display: flex;
    flex-direction: row;
}

#comments input {
    all: unset;
    padding: 10px;
    border-radius: 10px;
    width: calc(100% - 20px);
    background-color: #f0f2f5;
    font-family: sfpro;
}