Aero Dark

Tags: frutiger aero, vista, 2000s, glass, glossy, aero, dark, black, aurora

Description:

Aero Dark is a layout I made for myself because I like Frutiger Aero and Windows 7/Vista and I prefer dark modes.
It's based on the Dark Aero and Frutiger Aurora aesthetics.

I tried to make it somewhat easily adjustable (you can quickly change primary and secondary accent colors, background image url and both hue and saturation of profile picture frames in variables at the top of the layout code).
The CSS is not minified - you are free to look at the mess that is my code and use some of the tricks I utilised.

It looks best on widescreen monitors but It's responsive with proper solutions and workarounds in place to make it look A-OK on all screen sizes.

It may be a little buggy on chromium-based browsers because the layout was created using Firefox. No offense or anything but making it work 100% fine on chromium is at the very bottom of my to-do list with this layout.

Update 12.03.25 - changed wallpaper, removed pfp frames, added custom cursors.

Preview:

click on the image for a larger preview

Code:

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

<style>
:root{
  /*⬇️ QUICK ADJUSTMENTS HERE ⬇️*/
  --accent-color: aqua;
  --secondary-accent-color: lime;
  --pfp-frame-hue-rotate: 310deg;
  --pfp-frame-saturation: 1;
  --profile-bg: url('https://external-media.spacehey.net/media/sLd6-qK7At9VyyJYdEk8bj6aXhuTme4SOtHhe1fXyAhA=/https://funnybunny.nekoweb.org/aurora%20small.jpg');
  --glass-transparency: 0.25;
  --striped-background: 0.75; /* Striped background opacity on sections */
  
  --bg-glass: linear-gradient(-20deg, black 0%, rgba(20,20,20,calc(1 - var(--glass-transparency))) 20%, rgba(55,55,55,calc(1 - var(--glass-transparency) - (1 - var(--glass-transparency)) * 0.33)) 50%, rgba(20,20,20,calc(1 - var(--glass-transparency))) 80%, black 100%);
  --bg-striped: repeating-linear-gradient( 45deg, rgba(0,0,0,var(--striped-background)), rgba(0,0,0,var(--striped-background)) 10px, rgba(16,16,16,var(--striped-background)) 10px, rgba(16,16,16,var(--striped-background)) 20px);
}

/*⬇️ CUSTOM CURSOR - DELETE IF YOU WANT TO USE YOUR OWN ⬇️*/

html {
  cursor: url('https://external-media.spacehey.net/media/smkXI1b9uqyE5u-yTk8OqjbGZzsdRmoW7GQBvdgjxnIM=/http://www.rw-designer.com/cursor-download.php?id=165880'), auto;
}

a, button {
  cursor: url('https://external-media.spacehey.net/media/sglC-sho1dwgE7mc7u34ngQCTwCs0PEyAAKzJ3sDR0RQ=/http://www.rw-designer.com/cursor-download.php?id=165881'), auto;
}

/*⬆️ CUSTOM CURSOR - DELETE IF YOU WANT TO USE YOUR OWN ⬆️*/

@keyframes rgb{
  0%{color: #f00;}
  20%{color: #ff0;}
  40%{color: #0f0;}
  60%{color: #0ff;}
  80%{color: #f0f;}
  100%{color: #f00};
}

@keyframes glow{
  from{text-shadow: var(--accent-color) 0px 0 0px;}
  to{text-shadow: var(--secondary-accent-color) 0px 0 10px;}
}

body {
  background: var(--profile-bg);
  background-size: cover;
  background-attachment: fixed;
}

nav .top {
  background: linear-gradient(to bottom,#737373,#525252 50%,#2b2b2b 50%,#404040);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.33),0 0 16px black;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 1;
}

.center:nth-child(2) {
  height: fit-content !important;
  text-align: right;
  width: fit-content;
  position: absolute;
  top: 5px;
  right: 28px;
}

.right:nth-child(3) {
  height: fit-content;
  position: absolute;
  right: 25px;
  bottom: 2px;
}

.logout-btn {
  min-height: 0 !important;
}

main {
  background: rgba(0,0,0,0);
  width: 100%;
}

.container {
  margin: 45px auto 0 auto;
  min-width: 75vw;
  max-width: 100vw;
}

.links:nth-child(2) {
  position: fixed;
  left: calc(100vw / 4);
  right: calc(100vw / 4);
  top: calc(44.85px / 4);
  background: rgba(0,0,0,0);
  z-index: 2;
}

.links:nth-child(2) li a {
  padding: 5px;
  text-shadow: 0 0 7px gray;
}

@media only screen and (max-width: 1905px) {
  .links:nth-child(2) {
    text-align: center;
    top: calc( (44.85px - 40.633px) / 2 );
  }
}

@media only screen and (max-width: 1024px) {
  nav .top .left .logo{
    width: 120px;
  }
  .links:nth-child(2){
    left: 10vw;
  }
  .links:nth-child(2) a{
    text-align: center;
    font-size: 0;
    display: inline-block;
    height: 18px;
    width: 18px;
    top: calc((44.85px /2 ) - 13px) !important;
    position: relative;
  }
  .links:nth-child(2) a:before{
    content: "";
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    top: -4px;
    left: -4px;
    background-size: cover !important;
  }
  .links:nth-child(2) a[href="https://spacehey.com/notifications"]:before {
    background:url('https://static.spacehey.net/icons/bell.png');
  }
  .links:nth-child(2) a[href="https://spacehey.com/home"]:before{
    background: url('https://static.spacehey.net/social-icons/custom_spacehey.png');
  }
  .links:nth-child(2) a[href="https://spacehey.com/browse"]:before{
    background: url('https://static.spacehey.net/icons/world.png');
  }
  .links:nth-child(2) a[href="https://spacehey.com/search"]:before{
    background: url('https://static.spacehey.net/icons/user.png');
  }
  .links:nth-child(2) a[href="https://im.spacehey.com"]:before{
    background: url('https://static.spacehey.net/icons/email.png');
  }
  .links:nth-child(2) a[href="https://blog.spacehey.com"]:before{
    background: url('https://static.spacehey.net/icons/script.png');
  }
  .links:nth-child(2) a[href="https://spacehey.com/bulletins"]:before{
    background: url('https://static.spacehey.net/icons/text_list_bullets.png');
  }
  .links:nth-child(2) a[href="https://forum.spacehey.com/"]:before{
    background: url('https://static.spacehey.net/icons/folder.png');
  }
  .links:nth-child(2) a[href="https://groups.spacehey.com"]:before{
    background: url('https://static.spacehey.net/icons/group.png');
  }
  .links:nth-child(2) a[href="https://layouts.spacehey.com"]:before{
    background: url('https://static.spacehey.net/icons/layout.png');
  }
  .links:nth-child(2) a[href="https://spacehey.com/favorites"]:before{
    background: url('https://static.spacehey.net/icons/star.png');
  }
  .links:nth-child(2) a[href="https://spacehey.com/invite"]:before{
    background: url('https://static.spacehey.net/icons/add.png');
  }
  .links:nth-child(2) a[href="https://spacehey.com/mobile"]:before{
    background: url('https://static.spacehey.net/icons/phone.png');
  }
  .links:nth-child(2) a[href="https://shop.spacehey.com/"]:before{
    background: url('https://static.spacehey.net/icons/money.png');
  }
  .links:nth-child(2) a[href="https://spacehey.com/about"]:before{
    background: url('https://static.spacehey.net/icons2/question.png');
  }
}

@media only screen and (max-width: 880px) {
  .links:nth-child(2){
    width: 100vw;
    left: 0;
  }
  .top .center {
    display: none;
  }
  .logo {
    width: 0px !important;
  }
}

@media only screen and (max-width: 480px) {
  .right:nth-child(3) {
    height: fit-content;
    position: absolute;
    right: 25px;
    top: 36.85px !important;
  }
  .friends-grid {
    display: grid;
    grid-template-columns: 50% 50% !important;
    grid-template-rows: auto auto auto auto !important;;
  }
}

.links:nth-child(2) a:hover {
  background: linear-gradient(to bottom,#ffffff40,#fff6 50%,#ffffff40 50%,#ffffff1a) !important;
  outline: solid thin rgba(0,0,0,.5);
  text-decoration: none !important;
  box-shadow: inset 0 0 0 1px #ffffff80;
  border-radius: 2px;
  color: white !important;
  animation: none;
}

a[href="/edit"], a[href="/editphoto"], a[href="/editstatus"], a[href="/settings"], a[href="/editlinks"], p .edit-link a {
  animation: rgb 5s infinite linear;
  text-transform: uppercase;
}

.profile-info a[href="/edit"] {
  display: none;
}

.count {
  color: var(--secondary-accent-color);
}

a, a.more, .contact >div a, .profile .friends .person p {
	color: var(--accent-color);
}

a:hover, a.more:hover, .contact >div a:hover, .profile .friends .person p:hover {
	color: var(--secondary-accent-color);
	animation: glow 0.25s ease-out forwards;
	text-decoration: none;
}

.edit-link {
  color: rgba(255,255,255,0.5);
}

.edit-link:hover {
  color: white;
  text-shadow: white 0px 0 10px;
}

#q {
  width: 125px;
}

.heading {
  height: 2rem;
  background: rgb(93,93,93);
  background: linear-gradient(0deg, rgba(56,56,56,1) 0%, rgba(29,29,29,1) 25%, rgba(29,29,29,1) 50%, rgba(57,57,57,1) 50%, rgba(122,122,122,1) 100%) !important;
  border-radius: 1rem 1rem 0 0;
  line-height: 1.5rem;
  text-align: right;
  font-family: verdana, arial, sans-serif, helvetica;
  font-weight: light;
  font-size: 0.85rem;
  box-sizing: none;
  color: white !important;
  letter-spacing: 0.15rem;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.more {
  color: lime;
}

.more:hover {
  color: magenta;
}

.contact, .blurbs, .url-info, .table-section, .friends, footer, .general-about, .edit-info {
  background: var(--bg-glass);
  backdrop-filter: blur(1rem);
  
  border: 1px grey inset !important;
  border-radius: 1rem;
}

h1, h2, h3, h4, p, span {
  color: white;
}

.friends {
  margin-bottom: 1rem;
}

.inner {
  padding: 0.5rem !important;
}

.url-info {
  border-radius: 0;
  text-align: center;
}

.table-section {
  background: var(--bg-glass);
}
  
.table-section td:nth-child(odd){
  background: rgba(0,0,0,0);
  width: 100%;
  text-align: center;
  height: 3rem;
  font-size: 1.5rem;
}
  
.table-section td:nth-child(odd) p{
  height: 100%;
  line-height: 3rem;
}
 
.table-section td:nth-child(even) {
  background: var(--bg-striped);
  border-radius: 2rem;
}
  
.table-section tr{
  display: flex;
  flex-direction: column;
}

.profile-info {
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.comments-table {
  border: none;
}

.comments-table td:nth-child(odd) p{
  font-size: 1rem;
  line-height: 2rem;
  margin: 0;
}

.comments-table td:nth-child(odd){
  background: var(--bg-striped);
    border-radius: 1rem 0 0 1rem;
}

.comments-table td:nth-child(even){
  border-radius: 0 1rem 1rem 0;
  background-color: rgba(0,0,0,0);
}

.comments-table tr{  
  border: 1px grey inset !important;
  border-radius: 1rem;
}

.general-about {
  height: 160px;
}

span[itemprop="name"] h1 {
  font-size: 1.5rem;
  letter-spacing: 1px;
}

.section h4{
  color: var(--accent-color) !important;
  font-size: 1rem;
}

table.details-table, .blurbs {
  color: white;
}

.comment-replies {
  background: var(--bg-striped);
  border-radius: 1rem;
  border: none;
}

.comment-reply:not(:first-child) {
  border-top: 1px solid gray;
}

.person {
  text-align: center;
  width: 100% !important;
  padding: 0;
}

.person > a > p {
  height: 1rem;
}

.friends-grid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: auto auto;
}

@media screen and (max-width: 1500px){
  .friends-grid {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto auto auto;
  }
}

@media screen and (max-width: 560px){
  .friends-grid {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto auto auto auto auto auto;
  }
}
.online {
  color: var(--secondary-accent-color);
}
</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 405 comments ( View all | Add Comment )

Klutz	2 days ago using! Report Comment
Zach	3 days ago using. :) Report Comment
ℂ𝑙ᴏʷ🅝	3 days ago Using wohook Report Comment
parker	4 days ago using! Report Comment
Andy	4 days ago Using!!!! Report Comment
𝕸𝖆𝖗𝖑𝖊𝖞	5 days ago using! Report Comment
XxVenomousCanine7224xX	6 days ago using >:3 Report Comment
JaguarVegito	6 days ago using ! Report Comment
Champ	1 week ago Using Report Comment
paranoided	1 week ago using haha Report Comment
Your Stereotypical Nerd	9 days ago Using :D Report Comment
Quabape	9 days ago using Report Comment
chris	10 days ago using Report Comment
Daniel Dreiberg	11 days ago Hi👋, just got on spacehey. And I will be using your layout. thx Report Comment
niki	11 days ago using Report Comment
Neo_0	11 days ago Using Report Comment
𝙑𝙀𝙉𝙄𝙄	11 days ago using Report Comment
Edw1nc4s_xD	12 days ago using :D Report Comment
JIMMYFALL🎵	12 days ago using!! Report Comment
Angelo	12 days ago Im so using this Report Comment