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

omyxun	2 days ago using Report Comment
HALLZIR, MECH EATER	4 days ago using! Report Comment
St.Merciere	5 days ago Usingg Report Comment
Rawschach	5 days ago Yo something wrong w mine cuz it doesnt look like it does the preview, do u know the issue? Report Comment
Rawschach	5 days ago 4 sure using thx Report Comment
Sayoria2	5 days ago i only gonna try to use the shape of "about me" sections, etc to make my profile lok more interesting (that maybe its the point of using layouts btw) but congratulations for your layout! its really beautifull to see! Report Comment
reiook	6 days ago using Report Comment
WorldTradeCenter	1 week ago using this Report Comment
adrian grace	1 week ago using! <3 Report Comment
xXMYL3ZMANIACXx	8 days ago Using! Report Comment
DA_Schmoobler	9 days ago This is Genuinely an Amazing Layout! Nice Job!!!! Report Comment
chroma	12 days ago using!! Report Comment
bob velsebbb :p	12 days ago using Report Comment
Finn_XD	12 days ago using! Report Comment
AO2B	13 days ago using. Report Comment
λrthurMB	13 days ago Using :D Report Comment
tos	13 days ago using! :D Report Comment
͙ࣳ 𓂃ˑ ֗ NOAH / RAZI	13 days ago USINGG Report Comment
hunter	2 weeks ago using :DDD Report Comment
XPLUS!	2 weeks ago absolutely rad bro totally gonna use it Report Comment