Report Blog Entry
The Annoying Orange layout I made. Might put this on my profile lol
Update 1: Fixed banner for mobile
<style>
:root {
--body-image: url("https://i.ibb.co/HdWSxSG/0d1ac46c89c931fe565cac579be4e0060d8b3c9a926cf3cad20c1070b86fd8b7.jpg");
--banner-image: url("https://i.ibb.co/yXxPvwL/ezgif-7-0bf202c950.gif");
--nav-bg-top: #f56200;
--nav-bg-bottom: #ff8800;
--nav-text-color: black;
--footer-bg-color: #ff8800;
--footer-text-color: black;
}
.profile { direction: rtl; }
.blurbs, .profile .table-section .heading, .blog-preview a, .friends, .general-info, .contact, .url-info, .details-table, .details p, .mood { direction: ltr; }
.left { direction: ltr; }
.container {
margin: 20px auto 20px 20px;
image-rendering: pixelated;
}
footer p, footer .links {
margin: 2px;
}
footer {
padding: 2px 5px;
margin-top: 5px;
}
nav {
margin-bottom: 5px;
}
main {
margin: 5px; background: url("https://i.ibb.co/d77158w/notebook-Background.png");
background-size: cover;
}
body {
background: #8fd300 var(--body-image);
background-size: cover;
background-position: left 200px top 0;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: "MS PGothic";
image-rendering: pixelated;
}
nav {
border: 1px solid black;
border-radius: 5px;
}
nav .top {
border-radius: 5px 5px 0 0;
background: linear-gradient(to bottom, var(--nav-bg-top) 35%, var(--nav-bg-bottom));
}
nav .links {
border-radius: 0 0 5px 5px;
background: var(--nav-bg-bottom);
}
/* Banner */
.container::before {
display: block;
content: "";
background-image: var(--banner-image);
background-size: cover; background-position: center; width: 600px;
height: 250px;
margin: 5px auto;
border-radius: 5px;
border: 1px solid black;
}
nav .links a {
text-shadow: none;
}
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
content: " >< ";
color: white;
}
nav, nav .links a, nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after, .logout-btn {
color: var(--nav-text-color);
}
.profile .blurbs .heading, .profile .friends .heading {
background: rgba(255, 255, 66, 0.5);
color: #030857;
}
.right {
padding-left: 30px!important;
}
.comments-table td {
border: 0 solid;
background: white;
border-radius: 0 5px 5px 0;
}
.comments-table {
border: 1px solid black;
border-radius: 5px;
}
.comments-table td:first-child, .music-table td:first-child {
vertical-align: middle;
background: white;
border-radius: 5px 0 0 5px;
}
.profile .friends p, .blog-entry .comments p, .bulletin .comments p {
margin: 0 auto;
}
.comment-replies {
margin: 0 2px 5px 2px;
border: 1px solid black;
border-radius: 5px;
background: #8cdeff;
}
footer {
color: var(--footer-text-color)!important;
background: var(--footer-bg-color);
border: 1px solid black;
border-radius: 5px;
}
footer a { color: black!important; }
.table-section .inner {
overflow-y: auto;
max-height: 150px;
}
.blurbs .inner {
overflow-y: auto;
max-height: 160px;
}
.friends .inner {
overflow-y: auto;
max-height: 160px;
}
/* Mobile */
@media screen and (max-device-width: 500px) {
body { font-family: "Verdana"; }
.container { margin: 10px auto; }
.container::before { width: 97%; margin: 5px auto; }
.right { padding-left: 10px!important; direction: ltr; }
}
</style>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )