/* ========================================================================== cfworx.tech, hand-written stylesheet. No framework, no build tools. The only JavaScript on the site is the small title-search script. Notes: - Light, warm, early-2000s feel. Georgia for reading, Verdana for labels and UI, real monospace for terminal output. - Accent color is patch-cable blue (#0057b8). - The 3px stripe under the header is the T568B pin order: wht/org, org, wht/grn, blu, wht/blu, grn, wht/brn, brn. Delete the .site-header::after rule to remove it. - All color pairs meet WCAG 2.1 AA contrast (most exceed 6:1). ========================================================================== */ :root { --bg: #faf9f5; /* warm paper */ --ink: #22201b; /* near-black, warm */ --muted: #63604f; /* secondary text, 6.0:1 on --bg */ --link: #0057b8; /* ethernet patch-cable blue, 6.4:1 on --bg */ --link-hover: #003c80; --link-visited: #6a44a8; /* classic "you've read this" purple */ --rule: #ddd8c9; /* hairlines */ --box: #f1efe7; /* code / quote background */ --box-border: #dcd7c6; --enet: #0057b8; --ok: #1e6f33; /* quiz "correct" green, 5.9:1 on --bg */ --bad: #a4262c; /* quiz "wrong" red, 6.9:1 on --bg */ --sel: #cfe0f5; /* text selection */ --mark: #f5e6a8; /* search-snippet highlight */ --mark-ink: #22201b; /* text on the highlight */ --field: #ffffff; /* input backgrounds */ --serif: Georgia, 'Times New Roman', Times, serif; --sans: Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; } /* Dark palette. The site is light by default for everyone; dark only applies when the visitor has flipped the toggle, which stores data-theme="dark" on (remembered per browser). */ :root[data-theme="dark"] { --bg: #272822; /* Monokai editor background */ --ink: #f8f8f2; /* Monokai foreground */ --muted: #a59f85; /* Monokai gray */ --link: #66d9ef; /* Monokai cyan */ --link-hover: #a1e7f5; --link-visited: #ae81ff; /* Monokai purple */ --rule: #49483e; /* Monokai selection gray */ --box: #1d1e19; /* a step darker than the page */ --box-border: #49483e; --enet: #66d9ef; --ok: #a6e22e; /* Monokai green */ --bad: #f92672; /* Monokai pink */ --sel: #49483e; --mark: #e6db74; /* Monokai yellow */ --mark-ink: #272822; --field: #1d1e19; } /* ---- base ------------------------------------------------------------- */ * { box-sizing: border-box; } html { background: var(--bg); font-family: Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.6; -webkit-text-size-adjust: 100%; } body { margin: 0 auto; max-width: 52rem; padding: 0 1.05rem; background: var(--bg); color: var(--ink); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: var(--sans); line-height: 1.35; overflow-wrap: break-word; margin-top: 1.3em; } h1 { font-size: 1.9rem; } /* ~32px */ h2 { font-size: 1.6rem; /* ~27px */ font-weight: normal; } h3, h4, h5, h6 { font-size: 1.4rem; /* ~24px */ font-weight: normal; } p { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.5; margin-block: 1em; } figcaption p { font-style: italic; } a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; } a:visited { color: var(--link-visited); } a:hover { color: var(--link-hover); } :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 1px; } ::selection { background: var(--sel); } :target { scroll-margin-top: 1.5rem; } [hidden] { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } img { max-width: 100%; height: auto; border: 1px solid var(--rule); } /* ---- image lightbox (lightbox.js) -------------------------------------- */ article a:has(> img) { cursor: zoom-in; } .lightbox { position: fixed; inset: 0; z-index: 100; display: flex; overflow: auto; padding: 2rem; background: rgba(0, 0, 0, 0.93); cursor: zoom-out; -webkit-overflow-scrolling: touch; } .lightbox-img { max-width: 96vw; max-height: 92vh; width: auto; height: auto; border: none; margin: auto; cursor: zoom-in; } /* Second tap/click: actual pixels, pan by scrolling the overlay. */ .lightbox-img.zoomed { max-width: none; max-height: none; cursor: zoom-out; } @media (max-width: 40rem) { .lightbox { padding: 0.75rem; } } .lightbox-close { position: fixed; top: 0.5rem; right: 0.9rem; border: 0; background: none; color: #fff; font-size: 2.6rem; line-height: 1; padding: 0.2rem 0.5rem; cursor: pointer; } .lightbox-close:hover { color: #bbb; } body.lightbox-open { overflow: hidden; } ul, ol { padding-left: 1.4em; } li { margin: 0.25em 0; } article li { margin: 0.45em 0; } /* In post bodies the markers hang in the left margin, so list text lines up flush with the paragraphs instead of indenting. */ article ul { padding-left: 1.2em; margin-left: -1.2em; } article ol { padding-left: 1.6em; margin-left: -1.6em; } @media (max-width: 40rem) { /* narrow screens have no spare margin to hang markers in */ article ul, article ol { margin-left: 0; } } hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; } /* ---- skip link (visible on keyboard focus) ----------------------------- */ .skip { position: absolute; left: -999rem; top: 0.5rem; z-index: 10; background: var(--enet); color: #fff; padding: 0.55em 1em; font: 0.85rem var(--sans); text-decoration: none; } .skip:focus { left: 0.5rem; } /* ---- header ------------------------------------------------------------ */ .site-header { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding-top: 1.35rem; } .site-title { margin: 0; font: 700 1.3rem/1.3 var(--sans); letter-spacing: 0.01em; } .site-title a { color: var(--ink); text-decoration: none; } .site-title a:visited { color: var(--ink); } .site-title a:hover { color: var(--enet); } .rj45 { color: var(--enet); margin-right: 0.4rem; vertical-align: -0.15em; } .site-header nav { grid-column: 2; grid-row: 1; justify-self: end; font: 0.8rem var(--sans); } .site-header nav a { color: var(--ink); text-decoration: none; margin-left: 0.9rem; padding: 0.2em 0; } .site-header nav a:visited { color: var(--ink); } .site-header nav a:hover { color: var(--link-hover); text-decoration: underline; } .site-header nav a[aria-current="page"] { font-weight: 700; border-bottom: 2px solid var(--enet); } .theme-toggle { vertical-align: middle; margin-left: 0.9rem; padding: 0.3em 0.45em; line-height: 0; color: var(--ink); background: var(--box); border: 1px solid var(--box-border); border-radius: 4px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); cursor: pointer; } .theme-toggle:hover { color: var(--enet); border-color: var(--enet); } .theme-toggle:active { box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.25); } .theme-toggle .icon-sun { display: none; } /* Dark mode: the button sits pressed in, moon swaps to sun. */ :root[data-theme="dark"] .theme-toggle { background: #1d1e19; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.65); } :root[data-theme="dark"] .theme-toggle svg { transform: translateY(1px); } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: inline; } .tagline { grid-column: 1; grid-row: 2; margin: 0.2rem 0 0; color: var(--muted); font: 0.8rem var(--sans); } /* T568B pin order, left to right: wht/org, org, wht/grn, blu, wht/blu, grn, wht/brn, brn. The four wht/x pairs are drawn as real candy stripes (diagonal repeating gradients laid over their eighth of the bar); the solid wires come from the bottom linear-gradient layer. */ .site-header::after { content: ""; grid-column: 1 / -1; height: 5px; margin-top: 0.95rem; background-color: #fff; background-image: repeating-linear-gradient(45deg, #d97a1f 0 2px, #fff 2px 4px), /* 1 wht/org */ repeating-linear-gradient(45deg, #2f9e44 0 2px, #fff 2px 4px), /* 3 wht/grn */ repeating-linear-gradient(45deg, #0057b8 0 2px, #fff 2px 4px), /* 5 wht/blu */ repeating-linear-gradient(45deg, #7a4a1f 0 2px, #fff 2px 4px), /* 7 wht/brn */ linear-gradient(to right, transparent 0 12.5%, #d97a1f 12.5% 25%, /* 2 org */ transparent 25% 37.5%, #0057b8 37.5% 50%, /* 4 blu */ transparent 50% 62.5%, #2f9e44 62.5% 75%, /* 6 grn */ transparent 75% 87.5%, #7a4a1f 87.5% 100% /* 8 brn */ ); background-size: 12.5% 100%, 12.5% 100%, 12.5% 100%, 12.5% 100%, 100% 100%; background-position: 0 0, 28.5714% 0, 57.1429% 0, 85.7143% 0, 0 0; background-repeat: no-repeat; } /* ---- home -------------------------------------------------------------- */ .intro { margin-top: 1.6rem; } .intro p { margin: 0.6em 0; } /* Quick links under the intro: each one gets a short patch cord plugged into it, reusing the RJ45 from the post headings. */ .intro ul { list-style: none; padding: 0; margin: 1.1rem 0 0; font: 0.95rem var(--sans); } .intro ul li { display: flex; align-items: center; gap: 0.6em; padding: 0.3em 0; margin: 0; } .intro ul li::before { content: ""; flex: none; width: 44px; height: 14px; background-image: url('/images/rj45-plug.svg'), linear-gradient(#0057b8, #0057b8); background-repeat: no-repeat; background-size: 28px 14px, 18px 4px; background-position: right center, left center; } .post-block h2, .search-section, .year { font: 700 0.8rem var(--sans); text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 0.3rem; margin: 2.3rem 0 0.65rem; } .post-block h2 a, .post-block h2 a:visited { color: inherit; text-decoration: none; } .post-block h2 a:hover { color: var(--enet); text-decoration: underline; } .blurb { color: var(--muted); font-size: 0.95rem; margin: 0.3rem 0 0.55rem; } .more { font: 0.8rem var(--sans); margin: 0.45rem 0 0; } /* ---- collapsible per-cert groups (home) --------------------------------- Native
/: no JS, keyboard-accessible for free. */ .post-group summary { display: flex; align-items: baseline; gap: 0.55em; cursor: pointer; padding: 0.4em 0; font: 700 0.85rem var(--sans); list-style: none; /* hide default marker (Firefox) */ -webkit-user-select: none; user-select: none; } .post-group summary::-webkit-details-marker { display: none; } /* Safari */ .post-group summary::before { content: "\25B8"; /* right-pointing triangle */ color: var(--enet); font-size: 0.8em; line-height: 1; flex: none; } .post-group[open] summary::before { content: "\25BE"; /* down-pointing triangle */ } .post-group summary:hover .post-group-name { color: var(--enet); text-decoration: underline; text-underline-offset: 2px; } .post-group-count { margin-left: auto; font: 0.72rem var(--sans); font-weight: 400; color: var(--muted); white-space: nowrap; } .post-group .postlist { padding-left: 1.15em; /* align rows under the group name */ margin-bottom: 0.35rem; } .post-group + .post-group { border-top: 1px solid var(--rule); } /* Nested groups (a subsection inside a subsection, e.g. General under CCNA) indent under their parent and use a lighter summary. */ .post-group .post-group { margin-left: 1.15em; } .post-group .post-group summary { font-size: 0.8rem; } /* Loose posts listed above the collapsible groups: a hairline separates them from the first group so the two read as distinct rows. */ .post-block > .postlist + .post-group { border-top: 1px solid var(--rule); } /* ---- post lists ---------------------------------------------------------- date / title rows */ .postlist { list-style: none; margin: 0; padding: 0; } .postlist li { display: grid; grid-template-columns: max-content 1fr; column-gap: 0.85em; align-items: baseline; padding: 0.26em 0; margin: 0; } .postlist time { font: 0.78rem/1.6 var(--mono); color: var(--muted); white-space: nowrap; } /* ---- search (home page) -------------------------------------------------- The wrapper ships hidden; search.js reveals it. Results reuse .postlist. */ .site-search { margin: 1.8rem 0 0; } .site-search input[type="search"] { width: 100%; max-width: 24rem; font: 0.9rem var(--sans); color: var(--ink); background: var(--field); border: 1px solid var(--box-border); border-radius: 3px; padding: 0.5em 0.7em; } .search-count { font: 0.8rem var(--sans); color: var(--muted); margin: 0.5rem 0 0; } /* Section headings inside the results ("Post titles" / "Inside posts") reuse the .post-block h2 look via the shared rule above; tighten the gap between heading and its list. */ .site-search .search-section { margin-top: 1.6rem; } /* Body-text matches: the snippet stacks under the title inside the row's second column, with the matched words highlighted. */ .search-snippets .snippet { margin-top: 0.15em; font-size: 0.85rem; line-height: 1.55; color: var(--muted); } .search-snippets .snippet mark { background: var(--mark); color: var(--mark-ink); padding: 0 0.08em; } /* tiny inline animated GIFs, the 90s way (see the render-image hook) */ .gif-icon { display: inline-block; height: 1.15em; width: auto; border: 0; vertical-align: -0.18em; image-rendering: pixelated; } /* ---- section pages ------------------------------------------------------ */ .subsections { list-style: none; padding: 0; margin: 1rem 0 1.4rem; font: 0.9rem var(--sans); } .subsections li { border: 1px solid var(--rule); background: var(--box); border-radius: 3px; padding: 0.45em 0.8em; margin: 0.4em 0; } /* ---- articles ------------------------------------------------------------ */ .post-header h1 { font-size: 1.9rem; margin: 1.9rem 0 0.35rem; } .post-meta { font: 0.8rem var(--sans); color: var(--muted); margin: 0 0 1.4rem; } .post-meta a { color: var(--muted); } .post-meta a:visited { color: var(--muted); } .post-meta a:hover { color: var(--link-hover); } article h2 { margin: 1.3em 0 0.5rem; } article h3 { margin: 1.3em 0 0.4rem; } /* A short blue patch cable under each post heading, ending in an RJ45 plug (a real SVG: clear body, gold pins, latch tab, and the blue cable showing through the plastic). Standard patch-cable blue (#0057b8) in both themes, because cables don't change color in the dark. */ article h2, article h3 { width: fit-content; /* so the cable below runs the length of the text */ } article h2::after, article h3::after { content: ""; display: block; width: 100%; min-width: 4.5rem; /* room for the plug even under a short heading */ height: 14px; margin-top: 0.35rem; background-image: url('/images/rj45-plug.svg'), linear-gradient(#0057b8, #0057b8); background-repeat: no-repeat; background-size: 28px 14px, calc(100% - 20px) 4px; background-position: right center, left center; } article h3::after { height: 12px; background-size: 24px 12px, calc(100% - 17px) 3px; } @media print { article h2::after, article h3::after { display: none; } } /* ---- table of contents (lab posts) ---------------------------------------- Native
, open by default, built by Hugo from the ## and ### headings (see [markup.tableOfContents] in hugo.toml). Same triangle marker as the home-page post groups. */ .toc { width: fit-content; max-width: 100%; margin: 0 0 1.7rem; padding: 0.5rem 1rem 0.6rem; border: 1px solid var(--rule); border-radius: 4px; font: 0.85rem var(--sans); } .toc summary { display: flex; align-items: baseline; gap: 0.55em; cursor: pointer; font-weight: 700; list-style: none; -webkit-user-select: none; user-select: none; } .toc summary::-webkit-details-marker { display: none; } /* Safari */ .toc summary::before { content: "\25B8"; /* right-pointing triangle */ color: var(--enet); font-size: 0.8em; line-height: 1; flex: none; } .toc[open] summary::before { content: "\25BE"; } .toc summary:hover { color: var(--enet); } /* Reset the hanging-marker list style that article lists use. */ .toc ul { list-style: none; margin: 0.45rem 0 0; padding-left: 1.15em; } .toc ul ul { margin-top: 0.1rem; padding-left: 1.1em; } .toc li { margin: 0.28em 0; } .toc a { text-decoration: none; } .toc a:hover { text-decoration: underline; text-underline-offset: 2px; } @media print { .toc { display: none; } } blockquote { margin: 1.1em 0; padding-left: 1em; border-left: 4px solid #ccc; font-style: italic; } blockquote p { margin: 0.5em 0; } /* code blocks */ pre { background: var(--box); border: 1px solid var(--box-border); border-radius: 3px; padding: 0.8rem 1rem; overflow-x: auto; font: 0.9rem/1.55 var(--mono); margin: 1.1em 0; } code { font-family: var(--mono); font-size: 0.9rem; background: var(--box); border: 1px solid var(--box-border); border-radius: 2px; padding: 0.06em 0.3em; } pre code { font-size: 1em; background: none; border: 0; padding: 0; } .highlight { margin: 1.1em 0; } .highlight pre { margin: 0; } /* ---- console windows (render-codeblock hook) --------------------------- Fenced code blocks render inside a window frame whose look follows the language. The console interiors stay dark in BOTH site themes (a terminal is dark either way); only the frame adapts. */ .term { margin: 1.1em 0; border: 1px solid var(--box-border); border-radius: 7px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14); } .term .highlight { margin: 0; } .term pre { margin: 0; border: 0; border-radius: 0; white-space: pre-wrap; /* long lines wrap instead of clipping */ overflow-wrap: anywhere; /* even unbroken UNC paths and URLs */ } .term-bar { display: flex; align-items: center; gap: 0.6em; padding: 0.45em 0.85em; font: 700 0.72rem var(--sans); -webkit-user-select: none; user-select: none; } .term-title { letter-spacing: 0.04em; } /* macOS-style traffic lights for shell / generic consoles */ .term-dots { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; box-shadow: 17px 0 0 #febc2e, 34px 0 0 #28c840; margin-right: 38px; /* the shadows extend 34px past the span */ } /* Text selection inside the dark consoles: translucent white, so the token colors stay readable while selected. */ .term pre ::selection, .term pre::selection { background: rgba(255, 255, 255, 0.25); } .term-copy { margin-left: auto; font: 700 0.68rem var(--sans); letter-spacing: 0.05em; color: inherit; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 3px; padding: 0.15em 0.6em; cursor: pointer; opacity: 0.85; } .term-copy:hover { opacity: 1; background: rgba(255, 255, 255, 0.16); } .term-copy:disabled { cursor: default; } .term-powershell .term-copy { margin-right: 0.9em; } /* bash / shells: dark terminal */ .term-bash .term-bar { background: #2e2e2e; color: #c9c9c9; } .term-bash pre { background: #1b1b1b; color: #e6e6e6; } /* generic console (plain text output, registry dumps, error text) */ .term-generic .term-bar { background: #34333c; color: #c9c9c9; } .term-generic pre { background: #211f26; color: #e2e0e7; } /* World of Warcraft: gold-trimmed console, system-message gold text */ .term-wow { border: 2px solid #a17d2a; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), inset 0 0 0 1px #5c4415; } .term-wow .term-bar { background: linear-gradient(#4a3413, #241a08); color: #ffd100; } .term-wow pre { background: #120d08; color: #ffd100; } /* PowerShell: the classic blue console */ .term-powershell .term-bar { background: #0a3069; color: #ffffff; } .term-powershell .term-winbtns { margin-left: auto; font-weight: 400; opacity: 0.85; } .term-powershell pre { background: #012456; color: #eeedf0; } /* tables */ table { border-collapse: collapse; font-size: 0.92em; margin: 1.1em 0; } th { font: 700 0.85em var(--sans); text-align: left; border-bottom: 2px solid var(--ink); padding: 0.3em 1em 0.3em 0; } td { border-bottom: 1px solid var(--rule); padding: 0.35em 1em 0.35em 0; vertical-align: top; } /* prev / next */ .post-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 2.6rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); font: 0.85rem var(--sans); } .post-nav .older { margin-left: auto; text-align: right; } /* ---- tools (/tools/ and the subnetting quiz) ------------------------------- The quiz ships hidden in the HTML; subnetting.js reveals it. These are the first