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 57 comments ( View all | Add Comment )

𐔌 . 𝓦𝑖𝑡𝑐ℎ𝑒𝑟 : ♱ ֹ ୧	1742617597 usingg!! ^^ Report Comment
kashinfu	1741578023 using Report Comment
𓏲 ๋࣭ ࣪ ˖Astra 𓇼	1741026819 using mayb Report Comment
3YUPiii00	1740337162 using Report Comment
alice	1740316762 using Report Comment
leon♡	1739743716 using well :3 Report Comment
sippy	1738870407 yes yes yes using Report Comment
key	1738531842 usin :p Report Comment
hana 🦢	1737520212 usingg Report Comment
⌗ !! ꒰lina!꒱ 🍥	1737352967 usando Report Comment
chloe ᶻ 𝗓 𐰁	1737008979 using! Report Comment
arese	1735511913 using ! Report Comment
fallendown	1734984132 using. Report Comment
nana	1734704786 usinggg Report Comment
nana	1734704784 usinggg Report Comment
mykaela	1734407037 using!!! Report Comment
Pansune (lalaki na para sa lahat)	1734275207 using! Report Comment
kek	1732325168 using, thank you :) Report Comment
Jeremías	1731983904 Usando :) Report Comment
﹒⇆﹒★ . DaNa !﹒ᶻz	1730066693 Using Report Comment