/* ================= RESET ================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
font-family: system-ui, sans-serif;
}
/* ================= VARIABLES ================= */
:root {
--tile: 48px; /* macro tile for windows */
--post-width: 416px; /* content width (2 tiles wider) */
--board-width: 640px; /* larger board size */
--left-tab-width: 240px; /* width of the persistent left column */
}
@font-face {
font-family: "Minecraft";
src: url("../fonts/Minecraft.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ================= STATIC PAGE BACKGROUND ================= */
/* This is the ONLY place the page background lives */
/* Wrapper is fixed and covers the viewport; the inner ![]()
is
sized to fill the wrapper. This keeps layout predictable for
responsive sources inside a . */
#page-bg-wrapper {
position: fixed;
inset: 0;
z-index: -10;
pointer-events: none;
}
#page-bg {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
/* Use default rendering for photographic backgrounds so browsers
apply smooth scaling. */
image-rendering: auto;
backface-visibility: hidden;
}
/* ================= SITE LOGO (TOP CENTER - inline) ================= */
#site-logo-wrapper {
/* Place the logo above the board in normal document flow so it
does not overlay board artwork or posts. Centered and with
a small bottom gap so the board sits directly underneath. */
position: static;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 8px 0 12px 0;
pointer-events: auto; /* allow clicks on the logo (wrap in if needed) */
}
#site-logo {
display: block;
/* Larger logo: increase min and max so it appears bigger on all devices */
width: clamp(140px, 22vw, 360px);
height: auto;
max-height: 220px;
image-rendering: auto; /* smooth scaling for logos by default */
user-select: none;
}
/* If the page is using pixel-art mode, keep the logo crisp too */
.pixel-art #site-logo {
image-rendering: pixelated;
}
/* If your background is pixel-art (low-res tiles), add `pixel-art` to
the `body` element to preserve crisp pixels (example: ) */
.pixel-art #page-bg {
/* Cross-browser nearest-neighbor / crisp scaling for pixel art. */
image-rendering: pixelated; /* Chrome */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: crisp-edges; /* Safari */
-ms-interpolation-mode: nearest-neighbor; /* IE6-9 */
-webkit-optimize-contrast: pixelated;
}
/* ================= BODY (BORING ON PURPOSE) ================= */
body {
background: #000; /* fallback if image fails */
color: white;
}
/* ================= PAGE WRAPPER ================= */
#page {
min-height: 100vh;
/* positioning context for absolute-positioned page-level elements
such as the logo (so it doesn't affect document flow) */
position: relative;
display: flex;
flex-direction: column; /* stack logo above the board */
justify-content: flex-start; /* start at the top so posts flow downward */
align-items: center; /* center horizontally */
/* reduce padding to avoid offsetting the vertical centering */
padding: 32px;
gap: 16px; /* space between the logo and the post wall */
/* Shift the page right half the left-tab width so the board appears
centered within the remaining viewport when the fixed left tab is present. */
margin-left: calc(var(--left-tab-width) / 2);
}
/* ================= SESSION AVATAR ================= */
#session-avatar {
position: fixed;
top: 16px;
right: 16px;
width: 56px;
height: 56px;
border: 2px solid rgba(255, 255, 255, 0.2);
background: rgba(0, 0, 0, 0.4);
z-index: 1400;
display: none;
}
#session-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
image-rendering: auto;
}
/* ================= POST WALL ================= */
/* OUTER CONTAINER (centering + width lock) */
#post-wall,
#server-wall {
/* Use the board width as the primary width so the posts align
with the 640px-scaled background. Allow shrinking on very
small screens via max-width:100%. */
width: var(--board-width);
max-width: none;
box-sizing: border-box;
margin: 0 auto;
position: relative; /* allow absolute-positioned logo inside without affecting flow */
}
/* ================= BOARD SURFACE ================= */
#board-surface {
/* Scrolling board: center children (the post windows) so posts
line up in the middle of the board image. Apply the board
artwork directly as layered backgrounds:
- top image (no-repeat) at the top
- bottom image (no-repeat) at the bottom
- mid image (repeat-y) tiled between them
Increase top/bottom padding so the top/bottom artwork are
never cut off and the posts sit inside the mid area. */
width: 100%;
position: relative;
overflow: visible;
display: flex;
flex-direction: column;
align-items: center;
/* Larger board with fixed top/bottom heights. */
padding: 96px 0 96px 0;
/* background for board container is empty; middle repeating
artwork is placed on the inner `.board-mid` element so it only
appears between the top and bottom artwork pseudos */
z-index: 0;
}
/* Top and bottom artwork rendered once using pseudo-elements so they
appear sequentially (top -> repeating mid -> bottom). Pseudos are
placed behind the content but above the container background. */
#board-surface::before,
#board-surface::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: var(--board-width);
height: 96px;
background-size: 640px 96px;
background-repeat: no-repeat;
image-rendering: pixelated;
z-index: 0;
}
#board-surface::before {
top: 0;
background-image: url("../images/backgrounds/boardtop.png");
height: 96px;
background-size: 640px 96px;
background-repeat: no-repeat;
}
#board-surface::after {
bottom: 0;
background-image: url("../images/backgrounds/boardbottom.png");
}
/* The repeating middle artwork lives here so it fills the area
between the top and bottom pseudo-elements without overlapping them. */
.board-mid {
width: 100%;
max-width: var(--board-width);
box-sizing: border-box;
background-image: url("../images/backgrounds/boardmid.png");
background-repeat: repeat-y;
background-position: top center;
background-size: 640px 96px;
image-rendering: pixelated;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start; /* ensure posts start at the top of this area */
padding-top: 0;
}
/* ================= POST WINDOW ================= */
.post-window {
position: relative;
margin-bottom: 32px;
z-index: 1; /* bring posts above the top/bottom pseudo artwork */
image-rendering: pixelated;
}
/* ================= TILE GRID ================= */
.window-tiles {
position: absolute;
inset: 0;
display: grid;
pointer-events: none;
}
/* ================= TILE ================= */
/* 48×48 macro tiles from 144×144 tileset */
.tile {
width: var(--tile);
height: var(--tile);
background-image: url("../images/windows/windowtile.png");
background-size: 144px 144px;
background-repeat: no-repeat;
image-rendering: pixelated;
}
/* ================= TILE TYPES ================= */
.corner-tl { background-position: 0px 0px; }
.edge-t { background-position: -48px 0px; }
.corner-tr { background-position: -96px 0px; }
.edge-l { background-position: 0px -48px; }
.center { background-position: -48px -48px; }
.edge-r { background-position: -96px -48px; }
.corner-bl { background-position: 0px -96px; }
.edge-b { background-position: -48px -96px; }
.corner-br { background-position: -96px -96px; }
/* ================= WINDOW CONTENT ================= */
.window-content {
position: absolute;
}
/* ================= CONTENT INNER ================= */
.window-content-inner {
padding: 12px;
min-width: var(--post-width);
max-width: var(--post-width);
word-wrap: break-word;
}
/* ================= TEXT ================= */
.window-content-inner h2 {
margin-bottom: 0.25rem;
}
.window-content-inner p {
opacity: 0.9;
margin-bottom: 0.5rem;
}
/* Add subtle outline so text stays readable on textured tiles */
.window-content-inner h2,
.window-content-inner p,
.postwall-comment-body,
.profile-name,
.profile-bio,
.postwall-empty,
.postwall-login-hint,
.postwall-compose-status,
.post-footer,
.post-author,
.post-meta {
text-shadow:
0 0 2px rgba(0, 0, 0, 0.9),
0 0 4px rgba(0, 0, 0, 0.55),
1px 1px 0 rgba(0, 0, 0, 0.85),
-1px 1px 0 rgba(0, 0, 0, 0.85),
1px -1px 0 rgba(0, 0, 0, 0.85),
-1px -1px 0 rgba(0, 0, 0, 0.85);
font-family: "Minecraft", monospace;
letter-spacing: 0.02em;
}
/* ================= COLORED TEXT CODES ================= */
.mc-0 { color: #000000; }
.mc-1 { color: #0000aa; }
.mc-2 { color: #00aa00; }
.mc-3 { color: #00aaaa; }
.mc-4 { color: #aa0000; }
.mc-5 { color: #aa00aa; }
.mc-6 { color: #ffaa00; }
.mc-7 { color: #aaaaaa; }
.mc-8 { color: #555555; }
.mc-9 { color: #5555ff; }
.mc-a { color: #55ff55; }
.mc-b { color: #55ffff; }
.mc-c { color: #ff5555; }
.mc-d { color: #ff55ff; }
.mc-e { color: #ffff55; }
.mc-f { color: #ffffff; }
.mc-g { color: #ddd605; }
.mc-h { color: #e3d4d1; }
.mc-i { color: #cecaca; }
.mc-j { color: #443a3b; }
.mc-m { color: #971607; }
.mc-n { color: #b4684d; }
.mc-p { color: #deb12d; }
.mc-q { color: #47a036; }
.mc-s { color: #2cbaa8; }
.mc-t { color: #21497b; }
.mc-u { color: #9a5cc6; }
.mc-v { color: #eb7114; }
.mc-bold { font-weight: 700; }
.mc-italic { font-style: italic; }
.mc-underline { text-decoration-line: underline; }
.mc-strike { text-decoration-line: line-through; }
.mc-underline.mc-strike { text-decoration-line: underline line-through; }
.mc-obfuscated { font-variant-ligatures: none; }
/* ================= IMAGES ================= */
.window-content-inner img {
max-width: 100%;
height: auto;
display: block;
image-rendering: pixelated;
}
/* ================= SMALL-SCREEN TWEAKS ================= */
@media (max-width: 640px) {
:root {
--tile: 40px;
--left-tab-width: 160px;
}
#page {
padding: 16px;
gap: 12px;
}
#site-logo {
width: clamp(72px, 22vw, 220px);
}
/* Allow the board to scale down visually on small screens */
/* Scale mid and top/bottom artwork to fit narrow screens */
#board-surface {
background-size: auto 192px;
}
#board-surface::before,
#board-surface::after {
width: auto;
background-size: auto 192px;
left: 50%;
transform: translateX(-50%);
}
/* On small screens the left tab should not shift content — reset margin */
#page { margin-left: 0; }
}
/* ================= LEFT FLOATING TAB ================= */
/* Left tab: persistent full-height column that always covers the
left edge of the viewport. No rounded corners or gaps. */
#left-tab {
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: var(--left-tab-width);
z-index: 1200;
display: block;
pointer-events: auto;
background: rgba(18,18,18,0.98);
box-shadow: none;
}
/* The left column is persistent; hide any toggle button if present. */
#left-tab-toggle { display: none !important; }
/* Panel fills the left column and has no rounding so it appears
flush with the viewport edge. Content is scrollable. */
#left-tab-panel {
pointer-events: auto;
width: 100%;
max-width: none;
height: 100vh;
background: rgba(18,18,18,0.98);
color: #fff;
border-radius: 0;
padding: 12px;
box-shadow: none;
transition: none;
overflow: auto;
}
/* ================= DESKTOP ONLY BLOCK ================= */
@media (max-width: 900px) {
#page,
#left-tab,
#admin-side,
.postwall-toggle,
.postwall-side {
display: none !important;
}
body::before {
content: "Desktop only. Please open this site on a PC.";
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px;
font-size: 16px;
color: #f2f2f2;
background: #0b0b0b;
z-index: 9999;
}
}
/* ================= SERVER ADMIN POST FORM ================= */
.server-admin {
width: 100%;
max-width: 520px;
background: rgba(0, 0, 0, 0.45);
border: 2px solid rgba(255, 255, 255, 0.12);
padding: 16px;
margin-bottom: 24px;
}
.server-admin.is-hidden {
display: none;
}
.server-admin .field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 10px;
}
.server-admin input,
.server-admin textarea {
background: rgba(0, 0, 0, 0.45);
border: 2px solid rgba(255, 255, 255, 0.12);
border-radius: 0;
padding: 10px 12px;
color: #fff;
font-size: 14px;
width: 100%;
}
/* ================= SERVER POST DELETE BUTTON ================= */
.post-window .post-delete {
position: absolute;
top: 8px;
right: 8px;
width: 32px;
height: 32px;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
display: none;
}
.post-window.is-admin .post-delete {
display: block;
}
.post-window .post-delete img {
width: 100%;
height: 100%;
object-fit: contain;
image-rendering: pixelated;
}
.server-admin .form-message {
min-height: 18px;
font-size: 13px;
}
.server-admin .form-message.is-success {
color: #83e37d;
}
.server-admin .form-message.is-error {
color: #f38a8a;
}
/* ================= RIGHT ADMIN TAB ================= */
#admin-side {
position: fixed;
top: 120px;
right: 0;
z-index: 1500;
display: none;
}
#admin-side.is-visible {
display: flex;
flex-direction: row;
align-items: flex-start;
}
#admin-toggle {
background: #1d1d1d;
color: #f2f2f2;
border: 2px solid rgba(255, 255, 255, 0.2);
padding: 8px 10px;
cursor: pointer;
}
#admin-panel {
width: 320px;
background: rgba(18, 18, 18, 0.95);
border: 2px solid rgba(255, 255, 255, 0.2);
padding: 12px;
margin-left: 8px;
display: none;
}
#admin-panel.is-open {
display: block;
}
#admin-panel .field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 10px;
}
#admin-panel input,
#admin-panel textarea {
background: rgba(0, 0, 0, 0.45);
border: 2px solid rgba(255, 255, 255, 0.12);
border-radius: 0;
padding: 8px 10px;
color: #fff;
font-size: 14px;
width: 100%;
}
/* ================= POST IMAGES ================= */
.post-window .post-images {
display: grid;
gap: 8px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.post-window .post-image {
max-width: 100%;
width: 100%;
display: block;
margin-top: 0;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(0, 0, 0, 0.35);
object-fit: contain;
}
.post-window .post-image-link {
display: inline-block;
margin-top: 8px;
color: #4aa3ff;
text-decoration: underline;
font-size: 13px;
}
.post-sentinel {
width: 100%;
height: 1px;
}
/* ================= POSTWALL UI ================= */
.postwall-compose,
.postwall-comment-form {
width: 100%;
max-width: 520px;
background: rgba(0, 0, 0, 0.45);
border: 2px solid rgba(255, 255, 255, 0.12);
padding: 16px;
margin-bottom: 24px;
}
.postwall-side {
position: fixed;
top: 140px;
right: 16px;
z-index: 1500;
width: 320px;
display: none;
}
.postwall-side.is-open {
display: block;
}
.postwall-toggle {
position: fixed;
right: 16px;
top: 96px;
z-index: 1600;
padding: 8px 12px;
border: 2px solid rgba(255, 255, 255, 0.2);
background: rgba(0, 0, 0, 0.6);
color: #fff;
cursor: pointer;
display: none;
}
.postwall-toggle.is-visible {
display: inline-flex;
align-items: center;
justify-content: center;
}
.postwall-toggle.is-open {
background: rgba(0, 0, 0, 0.85);
}
.postwall-compose.is-locked,
.postwall-comment-form.is-locked {
opacity: 0.6;
pointer-events: none;
}
.postwall-compose-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 12px;
}
.postwall-compose-status {
font-size: 12px;
opacity: 0.75;
}
.postwall-login-hint {
margin-top: 8px;
font-size: 13px;
}
.postwall-login-hint a {
color: #4aa3ff;
}
.post-meta {
font-size: 12px;
opacity: 0.7;
margin-bottom: 6px;
}
.post-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.post-avatar {
width: 32px;
height: 32px;
border: 2px solid rgba(255, 255, 255, 0.2);
background: rgba(0, 0, 0, 0.35);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.post-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.post-avatar.is-empty::after {
content: "?";
font-size: 12px;
opacity: 0.6;
}
.post-author {
font-size: 14px;
font-weight: 600;
}
.post-author-link {
display: flex;
align-items: center;
gap: 10px;
color: inherit;
text-decoration: none;
}
.post-author-link:hover,
.post-author-link:focus-visible {
color: #4aa3ff;
}
.post-image-wrap img {
max-width: 100%;
display: block;
margin-top: 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(0, 0, 0, 0.35);
}
.post-footer {
margin-top: 8px;
font-size: 12px;
opacity: 0.65;
}
.post-actions {
display: flex;
gap: 12px;
margin-top: 8px;
}
.post-open-link {
color: #4aa3ff;
text-decoration: underline;
font-size: 13px;
}
.postwall-detail-header {
width: 100%;
max-width: 520px;
margin-bottom: 12px;
}
.postwall-back {
color: #4aa3ff;
text-decoration: underline;
font-size: 13px;
}
.postwall-comments {
width: 100%;
max-width: 520px;
background: rgba(0, 0, 0, 0.35);
border: 2px solid rgba(255, 255, 255, 0.12);
padding: 12px;
margin-bottom: 16px;
}
.postwall-comment {
position: relative;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding: 8px 0;
}
.postwall-comment:last-child {
border-bottom: none;
}
.postwall-comment-meta {
font-size: 12px;
opacity: 0.7;
margin-bottom: 6px;
}
.postwall-comment-body {
font-size: 14px;
}
.postwall-comment-delete {
position: absolute;
top: 6px;
right: 6px;
width: 26px;
height: 26px;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
}
.postwall-comment-delete img {
width: 100%;
height: 100%;
object-fit: contain;
image-rendering: pixelated;
}
.postwall-empty {
font-size: 13px;
opacity: 0.7;
}
/* ================= PUBLIC PROFILE ================= */
.profile-card {
width: 100%;
max-width: 520px;
background: rgba(0, 0, 0, 0.4);
border: 2px solid rgba(255, 255, 255, 0.12);
padding: 16px;
margin-bottom: 16px;
}
.profile-card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.profile-avatar {
width: 56px;
height: 56px;
border: 2px solid rgba(255, 255, 255, 0.2);
background: rgba(0, 0, 0, 0.35);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-avatar.is-empty {
font-size: 12px;
opacity: 0.6;
}
.profile-identity {
display: flex;
flex-direction: column;
gap: 2px;
}
.profile-label {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.65;
}
.profile-name {
font-size: 18px;
font-weight: 600;
}
.profile-divider {
height: 1px;
background: rgba(255, 255, 255, 0.1);
margin: 10px 0 12px;
}
.profile-section {
display: flex;
flex-direction: column;
gap: 6px;
}
.profile-bio {
font-size: 14px;
opacity: 0.85;
white-space: pre-wrap;
}
/* ================= TOP ACTION BUTTONS ================= */
.tab-actions {
width: 100%;
display: flex;
justify-content: center;
padding: 12px 0;
}
.tab-actions ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.tab-actions .tab-action-link {
display: inline-block;
transform: translateX(0);
transition: transform 160ms ease;
}
.tab-actions .tab-action-link:hover,
.tab-actions .tab-action-link:focus-visible {
transform: translateX(-6px);
}
/* ================= SOCIAL IMAGE BUTTONS (FIXED, STABLE) ================= */
/* ================= SOCIAL IMAGE BUTTONS (FINAL, FIXED) ================= */
/* ================= SOCIAL IMAGE BUTTONS (FINAL, JS-SAFE) ================= */
.social-buttons {
--item-gap: 18px;
width: 100%;
display: flex;
justify-content: center;
padding: 12px 0;
}
.social-buttons ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--item-gap);
}
.social-buttons li {
position: relative;
}
/* Link wrapper (IMPORTANT: Patreon scale goes HERE, not img) */
.social-buttons .social-link {
display: inline-block;
transform: scale(1);
transform-origin: center center;
}
/* === BASE SIZE FOR ALL BUTTON IMAGES === */
.social-buttons .social-link img {
display: block;
height: 60px; /* ACTUAL SIZE CONTROL */
width: auto;
max-width: calc(var(--left-tab-width) - 24px);
/* JS will control img scale on hover */
transform: scale(1);
transform-origin: center center;
opacity: 0.7;
transition:
transform 180ms cubic-bezier(.2,.8,.2,1),
opacity 160ms ease;
image-rendering: auto;
}
/* === PATREON OPTICAL COMPENSATION (FINAL, JS-SAFE) === */
.social-buttons .social-link.is-patreon {
transform: scale(1.25);
transform-origin: center center;
}
/* Pixel-art override if needed */
body.pixel-art .social-buttons img {
image-rendering: pixelated;
}
/* Focus state */
.social-buttons .social-link:focus img {
outline: none;
opacity: 1;
}
/* Left panel occupies full column height and is scrollable (handled above). */
#left-tab-panel h3{ margin:0 0 8px 0; font-size: 16px }
#left-tab-panel .left-tab-body p{ margin:0 0 8px 0; font-size: 14px; color: #ddd }
#left-tab-panel ul{ padding-left: 18px; margin:0; }
#left-tab-panel a{ color: #ffd; text-decoration: none }
@media (max-width: 480px){
#left-tab{ left: 4px; padding: 8px }
#left-tab-toggle{ width:48px; height:48px }
#left-tab-panel{ width: 100%; height: calc(100vh - 72px) }
}
#left-tab-panel h3{ margin:0 0 8px 0; font-size: 16px }
#left-tab-panel .left-tab-body p{ margin:0 0 8px 0; font-size: 14px; color: #ddd }
#left-tab-panel ul{ padding-left: 18px; margin:0; }
#left-tab-panel a{ color: #ffd; text-decoration: none }
@media (max-width: 480px){
#left-tab{ left: 8px; }
#left-tab-toggle{ width:48px; height:48px }
#left-tab-panel{ width: 100% }
}