Report Blog Entry
i've been working on-and-off on this layout for ages and i'm so happy it's finally done. i know i'm biased because i'm the one who made it but it looks so damn good!!! raagh i love being autistic <3
stuff to worry about if you use it yourself:
- this theme is so not responsive it's kind of incredible. i've tried my best not to have any issues on the average desktop experience, but i recommend using some kind of work around with
@media only screen and (max-width: 400ish pixels)if you use mobile often or even just care about the phone-only users - put this code in the about me section and not with anything else that's meant to be visible!! (maybe unless it doesn't interrupt with the flow of the actual page). otherwise the layout might break because it is very tempermental :(
/* this stuff you can change!! there's probably a way to change each one individually with nth-child but that's up to you to make */
.general-about::before /* featured thumbnail */ {
background: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/thebestgamers/changeMe.png") red center;
}
.general-about .details p:first-child, .profile h1 /* featured thumbnail borders */ {
background: #800000;
}
.comments-table td:first-child::after /* comment thumbnail */ {
background: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/thebestgamers/changeMe.png") red center;
}
.comments-table td:first-child::before, .comments-table td:first-child a p /* comment thumbnail borders */ {
background: #800000;
}
.profile .friends .person /* person mini-thumbnail */ {
background: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/thebestgamers/changeMe.png") red;
}
.profile .friends .person::before, .profile .friends .person p {
background: #800000;
}
/* actual code starts here */
body {
background: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/thebestgamers/bg.png") #111;
font-family: Arial, Helvetica, sans-serif;
color: #DDD;
}
.container {
width: 1000px;
margin: 0 auto;
}
.edit-link {
display: none;
}
/* header */
nav .top {
width: 1000px;
height: 5px;
padding: 80px;
display: block;
background: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/thebestgamers/header.png") #ccc bottom;
}
nav .top .left .logo {
opacity: 0%;
width: 1000px;
height: 165px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
nav .top .center, nav .top .right {
background: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/thebestgamers/boxShadow.png") #222;
font-size: 13px;
color: #ddd;
text-shadow: black 0.05em 0.05em 0.05em;
z-index: 1;
}
nav .top .center {
width: 320px;
height: 86px;
padding: 10px;
position: absolute;
top: 62px;
left: 675px;
text-align: center;
border-radius: 15px;
}
.center form label, .search-wrapper, .center form button {
display: block;
margin: auto;
}
.center form label, .center form button {
font-size: 0;
background: none;
border: none;
}
.center form label {
padding-top: 2px;
}
.center form label::after {
content: "We're not streaming at all because WE'VE\A BEEN BROKEN UP FOR A DECADE!";
white-space: pre;
font-size: 13px;
line-height: normal;
}
.search-wrapper {
width: 100%;
margin-bottom: 1px;
}
.search-wrapper input {
width: 100%;
height: 14px;
margin-top: 1px !important;
font-size: 12px;
}
.center form button {
padding-top: 0;
}
.center form button::after {
content: "CLICK TO GO TO SOMEONE ELSE!";
font-size: 13px;
font-weight: bold;
color: #ADEA93;
}
nav .top .right {
width: auto;
height: 24px;
padding: 4px 3px 2px 2px;
position: absolute;
top: 7px;
left: 911px;
text-align: right;
border-radius: 4px;
}
.logout-btn {
color: #ddd;
}
nav .top .right a:hover, .logout-btn:hover {
color: white;
text-decoration: none;
}
/* links */
nav .links {
height: 26px;
margin-top: -3px;
padding: 0;
background-image: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/thebestgamers/navBehind.png");
font-size: 0;
overflow: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
white-space: nowrap;
transform: translate(0,0);
}
nav .links li {
height: 26px;
}
nav .links li a {
height: 26px;
padding: 4px 16px 5px;
display: block;
background: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/thebestgamers/nav.png") #8B2323 top;
font-size: 15px;
font-weight: bold;
color: #ddd;
text-shadow: black 0.075em 0.075em 0.075em;
text-transform: uppercase;
border: 1px #aaa;
border-style: none groove;
}
nav .links li.active a {
height: 26px !important;
}
nav .links li.active a:has(.icon) {
width: 16px;
margin-top: -24px;
padding: 0 1px;
position: absolute;
display: block;
background: none;
border: none;
}
nav .links li a:hover {
background: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/thebestgamers/navHover.png") #383;
color: #ddd;
text-decoration: none;
}
nav .links li::after {
display: none;
}
/* main stuff starts here */
main::before {
content: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/thebestgamers/ad.png");
height: 85px;
}
main {
min-height: 2089px;
padding: 0;
background: #333;
}
/* weird shit to make the "featured section" */
.blurbs {
width: 950px;
position: absolute;
transform: translate(20px, -21px);
}
.profile .blurbs::before {
content: "FEATURED - Today on THE BEST GAMERS";
width: 935px;
height: 30px;
padding: 10px 5px 11px 10px;
display: block;
background: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/thebestgamers/title.png") #973232 repeat-x;
font-size: 26px;
font-weight: bold;
color: #eee;
text-shadow: black 0.075em 0.075em 0.075em;
border-radius: 15px;
}
.profile .blurbs .heading {
padding: 5px 5px 0px 0px;
background: #444;
font-size: 12px;
color: #ADEA93;
border-radius: 14px 14px 0 0;
}
.profile .blurbs .heading:hover {
color: #FDFFEA;
}
.profile .blurbs .heading h4 {
margin-left: 12px;
text-shadow: black 0.05em 0.05em 0.05em;
}
.profile .blurbs .inner {
padding: 4px 7px 6px 7px;
background: #444;
border-radius: 0 0 15px 15px;
}
.profile .blurbs .inner .section {
width: 934px;
height: 164.5px;
margin: 0.5px 0 0 0;
padding: 7px 8px 16px 8px;
background: #222;
font-size: 12px;
color: #ddd;
border-radius: 15px;
}
.profile .blurbs .inner .section h4 {
display: none;
}
.profile .blurbs .inner .section div {
width: 613px;
height: 121px;
margin: -7px 0 0 305px;
line-height: normal;
overflow: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
font-size: 12px !important;
}
/* featured section thumbnail/little things */
.general-about {
width: 300px;
height: 130px;
background: black;
position: absolute;
border: 1px black;
border-style: none solid;
transform: translate(-754px, -719px);
z-index: 1;
}
.general-about::before {
content: "";
width: 294px;
height: 103px;
position: absolute;
background-size: 100% 100%;
border: 1px solid black;
outline: 1px solid #C0C0C0;
transform: translate(1px, 12px);
z-index: 0;
}
.profile-pic {
height: 32px !important;
position: absolute;
object-fit: cover;
transform: translate(263px, 3px);
z-index: 1;
}
.profile-pic img {
width: 32px;
}
.profile-pic::after {
content: "";
width: 33px;
height: 33px;
position: absolute;
display: block;
border: 1px solid #c0c0c0;
transform: translate(-2px, -37px);
z-index: 2;
}
.profile-pic::before {
content: "";
width: 33px;
height: 33px;
position: absolute;
display: block;
border: 1px solid black;
transform: translate(-1px, -1px);
z-index: 1;
}
.general-about .details {
z-index: -1;
}
.general-about .details p:first-child {
width: 300px;
margin: 0 0 0 100px;
padding-top: 1px;
display: block;
object-fit: cover;
font-family: "Press Start 2P", Courier, monospace;
font-size: 8px;
font-weight: normal;
color: white;
text-align: left;
text-shadow: black 1px 1px;
text-transform: uppercase;
border: 1px black;
border-style: none solid;
transform: translate(-101px, 0);
}
.profile h1::before {
content: "BY ";
}
.profile h1 {
width: 300px;
height: 12px;
padding: 0 2px 1px 2px;
position: absolute;
font-family: "Press Start 2P", Courier, monospace;
font-size: 8px;
font-weight: normal;
color: white;
text-align: right;
text-shadow: black 1px 1px;
text-transform: uppercase;
border: 1px black;
border-style: solid solid none solid;
transform: translate(-754px, -601px);
z-index: 2;
}
.profile h1 .icon {
display: none;
}
.profile .blurbs .inner .section div::-webkit-scrollbar {
width: 0;
background: transparent;
}
.general-about .details p:nth-child(2) {
width: 950px;
margin: 0;
position: absolute;
font-size: 12px;
font-style: italic;
color: #DDD;
text-align: right;
text-shadow: black 0.05em 0.05em 0.05em;
transform: translate(-30px, -38px);
}
.profile .mood {
width: 918px !important;
height: 20px 1important;
padding: 2px 0 0 0;
position: relative;
display: flex;
gap: 100px;
justify-content: space-between;
align-items: center;
background: #777;
color: white;
text-align: center;
text-shadow: #444 0.05em 0.05em 0.05em;
border: 1px outset #333;
transform: translate(-754px, -589px);
z-index: 1;
}
.profile .mood:hover {
background: #CCC;
border: 1px inset white;
}
.profile .mood:hover > * {
color: #555 !important;
text-shadow: white 0.05em 0.05em 0.05em;
}
.profile .mood p {
width: auto;
height: 12px;
margin: 0 8px 3px 8px;
padding: 0;
display: inline-block;
color: #DDD !important;
text-shadow: black 0.05em 0.05em 0.05em;
}
.profile .mood a {
color: #ddd;
}
.profile .mood:hover b a {
color: #555;
}
.profile .mood:hover b a:hover {
color: #555;
text-decoration: none;
}
.profile .mood p:first-child {
text-align: left;
}
.profile .mood p:nth-child(2) {
text-align: right;
}
.profile .mood p:nth-child(2) b {
font-weight: normal;
}
.profile .blurbs .inner .section:first-child, .profile .blurbs .inner .section:first-child a {
color: transparent;
pointer-events: none;
}
.profile .blurbs .inner .section:first-child > * {
font-size: 0 !important;
}
.profile .blurbs .inner .section:nth-child(2) {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
width: 594px;
max-height: 131px;
background: transparent;
line-height: normal;
overflow: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
transform: translate(319px, 82px);
}
/* "news" section */
main .right {
float: left;
width: 786px;
margin: 1px 0 0 2px;
padding: 10px 5px 5px 3px;
}
.blog-preview, .profile-info {
position: absolute;
display: none;
}
/* previous reviews (profile comments) */
#comments {
width: 770px;
position: absolute;
transform: translate(0, -214px);
}
.profile .friends .heading {
width: 780px;
margin-left: -2px;
padding: 10px 5px 9px 10px;
background: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/thebestgamers/title.png") #973232 repeat-x;
color: #EEE;
border-radius: 15px;
}
.profile .friends .heading h4 {
margin: 0;
font-size: 0;
font-weight: bold;
}
.profile .friends .heading h4::after {
content: "THE BEST GAMERS - The LATEST Updates";
font-size: 26px;
text-shadow: black 0.075em 0.075em 0.075em;
}
.profile .friends .inner {
width: 775px;
margin: 0 0 16px 0;
padding: 7px 3px 3px 12px;
background-color: #151515;
font-size: 12px;
color: #AAA;
text-align: center;
text-shadow: black 0.05em 0.05em 0.05em;
border-radius: 15px;
}
#comments .inner {
min-height: 1653px;
}
#comments .inner:has(.pagination) {
min-height: 1730px;
}
.profile .friends p {
margin: 0;
}
table.comments-table {
width: 750px;
margin: 0;
padding: 0;
border: 0;
}
table.comments-table tbody {
display: block;
margin: 0;
padding: 0;
border: 0;
}
table.comments-table tr::before {
content: "Another Review...";
display: block;
text-align: left;
color: #ADEA93;
font-weight: bold;
text-shadow: black 0.05em 0.05em 0.05em;
transform: translate(5px, -3px);
}
.profile .friends p:not(.comments-table p, .person a p) {
width: 0;
height: 0;
margin: 0;
padding: 0;
border: 0;
background: transparent;
font-size: 0px;
color: transparent;
}
table.comments-table tr::before:hover {
color: white;
}
table.comments-table tr {
display: block;
width: 750px;
height: 197px;
margin: 2px 0 18px 0;
padding: 8px 7px;
border-radius: 15px;
background: #444;
font-size: 12px;
}
table.comments-table tr:nth-child(n+8) {
display: none;
}
.profile .friends p b a time::before {
content: "Comment posted ";
}
.profile .friends p b a time {
position: absolute;
width: 100%;
font-size: 12px;
font-style: italic;
font-weight: normal;
color: #DDD;
text-align: right;
text-shadow: black 0.05em 0.05em 0.05em;
transform: translate(4px, -28px);
}
.profile .friends p b a time::after {
content: " by THE BEST GAMERS";
}
table.comments-table td {
background: #222;
height: 165px;
margin-top: 1px;
color: #DDD;
text-shadow: black 0.05em 0.05em 0.05em;
transform: translate(0, 1px);
}
table.comments-table td:first-child {
width: 310px;
margin: 0;
padding: 0;
border: 0;
border-radius: 15px 0 0 15px;
background: #222;
}
.comments-table td:first-child::before {
content: "VIDEO REVIEW";
display: block;
position: absolute;
width: 296px;
height: 9px;
padding: 1px 1px 108px 1px;
font-family: "Press Start 2P", Courier, monospace;
font-size: 8px;
font-weight: normal;
color: white;
text-align: left;
text-shadow: black 1px 1px;
text-transform: uppercase;
border: 1px black;
border-style: none solid;
transform: translate(8px, 8px);
z-index: -1;
}
.comments-table td:first-child::after {
content: "";
display: block;
width: 294px;
height: 103px;
position: absolute;
background-size: auto;
background-size: 100% 100%;
border: 1px solid black;
outline: 1px solid #C0C0C0;
transform: translate(10px, 20px);
z-index: -1;
}
.comments-table td:first-child a img {
width: 32px !important;
height: 32px !important;
position: absolute;
object-fit: cover;
transform: translate(117px, 11px);
z-index: 0;
}
.comments-table td:first-child a:first-child::after {
content: "";
width: 33px;
height: 33px;
position: absolute;
display: block;
border: 1px solid #c0c0c0;
transform: translate(270px, 9px);
z-index: 1;
}
.comments-table td:first-child a:first-child::before {
content: "";
width: 33px;
height: 33px;
position: absolute;
display: block;
border: 1px solid black;
transform: translate(271px, 10px);
z-index: 1;
}
.comments-table td:first-child a p::before {
content: "BY ";
}
.comments-table td:first-child a p {
width: 300px;
height: 12px;
padding: 0 2px 1px 2px;
position: absolute;
font-family: "Press Start 2P", Courier, monospace;
font-size: 8px;
font-weight: normal;
color: white;
text-align: right;
text-shadow: black 1px 1px;
text-transform: uppercase;
border: 1px black;
border-style: solid solid none solid;
overflow: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
transform: translate(8px, 126px);
z-index: 2;
}
table.comments-table td:nth-child(2) {
max-width: 424px;
height: 165px;
padding: 0;
border: 0;
border-radius: 0 15px 15px 0;
}
table.comments-table td:nth-child(2) p {
width: 412px;
max-height: 113px;
line-height: normal;
text-align: left;
text-shadow: black 0.05em 0.05em 0.05em;
transform: translate(3px, 8px);
overflow: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
table.comments-table td:nth-child(2):has(.comment-replies) p {
max-height: 62px;
}
.profile .friends p:has(time) {
overflow: visible !important;
}
.comments-table .report {
margin: 2px 13px 0 0 !important;
}
.report img {
display: none;
}
.report a {
font-size: 9px;
color: #999;
text-shadow: black 0.05em 0.05em 0.05em;
text-decoration: underline;
}
.report a:hover {
color: #DFF;
text-shadow: #774 0.05em 0.05em 0.05em;
}
.comment-replies {
width: 412px;
height: 47px;
margin: 0;
border: 1px solid #151515;
border-radius: 15px;
background: #151515;
text-shadow: black 0.075em 0.075em 0.075em;
overflow: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
transform: translate(4px, -4px);
}
.comment-reply {
margin: 0 0 8px 0;
padding: 0;
border: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #777;
}
.comment-reply small {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal !important;
}
.comment-reply a {
color: #999;
text-shadow: black 0.05em 0.05em 0.05em;
text-decoration: underline;
}
.comment-reply a:hover {
color: #DFF;
text-shadow: #774 0.05em 0.05em 0.05em;
}
.comment-reply:not(:first-child) {
border: 0;
}
.comments-table td a button {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
min-width: 718px;
height: 19px;
border: 1px outset #333;
background: #777;
padding: 1px 0 0 0;
font-size: 0;
text-shadow: #444 0.05em 0.05em 0.05em;
transform: translate(-302px, 138px);
z-index: 100;
}
.comments-table td a button::after {
content: "Click here to REPLY TO THIS COMMENT!";
font-size: 12px;
color: #FFF;
text-align: center;
text-shadow: #444 0.05em 0.05em 0.05em;
}
.comments-table td a button:hover {
background: #CCC;
border: 1px inset white;
}
.comments-table td a button:hover::after {
color: #555 !important;
text-shadow: white 0.05em 0.05em 0.05em;
}
.pagination a button {
display: block;
position: absolute;
min-width: 718px;
height: 19px;
border: 1px outset #333;
background: #777;
padding: 1px 0 0 0;
font-size: 0;
text-shadow: #444 0.05em 0.05em 0.05em;
transform: translate(-739px, -17px);
z-index: 100;
}
.pagination a button::after {
content: "OLDER UPDATES";
font-size: 12px;
color: #FFF;
text-align: center;
text-shadow: #444 0.05em 0.05em 0.05em;
}
.pagination a button:hover {
background: #CCC;
border: 1px inset white;
}
/* forum button */
.pagination::after {
content: "";
display: block;
width: 752px;
height: 98px;
margin: 6px 3px 4px 14px;
border-radius: 15px;
background: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/thebestgamers/forumBanner.png") #444 no-repeat 14px 4px;
transform: translate(-14px, 34px);
}
/* socials and such */
main .left {
float: right;
width: 206px !important;
margin: 800px 0 0 0;
padding: 12px 0;
color: #CCC;
}
.friends:not(#comments) {
width: 206px;
transform: translate(781px, 266px);
}
.profile .friends:not(#comments) .heading {
width: 210px;
height: 41px;
margin-left: 0.25px;
padding: 9px 5px 10px 13px;
display: block;
background: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/thebestgamers/title.png") #973232 repeat-x;
font-size: 18px;
font-weight: bold;
color: #eee;
text-align: left;
text-shadow: black 0.075em 0.075em 0.075em;
border-radius: 15px;
}
.profile .friends:not(#comments) .heading h4 {
width: 0;
font-size: 0;
transform: translate(3px, 1px);
}
.profile .friends:not(#comments) .heading h4::after {
content: "RECENTLY POSTED:";
width: 210px;
height: 21px;
font-size: 18px;
white-space: nowrap;
}
.friends .heading a.more {
width: 185px;
height: 14px;
position: absolute;
font-size: 0;
transform: translate(2px, 43px);
}
.profile .friends:not(#comments) .inner {
width: 210px;
margin: 0 0 0 0;
padding: 0 0 20px 2px;
background: #151515;
font-size: 12px;
font-weight: normal;
color: #999;
text-align: center;
text-shadow: black 0.075em 0.075em 0.075em;
border: 1px solid #151515;
border-radius: 15px;
transform: translate(-0.5px, 0);
}
.profile .friends .person::after {
content: "";
width: 188px;
height: 27px;
margin: 0;
display: block;
border: 1px black;
border-style: none solid solid solid;
transform: translate(-3px, -24px);
}
.profile .friends .person::before {
content: "FRIEND";
width: 187px;
height: 10px;
margin: 0;
padding: 1px 0 0 1px;
display: block;
object-fit: cover;
font-family: "Press Start 2P", Courier, monospace;
font-size: 8px;
font-weight: normal;
color: white;
text-align: left;
text-shadow: black 1px 1px;
text-transform: uppercase;
border: 1px black;
border-style: none solid;
transform: translate(-3px, -13px);
}
.profile .friends .person {
width: 186px;
height: 25px;
margin: 13.5px 0;
border: 1px solid black;
outline: 1px solid #C0C0C0;
transform: translate(1px, 8px);
}
.profile .friends .person img:not(.icon) {
width: 34px;
height: 34px;
object-fit: cover;
position: absolute;
background: white;
transform: translate(150px, -34px);
z-index: 1;
}
.profile .friends .person a:first-child::after {
content: "";
width: 33px;
height: 33px;
position: absolute;
display: block;
border: 1px solid #c0c0c0;
transform: translate(149px, -34px);
z-index: 2;
}
.profile .friends .person a:first-child::before {
content: "";
width: 33px;
height: 33px;
position: absolute;
display: block;
border: 1px solid black;
transform: translate(150px, -22px);
z-index: 2;
}
.profile .friends .person p::before {
content: "BY ";
width: 185px;
height: 23px;
overflow: hidden;
}
.profile .friends .person p {
width: 190px;
height: 11px;
margin: 0;
padding-top: 0;
padding-right: 1px;
display: block;
object-fit: cover;
font-family: "Press Start 2P", Courier, monospace;
font-size: 8px;
font-weight: normal;
color: white;
text-align: right;
text-shadow: black 1px 1px;
text-transform: uppercase;
border: 1px black;
border-style: none solid;
overflow: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
transform: translate(-3px, 14px);
}
.person a:hover {
text-decoration: none;
}
/* code adapted from https://layouts.spacehey.com/layout?id=1169 */
.left .table-section .details-table tr, .profile .contact .f-row {
display: flex;
flex-direction: column;
}
.left .table-section .inner,
.left .table-section .details-table td,
.left .table-section .details-table td:first-child, .f-col {
width: 100%;
}
/* contact box */
.profile .contact {
border: none;
transform: translate(-8px, -81px);
}
.profile .contact .heading {
width: 210px;
height: 41px;
padding: 9px 5px 10px 13px;
display: block;
background: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/thebestgamers/title.png") #973232 repeat-x;
font-size: 0;
font-weight: bold;
color: #eee;
text-align: center;
text-shadow: black 0.075em 0.075em 0.075em;
border-radius: 15px;
}
.profile .contact .heading::after {
content: "THE LATEST BUZZ:";
display: block;
font-size: 18px;
text-shadow: black 0.075em 0.075em 0.075em;
transform: translate(-2px, 1px);
}
.profile .contact .inner {
width: 210px;
margin: 0;
padding: 0;
background: #151515;
font-size: 12px;
font-weight: normal;
color: #999;
text-align: center;
text-shadow: black 0.075em 0.075em 0.075em;
border: 1px solid #151515;
border-radius: 15px;
}
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
display: block;
}
.contact .inner .f-row .f-col a:before {
content: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/thebestgamers/buzz.png");
display: inline-block;
transform: translate(8px, 7px);
}
.profile .contact .f-row {
margin: 0;
}
.profile .contact .f-row:nth-child(1) {
margin-top: 3px;
}
.profile .contact .f-row:nth-child(4) {
margin-bottom: 8px;
}
.profile .contact .f-col {
width: 190px;
height: 29.5px;
text-align: center;
overflow: hidden;
}
.profile .contact .f-col a {
font-size: 13px;
font-weight: bold;
color: #999;
text-shadow: black 0.05em 0.05em 0.05em;
text-decoration: underline;
}
.profile .contact .f-col a:hover {
color: #DFF;
text-shadow: #774 0.05em 0.05em 0.05em;
}
/* url box */
.profile .url-info {
width: 200px;
height: 59px;
background: #555;
text-align: right;
color: #ffffff;
border: none;
border-radius: 5px;
transform: translate(-6px, -87px);
}
.profile .url-info p:nth-child(2) {
font-family: "lucida grande",lucida,tahoma,helvetica,arial,sans-serif;
overflow: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
white-space: nowrap;
transform: translate(0, -10px);
}
.profile .url-info p:hover {
text-decoration: underline;
}
.profile .url-info p b {
font-size: 0;
}
.profile .url-info p b::after {
content: "";
height: 24px;
display: block;
background: no-repeat;
background-image: url("https://static.spacehey.net/img/logo_optimized.svg");
transform: translate(2px, -10px);
}
/* interests box + links box. code for headings adapted from https://layouts.spacehey.com/layout?id=107828 */
.profile .table-section {
border: none;
}
.profile .table-section .heading {
width: 210px;
height: 41px;
padding: 9px 5px 10px 13px;
display: block;
background: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/thebestgamers/title.png") #973232 repeat-x;
font-size: 0;
font-weight: bold;
color: #eee;
text-align: center;
text-shadow: black 0.075em 0.075em 0.075em;
border-radius: 15px;
}
.table-section:not(.table-section + .table-section) {
transform: translate(-8px, -93px);
}
.table-section:not(.table-section + .table-section) .heading::after {
content: "FORUM ACTIVITY:";
display: block;
font-size: 18px;
text-shadow: black 0.075em 0.075em 0.075em;
transform: translate(-2px, 1px);
}
.table-section+.table-section {
transform: translate(-8px, -99px);
}
.table-section+.table-section .heading::after {
content: "FOR 'EM ACTIVITY:";
display: block;
font-size: 18px;
text-shadow: black 0.075em 0.075em 0.075em;
transform: translate(-2px, 1px);
}
.profile .table-section .inner {
width: 210px;
margin: 0;
padding: 0;
background: #151515;
font-size: 12px;
font-weight: normal;
color: #999;
text-align: center;
text-shadow: black 0.075em 0.075em 0.075em;
border: 1px solid #151515;
border-radius: 15px;
}
.profile .contact .f-row {
margin: 0;
}
.profile .contact .f-row:nth-child(1) {
margin-top: 3px;
}
.profile .contact .f-row:nth-child(4) {
margin-bottom: 8px;
}
.profile .contact .f-col {
width: 190px;
height: 29.5px;
text-align: center;
overflow: hidden;
}
.profile .contact .f-col a {
font-size: 13px;
font-weight: bold;
color: #999;
text-shadow: black 0.05em 0.05em 0.05em;
text-decoration: underline;
}
.profile .contact .f-col a:hover {
color: #DFF;
text-shadow: #774 0.05em 0.05em 0.05em;
}
.details-table td {
background: none;
}
.details-table td:first-child {
background: none;
}
.details-table td p {
font-size: 9px;
font-weight: bold;
color: #777;
text-shadow: black 0.05em 0.05em 0.05em;
}
.details-table td a {
font-size: 9px;
font-weight: bold;
color: #999;
text-shadow: black 0.05em 0.05em 0.05em;
text-decoration: underline;
}
.details-table td:first-child p, .details-table td:first-child a {
font-size: 11px;
color: #999;
text-decoration: underline;
}
.details-table td:first-child p:hover, .details-table td a:hover {
color: #DFF;
text-shadow: #774 0.05em 0.05em 0.05em;
}
.details-table a .icon {
width: 10px;
height: 10px;
display: inline-block;
transform: translate(0, -4px);
}
/* footer */
footer {
height: 216px;
margin: 0;
padding: 0;
border: 0;
background: #333;
}
footer p, footer ul {
margin: auto !important;
padding: 11.5px 44px !important;
border: 0;
border-radius: 15px;
background: #151515;
font-family: times new roman, serif;
font-size: 12px !important;
color: #AAA;
text-align: center;
text-decoration: none !important;
text-shadow: black 0.05em 0.05em 0.05em;
line-height: normal;
transform: translate(0, 0);
}
footer a, footer a:hover {
color: #AAA;
text-decoration: none;
}
footer p:first-child {
width: 231px;
margin-bottom: 16px !important;
}
footer p:nth-child(2) {
width: 502px;
margin-bottom: 16px !important;
}
footer .links {
width: 794px;
margin-bottom: 16px !important;
}
footer .links li:not(:last-child)::after {
content: " ";
white-space: pre;
}
footer p.copyright {
width: 326px;
margin-bottom: 16px !important;
}
Comments
Displaying 0 of 0 comments ( View all | Add Comment )