/* Nelson's weblog. Adapted from ~nelson/weblog-files/weblog.css (the Blosxom
   site's stylesheet): same fonts, colours and boxes, with the table layout
   replaced by flexbox so it also works on a phone. */

@font-face {
  font-family: "source-serif-pro";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/SourceSerifPro-Regular.otf.woff2") format("woff2");
}
@font-face {
  font-family: "source-serif-pro";
  font-style: italic;
  font-weight: 400;
  src: url("fonts/SourceSerifPro-It.otf.woff2") format("woff2");
}
@font-face {
  font-family: "source-serif-pro";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/SourceSerifPro-Bold.otf.woff2") format("woff2");
}
@font-face {
  font-family: "source-serif-pro";
  font-style: italic;
  font-weight: 700;
  src: url("fonts/SourceSerifPro-BoldIt.otf.woff2") format("woff2");
}
/* Source Serif's monospace sibling, regular only (bold is synthesized). A
   browser downloads it only for a page with code on it. */
@font-face {
  font-family: "source-code-pro";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/SourceCodePro-Regular.otf.woff2") format("woff2");
}

/* --- page layout (was a centered three-cell table) --- */

body {
  background-color: #00008f;
  background-image: url(img/stilenelson.png);   /* one of the old site's random tiles, fixed (2026-10-02) */
  margin: 0;
  padding: 21px 8px 16px 8px;   /* where the old table layout put the title */
  font-family: source-serif-pro, Cambria, serif;
  font-size: 18px;
  line-height: 1.3;
}

.page {
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}

.columns {
  display: flex;
  align-items: flex-start;
  gap: 20px;      /* the old table's 12px spacer cell, plus its 2px cell spacing and 1px cell padding */
}

main {
  width: 650px;
  min-width: 0;
}

div.title, header.title {
  background-color: #ffffdd;
  padding: 6px 13px 0px 0px;
  margin-bottom: 20px;          /* 16px, plus the old table's cell spacing and padding */
  font-size: 144%;
  text-align: right;
}

.sidebar {
  background-color: #ffffdd;
  padding: 15px 10px 10px 10px;
  width: 7em;
  flex: none;
  text-align: center;
}
.sidebar img { border: 0; }
.sidebar .small { font-size: 64%; }
.sidebar p { margin: 1em 0; }
.sidebar .nelson { margin-top: 2em; }
.sidebar .handle {               /* @nelson@tech.lgbt: not bold, on one line, allowed into the sidebar's padding */
  display: block; margin: 0 -10px; font-size: 85%; font-weight: normal; white-space: nowrap;
}
.sidebar .photo { width: 100%; height: auto; }   /* as wide as the search box; the file is 3x for high-DPI */

div.sbt { margin-top: 2em; margin-bottom: .2em; font-weight: bold; }

.footer {
  background-color: #ffffdd;
  padding: 4px 4px 4px 4px;
  font-size: 83%;
}

/* --- a post --- */

div.bbox, article.bbox {
  background-color: #ffffff;
  padding: 25px 25px 25px 25px;
  margin-bottom: 20px;
}
article.draft { outline: 4px dashed #d04040; }

.btitle {
  text-align: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.3;
  margin: 0 0 .5em -1px;
}
div.bentry {
  text-align: justify;
}
div.bfooter {
  margin-top: .5em;
  text-align: right;
  font-size: 83%;
}
div.breadcrumb, nav.breadcrumb {
  text-align: right;
  padding-right: 20px;
}
div.clear { clear: both }

/* --- things post bodies use --- */

/* Monospace text at the text's own size, scaled so its lowercase letters are
   as tall as Source Serif's (x-height 0.475 of the font size): it looks the
   same size whichever monospace font the reader ends up with. */
tt, pre, code, div.codesample {
  font-family: source-code-pro, Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size: 1em;
  font-size-adjust: 0.475;
}
dl, ul {
  margin-top: .3em; margin-bottom: .3em;
}
li {
  margin-left: -1em;
}
dd { margin-left: 1.5em }

.update, .Update {
  color: #004000
}
div.ack {
  margin-top: .5em; margin-bottom: -.5em;
  text-align: right;
  font-size: 83%;
  clear: both;
}
figcaption { font-size: 83%; }
pre {
  margin-left: 10px; margin-top: 5px; margin-bottom: 2px;
  font-size: 80%;               /* blocks of code a little smaller than the text */
  overflow-x: auto;
}
div.codesample {
  margin: 5px 10px 5px 10px;
  padding: 3px;
  font-size: 80%;
  text-align: left;
  background-color: #eeeeee;
  overflow-x: auto;
}
div.quote {
  font-size: 83%;
  padding-left: 1em; padding-right: 1em;
  margin-top: .7em; margin-bottom: .7em;
  text-align: justify
}
blockquote {
  font-size: 83%;
  margin-top: .7em; margin-bottom: .7em;
  margin-left: 1em; margin-right: 1em;
  text-align: justify
}
div.bentry table { max-width: 100%; }
div.bentry img { max-width: 100%; height: auto; }
div.bentry iframe, div.bentry video { max-width: 100%; }

a { text-decoration: none }
a:hover { text-decoration: underline }
a.in { text-decoration: none }
a:hover.in { text-decoration: underline }
a.invisiblelink { text-decoration: none; color: black }
a:hover.invisiblelink { text-decoration: underline }
a.titlelink { text-decoration: none; color: black }
/* Lower the text a little, so it looks centred in the yellow box (by eye:
   4px; 6px centred the capitals exactly but looked low). The box keeps its height. */
header.title img { position: relative; top: 4px; }
a:hover.titlelink { text-decoration: underline; }
.emailaddr { display: block; font-size: 8pt; line-height: 1.25; }   /* its own line, not the paragraph's tall one */

a.autocorrect { color: #800000 }
div.autocorrect { text-align: right; font-size: 83%; color: #800000; margin: 10px 0px 10px 0px; }

.calendar { font-size: 83%; line-height: 144% }

/* images: <rimg> floats right, <cimg> is centred; Markdown images get the same classes */
img.rimg { border: 0; float: right; margin-left: 20px; margin-bottom: 10px; margin-top: 4px; }
img.rightthumb { border: 0; float: right; margin-left: 10px; margin-bottom: 10px; margin-top: 4px; }
div.cimg { text-align: center; max-width: 100%; }
img.cimg { border: 0; margin-top: 1em; margin-bottom: 1em; }
p > img.cimg, div.bentry > img.cimg, p > a > img.cimg, div.bentry > a > img.cimg,
p > picture > img.cimg, div.bentry > picture > img.cimg, p > a > picture > img.cimg, div.bentry > a > picture > img.cimg { display: block; margin-left: auto; margin-right: auto; }

/* footnotes from Markdown */
section.footnotes { font-size: 83%; }
hr.footnotes-sep { border: 0; border-top: 1px solid #ccc; }

/* --- the archive page (after the linkblog's archive.html) --- */

.archive_calendar {
  margin: 1em 0;
}
.archive_row {
  display: grid;
  grid-template-columns: 4em repeat(12, 1fr);
  margin-bottom: .6rem;
}
.archive_year { font-weight: bold; }
.archive_month { text-align: center; }
.archive_month_hidden { visibility: hidden; }
ul.archive_categories { list-style: none; padding-left: 0; columns: 2; }
ul.archive_categories li { margin-left: 0; }
ul.archive_categories .count { color: #777; font-size: 83%; }

/* --- search: the sidebar's box and the search page (search.js) --- */

.sidebar-search input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 75%;
  padding: 2px 4px;
  border: 1px solid #b8b890;
  background: #ffffff;
}
.search-form { display: flex; gap: 8px; margin: 0 0 1em 0; }
.search-form input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 4px 8px;
  border: 1px solid #999999;
}
.search-form input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-form button, .search-more {
  font: inherit;
  font-size: 90%;
  padding: 4px 12px;
  border: 1px solid #999999;
  background: #ffffdd;
  cursor: pointer;
}
.search-status { color: #555555; font-size: 83%; }
ol.search-results { list-style: none; padding: 0; margin: 0; }
ol.search-results li { margin: 0 0 1.2em 0; }
.search-title { font-weight: bold; }
.search-date { color: #555555; font-size: 83%; white-space: nowrap; }
.search-excerpt { margin: .2em 0 0 0; font-size: 90%; text-align: left; }
.search-excerpt mark { background: #ffffaa; color: inherit; }

/* --- narrow screens: sidebar under the posts --- */

@media screen and (max-width: 720px) {
  body { padding: 8px 4px; font-size: 17px; }
  .page { width: auto; }
  .columns { flex-direction: column-reverse; gap: 12px; }
  main { width: 100%; }
  .sidebar { width: auto; box-sizing: border-box; align-self: stretch; }
  div.bbox, article.bbox { padding: 16px; }
  header.title img { max-width: 100%; height: auto; }
  .archive_row { grid-template-columns: 3em repeat(12, 1fr); font-size: 80%; }
  ul.archive_categories { columns: 1; }
}