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 586 comments ( View all | Add Comment )

Weed_goose	1759840044 Also using the theme imma plan to recreate it inside arch one day Report Comment
Nehemiah Brown	1759803421 using Report Comment
malachiteMalice	1759709253 using Report Comment
Kiko!!	1759657571 using! Report Comment
Queen Shreem Indigo	1759444368 This layout was suggested to me. Super excited to use it! Thank you! <3 Report Comment
Tay 🌊	1759399612 I love this layout. How do you get it to look so much cleaner when adding the code to a blog post? Report Comment
Jonny	1759363297 USING ^_^ Report Comment
fl0ral_v1sc3ra	1759285679 Using at the moment :) Report Comment
otis	1759182033 Using:) Report Comment
Grungo2000	1759110089 usingc Report Comment
•̩̩͙✩•̩̩ mari •̩✩•̩	1759092770 using!!!!!!! Report Comment
Chris	1759076272 using!! Report Comment
Ciri	1758988135 usingg Report Comment
larry. ︻デ═一	1758872101 using Report Comment
xxxShadowlord420xxx	1758816233 usin most of it :D Report Comment
June	1758741394 so c00l man. i wanna use dis ^_^ Report Comment
Kasper	1758649907 using,,, teehee,,,,, Report Comment
dasanih8or	1758549233 using :D Report Comment
xX Cybbr-BB-Angel Xx	1758493846 Using as a template ^0^ Report Comment
JK_Donsive	1758201893 Using!!!1 Report Comment