/* The June 2001 portfolio - "PortfolioForMyFirstJob", Kris's first, made at 17 in Dreamweaver
   with a Flash intro. Scoped to html[data-theme="2001"], which js/theme.js sets.
   RECOVERED, all of it, from the site's own files (Google Drive, dated 2001-06-02 to 07-09):
   banner.jpg (760x60), pixelme.gif (his face, hugely pixelated, the 760px table's background),
   kris.jpg (the 79x68 portrait, 1px border, top right of the panel), the #63849e panel
   (bluepixel.gif), black page with white text, and sheet.css: Geneva/Arial at 9-11px in black,
   white links that turn black and underlined on hover.
   REDRAWN: the four nav buttons were GIFs with their words baked in ("main", "graphic design",
   "3D graphic design", "web design"), so they are rebuilt in CSS with colours sampled from
   navbar*off/on.gif. Type is set at 11px, the top of the original's range.
   LEFT OUT on purpose: the page's text - it was a job application carrying his home address,
   phone number and date of birth. No copy of it is kept in this repo.
   It is not known whether this site was ever online; nothing of it is in the Wayback Machine. */
html[data-theme="2001"]{color-scheme:dark;background:#000}
html[data-theme="2001"] body{
  display:block;
  padding:8px 0 40px;
  background:#000;
  color:#000;
  font:11px/1.5 Geneva,Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:auto;
}
html[data-theme="2001"] .card{
  position:relative;
  width:min(760px,100%);
  min-height:480px;
  margin:0 auto;
  background:#000 url(/img/2001/pixelme.gif) left 60px no-repeat;
  border:0;border-radius:0;
  overflow:hidden;
}
html[data-theme="2001"] .masthead{
  display:block;
  height:60px;
  background:#000 url(/img/2001/banner.jpg) right top no-repeat;
  overflow:hidden;
  text-indent:-5000px;
  white-space:nowrap;
}
html[data-theme="2001"] .portrait,
html[data-theme="2001"] .tags{display:none}
html[data-theme="2001"] .name{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
/* the 620px panel: 102px of buttons + a 19px gutter to its left, 20px to its right,
   and the face showing above it */
html[data-theme="2001"] .meta{
  min-height:239px;
  margin:150px 20px 22px 120px;
  padding:12px;
  background:#63849e;
}

html[data-theme="2001"] a,
html[data-theme="2001"] .about a,
html[data-theme="2001"] .prose a,
html[data-theme="2001"] .lede a,
html[data-theme="2001"] .list a,
html[data-theme="2001"] .grid a,
html[data-theme="2001"] .pager a{color:#fff;font-weight:normal;text-decoration:none;border:0}
html[data-theme="2001"] a:hover,
html[data-theme="2001"] .grid a:hover .t{color:#000;text-decoration:underline}

/* the button stack, top left over the face */
html[data-theme="2001"] .nav{
  position:absolute;top:78px;left:0;width:100px;margin:0;display:block;
  font:italic bold 11px/28px Arial,Helvetica,sans-serif;letter-spacing:0;text-transform:lowercase;
}
html[data-theme="2001"] .nav a{
  display:block;height:30px;margin:0;
  text-align:center;color:#07090b;
  background:#5c7b93;border:1px solid #141a20;border-bottom-width:0;
}
html[data-theme="2001"] .nav a:last-child{border-bottom-width:1px}
html[data-theme="2001"] .nav a:hover,
html[data-theme="2001"] .nav a[aria-current]{background:#bad9ee;color:#0d0f11;text-decoration:none}
html[data-theme="2001"] .nav .out{display:block;margin:0}

html[data-theme="2001"] .role{
  margin:0 0 12px;font-size:11px;font-weight:bold;letter-spacing:0;text-transform:none;color:#000;
}
html[data-theme="2001"] .about,
html[data-theme="2001"] .cv,
html[data-theme="2001"] .page,
html[data-theme="2001"] .pager{border-top:0;color:#000;font-size:11px;letter-spacing:0}
html[data-theme="2001"] .about,
html[data-theme="2001"] .page,
html[data-theme="2001"] .cv{margin-top:0;padding-top:0}
/* the portrait: top right of the panel, 1px border, as on the 2001 main page */
html[data-theme="2001"] .about::before{
  content:url(/img/2001/kris.jpg);
  float:right;
  width:79px;height:68px;
  margin:-30px 0 10px 14px;
  border:1px solid #fff;
  line-height:0;
}

html[data-theme="2001"] .title{
  margin:0 0 8px;font:bold 11px/1.5 Geneva,Arial,Helvetica,sans-serif;color:#000;letter-spacing:0;
}
html[data-theme="2001"] .section-title,
html[data-theme="2001"] .cv h2,
html[data-theme="2001"] .year{
  margin:16px 0 6px;font:bold 10px/1.5 Geneva,Arial,Helvetica,sans-serif;
  color:#000;letter-spacing:0;text-transform:none;text-decoration:underline;
}
html[data-theme="2001"] .cv h3,
html[data-theme="2001"] .prose h3,
html[data-theme="2001"] .prose h4{font:bold 11px/1.5 Geneva,Arial,Helvetica,sans-serif;color:#000;margin:12px 0 0}
html[data-theme="2001"] .cv .org{color:#000}
html[data-theme="2001"] .when,
html[data-theme="2001"] .cv .when,
html[data-theme="2001"] .list time,
html[data-theme="2001"] .grid .y,
html[data-theme="2001"] .pager small{
  color:#1a232a;font-size:9px;font-weight:normal;letter-spacing:0;text-transform:none;
}
html[data-theme="2001"] .about em{color:#1a232a}
html[data-theme="2001"] .list li{border-top:1px solid #4f6a7e;padding:5px 0}
html[data-theme="2001"] .list li:first-child{border-top:0}

html[data-theme="2001"] .prose img,
html[data-theme="2001"] .shot,
html[data-theme="2001"] .grid .tn{border:1px solid #fff;border-radius:0;background:#000;padding:0}
html[data-theme="2001"] .grid a:hover .tn{border-color:#000}
html[data-theme="2001"] .prose blockquote{margin-left:0;padding:0 0 0 12px;border-left:1px solid #000;color:#000}
html[data-theme="2001"] .pager{margin-top:16px;padding-top:8px;border-top:1px solid #4f6a7e}

html[data-theme="2001"] .meta .foot{
  clear:both;margin:24px 0 0;padding:8px 0 0;border-top:1px solid #4f6a7e;
  color:#000;font-size:9px;letter-spacing:0;
}
html[data-theme="2001"] .meta .themes{margin:2px 0 0;color:#000;font-size:9px;letter-spacing:0}
html[data-theme="2001"] .themes button{color:#fff;border:0}
html[data-theme="2001"] .themes button:hover,
html[data-theme="2001"] .themes button[aria-pressed="true"]{color:#000;text-decoration:underline}

@media (max-width:700px){
  html[data-theme="2001"] body{padding-top:0}
  html[data-theme="2001"] .card{background-size:100% auto}
  html[data-theme="2001"] .masthead{background-position:right top}
  html[data-theme="2001"] .nav{top:70px;left:8px;right:8px;width:auto;display:flex;font-size:10px}
  html[data-theme="2001"] .nav a{flex:1;border-bottom-width:1px;border-right-width:0;padding:0 4px}
  html[data-theme="2001"] .nav .out{display:flex;flex:2}
  html[data-theme="2001"] .nav .out a:first-child{border-top-width:1px}
  html[data-theme="2001"] .nav .out a:last-child{border-right-width:1px}
  html[data-theme="2001"] .meta{margin:130px 8px 16px}
}