/* ========================================================= sh*t people patent — style.css Sections: 1 Base 2 Header/nav 3 Posts 4 Figures/images 5 Thumbnails 6 Home cards + hover 7 Archive 8 Footer/pager 8b Did-you-know 8c Reality check 9 Mobile + motion ========================================================= */ /* ---- 1. Base ---- */ :root{ --ink:#1a1a1a; --paper:#f6f1e7; --card:#fff; --accent:#c8102e; --muted:#666; --serif:Georgia,"Times New Roman",serif; --mono:"Courier New",Courier,monospace; --thumb:140px; /* home page thumbnail size */ --thumb-sm:56px; /* archive thumbnail size */ --fig-max:680px; /* default max width of a patent figure */ } *{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--serif)} a{color:var(--accent)} img{max-width:100%;height:auto} /* no image can ever overflow the page */ .wrap{max-width:760px;margin:0 auto;padding:0 20px} /* ---- 2. Header / nav ---- */ header{border-bottom:3px double var(--ink);padding:24px 0 12px} header img{height:44px;width:auto} nav{margin-top:10px;font-family:var(--mono);font-size:15px} nav a{margin-right:18px;text-decoration:none;color:var(--ink)} nav a:hover{color:var(--accent)} /* ---- 3. Posts ---- */ .tag{font-family:var(--mono);font-size:13px;color:var(--muted)} article{padding:28px 0;border-bottom:1px dashed #999} article h2{margin:.2em 0;font-size:26px} .meta{background:var(--card);border-left:4px solid var(--accent);padding:10px 14px;font-family:var(--mono);font-size:14px} .verdict{font-style:italic;font-size:19px} /* ---- 4. Figures / patent drawings ---- Markup:
default: up to --fig-max wide
small drawing, max 360px
use the full column width
tall portrait sheet, capped at 640px high
two+
side by side, stacks on mobile Always add
. Wrap the in so readers can open full size. */ .fig{margin:20px 0;padding:14px;background:var(--card);border:1px solid var(--ink);text-align:center} .fig img{display:block;margin:0 auto;width:100%;max-width:var(--fig-max);height:auto} .fig--small img{max-width:360px} .fig--full img{max-width:100%} .fig--tall img{width:auto;max-height:640px} .fig figcaption{margin-top:10px;font-family:var(--mono);font-size:13px;color:var(--muted)} .fig a{display:block} .fig-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:20px 0} .fig-grid .fig{margin:0} .fig-placeholder{padding:40px 14px;font-family:var(--mono);font-size:13px;color:#888} /* ---- 5. Thumbnails ---- Square images, 400x400 JPG. Non-square images are center-cropped. Add class "thumb--contain" to show the whole image (letterboxed) instead of cropping. */ .thumb{flex:0 0 var(--thumb);width:var(--thumb);height:var(--thumb);background:var(--card);border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:#888;text-align:center;overflow:hidden} .thumb img{width:100%;height:100%;object-fit:cover;object-position:center} .thumb--contain img{object-fit:contain;padding:6px} /* ---- 6. Home page cards + hover ---- */ .entry{display:flex;gap:18px;align-items:flex-start} .entry-body{flex:1;min-width:0} article.entry{padding:24px 14px;margin:0 -14px;border-left:4px solid transparent;transition:background .25s ease,border-color .25s ease,transform .25s ease} article.entry:hover{background:#fffaf0;border-left-color:var(--accent);transform:translateX(4px)} article.entry .thumb{transition:transform .25s ease,box-shadow .25s ease} article.entry:hover .thumb{transform:rotate(-2deg);box-shadow:4px 4px 0 var(--ink)} /* ---- 7. Archive ---- */ .archive{padding-left:0;list-style:none} .archive li{display:flex;gap:12px;align-items:center;margin:8px 0;font-family:var(--mono)} .archive .thumb{flex-basis:var(--thumb-sm);width:var(--thumb-sm);height:var(--thumb-sm);font-size:9px} /* ---- 8. Footer / pager ---- */ .pager{display:flex;justify-content:space-between;padding:20px 0;font-family:var(--mono)} footer{padding:30px 0;font-size:13px;color:var(--muted);text-align:center} /* ---- 8b. Did-you-know box (404 page; reusable on any page as