Gangster blog
Author: b3aconator
Category: ¿?
Created: August 8, 2026
Downloads: 9
My blog post
Live Preview
Layout CSS
<style>
/* =========================================================
FRIENDREWIND BLOG
TERMINAL HELL / BLOODY RUST / BRUSHED STEEL
CLEAN COLOR-CONSISTENT VERSION
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Nosifer&display=swap');
:root {
--hell-bg:
url("https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExcTN0MmUwdmJycmhpOWlnczQwc2dtMGxwbnozcXNzcXo4ejBrYXA4ZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/CV3KSkSPWmQwo8S7m6/giphy.gif");
--steel:
url("https://images.pexels.com/photos/7599717/pexels-photo-7599717.jpeg");
--void: #050505;
--black: #090807;
--black2: #110d0b;
--steel-edge: #625b57;
--steel-highlight: #9c9189;
--bone: #c9b59b;
--text: #eee8e2;
--muted: #a99c93;
--rust-bright: #b73517;
--rust: #7f180b;
--rust-dark: #410704;
--blood: #5b0905;
--blood-dark: #210100;
--ember: #e64b13;
}
/* =========================================================
PAGE BACKGROUND
========================================================= */
html {
background: var(--void) !important;
}
body {
position: relative !important;
background:
linear-gradient(
rgba(0,0,0,.40),
rgba(0,0,0,.40)
),
var(--hell-bg)
center center /
cover
fixed
no-repeat
!important;
background-color:
var(--void) !important;
color:
var(--text) !important;
}
/* dark furnace vignette */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(
ellipse at center,
transparent 18%,
rgba(0,0,0,.14) 47%,
rgba(0,0,0,.78) 100%
);
}
/* subtle CRT scanlines */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
opacity: .045;
background:
repeating-linear-gradient(
0deg,
rgba(255,255,255,.022) 0,
rgba(255,255,255,.022) 1px,
transparent 1px,
transparent 4px
);
}
/* =========================================================
KEEP PAGE CONTENT ABOVE BACKGROUND
========================================================= */
.myspace-header,
.row.article,
.blog-entry,
footer {
position: relative;
z-index: 5;
}
/* =========================================================
FRIENDREWIND HEADER
DARK STEEL — NO RANDOM ORANGE/BLUE
========================================================= */
.myspace-header {
background:
transparent !important;
border:
none !important;
box-shadow:
none !important;
}
.myspace-header .top-nav,
.myspace-header .top,
.myspace-header .navbar {
background:
linear-gradient(
rgba(12,10,9,.48),
rgba(3,3,3,.80)
),
var(--steel)
center /
cover
!important;
border:
1px solid var(--steel-edge) !important;
border-bottom:
4px solid var(--blood-dark) !important;
border-radius:
0 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.16),
inset 0 -22px 30px rgba(0,0,0,.62),
6px 6px 0 rgba(0,0,0,.88),
0 0 14px rgba(90,10,4,.25)
!important;
}
/* =========================================================
LOGO
========================================================= */
.myspace-header .nav-logo,
.myspace-header #logo {
background:
#080808 !important;
border:
1px solid #555 !important;
padding:
8px !important;
box-shadow:
4px 4px 0 #000 !important;
}
/* =========================================================
SEARCH
========================================================= */
.myspace-header input[type="search"],
.myspace-header input[type="text"] {
background:
#080706 !important;
background-image:
none !important;
color:
var(--text) !important;
border:
1px solid #655b56 !important;
border-radius:
0 !important;
box-shadow:
inset 2px 2px 7px #000 !important;
}
.myspace-header button,
.myspace-header input[type="submit"] {
background:
linear-gradient(
#89200f,
#360502
) !important;
color:
var(--text) !important;
border:
1px solid #93402a !important;
border-right:
3px solid #000 !important;
border-bottom:
3px solid #000 !important;
border-radius:
0 !important;
font-weight:
900 !important;
text-transform:
uppercase !important;
text-shadow:
1px 1px 2px #000 !important;
}
/* =========================================================
MAIN NAV
========================================================= */
.main-nav-wrapper,
.myspace-header .links,
.myspace-header .main-nav-container {
background:
linear-gradient(
#24201e,
#080706
) !important;
border-top:
1px solid #514b47 !important;
border-bottom:
4px solid var(--blood-dark) !important;
border-radius:
0 !important;
box-shadow:
0 5px 0 #000 !important;
}
.myspace-header .main-nav li a {
background:
linear-gradient(
#292522,
#0b0908
) !important;
color:
#d7cec6 !important;
border-left:
1px solid #4b4541 !important;
border-right:
1px solid #050505 !important;
font-weight:
900 !important;
text-shadow:
1px 1px 2px #000 !important;
}
.myspace-header .main-nav li a:hover {
background:
linear-gradient(
#8f1b0d,
#350402
) !important;
color:
#fff1e3 !important;
text-shadow:
0 0 7px rgba(190,35,12,.65)
!important;
}
/* =========================================================
OUTER ARTICLE FRAME
========================================================= */
.row.article {
overflow:
visible !important;
background:
linear-gradient(
rgba(0,0,0,.54),
rgba(0,0,0,.68)
),
var(--steel)
center /
cover
!important;
border:
2px solid #56504c !important;
box-shadow:
inset 0 0 28px rgba(0,0,0,.68),
7px 7px 0 rgba(0,0,0,.90)
!important;
}
/* =========================================================
BLOG ENTRY
========================================================= */
.blog-entry {
position:
relative !important;
overflow:
visible !important;
background:
linear-gradient(
145deg,
rgba(0,0,0,.34),
rgba(0,0,0,.63)
),
var(--steel)
center /
cover
no-repeat
!important;
border:
2px solid var(--steel-edge) !important;
border-radius:
0 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.72),
inset 0 0 30px rgba(0,0,0,.48),
0 0 0 1px #111,
7px 7px 0 rgba(0,0,0,.92)
!important;
color:
var(--text) !important;
}
/* =========================================================
MAIN BLOG TITLE
========================================================= */
.blog-entry .title {
position:
relative !important;
box-sizing:
border-box !important;
overflow:
visible !important;
padding:
10px 32px 11px 32px !important;
margin:
0 0 18px 0 !important;
background:
linear-gradient(
180deg,
#c44718 0%,
#a82911 15%,
#791509 38%,
#4d0804 64%,
#280201 84%,
#100000 100%
)
!important;
color:
var(--bone) !important;
border:
1px solid #93452c !important;
border-bottom:
4px solid var(--blood-dark) !important;
border-radius:
0 !important;
font-family:
"Nosifer",
Impact,
sans-serif !important;
font-size:
18px !important;
font-weight:
400 !important;
line-height:
1.2 !important;
letter-spacing:
.35px !important;
text-transform:
uppercase !important;
text-shadow:
1px 1px 0 #4f130c,
2px 2px 0 #270503,
0 0 4px #8d1a0c,
3px 5px 3px #000
!important;
box-shadow:
inset 0 1px rgba(255,205,150,.26),
inset 0 -10px 16px rgba(40,0,0,.72),
3px 4px 0 #000
!important;
}
/* =========================================================
TITLE DRIPS
========================================================= */
.blog-entry .title::after {
content: "";
position: absolute;
left: 16px;
right: 16px;
bottom: -12px;
height: 14px;
pointer-events: none;
background:
radial-gradient(
ellipse at 5% 0%,
#621008 0 45%,
transparent 50%
),
radial-gradient(
ellipse at 17% 0%,
#96200e 0 27%,
transparent 32%
),
radial-gradient(
ellipse at 29% 0%,
#520705 0 53%,
transparent 58%
),
radial-gradient(
ellipse at 43% 0%,
#a52912 0 31%,
transparent 36%
),
radial-gradient(
ellipse at 57% 0%,
#6d0d07 0 48%,
transparent 53%
),
radial-gradient(
ellipse at 71% 0%,
#8e1b0d 0 29%,
transparent 34%
),
radial-gradient(
ellipse at 84% 0%,
#4d0603 0 52%,
transparent 57%
),
radial-gradient(
ellipse at 95% 0%,
#9c220f 0 31%,
transparent 36%
);
filter:
drop-shadow(0 4px 2px rgba(35,0,0,.75));
}
/* =========================================================
BLOG BODY
========================================================= */
.blog-entry .content {
background:
rgba(5,4,4,.42) !important;
color:
var(--text) !important;
padding:
12px !important;
text-shadow:
1px 1px 2px #000 !important;
}
.blog-entry .content p {
color:
var(--text) !important;
}
.blog-entry .content a {
color:
#ca6041 !important;
font-weight:
800 !important;
text-decoration:
none !important;
}
.blog-entry .content a:hover {
color:
#efad7c !important;
text-shadow:
0 0 7px rgba(180,40,15,.65);
}
/* =========================================================
BLOCKQUOTES
========================================================= */
.blog-entry .content blockquote {
background:
rgba(3,3,3,.76) !important;
border:
1px solid #473c37 !important;
border-left:
5px solid #7f180b !important;
color:
#d8cec6 !important;
padding:
12px !important;
box-shadow:
inset 0 0 16px #000,
4px 4px 0 rgba(0,0,0,.65)
!important;
}
/* =========================================================
BLOG IMAGES
========================================================= */
.blog-entry .content img {
border:
3px solid #6e6661 !important;
border-radius:
0 !important;
box-shadow:
6px 6px 0 #000 !important;
}
/* =========================================================
AUTHOR PROFILE PICTURE
========================================================= */
.blog-entry .profile-pic {
position:
relative !important;
z-index:
10 !important;
background:
linear-gradient(
rgba(0,0,0,.30),
rgba(0,0,0,.58)
),
var(--steel)
center /
cover
!important;
border:
2px solid #68615d !important;
padding:
6px !important;
box-shadow:
inset 0 1px rgba(255,255,255,.16),
5px 5px 0 #000
!important;
}
.blog-entry .profile-pic img {
display:
block !important;
opacity:
1 !important;
background:
#111 !important;
border:
3px solid #948b85 !important;
border-radius:
0 !important;
padding:
2px !important;
filter:
brightness(1.08)
contrast(1.05)
!important;
box-shadow:
4px 4px 0 #000,
0 0 13px rgba(110,18,6,.28)
!important;
}
/* =========================================================
AUTHOR SIDEBAR
REMOVE PALE BLUE COMPLETELY
========================================================= */
.blog-entry .author-details {
background:
linear-gradient(
rgba(0,0,0,.34),
rgba(0,0,0,.68)
),
var(--steel)
center /
cover
!important;
background-color:
#12100f !important;
border:
2px solid #625b57 !important;
border-radius:
0 !important;
color:
var(--text) !important;
box-shadow:
inset 0 1px rgba(255,255,255,.15),
inset 0 0 18px rgba(0,0,0,.54),
5px 5px 0 #000
!important;
padding:
8px !important;
}
.blog-entry .author-details,
.blog-entry .author-details p,
.blog-entry .author-details span,
.blog-entry .author-details div,
.blog-entry .author-details strong {
color:
var(--text) !important;
background-color:
transparent !important;
text-shadow:
1px 1px 2px #000 !important;
}
.blog-entry .author-details a {
color:
#c75b3d !important;
font-weight:
900 !important;
text-decoration:
none !important;
}
.blog-entry .author-details a:hover {
color:
#efad7c !important;
text-shadow:
0 0 6px rgba(180,40,15,.65);
}
/* =========================================================
PUBLISH DATE
========================================================= */
.blog-entry .publish-date {
color:
var(--muted) !important;
background:
transparent !important;
font-style:
italic !important;
text-shadow:
1px 1px 2px #000;
}
/* =========================================================
KUDOS
REMOVE GIANT WHITE BAR
========================================================= */
.blog-entry .kudos-container {
background:
linear-gradient(
rgba(12,10,9,.72),
rgba(3,3,3,.86)
),
var(--steel)
center /
cover
!important;
background-color:
#0d0b0a !important;
color:
var(--text) !important;
border:
2px solid #625b57 !important;
border-radius:
0 !important;
box-shadow:
inset 0 1px rgba(255,255,255,.12),
inset 0 0 16px rgba(0,0,0,.64),
5px 5px 0 #000
!important;
}
.blog-entry .kudos-container,
.blog-entry .kudos-container div,
.blog-entry .kudos-container span,
.blog-entry .kudos-container p,
.blog-entry .kudos-container strong {
color:
var(--text) !important;
background-color:
transparent !important;
}
.blog-entry .kudos-container a {
color:
#c75b3d !important;
font-weight:
900 !important;
}
.blog-entry .kudos-container a:hover {
color:
#efad7c !important;
}
.blog-entry .kudos-container button,
.blog-entry .kudos-container input[type="button"],
.blog-entry .kudos-container input[type="submit"] {
background:
linear-gradient(
#7c1a0c,
#2c0402
) !important;
color:
#e8ddd5 !important;
border:
1px solid #8b3e2a !important;
border-right:
3px solid #000 !important;
border-bottom:
3px solid #000 !important;
border-radius:
0 !important;
box-shadow:
none !important;
}
/* =========================================================
COMMENTS AREA
REMOVE PEACH / YELLOW / WHITE
========================================================= */
.comments-table {
background:
linear-gradient(
rgba(8,7,6,.68),
rgba(2,2,2,.84)
),
var(--steel)
center /
cover
!important;
background-color:
#0b0908 !important;
border:
2px solid #625b57 !important;
border-collapse:
collapse !important;
color:
var(--text) !important;
box-shadow:
inset 0 0 20px rgba(0,0,0,.66),
6px 6px 0 #000
!important;
}
.comments-table tr,
.comments-table tbody,
.comments-table thead {
background:
transparent !important;
background-color:
transparent !important;
}
.comments-table td,
.comments-table th {
background:
linear-gradient(
rgba(21,17,15,.92),
rgba(8,7,6,.95)
) !important;
background-color:
#100d0b !important;
color:
var(--text) !important;
border:
1px solid #504843 !important;
text-shadow:
1px 1px 2px #000 !important;
}
/* alternate comment cells stay dark instead of peach */
.comments-table td:nth-child(odd) {
background:
linear-gradient(
rgba(30,23,20,.94),
rgba(12,9,8,.96)
) !important;
}
.comments-table td:nth-child(even) {
background:
linear-gradient(
rgba(18,15,13,.94),
rgba(7,6,5,.96)
) !important;
}
/* comment author names */
.comments-table strong,
.comments-table b {
color:
var(--bone) !important;
}
/* comment links */
.comments-table a {
color:
#c75b3d !important;
font-weight:
800 !important;
}
.comments-table a:hover {
color:
#efad7c !important;
}
/* comment avatars */
.comments-table img {
border:
2px solid #776e68 !important;
border-radius:
0 !important;
box-shadow:
4px 4px 0 #000 !important;
}
/* =========================================================
COMMENTS HEADING / OTHER SECTION HEADERS
========================================================= */
.blog-entry h1,
.blog-entry h2,
.blog-entry h3,
.blog-entry h4 {
background:
linear-gradient(
180deg,
#b63c17 0%,
#92230f 18%,
#681008 43%,
#400604 68%,
#210101 86%,
#100000 100%
)
!important;
color:
var(--bone) !important;
border:
1px solid #87402b !important;
border-bottom:
4px solid var(--blood-dark) !important;
border-radius:
0 !important;
font-family:
"Nosifer",
Impact,
sans-serif !important;
font-weight:
400 !important;
text-transform:
uppercase !important;
text-shadow:
1px 1px 0 #50140c,
2px 2px 0 #260403,
0 0 4px #84180c,
3px 5px 3px #000
!important;
box-shadow:
inset 0 1px rgba(255,205,150,.22),
inset 0 -9px 15px rgba(40,0,0,.70),
3px 4px 0 #000
!important;
}
/* restore slightly larger actual blog title */
.blog-entry .title {
font-size:
18px !important;
}
/* =========================================================
GENERIC BLOG BUTTONS
========================================================= */
.blog-entry button,
.blog-entry input[type="button"],
.blog-entry input[type="submit"],
.comments-table button,
.comments-table input[type="button"],
.comments-table input[type="submit"] {
background:
linear-gradient(
#332c29,
#0b0908
) !important;
color:
#e9e0da !important;
border:
1px solid #6b625d !important;
border-right:
4px solid #000 !important;
border-bottom:
4px solid #000 !important;
border-radius:
0 !important;
font-weight:
900 !important;
text-transform:
uppercase !important;
text-shadow:
1px 1px 2px #000 !important;
box-shadow:
inset 0 1px rgba(255,255,255,.10)
!important;
}
.blog-entry button:hover,
.blog-entry input[type="button"]:hover,
.blog-entry input[type="submit"]:hover,
.comments-table button:hover,
.comments-table input[type="button"]:hover,
.comments-table input[type="submit"]:hover {
background:
linear-gradient(
#82190c,
#2d0402
) !important;
color:
#fff !important;
border-color:
#91402b !important;
}
/* =========================================================
OTHER INPUTS / TEXTAREAS
========================================================= */
.blog-entry input[type="text"],
.blog-entry textarea,
.comments-table input[type="text"],
.comments-table textarea {
background:
#080706 !important;
color:
var(--text) !important;
border:
1px solid #625b57 !important;
border-radius:
0 !important;
box-shadow:
inset 2px 2px 8px #000
!important;
}
/* =========================================================
HORIZONTAL RULES
========================================================= */
.blog-entry hr,
.comments-table hr {
border:
0 !important;
border-top:
1px solid #5b504a !important;
box-shadow:
0 1px 0 #000;
}
/* =========================================================
CODE
========================================================= */
.blog-entry code,
.blog-entry pre {
background:
#030303 !important;
color:
#c9664d !important;
border:
1px solid #493a34 !important;
border-left:
4px solid #79170b !important;
font-family:
"Courier New",
monospace !important;
text-shadow:
0 0 4px rgba(140,24,9,.32);
}
/* =========================================================
FOOTER
========================================================= */
footer {
background:
linear-gradient(
rgba(0,0,0,.42),
rgba(0,0,0,.72)
),
var(--steel)
center /
cover
!important;
color:
#c9beb5 !important;
border:
2px solid #5f5854 !important;
border-radius:
0 !important;
box-shadow:
inset 0 1px rgba(255,255,255,.13),
inset 0 0 25px rgba(0,0,0,.65),
7px 7px 0 #000
!important;
}
footer a {
color:
#bc5539 !important;
}
footer a:hover {
color:
#efad7c !important;
}
footer nav,
footer .links,
footer [class*="links"] {
background:
linear-gradient(
#25211f,
#090706
) !important;
border:
1px solid #554e49 !important;
color:
#ddd3cc !important;
}
/* =========================================================
REMOVE LEFTOVER BLUE / WHITE ACCENTS
WITHIN BLOG ELEMENTS ONLY
========================================================= */
.blog-entry table,
.blog-entry tbody,
.blog-entry tr {
border-color:
#514944 !important;
}
.blog-entry select {
background:
#0b0908 !important;
color:
var(--text) !important;
border:
1px solid #625b57 !important;
border-radius:
0 !important;
}
/* =========================================================
SCROLLBAR
========================================================= */
::-webkit-scrollbar {
width:
12px;
}
::-webkit-scrollbar-track {
background:
#050505;
}
::-webkit-scrollbar-thumb {
background:
linear-gradient(
90deg,
#1d1a18,
#625b57,
#211d1b
);
border:
2px solid #050505;
}
::-webkit-scrollbar-thumb:hover {
background:
linear-gradient(
#78170b,
#310402
);
}
/* =========================================================
TEXT SELECTION
========================================================= */
::selection {
background:
#681008;
color:
#fff;
}
</style>
Comments (0)
No comments yet. Be the first!
Log in to leave a comment.