/* ------------------------------------------------------------------ * * theme.css — what Ghost needs on top of the course stylesheet. * * course.css is generated from the single-file course and is not edited. * Everything here is either a Ghost concept the single file had no reason * to know about (a locked module, a members gate) or the track switch * re-expressed as CSS, because in Ghost both tracks are in the page and * one of them is hidden rather than never rendered. * ------------------------------------------------------------------ */ /* ---------- track bodies ---------- The lesson post carries both tracks. is set before the first paint, so this is a swap with no flash and no JavaScript in the critical path. With scripting off, the desktop track is what you get. */ .track-body{ display:none } .track-body[data-track="both"]{ display:block } html[data-track="desktop"] .track-body[data-track="desktop"]{ display:block } html[data-track="terminal"] .track-body[data-track="terminal"]{ display:block } html:not([data-track]) .track-body[data-track="desktop"]{ display:block } /* ---------- members ---------- */ .frame.gate{ border-color:var(--accent); background:var(--accent-soft) } .frame.gate h2{ color:var(--accent-ink) } .gate .gate-lede{ font-size:1.05rem; color:var(--ink); margin:0 0 .9rem } .gate .hero-actions{ margin-top:1.5rem } .gate ul{ margin:.8rem 0 } /* A locked row is still a link — it goes to the module's own page, which is where the sign-up sits. Grey the text, keep the affordance. */ a.mod-row.locked{ cursor:pointer } a.mod-row.locked:hover .mod-title{ color:var(--ink) } .badge-lock{ border-color:var(--lock); color:var(--lock) } .rail li > a .t.gated{ color:var(--lock) } /* ---------- pages ---------- */ .page-body{ padding-bottom:1rem } .page-body > .prose{ max-width:68ch } /* Ghost renders the members' account and sign-in links through the same nav, so they inherit nav.main; this only separates them from the page links. */ nav.main a[data-portal]{ color:var(--accent-ink) } nav.main a[data-portal]:hover{ color:var(--accent) } @media print{ .gate,nav.main a[data-portal]{ display:none !important } } /* ---------- Ghost editor cards ---------- The nineteen modules arrive as one HTML card each, so none of this is used by the course itself. It is here for anything written later in Ghost's own editor — a members note, a changelog post — so that a wide image in the editor is a wide image on the page. */ .kg-width-wide{ max-width:1120px; margin-left:auto; margin-right:auto } .kg-width-full{ max-width:none; width:100% } .kg-width-full img{ width:100% } /* ---------- fonts chosen in Ghost ---------- Ghost's font picker sets --gh-font-heading / --gh-font-body. Leaving the course's own faces as the fallback means the site looks like the course until somebody deliberately changes it in Settings → Design. */ body{ font-family:var(--gh-font-body, "Source Serif 4", Georgia, "Times New Roman", serif) } h1,h2,h3,h4,.ui{ font-family:var(--gh-font-heading, Archivo, "Helvetica Neue", Arial, sans-serif) }