Red and Brown Vintage Aesthetic

Tags: red, brown, aesthetic, vintage, retro

Description:

I wanted a red layout that wasn't super edgy and didn't have any black. I couldn't find any good ones, so I just made it. I kept a lot of aspects of the original website just cause i like the layout of it, just messed a bit with the colors. If you decide to use this, please comment on this to let me know and credit me with my URL ending (whereareyourpants) in either the about me or any of the interest categories with something like, "Layout by whereareyourpants". Also I take requests if you want a layout that doesn't exist yet. Enjoy!

Preview:

click on the image for a larger preview

Code:

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

<style>
 body{
  background-image: url(https://i.imgur.com/jbHwQRA.jpeg);
  font-family: Comic Sans MS, Comic Sans, cursive;
}
:root {
    --light-gray: #916516;
    --gray: #b72d2d;
    --dark-gray: #919191;
    --darker-gray: #545454;
    --logo-blue: #63452a;
    --darker-blue: #63452a;
    --lighter-blue: #cc9464;
    --even-lighter-blue: #cc9464;
    --lightest-blue: #DBEAFE;
    --red: #FF0000;
    --dark-orange: #ED0707;
    --light-orange: #cc9464;
    --even-lighter-orange: #fcdbb8;
    --strange-yellow: #63452a;
    --green: #34D399;
    --light-green: #E6F8DD;
    --medium-green: #A0C99C;
    --dark-green: #059669;
    accent-color: #1D4ED8;
    accent-color: var(--logo-blue);
}
nav{
  color: #cc9464;
  font-size: 72%;
  font-size: max(72%, 12px);
}
nav .links a{
  text-decoration: none;
  color: #63452a;
  text-shadow: 0 0 7px #095dc300; /*to improve the color contrast*/
  font-size: 0.98em;
  font-size: max(0.98em, 12px);
}
nav .links a:hover{
  text-decoration: underline;
  color: #63452a;
}
nav .links .special a{
  color: #ffead4;
}
main{
  background: #ed04458a;
  color: #ffead4;
  padding: 6px 0px;
  font-size: 80%;
}
footer{
  text-align: center;
  font-size: 70%;
  margin: 10px 0 10px;
  padding: 10px 5px;
  background: #cc9464;
}
.indie-box{
  outline: 1px solid #63452a;
  border: 8px solid var(--even-lighter-blue);
  margin: 20px 0 10px 0;
  padding: 5px 5px 15px 5px;
  text-align: center;
  font-weight: bold;
}
.logout-form{
  color: #cc9464;
  display: inline-block;
  font-size: 100%;
}
.profile .friends .person p{
  color: #cc9464;
  font-weight: bold;
  width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  font-size: 100%;
  text-align: center;
}
.count{
  color: #63452a;
}
.comment-replies{
  padding: 0 5px;
  border: 5px solid #63452a;
  margin-top: 10px;
}
.comment-reply:not(:first-child){
  border-top: 1px solid #cc9464;
}
.bulletin-table td{
  border: 1px solid #63452a;
  padding: 7px;
}
.topic-closed-message{
  overflow: hidden;
  text-align: center;
  color: #ffead4;
  color: var(--darker-gray);
}
.topic-closed-message a{
  color: #ffead4;
}
.notification-overview{
  border-bottom: 2px solid #63452a;
  border-bottom: 2px solid var(--lighter-blue);
}
.featured-playlist{
  width: 100%;
  background: #ffdcba;
  padding: 6px 10px;
  overflow: auto;
  margin-bottom: 10px;
}
.details-table td{
  background: #63452a;
  background: #63452a);
  vertical-align: top;
}
a{
  color: #1E40AF;
  color: #ffead4;
  text-decoration: none;
}
.profile .blurbs .section h4{
  margin: 0;
  color: #ffead4;
  color: #ffead4;
}
</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 2 of 2 comments ( View all | Add Comment )

Alex

1689898307

using ^_^

Report Comment

Kyra

1684213689

using this !

Report Comment