Minimal White

Tags: bela, white, minimal, simple, monochrome, light, elegant, gray, grey, pale

Description:

A simple white and modern layout based on Bela's 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

Planned changes:

Better use of variables to allow for easy colorization
Fixing individual icons in the contact div
Possibly turning each of the divs into little windows with simple window decorations

Preview:

click on the image for a larger preview

Code:

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

<!-- 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: gray;
    --text: black;
    --text_accent: gray;
    --names: gray;
    --links: gray;
    --hover: gray;
    --borders: 1px solid gray !important;
    --border_normal: 1px solid gainsboro !important;
    --border_none: none !important;
    --border_accent: black;
    --font-family: 'Gotu', sans-serif;
    --curve: 0px;
    --simple_bg: white;
    --bg_transparent: transparent;
    --dropshadow: #f3f3f3;
}

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: var(--border_none) !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: 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 77 comments ( View all | Add Comment )

sillyechoes	1792422243 using!! Report Comment
nayu ׄ𝄚𝅦𝄚𝄞	1790000263 usingggg Report Comment
... Chip	1789689474 using! Report Comment
.	1779837078 using Report Comment
sanja	1770775850 using. Report Comment
⋆.ೃ࿔*:･𝒮𝒽ℯℛ𝒶♡⸝⸝	1770299807 using <3 Report Comment
rottinpede	1769397035 Using Report Comment
rottinpede	1769397033 Using Report Comment
✰noemi✰	1768067006 using Report Comment
verandi	1763176808 using Report Comment
☆⦻vicky⦻☆	1761344977 using! Report Comment
haru	1760498353 using Report Comment
discodoll	1759814299 using Report Comment
vamnzie	1758766854 Using! Report Comment
silently	1758667648 using! ty. Report Comment
「 ✦ 𝐫𝐢𝐨♫ ✦ 」	1756313249 Using :00 !! Report Comment
D4ra	1753476358 using!!!! Report Comment
𝕸𝖊𝖑𝖔𝖈𝖔𝖙𝖔𝖓	1750620233 Usando! Report Comment
KARLc0k3wh0r3	1747622644 i will use it tyy Report Comment
B1OR4D1AT10N	1746917888 thank you, using <3 Report Comment