💎 layout 💎

the code must stay inside <.style><./style> tags, in one line only or it will take up space in the bulletins.

in blog entries you can do multiple style tags without taking up space.

set-color is the background color of your emotion set

set-txt-color is the color of the text in your emotion set

bg-color is the background color of the body and main

maintxt-color is the text color

borders-color is the color of the thin borders around main

content: "michi is " for the text that goes before your title

you can reuse the colors for things i haven't listed, it's good for keeping track of what is what color in your layout. now, for the code, copy and paste this and change whatever you want:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); :root { --set-color: #000000; --set-txt-color: #1c86f2; --bg-color: #1a1a1a; --maintxt-color: #ffffff; --borders-color: #aaaaaa;} body { background: var(--bg-color); background-repeat: repeat; font-family: 'Roboto', monospace;} main { background-color: var(--bg-color); color: white; border-left: 4px solid var(--set-color); border-top: 1px solid var(--borders-color); border-bottom: 1px solid var(--borders-color); border-right: 1px solid var(--borders-color);} .blog-entry .title, .bulletin .title { color: var(--set-txt-color); background-color: var(--set-color); text-align: center; display: inline-block;} .blog-entry .title::before, .bulletin .title::before { color: #ffffff; background-color: var(--bg-color); content: "michi is "; padding: 1px;} nav img.logo{ filter: brightness(0) saturate(100%) invert(80%) sepia(0%) saturate(0%) hue-rotate(186deg) brightness(86%) contrast(89%)!important;} nav label { color: var(--borders-color) !important;} .search-wrapper input[type=text] { background-color: transparent !important; border: 1px solid var(--set-txt-color) !important; color: var(--set-txt-color) !important;} button { background-color: transparent !important; color: var(--set-txt-color) !important; border: 1px solid var(--set-txt-color) !important;} .logout-btn { border: none !important;} a { color: var(--set-txt-color);} a:hover { color: var(--set-txt-color); text-decoration: none;} nav .top { background-color: var(--bg-color); border: none; color: var(--borders-color);} nav .links { background-color: var(--bg-color); text-align: center;} nav .links a { color: var(--borders-color); text-shadow: none;} nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after { color: var(--borders-color);} nav .links .special a { color: var(--borders-color);} nav .links a:hover { color: var(--borders-color);} .edit-info { background-color: var(--bg-color); var(--maintxt-color); border: none;} .count { color: var(--maintxt-color);} footer { color: var(--borders-color); background: transparent;} footer a { color: var(--borders-color);} footer a:hover { text-decoration: none;} .comments-table { border: transparent;} .comments-table td { border-style: solid solid solid solid; border-bottom: var(--set-color); border-width: 1px; background: var(--bg-color); color: var(--maintxt-color);} .comments-table td:first-child { width: 38%; background-color: var(--bg-color); color: var(--maintxt-color);} .comments-table td a { color: var(--set-txt-color);} ::selection { color: var(--set-txt-color); background-color: var(--set-color);}

you can add custom fonts, like i did in the first line of the code as an example.

ran into any issues? let me know if you need help :3