Pip-Boy 3000 (Unfinished)

Tags: fallout, pip boy, green, animated, computer, monochrome, terminal, new vegas, customizable

Description:

A Fallout style theme for your page with the vegas horizon in the distance and animated scanlines :) I'm planning on updating the frame for the pipboy and maybe adding some smudges onscreen and improving the appearance on mobile, but I feel like it's more than usable by this point.

ALSO! check out the code when you put it in your page! since it's monochrome, you can use some of the filters I put in to make the theme look like any of the colors in New Vegas!

THINGS I PLAN TO ADD

Finger smudges on the screen? Maybe some glare?
Improved visuals on mobile - the logo is really messed up :/
More detailed frame with the led buttons and gage.. maybe
Music player - I want to play New Vegas radio on my page
Also Icons for the contact and social buttons.... tell me if you think of good ideas for what to make them. I've been trying to think of good things to replace them with and haven't had the best luck.

Preview:

click on the image for a larger preview

Code:

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

<style>

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

/*

BELOW THESE LINES ARE CUSTOM PIPBOY COLORS! 
Try them out, mess around a little why don't you :)

*/
main, footer { -0-: hue-rotate(275deg) }
/*^^ replace '-0-' with 'filter' for an amber pipboy*/
main, footer { -0-: hue-rotate(50deg) brightness(100%); }
/*^^ replace '-0-' with 'filter' for an blue pipboy*/
main, footer { -0-: hue-rotate(50deg) brightness(140%) saturate(20%); }
/*^^ replace '-0-' with 'filter' for an white pipboy*/
main, footer { -0-: rgbpipboy 3s linear infinite, scanlines 7s infinite !important; }
/*^^ replace '-0-' with 'animation' for an rainbow pipboy!!*/
@keyframes rgbpipboy { from {filter: hue-rotate(0deg)} to {filter: hue-rotate(360deg)} }

/*
OK THAT'S IT
Keep on exploring if you'd like though :)
*/


:root {
  --crt-bg-dark: #021;
  --crt-bg-light: #243;
  --crt-text-main: #1b5;
  --crt-grad-clear: #1b50;
  --crt-text-link: #6f7;
  --crt-text-hover: #bfa;

  --frame-neutral: #331;
  --frame-light: #552e;
  --frame-dark: #221;
  --frame-lightest: #674e;

  --off-white: #ffd;

}


body{
background-image: url("https://groonklie.com/spacehey-junk/fallout/bg-big.png"), url("https://groonklie.com/spacehey-junk/fallout/bg-small.png");
background-attachment: fixed; background-size: cover; background-position: center;
background-color: black;
font-family: Jetbrains Mono, monospace; font-weight: bold;

cursor: url("https://groonklie.com/spacehey-junk/fallout/cursor.png"), pointer;
}
.logout-btn { font-family: Jetbrains Mono, monospace; font-weight: bold; color:var(--off-white); }
animation: screenbob 3s ease-in-out alternate infinite;
@keyframes screenbob {
from{ background-position: center 0%; } to{ background-position: center 2%; }
}

img { filter: grayscale(100%) sepia(100%) hue-rotate(70deg) }
.profile-pic, .person a, .comments-table td a { filter: saturate(200%) }
.profile .friends .person a p, .comments-table td a p { color:#9db; }

.container {
width: 60%; border-radius: 30px; background-color: black;
box-shadow: 0px 100px 4px 8px black, 0px 110px 2px 42px #331, 0px 110px 0px 84px #110, 0px 140px 20px 94px #090300cc;
}
@media (max-width: 1025px) {
body { background-image: none; } .container { width: 100%; }
nav .top .left .logo { height: 7vw !important; width: auto; } 
main { height: auto !important; } }
main { 
box-shadow: 0px 0px 7px 10px inset black; border-radius: 10px;
background-image:
linear-gradient(#bdb0, #bdb3 90%, #bdb0),
repeating-linear-gradient(#0000, #0000 30%,#0002 40%, #0006 50%, #0006 80%,#0002 90%, #0000),
linear-gradient(var(--crt-bg-light), var(--crt-bg-dark));
background-size: 100% 20%, 10px 10px, 100% 100%; background-attachment: fixed;
background-color: var(--crt-bg-dark); background-repeat: no-repeat, repeat;
animation: scanlines 7s infinite;
color: var(--crt-text-main); text-shadow: 0px 1px 4px var(--crt-text-main); }
@keyframes scanlines { from { background-position: center -60%, 0px; }
to { background-position: center 200%, 0px; } }

main { overflow: scroll; height: 50vh; }

nav .top {
background-color: var(--frame-neutral);
background-image: url("https://groonklie.com/spacehey-junk/fallout/metalliclook2.png");
box-shadow: 0px -7px 5px #0005 inset, 5px 5px 5px 3px var(--frame-light) inset, -5px -5px 5px 5px var(--frame-dark) inset; 
border-radius: 16px 16px 4px 4px; }
nav .links {
background-color: var(--frame-light); 
background-image: url("https://groonklie.com/spacehey-junk/fallout/metalliclook2.png");
box-shadow: 0px 5px 8px -2px #000c inset, 5px 5px 5px 3px var(--frame-lightest) inset, -5px -5px 5px 5px var(--frame-neutral) inset; margin: auto; text-align:center;
border-radius: 6px 6px 8px 8px;  }


nav .links a, nav { color: var(--off-white); text-shadow: 0 0 7px var(--frame-dark); }

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after { content: " ⬤"; color: inherit; }
footer .links li { color: var(--crt-text-main); }


table { border: none; }

footer p, .details-table td:first-child, .online { color: var(--crt-text-main); }
h1, .details-table td:first-child { text-transform: uppercase; }
a { color: var(--crt-text-link); }
a, .profile .friends .person p { text-decoration: underline wavy 1px; }
a:hover, .profile .friends .person p:hover { transition: 0.5s;
color: var(--crt-text-hover); text-decoration: underline wavy 1.2px;  }

.count { color: var(--crt-text-hover); }

.profile .contact { border: 2px solid var(--crt-text-main) }

.profile .contact .heading, .profile .blurbs .heading,
.profile .friends .heading, .profile .table-section .heading
{ background-color: #0000; color: inherit; }

.profile .blurbs .heading, .profile .friends .heading, .profile .url-info, .profile .table-section
{ border-top: none; border-left: none;
border-right: 2px solid var(--crt-text-main); border-bottom: 2px solid var(--crt-text-main); }


.profile .blurbs .heading, .profile .blurbs .section h4
{ color: inherit; text-decoration: underline dotted 2px; }

.details-table td:first-child, .details-table td, footer,
.comments-table td:first-child, .comments-table td { background: none; }

nav .top .left .logo { height: 3vw; width: auto; margin: 0% 20%;
content: url("https://groonklie.com/spacehey-junk/fallout/spacehey-fallout-logo3.svg"); }
nav .top .left { filter:drop-shadow(0px 0px 7px var(--frame-dark); }

</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 18 of 18 comments ( View all | Add Comment )

nonexistent-nixon	1732129396 using !! im a huge fallout and bethesda fan lolz (someone dm me so we can talk about fallout or skyrim mayhaps :D) Report Comment
rancid_henchman	1730658099 Using! Report Comment
JOEL	1726005881 Using this. Love it. Report Comment
SunnieBunnie	1725568511 using! Report Comment
Litrendil	1724973351 Unfinished but still perfect :) Using it! Report Comment
tonvie	1724105869 using! this is awesome :3 Report Comment
GUMI !	1724095181 using Report Comment
Spazzy11	1722979804 Using Report Comment
Rone	1722961486 Using ;b Report Comment
squeak 𖦹₊⊹	1722736251 using !! Report Comment
Vinny :4)	1718755957 ts so fire im using :-) thanx king Report Comment
dem0litionl0v3r	1718152238 Using!!!! Adding the pip-boy bevel like it has in the games would be pretty cool! Report Comment
Kolten	1717537554 using Report Comment
lydia	1717172266 using!! Report Comment
🎪 CL♡WN KISSER! 🎪	1717098922 Using!!! Report Comment
Bumajnikov	1715963671 using!1!:3 Report Comment
cervus-canadensis	1715621351 Oh my God this is so cool!!! Using rn!! Report Comment
MetalHeart	1715390365 Love it!! Report Comment