Layout - 4chan [Tomorrow]

[SAVING/SHARING THIS HERE BECAUSE I AM STARTING ON A NEW LAYOUT AND BECAUSE THE LAYOUT SECTION OF SPACEHEY IS UNAVAILABLE]

Preview

CSS (Put between style-tags):

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

body {

  background: #1d1f21 none;

  color: #c5c8c6;

  font-family: arial, helvetica, sans-serif;

  font-size: 10pt;

  margin-left: 0;

  margin-right: 0;

  margin-top: 5px;

  padding-left: 5px;

  padding-right: 5px;

}

a, a:hover, a:visited, nav .links a, nav .links a:hover, .profile .friends .person p, .count {

  color: #81a2be;

  text-decoration: none;

}

* p {

  max-width: 90ch;

}

table { 

  border: 0;

}

.container {

  width: 100%;

}

nav .top, nav .links, main, footer {

  background: transparent;

}

nav .top {

  margin-top: 3rem;

  height: 100px;

  align-items: center;

  justify-content: space-between;

}

nav .links {

  position: absolute;

  top: 0;

  left: 0;

  padding: .5rem;

}

nav .links::before {

  content: "[";

  color: #c5c8c6;

}

nav .links::after {

  content: "]";

  color: #c5c8c6;

}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {

  content: " / ";

  color: #c5c8c6;

}

nav .top .left {

  height: 100px;

  order: 2;

}

nav .top .left a {

  display: inline-block;

  width: 300px;

  height: 100%;

  background-image: url('https://external-media.spacehey.net/media/s4rU68LoM8Pe6oduL_s6237sHg3q1UzIKrM_JW8JnrPE=/https://files.catbox.moe/obd1rx.png');

  background-size: cover;

  background-size: cover;

  border: 1px solid #000;

}

nav .top .left a img {

  display: none;

}

nav .top .center {

  width: 300px;

  flex: unset;

  order: 1;

}

nav .top .center form {

  width: fit-content;

}

nav .top .center label {

  display: none;

}

nav .top .center input {

  margin: 0px;

  margin-right: 0px;

  margin-left: 0px;

  margin-right: 2px;

  padding: 2px 4px 3px 4px;

  border: 1px solid #000;

  background-color: #282a2e;

  color: #c5c8c6;

  outline: none;

  font-family: arial, helvetica, sans-serif;

  font-size: 10pt;

}

nav .top .center button {

  appearance: none;

  -webkit-appearance: none;

  background: transparent;

  border: 0;

  outline: 0;

  color: #81a2be

}

nav .top .center button::before {

  content: "[";

  color: #c5c8c6;

}

nav .top .center button::after {

  content: "]";

  color: #c5c8c6;

}

nav .top .right {

  width: 300px;

  order: 3;

}

main {

  font-size: inherit;

  color: inherit;

}

main .left, main .right {

  padding: 0;

}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {

  margin: 0;

}

.row.profile {

  display: flex;

  flex-direction: column;

}

.col.w-40 {

  position: relative;

  padding-top: 3rem;

  display: flex;

  flex-direction: column;

}

[itemprop="name"] {

  position: absolute;

  width: 100%;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  border-bottom: 1px solid #282a2e;

}

.profile h1 {

  font-family: Tahoma, sans-serif;

  font-size: 28px;

  font-weight: bold;

  letter-spacing: -2px;

  margin: 0px;

  padding-bottom: .5rem;

  text-align: center;

}

.general-about {

  width: 16rem;

  float: left;

  display: grid;

  grid-template-columns: auto 1fr;

  gap: 1rem;

}

.general-about .profile-pic {

  display: block;

  float: unset;

  margin: 0;

}

.general-about .profile-pic img {

  max-width: 100%;

  max-height: 100%;

}

.general-about .details p {

  margin: 0;

  padding-bottom: .5rem;

}

.profile .mood {

  position: absolute;

  top: 5rem;

  left: 18rem;

  width: fit-content;

}

.profile .mood p b {

  display: flex;

  flex-direction: column;

  font-size: 0;

}

.profile .mood p b a { 

  font-size: 10pt;

}

.contact {

  order: -1;

}

.contact .inner, .f-row {

  margin: 0 !important;

  width: fit-content;

  display: flex;

  flex-wrap: wrap;

  gap: .5rem;

}

.contact .heading {

  display: none;

}

.details-table td:first-child, .profile .blurbs .heading, .profile .friends .heading, .profile .blurbs .section h4 {

  color: #81a2be;

}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading, .details-table td:first-child, .details-table td, .profile .blurbs .heading, .profile .friends .heading {

  background: #282a2e;

}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {

  border: 0;

}

.details-table td:first-child {

  width: 160px;

}

.details-table td * {

  max-width: 90ch;

}

.url-info {

  display: inline-flex;

  gap: .5rem;

}

footer {

  font-size: inherit;

}

footer p {

  margin: 0 auto;

}

@media (min-width: 30em) {

  .col.w-40 {

    width: unset;

  }

}