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

Secret Skeleton	1750583639 Hey, i don't know if you are still working on this theme, but I highly recommend checking out the pip-boy themes on android, there are some with hundreds of icons, and they are a great example of how to do the fallout thing. I am guessing they just use a vector style icon that can all be one color, and look like the ones on the actual pip-boy. You should even be able to create a script in Photoshop (or gimp) that will automatically create them for you Report Comment
squeaky	1749832542 I love this so much Report Comment
gamiko__	1746454476 using ^_^ Report Comment
viniloop	1746409954 as a fallout fan this is goated ^_^ Report Comment
rabidqueer	1746064307 using tysm! Report Comment
ajiX3	1744655233 THANK U SO MUCH FOR THIS Report Comment
☆ EVAN	1744261416 using this is SOOOO COOL!!! Report Comment
groovygasm	1738460334 using! Report Comment
Comm	1738270219 using this Report Comment
gamiko__	1735812979 using Report Comment
IMCOOLERCUZIMBLUE	1733601743 using Report 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
mkultra victim	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