little site themes :: idioteque's plastic layout + pompompurin

Tags: yellow, cute, pastel, sanrio, pompompurin, customizable, mini, minimal

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: this is the third 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

Preview:

Code:

<!-- (c) Layout created by (https://layouts.spacehey.com/layout?id=83486) --> <style> /* customization~ */ :root { /* background of page itself */ --backgrounds-color: white; /* accent color - used for banner, titles, tabs, scrollbars, and link hover colors. */ --accent: #bf8c58; /* the banner image, inside the parentheses. leave the parentheses empty for no image. short, wide pictures look better */ --banner: url(https://i.pinimg.com/736x/d9/4e/2c/d94e2c8b5c53b88b51eccdec14d55239.jpg); /* the background color. if you have a background image, this color is used for the shadow on the credits text */ --body-background-color: #ffdf94; /* the background image, inside the parentheses. leave the parentheses empty for no image */ --background-imagege: url(https://garden.spoonflower.com/c/9584229/p/f/m/hWuAoXVgP5-Tz8ZnkJQ3_D3yHofMZ_A7JkZCdYjSpUOOK8iCEASfeQ/Spring%20plaid%20-%20Gingham%20Check%20-%20yellow%20-%20LAD20.jpg); /* border radius for the main page! in px - 0px for no corner-rounding */ --border-radius: 15px; /* border radius for the little titles! in px - 0px for no corner-rounding - lower values recommended */ --title-border-radius: 4px; /* general font color, also used for links */ --font-color: #b57002; /* font color used on titles only */ --title-font-color: white; /* color of borders */ --border-color: #ffb300; } /* 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> <div style="float: ; max-height: 400px; position: fixed; right: 1px; bottom: 9px; z-index: 200;"><img src="https://wispys.carrd.co/assets/images/image01.gif?v=78890206" width="250" height="250"/></div> <div style="float: ; max-height: 400px; position: fixed; left: 1px; top: 9px; z-index: 200;"><img src="https://maguro.carrd.co/assets/images/gallery24/955c782f.png?v=10a293e5" width="150" height="200"/></div>

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.