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

The Boy Savior	1733021947 using Report Comment
Dylann	1732842123 Usingg Report Comment
Darren🎄	1732434659 Using 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
Michael	1718750963 Using!! ^^ Report Comment
polline	1718621443 using! Report Comment
peter . canines	1718297822 using <3 Report Comment
Xai / Stanley ★	1715585180 Uisng! Report Comment
xuntara	1715369701 tyyy >< Report Comment
✩_CirUu	1714233844 Usando! :3 Report Comment
MsJuggalo	1712893996 using !! Report Comment
gumball [inactive]	1712309796 using Report Comment
orbit	1710316096 Using! Report Comment
bijorme🍭	1709345587 Using!! Report Comment