Persona 3 - Dark Hour

Tags: blue, moon, persona, dark hour

Description:

This is a layout I made last year based on the game Persona 3. It took me about 2 hours to make, I think. Resposting because I deleted my account and this layout was lost in the process.

Preview:

click on the image for a larger preview

Code:

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

<style>
/*Font: Libre Franklin*/
@import url("https://external-media.spacehey.net/css/sbBtDTZ4drWl6yoAQ2BdoCxGug_-BXrotoHsq4B_mTY0=/https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/*Base colors*/
:root {
  --logo-blue: #1a95ff;
  --darker-blue: #0060b3;
  --lighter-blue: #004580;
  --even-lighter-blue: #4dadff;
  --lightest-blue: #7dadf5;
  --dark-orange: #80c4ff;
  --light-orange: #00294d;
  --even-lighter-orange: #404040;
  --green: #38d;
}
/*Moon cursor. It only works on desktop*/
* {
  cursor: url(https://external-media.spacehey.net/media/srdR5wg1p_rbiv04-Z6LWkQuz0CkT-79P88LXeluPAUg=/https://cur.cursors-4u.net/nature/nat-6/nat598.cur), auto !important;
}

/*General body styles*/
body {
  font-family: "Libre Franklin", sans-serif;
  font-weight: 500;
  background-image: url(https://external-media.spacehey.net/media/s99BOwxImiKN3fI2O7z3z9ZDtvFvO4ndxv-jK5DnOqbg=/https://www.rpgfan.com/wp-content/uploads/2020/03/Persona-3-Portable-Featured.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
main {
  border-radius: 0 0 15px 15px;
  background: var(--dark-orange);
  color: var(--light-orange);
}

.container {
  border-radius: 15px 15px 0 0;
  overflow: hidden;
  margin-top: 30px;
  padding: 10px;
}

footer {
  border-radius: 15px;
  background: var(--dark-orange) !important;
  display: block !important;
}

.logout-btn{
  font-family: "Libre Franklin", sans-serif;
  font-weight: bold;
}

.profile .blurbs .section h4 {
    margin: 0;
    color: var(--light-orange);
}

button{
    background-color: var(--lighter-blue);
    color: white;
    border-color: transparent;
   font-weight: bold;
}


/*Navbar*/
nav {
    border-radius: 15px 15px 0 0;
    overflow: hidden;
  }
  

/*Username*/
.profile h1 {
  font-size: 2rem;
}

/*Blog links*/
.blog-preview p {
  font-size: 1.2rem;
  font-weight: 600;
  padding: 5px 10px;
  color: var(--light-orange);
  font-size: 1rem;
  font-weight: bold;
}

/*Rounded profile pics*/
.profile-pic {
  border-radius: 500px;
  overflow: hidden;
}

.profile .friends .person img {
  border-radius: 500px;
  overflow: hidden;
}

/*Counters*/
span.count,
.details-table td:first-child {
  color: var(--darker-blue);
}

/*Section headings*/
.heading {
  background-color: var(--lighter-blue) !important;
  color: white !important;
}

/*Links*/

a {
  transition: 0.2s ease;
}

a:hover {
  color: var(--light-orange) !important;
  text-decoration: none;
}


.heading a{
    color: white;
  }

/*Table styles*/
table,
td,
tr {
  border-color: var(--light-orange);
  border-collapse: collapse;
}

.profile .contact,
.profile .url-info,
.profile .table-section,
.home-actions {
  border: none;
}
/*Details table*/

table.details-table {
  border-collapse: collapse;
  border: 1px solid var(--light-orange);
}

table.details-table td {
  background-color: var(--even-lighter-blue) !important;
  border: 1px solid var(--light-orange);
}

/*Comments section*/
.comment-replies {
  border-color: var(--light-orange);
  border-width: 1px;
  margin: 5px;
  background-color: var(--dark-orange);
}

table.comments-table td {
  background-color: var(--even-lighter-blue) !important;
  border-color: var(--light-orange);
  border-width: 1px;
}

.comments-table td:first-child img {
  width: 80px;
  border-radius: 500px;
}

/*"Online" text and filter for color change*/
.online {
  color: var(--light-orange);
  font-weight: bold;
  font-size: 95%;
}

p.online img {
  filter: brightness(0) invert(9%) sepia(45%) saturate(6290%) hue-rotate(194deg)
    brightness(90%) contrast(101%);
}
</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 12 of 12 comments ( View all | Add Comment )

mitenn	1708937600 Using :D!! Report Comment
Beanie	1708201169 This was exactly what I was looking for thank you ️ Report Comment
noah	1703209597 using. thanks a million Report Comment
MYKOLA	1702364803 using, rad ^_^ thanx Report Comment
charles ☆	1702229302 Using Report Comment
BoredBradley	1701121250 RAD!!! (｡･∀･)ﾉﾞ Report Comment
Azure	1695738716 100% going to use this Report Comment
clover	1687477224 using ^_^ Report Comment
Nrgy	1681389511 using i love this Report Comment
poisonberriez	1681234473 nice^^ Report Comment
SafeInSanity	1680138965 Very cool! Report Comment
eurofox	1678725321 You a lifesaver this theme is amazing Report Comment