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

yhan !!	11 days ago using Report Comment
ciel	17 days ago USING Report Comment
unknown1nk	26 days ago using ! Report Comment
Aiani	1 month ago using!! Report Comment
doctorcatz	2 months ago using !! Report Comment
JamieJamsterious	3 months ago Using Report Comment
sammiixio	3 months ago using Report Comment
.Jack.	3 months ago using! Report Comment
acronix!!!!!!!!!!!!	4 months ago using Report Comment
Dylann	4 months ago Usingg Report Comment
.-Alya-.	5 months ago Usinggg Report Comment
Cheezy_	7 months ago Using. Report Comment
Selkyan	8 months ago Using, thx. Report Comment
Rem ★🦈	8 months ago Using! Report Comment
sangueee	8 months ago using Report Comment
L✮	8 months ago thank you, using! Report Comment
Michael	9 months ago Using!! ^^ Report Comment
polline	9 months ago using! Report Comment
cordyceps . canines	9 months ago using <3 Report Comment