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 40 comments ( View all | Add Comment )

Marley :P	1755033401 using :> Report Comment
Midnight	1754740310 Using Report Comment
R0tt3n Str3b3ryyy	1753030881 Us1ng !! Report Comment
maxwellion	1752552651 using Report Comment
ClownificialXx	1752367951 Using Report Comment
Midori_	1752027479 using :3 Report Comment
aloe vera	1748723678 using Report Comment
King gey	1745889910 Using Report Comment
maubrae	1745244759 using Report Comment
yhan !!	1742949549 using Report Comment
Damien	1742420805 USING Report Comment
unknown1nk	1741718450 using ! Report Comment
Aiani	1738943928 using!! Report Comment
doctorcatz	1737392476 using !! Report Comment
JamieJamsterious	1735212296 Using Report Comment
cern	1734871165 using Report Comment
.Jack.	1734805664 using! Report Comment
jj/faith	1733021947 using Report Comment
Dylan	1732842123 Usingg Report Comment
.-Alya-.	1728772675 Usinggg Report Comment