MediaWiki:Common.css - Revision history

Brett: Style video frame

2026-08-21T19:20:14Z

Style video frame

@@ Line 476: / Line 476: @@
 .vector-pinnable-element {
      background-color: var(--bf-card) !important;
+}

Brett: Broad safety net: force sidebar columns transparent

2026-08-21T18:41:26Z

Broad safety net: force sidebar columns transparent

@@ Line 465: / Line 465: @@
 .vector-sticky-header-icon-end {
      color: var(--bf-ink) !important;
+}

Brett: Fix white sticky header on scroll

2026-08-21T18:39:19Z

Fix white sticky header on scroll

@@ Line 447: / Line 447: @@
      font-family: var(--bf-cond) !important;
      font-size: 0.85em !important;
+}

Brett: Fix white thumbnail image backgrounds, add ink-frame treatment

2026-08-21T18:35:43Z

Fix white thumbnail image backgrounds, add ink-frame treatment

@@ Line 424: / Line 424: @@
 .vector-menu-content-list {
      background: transparent !important;
+}

Brett: Kill remaining white wrapper backgrounds

2026-08-21T17:57:22Z

Kill remaining white wrapper backgrounds

← Older revision		Revision as of 17:57, 21 August 2026
Line 417:		Line 417:
	.vector-pinnable-element {		.vector-pinnable-element {
	background: var(--bf-card) !important;		background: var(--bf-card) !important;
			}
			/* Kill the remaining white behind pinned/dropdown wrapper containers */
			.vector-pinned-container,
			.vector-unpinned-container,
			.vector-dropdown-content,
			.vector-menu-content-list {
			background: transparent !important;
	}		}

Brett: Fix placeholder logo, overflow, leftover white

2026-08-21T17:32:08Z

Fix placeholder logo, overflow, leftover white

@@ Line 372: / Line 372: @@
      color: var(--bf-ink) !important;
      font-family: var(--bf-serif) !important;
+}

Brett: Deep restyle: kill Vector white chrome, match site palette

2026-08-21T17:24:14Z

Deep restyle: kill Vector white chrome, match site palette

Show changes

Brett: Fix logo image sizing

2026-08-21T17:10:07Z

Fix logo image sizing

← Older revision		Revision as of 17:10, 21 August 2026
Line 64:		Line 64:

	#bf-masthead .bf-name img {		#bf-masthead .bf-name img {
	width: 24px;		width: 24px !important;
	height: 24px;		height: 24px !important;
			max-width: 24px !important;
			max-height: 24px !important;
			flex-shrink: 0;
			object-fit: contain;
	margin-right: 9px;		margin-right: 9px;
	}		}

Brett: Match site header/branding

2026-08-21T17:04:26Z

Match site header/branding

New page

/* ===== Fullmer Wiki: match brettfullmer.com brand ===== */

@font-face {
font-family: "Alfa Slab One";
src: url("/fonts/AlfaSlabOne-Regular.ttf") format("truetype");
font-weight: 400;
font-display: swap;
}

@font-face {
font-family: "Oswald";
src: url("/fonts/Oswald.ttf") format("truetype");
font-weight: 200 700;
font-display: swap;
}

:root {
--bf-paper: #f2e8d2;
--bf-paper-2: #eaddbd;
--bf-card: #f8f0dc;
--bf-ink: #191410;
--bf-ink-soft: #4a3f33;
--bf-muted: #7a6b58;
--bf-red: #c9342a;
--bf-mustard: #e0a92e;
--bf-teal: #2f7f74;
--bf-slab: "Alfa Slab One", "Rockwell", serif;
--bf-cond: "Oswald", "Arial Narrow", sans-serif;
--bf-serif: Georgia, "Times New Roman", serif;
}

/* ---------- Custom masthead (injected by Common.js) ---------- */
#bf-masthead {
position: sticky;
top: 0;
z-index: 200;
background: var(--bf-paper);
border-bottom: 3px solid var(--bf-ink);
box-shadow: 0 3px 0 rgba(25, 20, 16, 0.12);
font-family: var(--bf-cond);
}

#bf-masthead .bf-wrap {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
display: flex;
justify-content: space-between;
align-items: center;
height: 66px;
position: relative;
}

#bf-masthead .bf-name {
font-family: var(--bf-slab);
font-size: 19px;
color: var(--bf-ink);
text-decoration: none;
display: flex;
align-items: center;
}

#bf-masthead .bf-name:hover { color: var(--bf-red); }

#bf-masthead .bf-name img {
width: 24px;
height: 24px;
margin-right: 9px;
}

#bf-masthead .bf-links {
display: flex;
gap: 24px;
align-items: center;
}

#bf-masthead .bf-links a {
color: var(--bf-ink-soft);
font-family: var(--bf-cond);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
}

#bf-masthead .bf-links a:hover,
#bf-masthead .bf-links a.bf-current { color: var(--bf-red); }

#bf-masthead .bf-cta {
font-family: var(--bf-cond);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
background: var(--bf-red);
color: var(--bf-paper) !important;
border: 2px solid var(--bf-ink);
padding: 8px 18px;
border-radius: 6px;
box-shadow: 3px 3px 0 var(--bf-ink);
text-decoration: none;
transition: transform 0.15s, box-shadow 0.15s;
}

#bf-masthead .bf-cta:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--bf-ink); }

#bf-masthead .bf-mobile-actions { display: none; align-items: center; gap: 12px; }

#bf-masthead .bf-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 32px;
height: 32px;
background: none;
border: none;
padding: 0;
cursor: pointer;
}

#bf-masthead .bf-toggle span {
display: block;
width: 100%;
height: 3px;
background: var(--bf-ink);
border-radius: 2px;
transition: transform 0.2s ease, opacity 0.2s ease;
}

#bf-masthead .bf-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#bf-masthead .bf-toggle.open span:nth-child(2) { opacity: 0; }
#bf-masthead .bf-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 680px) {
#bf-masthead .bf-mobile-actions { display: flex; }
#bf-masthead .bf-toggle { display: flex; }
#bf-masthead .bf-links .bf-cta-desktop { display: none; }

#bf-masthead .bf-links {
position: absolute;
top: 66px;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
background: var(--bf-paper);
border-bottom: 3px solid var(--bf-ink);
box-shadow: 0 3px 0 rgba(25, 20, 16, 0.12);
max-height: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: max-height 0.25s ease, opacity 0.2s ease;
}

#bf-masthead .bf-links.open {
max-height: 500px;
opacity: 1;
pointer-events: auto;
}

#bf-masthead .bf-links a {
padding: 16px 24px;
border-bottom: 1px solid rgba(25, 20, 16, 0.1);
}
}

/* ---------- Recolor the wiki body itself ---------- */
body {
background-color: var(--bf-paper) !important;
color: var(--bf-ink) !important;
font-family: var(--bf-serif) !important;
}

.mw-page-container, .mw-body, #content {
background: transparent !important;
}

.mw-body {
background: var(--bf-card) !important;
border: 3px solid var(--bf-ink) !important;
border-radius: 10px !important;
box-shadow: 6px 6px 0 var(--bf-ink) !important;
padding: 30px 34px !important;
}

.mw-body h1, .mw-body h2, .mw-body h3 {
font-family: var(--bf-slab) !important;
font-weight: 400 !important;
color: var(--bf-ink) !important;
border-bottom-color: rgba(25, 20, 16, 0.2) !important;
}

.mw-body a, .vector-menu-content a { color: var(--bf-red) !important; }
.mw-body a.new { color: var(--bf-teal) !important; }

.vector-pinnable-header, .vector-menu-heading, #p-navigation h3, #p-tb h3 {
font-family: var(--bf-cond) !important;
text-transform: uppercase;
letter-spacing: 1px;
}

pre, .mw-highlight, code {
background: var(--bf-paper-2) !important;
border-color: var(--bf-ink) !important;
}