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

♱ DEION ?! ⚢ (slightly inactive)	1728380661 usibdgsg Report Comment
Insomniac ⁠˘⁠ ⁠o⁠ ⁠˘ 🇧🇷	1722353470 using Report Comment
eucerin	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