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. If you have any questions or need help with tailoring the layout to your own preferences you can always leave a comment and I'll try to help!

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. Also, no harm in motivating people to try out Firefox a little bit anyway...

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/sn3KDBCD1zqYNN4Db75o9627Fla2ViBuEDI7ebaWdufY=/https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/893f2add-0cf3-43be-ac63-5296409ee911/df8jai2-bdf5a139-8def-410d-acbc-345c649c66ab.jpg/v1/fill/w_1280,h_720,q_75,strp/windows_vista_dark_background_by_winvista2009_df8jai2-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NzIwIiwicGF0aCI6IlwvZlwvODkzZjJhZGQtMGNmMy00M2JlLWFjNjMtNTI5NjQwOWVlOTExXC9kZjhqYWkyLWJkZjVhMTM5LThkZWYtNDEwZC1hY2JjLTM0NWM2NDljNjZhYi5qcGciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.xJz-cH1Ng5D9IBRpdrLiYBK6zB1p8yOEatrNZpA2Tnw');
  --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);
}

@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;
}

.profile-pic, a:has(.pfp-fallback){
  position: relative;
  display: inline-block;
  width: 160px;
  height: 160px;
  align-content: center;
  text-align: center;
  margin-right: 0px !important;
}

.profile-pic:after, a:has(.pfp-fallback):after {
  content: "";
  display: block;
  width: 160px;
  height: 160px;
  left: 0px;
  top: 0px;
  filter: hue-rotate(var(--pfp-frame-hue-rotate)) saturate(var(--pfp-frame-saturation));
  position: absolute;
  background: url("https://external-media.spacehey.net/media/sQRawUUSb9KOlGigYJsFqqJ3gH9kFIS_hR9AxOGCEUdU=/https://i.sstatic.net/FyaPV.png");
  background-position: center;
  background-size: cover;
}


.profile-pic:after {
  width: 160px;
  height: 160px;
  left: 0px;
  top: -2px;
}

.pfp-fallback{
  width: 142px !important;
  height: 142px !important;
  padding: 18px;
  max-height: 142px !important;
  max-width: 142px !important;
}

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

mae	1729151649 using YAY! Report Comment
Lincoln / tin	1729052371 usning !! Report Comment
onlinepenguin01	1728866917 I only wanna use the profile picture thingy what do i dooooo T_T Report Comment
Skating_stars	1728533434 using!!!!!!!! Report Comment
:)	1728413947 using Report Comment
FLETCHER	1728405606 using Report Comment
Overdue	1728362574 Using! Report Comment
beren :3	1728276190 using Report Comment
ArdentCarnivora	1728247188 Using Report Comment
max.wmv	1728247032 using Report Comment
bertie	1728242411 Using, tysm! Report Comment
2BDamned	1728240514 woah usingr!! Report Comment
Safi Starie🍉✯	1728229092 using Report Comment
(੭ˊ꒳ˋ)੭ 𝖏 𝖚 𝖓 𝖔	1728205537 using! Report Comment
Simon Henriksson	1728176941 using (er I edited it..) Report Comment
kaykayyy	1728059925 usingg Report Comment
KAZZ!!	1727992836 using!!! this is a really epic layout btw!! Report Comment
meowchela	1727941157 using!! albeit customized a tad :0 thank you for making such a cool layout!!! Report Comment I like your customizations! by KatzeKarkasse; 1728155526; Report
qnr	1727554773 using this Report Comment
Spectron24	1727515758 Really amazing! Using!! Report Comment