Thoughts

Layout CSS

/* ╭───────────────♡───────────────╮
      midnight diary / soft girl
   ╰───────────────♡───────────────╯ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=Parisienne&display=swap');


/* ───── PAGINA ───── */

body { ciao
    background:
        radial-gradient(circle at 20% 10%, rgba(255,255,255,.8), transparent 30%),
        linear-gradient(135deg, #eee7e3, #e8dfe0 55%, #e7e1e8);
    color: #66545a;
    font-family: "Cormorant Garamond", Georgia, serif;
    letter-spacing: .3px;
}


/* ───── CONTENITORE DEL POST ───── */

.blog-entry {
    max-width: 700px;
    margin: 45px auto;
    background: rgba(250,247,243,.94);
    border: 1px solid #d8c8ca;
    box-shadow:
        0 12px 35px rgba(91,65,72,.12),
        0 2px 5px rgba(91,65,72,.08);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}


/* piccolo dettaglio decorativo */

.blog-entry:before {
    content: "♡  ✧  ⋆  ♡";
    display: block;
    text-align: center;
    color: #b78f9c;
    font-size: 17px;
    letter-spacing: 7px;
    padding: 18px 0 4px;
}


/* ───── TESTATA ───── */

.blog-entry .title {
    background: linear-gradient(
        135deg,
        #eee1e1,
        #f4eaea 60%,
        #e9e1e9
    );
    color: #70545d;
    padding: 38px 45px 32px;
    margin: 0;
    text-align: center;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 42px;
    line-height: 1.08;
    font-weight: 400;
    font-style: italic;
    border-top: 1px solid #e2d2d4;
    border-bottom: 1px solid #d8c5c9;
}


/* sottotitolo / piccola frase */

.blog-entry .title:after {
    content: "♡ little things i don't want to forget ♡";
    display: block;
    margin-top: 18px;
    color: #a98690;
    font-family: "Cormorant Garamond", serif;
    font-size: 17px;
    font-style: normal;
    letter-spacing: 2px;
}


/* ───── CONTENUTO ───── */

.blog-entry .content {
    background: #faf7f2;
    padding: 42px 58px 55px;
    font-size: 20px;
    line-height: 1.65;
    color: #66585a;
}


/* paragrafi */

.blog-entry .content p {
    margin: 0 0 27px;
}


/* prima lettera */

.blog-entry .content p:first-child:first-letter {
    font-family: "Playfair Display", serif;
    font-size: 52px;
    color: #b48694;
    float: left;
    line-height: .8;
    padding-right: 7px;
}


/* ───── CITAZIONI ───── */

.blog-entry .content blockquote {
    margin: 38px 15px;
    padding: 25px 30px;
    background: #eee3e2;
    border-left: 2px solid #b98d99;
    color: #84656d;
    font-family: "Cormorant Garamond", serif;
    font-size: 23px;
    line-height: 1.45;
    font-style: italic;
    text-align: center;
}


/* ───── LINK ───── */

.blog-entry .content a {
    color: #a56f81;
    text-decoration: none;
    border-bottom: 1px dotted #c49aa6;
    transition: .2s;
}

.blog-entry .content a:hover {
    color: #765361;
    border-bottom-color: #765361;
}


/* ───── FOTO ───── */

.blog-entry .content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 32px auto;
    padding: 7px;
    background: #fffdf9;
    border: 1px solid #d8c9ca;
    box-shadow: 0 5px 15px rgba(80,55,60,.12);
}


/* ───── INFORMAZIONI AUTORE ───── */

.blog-entry .author-details {
    background: #eee5e5;
    border-top: 1px solid #dac7ca;
    border-bottom: 1px solid #dac7ca;
    padding: 18px 25px;
    color: #856b72;
    text-align: center;
    font-size: 16px;
    font-style: italic;
}


/* foto profilo */

.blog-entry .profile-pic {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #f8f3ef;
    box-shadow: 0 2px 10px rgba(80,55,60,.15);
}


/* ───── DATA ───── */

.blog-entry .publish-date {
    color: #aa8992;
    font-size: 14px;
    text-align: center;
    letter-spacing: 2px;
    text-transform: lowercase;
    margin-top: 8px;
}


/* ───── ELOGI ───── */

.blog-entry .kudos-container {
    background: #f1e7e6;
    color: #9a707b;
    padding: 15px;
    text-align: center;
    border-top: 1px solid #dfcccf;
    font-size: 16px;
}


/* ───── RIGA DELL'ARTICOLO ───── */

.row.article {
    border: none;
    background: transparent;
}


/* ───── PICCOLO EFFETTO "DIARIO" ───── */

.blog-entry .content:after {
    content: "✧  ♡  ☾  ♡  ✧";
    display: block;
    text-align: center;
    margin-top: 45px;
    color: #b8939d;
    font-size: 18px;
    letter-spacing: 8px;
}


/* ───── MOBILE ───── */

@media (max-width: 700px) {

    .blog-entry {
        margin: 20px 12px;
    }

    .blog-entry .title {
        padding: 30px 25px;
        font-size: 32px;
    }

    .blog-entry .content {
        padding: 30px 25px 40px;
        font-size: 18px;
    }

    .blog-entry .content blockquote {
        margin: 30px 0;
        padding: 20px;
    }
}