Liny dark blog layout

Layout CSS

/* ===== LINY BLOG — PIXELATED MEMORIES (NEGRO + GLOW BLANCO) ===== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;700&display=swap');

/* ===== FONDO GENERAL ===== */

body{
    background:
    radial-gradient(circle at top, #1b1b1b 0%, #000000 60%) !important;
    font-family: Arial, Verdana, sans-serif !important;
    color:#ece7dc !important;
}

/* ===== CAJA PRINCIPAL DEL BLOG ===== */

.blog-entry,
.blog,
.entry,
main,
.container{
    background:#000000 !important;
    border:1px solid #3a3a3a !important;
    border-radius:12px !important;
    padding:18px !important;

    box-shadow:
    0 0 10px rgba(255,255,255,.18),
    0 0 22px rgba(255,255,255,.10),
    inset 0 0 20px rgba(255,255,255,.02) !important;
}

/* ===== TITULO DEL POST ===== */

h1,
.blog-title,
.entry-title{
    font-family:'Cormorant Garamond', serif !important;
    font-size:34px !important;
    color:#faf7f0 !important;
    letter-spacing:1px !important;

    text-shadow:
    0 0 6px rgba(255,255,255,.22) !important;

    border-bottom:1px solid #5f5f5f !important;
    padding-bottom:10px !important;
    margin-bottom:18px !important;
}

/* ===== SUBTITULOS ===== */

h2,
h3,
h4{
    color:#f4efe6 !important;
    font-family:'Cormorant Garamond', serif !important;

    text-shadow:
    0 0 5px rgba(255,255,255,.12) !important;
}

/* ===== TEXTO ===== */

p,
li,
span,
div{
    color:#ece7dc !important;
    line-height:1.7 !important;
}

/* ===== LINKS ===== */

a{
    color:#f3efe6 !important;
    text-decoration:none !important;

    text-shadow:
    0 0 5px rgba(255,255,255,.12) !important;
}

a:hover{
    color:#ffffff !important;

    text-shadow:
    0 0 10px rgba(255,255,255,.35) !important;
}

/* ===== LISTAS ===== */

ul{
    padding-left:24px !important;
}

li{
    margin-bottom:6px !important;
}

/* ===== CITAS ===== */

blockquote{
    background:#080808 !important;
    border-left:4px solid #6a6a6a !important;
    padding:12px 16px !important;
    border-radius:8px !important;
    color:#f5f1e8 !important;

    box-shadow:
    inset 0 0 12px rgba(255,255,255,.02),
    0 0 10px rgba(255,255,255,.05) !important;
}

/* ===== CODIGO ===== */

code,
pre{
    background:#101010 !important;
    color:#f5f1e8 !important;
    border:1px solid #2f2f2f !important;
    border-radius:8px !important;
    padding:4px 6px !important;
}

/* ===== FECHA ===== */

.blog-date,
.entry-date,
small{
    color:#c8c2b5 !important;
    opacity:.9 !important;
}

/* ===== COMENTARIOS ===== */

.comments,
.comment{
    background:
    linear-gradient(#101010, #050505) !important;

    border:1px solid #3a3a3a !important;
    border-radius:10px !important;
    padding:12px !important;
    margin-top:12px !important;

    box-shadow:
    0 0 12px rgba(255,255,255,.08),
    inset 0 0 12px rgba(255,255,255,.02) !important;
}

/* ===== EFECTO DIGICAM ===== */

body:after{
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;

    background-image:
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);

    background-size:3px 3px;
    mix-blend-mode:screen;
    opacity:.10;
}

/* ===== SELECCION ===== */

::selection{
    background:#f5f1e8 !important;
    color:#000 !important;
}

/* ===== SCROLLBAR ===== */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#050505;
}

::-webkit-scrollbar-thumb{
    background:#4a4a4a;
    border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
    background:#6a6a6a;
}

/* ===== IMAGENES ===== */

img{
    border:2px solid #d8d0c0 !important;
    border-radius:8px !important;

    box-shadow:
    0 0 18px rgba(255,255,255,.18),
    0 0 4px rgba(255,255,255,.08) !important;

    filter:grayscale(100%) contrast(110%);
}

/* ===== MOVIL ===== */

@media screen and (max-width:600px){

.blog-entry,
.blog,
.entry,
main,
.container{
    padding:12px !important;
}

h1{
    font-size:26px !important;
}

}