/* ========================================================================== leaving hope — hexo theme stylesheet a consolidated port of the original 2002 frameset stylesheets (nav.css, new.css, interp.css, bg1a.css), adapted to a single page. ========================================================================== */ /* --- shell: replaces the -------------------------- the original composited two fixed backgrounds across two frames: bg1.jpg in the 120px nav frame, bg2.jpg from x=120 in the main frame. multiple fixed backgrounds on reproduce the exact composite. */ html { height: 100%; } body { margin: 0; padding: 0; font-family: Arial, sans-serif; font-size: 12pt; color: white; text-transform: lowercase; text-decoration: none; background-color: #000000; background-image: url(../img/bg1.jpg), url(../img/bg2.jpg); background-repeat: repeat-y, repeat-y; background-attachment: fixed, fixed; background-position: 0 0, 120px 0; } a { text-decoration: none; } a:link, a:visited { color: #ff0000; text-decoration: none; } a:hover, a:visited:hover { color: white; text-decoration: none; } img { border-style: solid; border-width: 0px; max-width: 100%; } /* --- nav strip: replaces the "nav-1" frame ------------------------------- */ #nav { position: fixed; top: 0; left: 0; bottom: 0; width: 120px; overflow: hidden; z-index: 10; } #nav .links { position: absolute; top: 10px; right: 4px; width: 112px; text-align: left; line-height: 1.45; } #nav a:link, #nav a:visited { color: black; } #nav a:hover, #nav a:visited:hover { color: white; } #nav .aux { position: absolute; bottom: 8px; right: 4px; width: 112px; font-size: 8pt; color: black; } /* --- main column: replaces the "main-1" frame ---------------------------- */ #main { margin-left: 120px; padding: 8px 0 24px 8px; } /* the classic 492px content table */ table { border-width: 0px; border-style: solid; text-transform: lowercase; font-size: 12pt; padding: 0em; margin: 0em; border-collapse: separate; border-spacing: 1px; } tr { font-size: 12pt; margin: 0em; padding: 0em; } table.black, .black { background-color: black; border-style: none; } table.frame { width: 492px; } table.frame > tbody > tr > td { padding: 1px 2px; vertical-align: top; } /* --- the design system classes, verbatim in spirit ----------------------- */ .invis { color: black; } /* black-on-black hidden text */ .title { color: red; } .quote { color: #C0C0C0; } .blue { color: #000082; font-size: 16pt; } .invisw { color: #ffffff; } .grey { background-color: #262627; border-style: none; } .whiter { background-color: white; } .title a:link, .title a:visited { color: red; } .title a:hover, .title a:visited:hover { color: white; } /* navy gradient section bar ("what's new") */ tr.new > td, .newbar { background-color: #000348; background-image: url(../img/bg3.jpg); background-repeat: repeat-x; color: white; text-align: left; padding: 2px 4px; margin: 0em; } /* charcoal gradient date bar */ tr.date > td, .datebar { background-color: #222222; background-image: url(../img/bg3a.jpg); background-repeat: repeat-x; color: white; text-align: left; padding: 2px 4px; margin: 0em; } /* white masthead row */ tr.whiter > td { background-color: white; padding: 0; } /* logotype — renders the site title in the style of the original dark-red bold lowercase gif logo on the white bar */ .logo, .logo a:link, .logo a:visited { display: block; color: #420000; font-family: "Arial Black", "Arial Bold", Arial, sans-serif; font-weight: bold; font-size: 21px; letter-spacing: -1px; padding: 1px 4px 3px 4px; white-space: nowrap; overflow: hidden; } .logo a:hover { color: #420000; } /* post/page header inside the white bar */ .pagehead { width: 100%; border-spacing: 0; } .pagehead td { vertical-align: middle; } .pagehead .pn { text-align: right; white-space: nowrap; padding-right: 2px; } .pagehead .pn img { vertical-align: middle; } .pagehead .pn a, .pagehead .pn span { margin-left: 1px; } /* the little red-dot "home" button (stand-in for the original 21x21 red-circle-on-white jpg) */ a.dot { display: inline-block; width: 21px; height: 21px; vertical-align: middle; background: #ffffff; background-image: radial-gradient(circle at 50% 50%, #c22a3c 0, #c22a3c 6px, #ffffff 7px); } /* --- index entries ------------------------------------------------------- */ .entry { padding: 2px 2px 0 2px; } .entry .spacer { display: block; height: 1.6em; } /* grey link-list boxes, as in blockquote > table.grey (display:table = shrink-to-fit, like the original tables did) */ .greybox { display: table; background-color: #262627; margin: 0.6em 2.2em; padding: 3px 6px; } .greybox a:link, .greybox a:visited { color: #ff0000; } .greybox a:hover { color: white; } /* --- post body: translate markdown into the design system ---------------- */ .post-body { padding: 2px 4px; } .post-body a:link, .post-body a:visited { color: #ffffff; } .post-body a:hover, .post-body a:visited:hover { color: #ff0000; } .post-body h1, .post-body h2 { background-color: #000348; background-image: url(../img/bg3.jpg); background-repeat: repeat-x; font-size: 12pt; font-weight: normal; padding: 2px 4px; margin: 1.2em 0 0.6em 0; } .post-body h3, .post-body h4, .post-body h5, .post-body h6 { color: red; font-size: 12pt; font-weight: bold; margin: 1.2em 0 0.4em 0; } .post-body blockquote { background-color: #262627; margin: 0.8em 2.2em; padding: 4px 8px; color: #C0C0C0; } .post-body hr { border: 0; border-top: 1px solid #222222; margin: 0.9em 0; } .post-body pre, .post-body code { text-transform: none; font-family: "Courier New", Courier, monospace; font-size: 10pt; background-color: #262627; color: #ffffff; } .post-body pre { padding: 6px 8px; overflow-x: auto; margin: 0.8em 0; } .post-body code { padding: 0 3px; } .post-body pre code { padding: 0; } .post-body table { border-spacing: 1px; } .post-body th, .post-body td { background-color: #262627; padding: 2px 6px; } .post-body ul, .post-body ol { margin: 0.6em 0 0.6em 1.6em; padding-left: 1em; } .postmeta { margin-top: 1.4em; font-size: 10pt; } .postmeta .taglist a { margin-right: 0.6em; } /* --- archive lists ------------------------------------------------------- */ .archlist { padding: 2px; } .archlist .when { color: #C0C0C0; font-size: 10pt; } /* --- paginator ----------------------------------------------------------- */ .paginator { padding: 6px 2px; text-align: right; } .paginator img { vertical-align: middle; } .paginator .pageno { color: #C0C0C0; font-size: 10pt; padding: 0 4px; } /* --- footer -------------------------------------------------------------- */ .sitefoot { width: 492px; margin-top: 4px; background-color: #000000; box-sizing: border-box; font-size: 8pt; color: #C0C0C0; padding: 2px; } .sitefoot a:link, .sitefoot a:visited { color: #C0C0C0; } .sitefoot a:hover { color: white; } /* --- overlib-style tooltip (vanilla replacement) ------------------------- */ #overDiv { position: absolute; visibility: hidden; z-index: 1000; width: 100px; background-color: white; /* ol_bgcolor: white outer border */ padding: 2px; /* ol_border: 2 */ pointer-events: none; } #overDiv .inner { background-color: black; /* ol_fgcolor: black */ color: white; /* ol_textcolor: white */ font-family: "Courier New", Courier, monospace; /* TEXTFONT */ font-size: 10px; /* ol_textsize: 1 */ padding: 1px 2px; text-transform: lowercase; } /* --- small screens: the one concession to the future --------------------- */ @media (max-width: 660px) { body { background-image: url(../img/bg2.jpg); background-position: 0 0; background-repeat: repeat-y; background-attachment: fixed; } #nav { position: static; width: auto; height: auto; overflow: visible; background: url(../img/bg1a.jpg); } #nav .links, #nav .aux { position: static; width: auto; padding: 6px 8px; } #nav .links a { display: inline-block; margin-right: 10px; } #nav .links br { display: none; } table.frame { table-layout: fixed; } .logo, .logo a:link, .logo a:visited { white-space: normal; } #nav .aux { padding-top: 0; } #main { margin-left: 0; padding: 8px 4px; } table.frame, .sitefoot { width: 100%; max-width: 492px; } } /* auto-abbreviated long posts on the front page: the clickable ellipsis */ .entry a.ellipsis:link, .entry a.ellipsis:visited { color: red; font-weight: bold; letter-spacing: 2px; padding: 0 4px; } .entry a.ellipsis:hover { color: white; } /* a lone `#` line becomes this thin gradient divider (scripts/bare-heading.js); `# with text` stays a full bar */ .post-body .newbar { margin: 1em 0; } .post-body .newbar-line { height: 5px; background-color: #000348; background-image: url(../img/bg3.jpg); background-repeat: repeat-x; margin: 1.1em 0; font-size: 0; } .cf-turnstile { margin: 8px 0; }