Skip to content

[codex] Fix WordPress guide styling #100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bisonbet merged 1 commit into from
Jul 6, 2026
Merged

[codex] Fix WordPress guide styling #100

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 4 additions & 126 deletions docs/bisonnotes-ai-guide.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,130 +1,8 @@
<!-- BisonNotes AI - Complete User Guide -->
<!-- Paste everything below into WordPress Custom HTML block or HTML editor -->

<style>
/* ===== RESET & BASE ===== */
.bn *, .bn *::before, .bn *::after { box-sizing: border-box; }
.bn {
max-width: 960px;
margin: 0 auto;
padding: 0.75rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
font-size: clamp(17px, 1rem + 0.4vw, 19px);
line-height: 1.7;
color: #1a1a1a;
word-wrap: break-word;
overflow-wrap: break-word;
}

/* Override WordPress theme constraints */
.entry-content > .bn,
.post-inner .bn,
.page-content .bn,
.section-inner .bn,
.wp-block-post-content .bn,
.entry-content .bn {
max-width: 960px !important;
width: 100% !important;
}
.entry-content > *:has(.bn),
.post-inner:has(.bn),
.section-inner:has(.bn) {
max-width: none !important;
width: 100% !important;
}

/* ===== TYPOGRAPHY ===== */
.bn h2 { font-size: 1.35rem; font-weight: 700; margin: 2.2rem 0 0.8rem; padding-bottom: 0.35rem; border-bottom: 2px solid #c0392b; color: #111; }
.bn h3 { font-size: 1.1rem; font-weight: 600; margin: 1.4rem 0 0.5rem; color: #222; }
.bn h4 { font-size: 0.95rem; font-weight: 600; margin: 1rem 0 0.35rem; color: #333; }
.bn p { margin: 0.5rem 0; }
.bn ul, .bn ol { margin: 0.4rem 0 0.6rem; padding-left: 1.4rem; }
.bn li { margin: 0.25rem 0; }
.bn li ul, .bn li ol { margin: 0.2rem 0 0.3rem; }
.bn a { color: #c0392b; text-decoration: none; }
.bn a:hover { text-decoration: underline; }
.bn code { background: #f0f0f0; padding: 1px 5px; border-radius: 3px; font-size: 0.88em; word-break: break-all; }
.bn pre { background: #f0f0f0; padding: 0.8rem; border-radius: 6px; overflow-x: auto; font-size: 0.85em; margin: 0.6rem 0; }
.bn pre code { background: none; padding: 0; word-break: normal; }
.bn hr { border: none; border-top: 1px solid #ddd; margin: 2rem 0; }

/* ===== HIDE WP PAGE TITLE (Twenty Twenty theme) ===== */
.post-inner .entry-header,
.entry-header .entry-title,
body.page .entry-header {
display: none !important;
}

/* ===== HERO ===== */
.bn-hero { text-align: center; padding: 1.5rem 1rem; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); color: #fff; border-radius: 10px; margin-bottom: 1.5rem; }
.bn-hero h1 { color: #fff !important; font-size: 1.5rem; margin: 0 0 0.2rem; line-height: 1.3; border: none !important; padding: 0 !important; }
.bn-hero p { margin: 0; font-size: 0.9rem; opacity: 0.8; color: #fff; }
.bn-hero .bn-ver { display: inline-block; background: #c0392b; color: #fff; padding: 0.15rem 0.6rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; margin-top: 0.6rem; }

/* ===== TABLE OF CONTENTS ===== */
.bn-toc { background: #f7f8f9; border: 1px solid #e0e0e0; border-radius: 8px; padding: 0.8rem 1rem; margin-bottom: 1.8rem; }
.bn-toc p { font-weight: 700; margin: 0 0 0.4rem; }
.bn-toc ol { margin: 0; padding-left: 1.2rem; }
.bn-toc li { margin: 0.2rem 0; font-size: 0.92rem; }
.bn-toc a { color: #2563eb; }
.bn-toc ul { list-style: disc; padding-left: 1.2rem; margin: 0.15rem 0 0; }

/* ===== CALLOUT BOXES ===== */
.bn-info, .bn-warn, .bn-ok { border-radius: 6px; padding: 0.7rem 0.9rem; margin: 0.7rem 0; font-size: 0.94rem; }
.bn-info { background: #eaf3fc; border-left: 4px solid #2563eb; }
.bn-warn { background: #fef7e0; border-left: 4px solid #e6a817; }
.bn-ok { background: #eaf7ec; border-left: 4px solid #27ae60; }

/* ===== CARDS ===== */
.bn-card { background: #f7f8f9; border: 1px solid #e0e0e0; border-radius: 8px; padding: 0.8rem 1rem; margin: 0.6rem 0; }
.bn-card-a { border-left: 4px solid #c0392b; }
.bn-card h4:first-child { margin-top: 0; }

/* ===== GRID ===== */
.bn-g { display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin: 0.8rem 0; }
.bn-gc { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 0.8rem 1rem; }
.bn-gc h4 { margin: 0 0 0.2rem; font-size: 0.95rem; }
.bn-gc ul { font-size: 0.92rem; margin: 0.2rem 0; padding-left: 1.2rem; }
.bn-gc p { font-size: 0.92rem; margin: 0.2rem 0; }
.bn-badge { display: inline-block; font-size: 0.68rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 10px; margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.02em; }
.bn-b-free { background: #d5edda; color: #155724; }
.bn-b-cloud { background: #cce5ff; color: #004085; }
.bn-b-local { background: #fff3cd; color: #856404; }
.bn-b-paid { background: #f8d7da; color: #721c24; }

/* ===== TABLES ===== */
.bn-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0.6rem 0; border-radius: 6px; border: 1px solid #e0e0e0; }
.bn table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.bn th, .bn td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid #eee; }
.bn th { background: #f1f3f5; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; color: #555; white-space: nowrap; }

/* ===== COLLAPSIBLE SECTIONS ===== */
.bn details { border: 1px solid #e0e0e0; border-radius: 8px; margin: 0.5rem 0; background: #fff; }
.bn details[open] { background: #fafbfc; }
.bn summary { padding: 0.65rem 0.9rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.4rem; font-size: 0.97rem; -webkit-tap-highlight-color: transparent; }
.bn summary::-webkit-details-marker { display: none; }
.bn summary::before { content: "\25B6"; font-size: 0.6rem; transition: transform 0.15s; flex-shrink: 0; }
.bn details[open] > summary::before { transform: rotate(90deg); }
.bn .dd { padding: 0 0.9rem 0.8rem; }

/* ===== STEP LIST ===== */
.bn-sl { counter-reset: st; list-style: none; padding-left: 0; }
.bn-sl > li { counter-increment: st; position: relative; padding-left: 2.3rem; margin: 0.7rem 0; }
.bn-sl > li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 1.6rem; height: 1.6rem; background: #c0392b; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; line-height: 1; }
.bn-sl > li ul { margin-top: 0.3rem; }

/* ===== RESPONSIVE ===== */
@media (min-width: 540px) {
.bn-g { grid-template-columns: 1fr 1fr; }
.bn { padding: 1rem; }
}
@media (max-width: 539px) {
.bn h2 { font-size: 1.25rem; }
.bn h3 { font-size: 1.08rem; }
.bn-hero h1 { font-size: 1.3rem; }
.bn-hero { padding: 1.2rem 0.7rem; }
}
</style>
<!-- Paste everything below into a WordPress Custom HTML block or HTML editor. -->
<!-- Keep the CSS inside the style tag compact: WordPress auto-paragraph formatting can break multi-paragraph CSS. -->

<style>.bn *,.bn *::before,.bn *::after{box-sizing:border-box;}.bn{max-width:960px;margin:0 auto;padding:0.75rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;font-size:clamp(17px,1rem + 0.4vw,19px);line-height:1.7;color:#1a1a1a;word-wrap:break-word;overflow-wrap:break-word;}.entry-content>.bn,.post-inner .bn,.page-content .bn,.section-inner .bn,.wp-block-post-content .bn,.entry-content .bn{max-width:960px !important;width:100% !important;}.entry-content>*:has(.bn),.post-inner:has(.bn),.section-inner:has(.bn){max-width:none !important;width:100% !important;}.bn h2{font-size:1.35rem;font-weight:700;margin:2.2rem 0 0.8rem;padding-bottom:0.35rem;border-bottom:2px solid #c0392b;color:#111;}.bn h3{font-size:1.1rem;font-weight:600;margin:1.4rem 0 0.5rem;color:#222;}.bn h4{font-size:0.95rem;font-weight:600;margin:1rem 0 0.35rem;color:#333;}.bn p{margin:0.5rem 0;}.bn ul,.bn ol{margin:0.4rem 0 0.6rem;padding-left:1.4rem;}.bn li{margin:0.25rem 0;}.bn li ul,.bn li ol{margin:0.2rem 0 0.3rem;}.bn a{color:#c0392b;text-decoration:none;}.bn a:hover{text-decoration:underline;}.bn code{background:#f0f0f0;padding:1px 5px;border-radius:3px;font-size:0.88em;word-break:break-all;}.bn pre{background:#f0f0f0;padding:0.8rem;border-radius:6px;overflow-x:auto;font-size:0.85em;margin:0.6rem 0;}.bn pre code{background:none;padding:0;word-break:normal;}.bn hr{border:none;border-top:1px solid #ddd;margin:2rem 0;}.post-inner .entry-header,.singular .entry-header,.entry-header .entry-title,body.page .entry-header{display:none !important;}.bn-hero{text-align:center;padding:1.5rem 1rem;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);color:#fff;border-radius:10px;margin-bottom:1.5rem;}.bn-hero h1{color:#fff !important;font-size:1.5rem;margin:0 0 0.2rem;line-height:1.3;border:none !important;padding:0 !important;}.bn-hero p{margin:0;font-size:0.9rem;opacity:0.8;color:#fff;}.bn-hero .bn-ver{display:inline-block;background:#c0392b;color:#fff;padding:0.15rem 0.6rem;border-radius:20px;font-size:0.75rem;font-weight:600;margin-top:0.6rem;}.bn-toc{background:#f7f8f9;border:1px solid #e0e0e0;border-radius:8px;padding:0.8rem 1rem;margin-bottom:1.8rem;}.bn-toc p{font-weight:700;margin:0 0 0.4rem;}.bn-toc ol{margin:0;padding-left:1.2rem;}.bn-toc li{margin:0.2rem 0;font-size:0.92rem;}.bn-toc a{color:#2563eb;}.bn-toc ul{list-style:disc;padding-left:1.2rem;margin:0.15rem 0 0;}.bn-info,.bn-warn,.bn-ok{border-radius:6px;padding:0.7rem 0.9rem;margin:0.7rem 0;font-size:0.94rem;}.bn-info{background:#eaf3fc;border-left:4px solid #2563eb;}.bn-warn{background:#fef7e0;border-left:4px solid #e6a817;}.bn-ok{background:#eaf7ec;border-left:4px solid #27ae60;}.bn-card{background:#f7f8f9;border:1px solid #e0e0e0;border-radius:8px;padding:0.8rem 1rem;margin:0.6rem 0;}.bn-card-a{border-left:4px solid #c0392b;}.bn-card h4:first-child{margin-top:0;}.bn-g{display:grid;grid-template-columns:1fr;gap:0.6rem;margin:0.8rem 0;}.bn-gc{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:0.8rem 1rem;}.bn-gc h4{margin:0 0 0.2rem;font-size:0.95rem;}.bn-gc ul{font-size:0.92rem;margin:0.2rem 0;padding-left:1.2rem;}.bn-gc p{font-size:0.92rem;margin:0.2rem 0;}.bn-badge{display:inline-block;font-size:0.68rem;font-weight:600;padding:0.1rem 0.45rem;border-radius:10px;margin-bottom:0.3rem;text-transform:uppercase;letter-spacing:0.02em;}.bn-b-free{background:#d5edda;color:#155724;}.bn-b-cloud{background:#cce5ff;color:#004085;}.bn-b-local{background:#fff3cd;color:#856404;}.bn-b-paid{background:#f8d7da;color:#721c24;}.bn-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0.6rem 0;border-radius:6px;border:1px solid #e0e0e0;}.bn table{width:100%;border-collapse:collapse;font-size:0.92rem;}.bn th,.bn td{text-align:left;padding:0.45rem 0.6rem;border-bottom:1px solid #eee;}.bn th{background:#f1f3f5;font-weight:600;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.02em;color:#555;white-space:nowrap;}.bn details{border:1px solid #e0e0e0;border-radius:8px;margin:0.5rem 0;background:#fff;}.bn details[open]{background:#fafbfc;}.bn summary{padding:0.65rem 0.9rem;font-weight:600;cursor:pointer;list-style:none;display:flex;align-items:center;gap:0.4rem;font-size:0.97rem;-webkit-tap-highlight-color:transparent;}.bn summary::-webkit-details-marker{display:none;}.bn summary::before{content:"\25B6";font-size:0.6rem;transition:transform 0.15s;flex-shrink:0;}.bn details[open]>summary::before{transform:rotate(90deg);}.bn .dd{padding:0 0.9rem 0.8rem;}.bn-sl{counter-reset:st;list-style:none;padding-left:0;}.bn-sl>li{counter-increment:st;position:relative;padding-left:2.3rem;margin:0.7rem 0;}.bn-sl>li::before{content:counter(st);position:absolute;left:0;top:0;width:1.6rem;height:1.6rem;background:#c0392b;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.8rem;line-height:1;}.bn-sl>li ul{margin-top:0.3rem;}@media (min-width:540px){.bn-g{grid-template-columns:1fr 1fr;}.bn{padding:1rem;}}@media (max-width:539px){.bn h2{font-size:1.25rem;}.bn h3{font-size:1.08rem;}.bn-hero h1{font-size:1.3rem;}.bn-hero{padding:1.2rem 0.7rem;}}</style>

<div class="bn">

Expand Down