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

serena	1782597283 usingg ty Report Comment
EdwardVGarrick	1782428953 using Report Comment
Infinite KemonoYagi (IKY)	1782090880 using! :3 Report Comment
xXjaewonetteXx	1781970829 using! Report Comment
SYDNEY	1781966973 using Report Comment
Lunar	1781638370 Using Report Comment
Kelly Tein	1781632603 Using Report Comment
jayokid	1781601171 using =) Report Comment
constantine	1781567198 Using! Report Comment
Ratziry	1781507462 Using Report Comment
sorbet ^__^	1781364856 using!! Report Comment
Sunky the Eevee	1780682922 using!!! Report Comment
Nat.sukii	1780337371 Using!! Report Comment
THISISMYMUSIC	1780302955 using.......... Report Comment
eraa	1779998146 Using Report Comment
themanwhosoldhismemes	1779864076 usingggg Report Comment
Ana_333	1779838916 using!! u da bomb! Report Comment
xXCrazehdud3Xx	1779764742 using! Report Comment
𖾕𖾝꙼ᩚ𛲕𖾟	1779717491 using :3 Report Comment
knifeprty⁷꩜.ᐟ	1779714887 using!!! :3 Report Comment