Trinity Layout

Tags: simple, green, matrix, hacker, webcore

Description:

simple matrix-style themed layout. based on another layout but lost link.

changelog
[2024-02-18]
+ fixed font code
+ more uniform colors
+ darker link colors

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by 電子戦 (https://layouts.spacehey.com/layout?id=99345) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
body{font-family: 'Play', sans-serif;}

:root {
    --background-color: #000000; /* chlordane background color */
    --text-color: #448844; /* chlordane text color */
    /*--border-color: #77dd88;  chlordane border color */
    --border-color: #3a553a;  /* chlordane border color */
    --secondary-color: #3a553a; /* chlordane secondary color */
    --accent-color: #448844; /* chlordane accent color */
    --highlight-color: #ee1111; /* chlordane highlight color */
    --inactive-color: #606060; /* chlordane inactive color */
    --selection-color: #223322; /* chlordane selection color */
}

body {
    background-color: #000000;
}


/* glitch filter */
img {
    filter: sepia(20%) hue-rotate(90deg) saturate(150%);
}


body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

#q, button {
    color: #77dd88; /* chlordane color */
    background-color: #000000; /* chlordane background color */
    border: 1px solid grey;
    font-family: inherit;
}

p, i, b, .count {
    color: #77dd88 !important; /* chlordane color */
}

a, .profile .friends .person p, .logout-btn {
    color: var(--border-color) !important; /* chlordane color */
    text-decoration: underline !important;
}

.container {
    margin: 0 auto 0;
}

.icon {
    display: none;
}

.heading h4::before {
    content: "□ ";
}


nav, nav .links a {
    color: var(--border-color); /* chlordane color */
    text-decoration: none;
    text-shadow: none;
}

nav .links a::first-letter {
    text-decoration: underline;
}



nav .top {
    margin-top: 2px;
    background: none;
    background-color: #000000; /* chlordane background color */
    border: 2px solid var(--border-color);
    border-bottom: none;
}

nav .links {
    background-color: #000000; /* chlordane background color */
    border: 2px solid var(--border-color);
}

nav img.logo {
    filter: brightness(0) saturate(100%) invert(81%) sepia(66%) saturate(286%) hue-rotate(171deg) brightness(105%) contrast(104%); !important;
}

main {
    background: #000000; /* chlordane background color */
    color: #77dd88; /* chlordane color */
    border-right: 2px solid var(--border-color) !important;
    border-left: 2px solid var(--border-color) !important;
}

.heading, .url-info {
    color: #77dd88 !important; /* chlordane color */
    background: none;
    background-color: #000000 !important; /* chlordane background color */
    border: 2px solid var(--border-color) !important;
}

.inner {
    color: #77dd88 !important; /* chlordane color */
    border: 2px solid var(--border-color);
    border-top: none;
}

.profile-info {
    border: 2px solid var(--border-color);
}

.profile-info .inner {
    border: none;
}

.friends .inner {
    border-bottom: none;
}

#comments {
    border-bottom: 2px solid var(--border-color);
}

.profile .contact, .profile .table-section, .home-actions {
    border: none !important;
}

.profile .contact .f-row:first-of-type {
    margin-top: 0px;
    padding-top: 7px;
}

.profile .blurbs .section h4 {
    color: #77dd88 !important; /* chlordane color */
}

.details-table {
    margin: 2px;
}

.details-table, td {
    border: 1px solid var(--border-color);
    border-collapse: collapse;
}

td {
    color: #77dd88 !important; /* chlordane color */
    background: none;
    background-color: #000000 !important; /* chlordane background color */
}

table.details-table {
    max-width: 98%;
}

.profile h1 {
    font-size: 20px;
}

footer {
    background: #000000; /* chlordane background color */
    border: 2px solid var(--border-color);
}

footer p {
    color: #77dd88 !important; /* chlordane color */
}

.comments-table {
    border: none;
    border-collapse: collapse;
}

.comment-replies {
    border: 1px solid grey;
    margin: 2px;
}

nav .info {
    background: none;
}
</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 20 of 34 comments ( View all | Add Comment )

aloe vera real	1748723678 using Report Comment
King gey	1745889910 Using Report Comment
maubrae	1745244759 using Report Comment
yhan !!	1742949549 using Report Comment
ciel	1742420805 USING Report Comment
unknown1nk	1741718450 using ! Report Comment
Aiani	1738943928 using!! Report Comment
doctorcatz	1737392476 using !! Report Comment
JamieJamsterious	1735212296 Using Report Comment
sammiixio	1734871165 using Report Comment
.Jack.	1734805664 using! Report Comment
cardinal jj	1733021947 using Report Comment
Dylan	1732842123 Usingg Report Comment
.-Alya-.	1728772675 Usinggg Report Comment
Cheezy_	1723908980 Using. Report Comment
Selkyan	1722916704 Using, thx. Report Comment
Rem ☆	1722283855 Using! Report Comment
sangueee	1721506466 using Report Comment
L✮	1720638025 thank you, using! Report Comment