Minimal Black

Tags: black, simple, dark, layouts, minimal, template, clean

Description:

A minimal black layout based on my Minimal White layout, which in turn is based Bela's pink layout

My Minimal White layout
https://layouts.spacehey.com/layout?id=26820

Bela's original Pink layout
https://layouts.spacehey.com/layout?id=344

Feel free to modify and redistribute, but please credit Bela and me by adding links back to the original themes if you publish your own version.

Feel free to suggest changes or voice your opinions, and remember that it's against spacehey rules to hide the spacehey logo, search bar, or logout buttons in the navigation.

Changes from bela's version:

More CSS variables
Almost completely monochromatic

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by temporary (https://layouts.spacehey.com/layout?id=26887) -->

<!-- Based on Pink layout created by Bela (https://layouts.spacehey.com/layout?id=344) -->
<!-- Modified by @temporary -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Gotu&display=swap');
</style>
<style>
:root {
    --headers: white;
    --text: #bbb;
    --text_accent: #bbb;
    --names: #bbb;
    --links: #bbb;
    --hover: white;
    --borders: 1px solid #333 !important;
    --border_normal: 1px solid #333 !important;
    --border_none: none !important;
    --border_accent: #333;
    --font-family: 'Gotu', sans-serif;
    --curve: 0px;
    --simple_bg: black;
    --bg_transparent: transparent;
    --dropshadow: #0f0f0f;
}

main .left {
    padding-right: 20px;
}

.url-info {display: none !important;} /* to hide the url */
.blurbs .heading{display: none !important;} /* to hide the blurbs heading */

 /* headings*/
h3, h4, h5, .url-info b {
    color: var(--headers) !important;
}

 /* color of links */
a {
    color: var(--links) !important;
}

 /* color of links on hover */
a:hover {
    color: var(--hover) !important;
}

/* color of text */
p, h2 {
    color: var(--text) !important;
}

/* color of names, and friends counter */
h1, .friends a p {
    color: var(--names) !important;
}

 /* color of names on hover */
h1, .friends a:hover p {
    color: var(--hover) !important;
}

/* color of search */
nav label {
    color: var(--links) !important;
}

/* aboutme & want2meet headings */
.section h4 {
    color: var(--headers) !important;
    text-align: center;
}

/* line in between comment replies*/
.comment-reply:not(:first-child) {
    border-top: 3px double var(--border_accent);
}

/* Count of Friends comments on profile*/
.count {
    color:var(--text_accent);
}

/* text decoration */
a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    text-decoration: underline;
    text-decoration-style: wavy;
}

.logout-btn:hover, .logout-btn:active {
    text-decoration: underline;
    text-decoration-style: wavy;
}

nav .top a:hover {
    text-decoration: underline;
    text-decoration-style: wavy;
}

nav .links a {
    text-shadow: none !important;
}

nav .links a:hover {
    text-decoration: underline;
    text-decoration-style: wavy;
}

/* font family */

h2, h3, h4, h5, a, p, nav label, .section {
    font-family: var(--font-family) !important;
    font-size: 12px!important;
}

/* padding and margin */

.icon {
    border: none !important;
}

.blurbs {
    margin-top: 10px !important;
    margin-bottom: 30px !important
}

.friends {
    margin-top: -10px !important;
    margin-bottom: 30px !important
}

.profile-info {
    border-radius: var(--curve) !important;
}

.comment-replies {
    border: 5px dotted var(--border_normal);
}

.comments-table {
    border-radius: var(--curve) !important;
    border: none !important;
}

.table-section {
    padding-bottom: 7px !important;
    margin-top: 30px!important
}

#comments {
    margin-top: 5px !important;
    padding-bottom: 5px !important
}

.details p:last-child {
    color: var(--links) !important;
    filter: brightness(95%);
}

.mood {
    margin-top: 20px;
}

/* background image */
body {
    background-color: var(--simple_bg) !important;
    background-repeat: repeat;
    background-size: 120px;
}

/* navigation */

/* change logo color at https://codepen.io/sosuke/pen/Pjoqqp */

nav {
    background: var(--simple_bg);
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) var(--simple_bg);
    margin-bottom: 30px;
    border: var(--border_none);
}

nav .top {
    background: rgba(0, 0, 0, 0.0);
}

nav .top a {
    color: var(--links) !important;
}

nav .links {
    background: transparent!important;
    text-align: center;
    text-shadow: none !important;
}

/* nav logo */
nav img.logo {
    filter: brightness(0) saturate(100%) invert(76%) sepia(42%) saturate(0%) hue-rotate(305deg) brightness(104%) contrast(80%);
    !important;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " | ";
    color: var(--headers);
}

/*============= color the search bar and button ===================*/

.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.0) !important;
    border: var(--border_normal);
    color: lightgray !important;
    border-radius: 0px !important;
}

button {
    border-radius: 0px !important;
    border: 0px solid var(--border_normal) !important;
    font-family: var(--font-family) !important;
    background-color: var(--bg_transparent) !important;
    color: var(--text) !important;
}

/*============= online icon  ===================*/

.online {
    content: url(https://dl.glitter-graphics.com/pub/272/272679lz7b9hcea1.gif);
    filter: saturate(0%) !important;
}

.f-col img {
    content: url(https://cdn-icons-png.flaticon.com/64/868/868604.png);
    filter: opacity(30%) !important;
}

/*============= profile name ===================*/

h1 {
    padding-left: 20px !important;
    font-family: 'Gotu', sans-serif;
    font-size: 25px !important;
    margin-top: -10px!important;
    color: var(--links)!important;
}

/*============= box shadows ===================*/

.mood, .blog-preview, .contact {
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) var(--dropshadow);
}

.table-section, .blurbs, .friends {
    margin-bottom: 30px !important;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) var(--dropshadow);
}

.friends {
    margin-top: 10px!important;
}

.profile-info {
    background: var(--simple_bg);
    border: var(--border_normal) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) var(--dropshadow);
}

.profile-info .inner {
    font-weight: bold;
    text-align: center;
}

.contact {
    background: var(--simple_bg);
    padding: 20px;
    margin-bottom: 40px !important;
}

main {
    background-image: url('');
    background: var(--bg_transparent);
    padding: 6px 0px;
}

.profile-pic img {
    outline: none !important;
    border: none !important;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) var(--dropshadow);
}

.friends-grid img {
    outline: none !important;
    filter: opacity(80%) saturate(0%) !important;
    border-radius: var(--curve) !important;
}

td {
    background-color: var(--bg_transparent) !important;
}

hr {
    border-top: 1px solid var(--border_normal);
}

.heading, .url-info, .blurbs, .friends, .table, .table-section, footer {
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--border_normal) !important;
}

.friends, .blurbs {
    background: var(--simple_bg);
}

.mood, .contact, .blog-preview {
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--border_normal) !important;
}

.mood, .blog-preview {
    text-align: center;
    background: var(--simple_bg);
    border: var(--border_normal) !important;
}

.table-section {
    border: var(--border_normal) !important;
    background-color: var(--simple_bg) !important;
    border-radius: var(--curve) !important;
}

.heading {
    background: var(--bg_transparent) !important;
    padding-bottom: 4px !important;
    background-size: 100%100%!important;
    text-align: center;
    border: none!important;
}

.comments-table {
    display: block;
    height: 500px!important;
    overflow-y: scroll;
    border: var(--border_normal) !important;
    outline: none !important;
    border: none!important;
}

.comments-table td {
    background-image: url('') !important;
    background-size: cover;
    border: var(--border_normal);
}

.comments-table td:first-child img {
    /* you can clip images at https://bennettfeely.com/clippy and add the code here */
}

footer {
    color: var(--text);
    text-align: center;
    font-size: 60%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: var(--simple_bg);
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) var(--dropshadow);
}

</style>
<style>
/* Force scrollbars onto browser window */

/* Scrollbar styles */

::-webkit-scrollbar {
    width: 5px;
    height: 12px;
}

::-webkit-scrollbar-track {
    border-radius: 0px;
    width: 3px;
    border: 1px solid var(--border_normal);
}

::-webkit-scrollbar-thumb {
    background: var(--headers);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border_accent) !important;
}

</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 68 comments ( View all | Add Comment )

𝕺𝖉𝖊𝖑𝖎𝖆𝖍	1714328868 using Report Comment
esthrela	1714018431 using Report Comment
Thiagozzzxx	1713973275 Using Report Comment
Anon_Kitty	1713746184 using thank you very much Report Comment
sillymeth	1713737100 Using Report Comment
Kamri ☆	1713447494 Using Report Comment
altf4bn	1712417222 using Report Comment
ailsterra	1710912248 using, ty :* Report Comment
ZombieXO	1709339859 using Report Comment
Insomnio ⋆ Ansioso	1707866465 Usando! Report Comment
blarvink	1707434448 usin Report Comment
p3rcy	1706919899 Using :) Report Comment
tofu !!	1706837097 Using Report Comment
𝑙𝑖𝑙𝑖 ᶻ 𝘇 𐰁	1705038506 using Report Comment
✮ REKOROOM ✮	1704947393 using Report Comment
sinister	1704750633 using Report Comment
Roci	1702260753 Using ttyy Report Comment
Larry	1701828921 using! Report Comment
ZΛCꞰ⦻	1701012428 usinf Report Comment
Tristin	1698990306 using. :) Report Comment