side and bar

Tags: sidebar, spaghetti, chicken

Description:

here it is! the amazing sidebar-ifying css that everyone has been waiting for!

(but seriously, it's messy. if you know how to edit css, i apologize. if you can't, i apologize more strongly, since you can't fix it.)

mobile screenshot:

Preview:

click on the image for a larger preview

Code:

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

<style>
/* bg img/transparent bg */
html {
background: black;
}
body, footer, .top {
background: rgba(0,0,0,0) !important;
color: white;
}
main {
background: rgba(255,255,255,0.8) !important;
}
input {
border: 1px white solid;
border-radius: 4px;
padding: 4px;
background-color: rgba(255,255,255,0.7);
}
nav .links {
background-color: rgba(96,165,250,0.7);
}

/* header->sidebar */
@media(min-width:810px) {
nav {
float: left;
width: 190px;
}
main {
float: right;
width: calc(100% - 190px);
position: relative;
z-index: 10;
}

/* fix header */
nav > .top {
flex-direction: column;
align-items: center;
}
nav form {
margin-top: 10px !important;
}
nav form * {
width: 140px;
}
nav .left {
display: flex !important;
transform: translateX(-20px);
}

/* fix links */
nav .links {
display: flex;
flex-direction: column;
transform: translateX(100px);
margin: 40px 0;
position: relative;
border-radius: 4px 0 0 4px;
width: 90px;
}
nav .links li::after {
content: "" !important;
}
}

/* friends list */
.friends-grid {
display: flex;
flex-wrap: wrap;
}
.person {
display: flex !important;
flex-direction: row-reverse;
padding: 1px !important;
margin: 4px !important;
width: unset !important;
background-color: lightblue;
}
.person p {
margin: 0 1px !important;
}
.person img {
max-width: 20px !important;
margin: 0 !important;
}
.blurbs {
margin: 0;
}

/* make soon links strikethrough */
a.soon {
text-decoration: line-through !important;
}
a.soon:hover {
text-decoration: line-through underline !important;
color:#5c0404 !important;
}

/* biggify */
@media(max-width:810px) {
nav .links {
text-size:20px;
}
}

/* fix img width */
.col.right img {
max-width: 100%;
}

/* fix ONLINE indicator */
.online {
font-size: smaller;
}
</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 7 of 7 comments ( View all | Add Comment )

GAMINRAMEN	1735295099 Wowzerz i hopings it works on my layout>:3 Report Comment it didnt by GAMINRAMEN; 1735318557; Report
PEE GIRL ?! ⚢ (slightly inactive)	1728380661 usibdgsg Report Comment
Pão_Com_Manteiga	1722353470 using Report Comment
Two Time 𖤓	1722004804 using br Report Comment
sn4i1z	1701105595 USINHGGG Report Comment
Bug	1700443799 using! Report Comment
Cory	1611440707 What does this look like on mobile?? Report Comment i made it so it doesn't form the sidebar on screens less than 800 something pixels wide, so it should only change the header colors and add the strikethrough to upcoming features :) that's what it does on my phone, at least. by chicken; 1611488186; Report