little sites themes :: idioteque's plastic layout + monochrome-ish? (requested)

Tags: monochrome, black, white, minimal, simple, customizable

Description:

thank you idioteque for the layout of the page! amazing layout maker, i SO recommend using their layouts. you can find them here NOTE: i swear that your profile wont look buggy like in the screenshot nein mc is wild as hell this is the sixth layout of my little series or wtv of "little sites themes". the entire compact, minimal formatting is completely done by the css deity, idioteque, and i get all girly with the decorating jajaja my other layouts

pompompurin |soft pink | pink rilakkuma | gloomy the bear

| cinni's dream home | monochrome

Preview:

Code:

<!-- (c) Layout created by (https://layouts.spacehey.com/layout?id=83775) --> <style> /* customization~ */ :root { /* background of page itself */ --backgrounds-color: white; /* accent color - used for banner, titles, tabs, scrollbars, and link hover colors. */ --accent: black; /* the banner image, inside the parentheses. leave the parentheses empty for no image. short, wide pictures look better */ --banner: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxISEhUSEhIVFRUVFRcVFRUVFRUVFRUVFRUWFhUVFRcYHSggGBolHRUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDQ0NFQ8PFSsZFRkrKy0tKystKy0tLTcrLS03Kzc3NzctNy0rLTc3Ky0tKy0tNy03LSstKzc3Kys3KystK//AABEIAOEA4QMBIgACEQEDEQH/xAAXAAEBAQEAAAAAAAAAAAAAAAAAAQIH/8QAIRABAQEAAQMEAwAAAAAAAAAAAAERAhJBYSFRgcExcZH/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAQL/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwDjHJFrIwtQwAAwCFJSwAoaAICroQoiUWoKLEoCiVRCLqYoIFqgmDRYCasSEBQAZFoCCoCKUFChBAsABBRQwBEU5IKVYakBQAUgCBiKCwpEtAWJhoLoAIioChoCBTQFSU0A0KCEhgKuFNUEqRUwRTsiigEBYEBBABRFBUUBMirigxqKUBFNBDAAEUCIqUCACkUALUVKItpE1QBQCIuFBCRUwDVhIoGhFgJ6ewmUAKYgKIoM04qAkVNXAXfVmrCgkWIsAi1DQKi6gClBUrSSAiiys2gqKUBdSKBpI10saC9XITpAImELAIupCgBoCBiwEUSiippBFoSLgJiVUBYUBVAgglaqUEAgLixNJQXWbWoUGBcgCypYsSgAsoJA1KBqxFgBYSlAkWRCAsVKloGlQgKRMWAqxlQVKWmAFQBQoCynYwyggmAKcjQDBJTQIlVLAUhqQVrUAQwTVAikLQRFMAlNAFwNADQBCqAjUTAFRYgJn7DfM/gABQAgC4ixKCYupi4BIUKCLKmrBVgQETknZrEwEimLgGiLAWWz8fFQsATRQAgaBSkWAzgbQCKgBoACVaAi6igJY0yAsTFFUSKIlqpSgESLBVxYzFENBMAKFFVF0gipAwD4ABNKaAigC1FQEFpBQNNBFxFAwrTIgAAQkAUTGgQEwDAICwDAJAMAwXAGdDTQBFAotQEtVFopqVUtAWM41ADSFERUBVAtEXAAVE1rQZFAKSnIgLEqsgvUJgBS00AxUIC1ClgGiUwFpTS0ExqMxqAhVQE1YAARQSKLASItQBcRQCBgLqVUBBVBiQCgsAgFKuoCGlAABTFiKBEqlETBTBQhARaaRaCIuGgVNJVARQFRZUoG+RM8AIgA1AEFjPLsCi1IANcWQBeRQAKgC0AAAFigCU5gBx+z3AGYtAUAEABX/9k=); /* the background color. if you have a background image, this color is used for the shadow on the credits text */ --body-background-color: white; /* the background image, inside the parentheses. leave the parentheses empty for no image */ --background-imagege: url(\https://gifcity.carrd.co/assets/images/gallery73/20fe10c7.png?v=5bf8fcf7); /* border radius for the main page! in px - 0px for no corner-rounding */ --border-radius: 10px; /* border radius for the little titles! in px - 0px for no corner-rounding - lower values recommended */ --title-border-radius: 3px; /* general font color, also used for links */ --font-color: black; /* font color used on titles only */ --title-font-color: white; /* color of borders */ --border-color: black; } /* code~ */ nav .top .left a:after,nav .top .right *{text-shadow:0 0 2px var(--accent),0 0 2px var(--accent),0 0 2px var(--accent),0 0 2px var(--accent),0 0 2px var(--accent),0 0 2px var(--accent),0 0 2px var(--accent)}.more:hover,a,nav .links a{text-decoration:underline}.blurbs .heading,.profile h1{border:1px solid var(--border-color)}#comments .heading h4:before,.table-section td:first-child a,.table-section td:first-child p,nav .top .right *{color:var(--title-font-color)!important}.blurbs .inner,.contact .heading,.details,.table-section td,body:after,nav .links{text-align:center}.ago,.blurbs .heading,.comments-table button,.comments-table td:first-child a,.contact .f-row,.details,.friends .inner p&gt;b,.logout-btn,.mood p,.person a,.person p,.profile h1,.report,.section h4,.table-section td:first-child p,.top .right,body:after,footer *,nav .links a,small{text-transform:uppercase}[title=Notifications]:after,body:after{left:5px;white-space:nowrap;text-shadow:0 0 5px var(--body-background-color),0 0 5px var(--body-background-color),0 0 5px var(--body-background-color),0 0 5px var(--body-background-color),0 0 5px var(--body-background-color),0 0 5px var(--body-background-color)}[title=Notifications]:after,body:after,footer *{text-shadow:0 0 5px var(--body-background-color),0 0 5px var(--body-background-color),0 0 5px var(--body-background-color),0 0 5px var(--body-background-color),0 0 5px var(--body-background-color),0 0 5px var(--body-background-color)}@font-face{src:url(https://dl.dropbox.com/scl/fi/phd6lorzz1gdkzku5f7ac/Volter__28Goldfish_29.ttf?rlkey=m9msku2d84m2c3imqzb72gtnp);font-family:voltergoldfish}::-webkit-scrollbar{width:8px;height:8px;background:0 0}::-webkit-scrollbar-track{margin-block:10px}::-webkit-scrollbar-thumb{background:var(--accent);border-block:1px solid var(--border-color);border-left:1px solid var(--border-color)}.blurbs .inner::-webkit-scrollbar-thumb{background:var(--accent);border:1px solid var(--border-color)}body:after{content:"layout by dan/idioteque - best seen in desktop";font-size:8.5px;position:fixed;bottom:5px;display:block;width:100px;color:var(--font-color)}.logout-btn,body{font-family:voltergoldfish;color:var(--font-color)}.count,a,a:hover,body,main{color:var(--font-color)!important}.top,nav .links{border-bottom:1px solid var(--border-color)}.profile h1,nav .links{user-select:none}#comments .heading h4,.contact h4,.copyright a,.friends:not(#comments) .heading h4,.mood p:last-child b,.table-section+.table-section .heading h4,.table-section:not(.table-section + .table-section) .heading h4,.top .right{font-size:0px}#comments .heading,.friends:not(#comments) .heading{background:var(--accent)!important;width:1.45vw;line-height:.8vh;right:-1.45vw}.more,a:hover,nav .links a:hover{text-decoration:none}.profile h1,a,b,body:after,button,h2,h3,h4,h5,h6,i,p{filter:contrast(1)}.container{margin-top:3.8rem;margin-inline:auto;height:81vh;width:40vw;background:var(--backgrounds-color)}main{background:0 0;padding:0!important;height:calc(81vh - 58px)}.col{height:calc(81vh - 58px)!important}body{background:var(--body-background-color) var(--background-imagege)}.comments-table button:hover,.copyright a:hover:after,.f-row:nth-child(2) .f-col:last-child a:hover:after,.profile h1,.table-section td:first-child p,a:hover,nav .links a:hover{background:var(--accent)}.logout-btn{font-size:9px}.comments-table,.more,nav .links a{font-size:9px!important}.profile h1,a,b,button,h2,h3,h4,h5,h6,i,p{font-size:9px;font-weight:400}.person a,.person p,nav .links a{font-weight:400!important;color:var(--font-color)!important}.top{background:var(--accent) var(--banner)!important;background-size:cover!important;background-position:center!important;padding-top:2px!important;height:40px}.col,nav .links{padding:0!important}nav .top .left a:after{content:"SPACEHEY";font-family:"MS Gothic";font-size:30px;font-weight:700;letter-spacing:1px;color:var(--title-font-color)}.blog-preview,.edit-link,.f-col .icon,.mood p:last-child a:nth-child(3),.online img,.profile-info,.report .icon,.supporter img,.url-info,.verified,[title=Notifications] img,nav .top .left img{display:none}.links li:not(:last-child)::after{content:""!important}nav .links{background:0 0;word-spacing:-3px}.comments-table td,.contact .heading,.table-section td,.top .left a:hover,footer{background:0 0!important}nav .links a{text-shadow:none!important}.top .right{word-spacing:2px;line-height:40px}.blurbs .heading,.profile h1{font-size:12px!important}.top .center{visibility:hidden}.profile h1{padding-inline:3px;padding-block:1px;margin:4px!important;width:fit-content}.col:not(.table-section) :is(p,b){margin-inline:10px}.col.left{width:12rem}.blurbs .heading,.table-section td:first-child p{padding-inline:3px!important;padding-block:1px!important;width:fit-content}.col.right{position:relative;border-left:1px solid var(--border-color)}.general-about .profile-pic,.general-about .profile-pic img{min-width:100%!important;min-height:100%!important;object-fit:cover;object-position:center center;border-bottom:1px solid var(--border-color);margin-bottom:4px!important}.general-about .profile-pic{border-top:1px solid var(--border-color)}.details p:first-child{margin-top:0!important}.blurbs,small b:first-child{margin:0!important}.blurbs .heading{margin:4px;background:var(--accent)!important}.blurbs .heading:before{content:"ABOUT";color:var(--title-font-color)}.blurbs .heading h4{display:none!important}.table-section:not(.table-section + .table-section){position:absolute;top:3.2rem;height:81vh!important;width:41.45vw;border:0 solid var(--border-color)!important;visibility:hidden;z-index:99999;padding-right:20px;opacity:1}#comments .heading,.friends:not(#comments) .heading,.table-section+.table-section .heading,.table-section:not(.table-section + .table-section) .heading{border:1px solid var(--border-color);writing-mode:vertical-lr;text-orientation:upright;visibility:visible;text-transform:uppercase;text-align:center;color:var(--title-font-color)}.container:before{content:"";display:block;position:absolute;height:80.7%;width:39.9vw;border:1px solid var(--border-color);z-index:999999999;pointer-events:none}.table-section td{display:block;width:100%!important}.table-section td:first-child p{border:1px solid var(--border-color);margin:auto}.table-section td:first-child a{text-decoration:none!important;pointer-events:none}.table-section tr{width:50%!important;display:inline-block;vertical-align:top}.table-section:not(.table-section + .table-section) .heading{background:var(--accent);width:3.5%;height:100px;line-height:.7vh;position:absolute;top:40px;right:0}.table-section:not(.table-section + .table-section) .heading h4:before{content:"INTERESTS";font-size:9px}.friends,.table-section+.table-section{height:81vh!important;padding-right:20px;position:absolute}.table-section+.table-section .heading{background:var(--accent);width:1.5vw;height:60px;line-height:.8vh;position:absolute;top:145px;right:0}.table-section+.table-section .heading h4:before{content:"LINKS";font-size:9px}.table-section .inner:hover,.table-section:has(.heading:hover) .inner{opacity:1;visibility:visible}.table-section:has(.heading:hover){visibility:visible}.table-section+.table-section{top:3.2rem;width:41.45vw;border:0 solid var(--border-color)!important;z-index:99999;opacity:1;visibility:hidden}.friends .inner,.table-section .inner{height:100%;width:40vw;overflow-y:scroll}.friends .inner,.more,.table-section .inner{visibility:hidden;opacity:0;transition:.3s}.table-section .inner{background:var(--backgrounds-color);padding-top:10px!important}#comments .heading{height:88px;position:absolute;top:293.5px}#comments .heading h4:before{content:"COMMENTS";font-size:9px}.friends:not(#comments) .heading{height:78px;position:absolute;top:210.5px}.friends:not(#comments) .heading h4:before{content:"FRIENDS";font-size:9px;color:var(--title-font-color)!important}.more{position:absolute;z-index:999;float:initial;top:-188px;right:13px;width:100px!important;writing-mode:horizontal-tb}.more:hover{background:0 0}.friends .inner{background:var(--backgrounds-color);padding-top:20px!important}.comments-table .pfp-fallback,.person .pfp-fallback{border:1px solid var(--border-color);object-fit:cover;transition:.2s}.person a,.person p{text-decoration:none!important;margin:0!important}.person .pfp-fallback{margin-top:5px!important;height:100px!important;width:100px!important}.comments-table .pfp-fallback:hover,.person .pfp-fallback:hover{outline:5px solid var(--accent)}.comments-table,.comments-table td{border:0}.contact h4:after,.mood p:first-child b,.mood p:last-child b:before,.section h4,.supporter a{background:var(--accent);border:1px solid var(--border-color);color:var(--title-font-color)!important}.comments-table .pfp-fallback{height:100px;width:100px}.comment-replies,.contact{border:0!important}.comments-table td:first-child a{text-decoration:none!important}.friends-grid{margin:50px auto!important;width:340px}.friends:has(.heading:hover),.friends:has(.heading:hover) .inner,.friends:has(.heading:hover) .more{visibility:visible;opacity:1}.friends .inner:hover{visibility:visible;opacity:1}:has(.friends:not(#comments) .inner:hover) .more{visibility:visible;opacity:1}.friends{width:40vw;border:0 solid var(--border-color)!important;visibility:hidden;z-index:999;opacity:1;background:0 0;top:-58px;right:0}.blurbs .inner{height:calc(81vh - 90px);background:0 0;margin-inline:5px;overflow-y:auto;overflow-x:hidden;color:var(--font-color)!important}.section h4{width:fit-content;padding:2px;padding-inline:4px;margin:5px auto!important}.comments-table button,.online{color:var(--font-color)!important}footer{position:fixed;left:40vh;width:60px;top:10vh}footer *{font-style:normal!important;color:var(--font-color)}.copyright a:after{content:"©2023 spacehey all rights reserved";font-size:9px}.supporter a{padding:3px}.online{font-weight:400;font-size:9px}.mood p{margin:8px 0!important}.mood p:first-child b{padding:2px 3px}.mood p:last-child b:before{content:"VIEW MY:";padding:2px 3px;font-size:9px;margin-right:3px}.mood p:last-child a{margin-inline:2px}.contact .heading{border-top:1px solid var(--border-color);padding-top:10px!important}.contact h4:after{content:"CONTACT ME";padding:2px 3px;font-size:9px}.contact .f-row{margin-inline:7px!important}.f-col a{font-size:8.5px!important;white-space:nowrap}.contact .inner{width:98%}.f-row:nth-child(2) .f-col:last-child a{font-size:0px!important}.f-row:nth-child(2) .f-col:last-child a:after{font-size:8.5px!important;content:"FORWARD TO..."}small{font-size:8.5px}.comments-table button{background:0 0;border:0!important;text-decoration:underline;padding:0!important;cursor:pointer}.logout-btn:hover{background:var(--accent)!important}.blurbs:before{width:100%;content:"";border-bottom:1px solid var(--border-color);display:block;height:0;position:relative;top:26px}.container,.container:before,.inner:not(.contact .inner,.blurbs .inner),.pfp-fallback:not(.general-about .pfp-fallback),main{border-radius:var(--border-radius)!important}.inner{padding:5px}.top{border-radius:var(--border-radius) var(--border-radius) 0 0}.heading:not(.contact .heading,.blurbs .heading){border-radius:0 var(--title-border-radius) var(--title-border-radius) 0}.blurbs .heading,.contact h4:after,.mood p:first-child b,.mood p:last-child b:before,.profile h1,.section h4,.supporter a,.table-section td:first-child p{border-radius:var(--title-border-radius)}.profile h1{color:var(--title-font-color)!important}@keyframes shakyguy{0%,100%{transform:translateX(0)}25%,75%{transform:translateX(1px)}50%{transform:translateX(-1px)}}[title=Notifications]:after{content:"YOU HAVE NOTIFICATIONS.";position:absolute;bottom:55px;animation:.5s infinite shakyguy} </style> <img src="https://gifcity.carrd.co/assets/images/gallery10/b6e8681a.png?v=5bf8fcf7"/> <a href="https://spacehey.com/luluandthebanshees">little site theme by @luluandthebanshees</a>

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.