dark.css

/* ============================================================
   anthony.hu -- RETRO 90s STYLESHEET
   Best viewed in Netscape Navigator 3.0 at 800x600 :-)
   Standalone: does NOT import asciidoctor.css on purpose.
   ============================================================ */

/* --- tiled starfield background, Times New Roman, classic link colors --- */
html,body{margin:0;padding:0}
body{
  font-family:"Times New Roman",Times,serif;
  font-size:16px;
  line-height:1.35;
  color:#ffffff;
  background-color:#000033;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96'><rect width='96' height='96' fill='%23000033'/><g fill='%23ffffff'><rect x='7' y='11' width='1' height='1'/><rect x='41' y='5' width='2' height='2'/><rect x='72' y='19' width='1' height='1'/><rect x='23' y='37' width='1' height='1'/><rect x='88' y='43' width='1' height='1'/><rect x='55' y='51' width='2' height='2'/><rect x='13' y='66' width='1' height='1'/><rect x='34' y='79' width='1' height='1'/><rect x='67' y='85' width='2' height='2'/><rect x='91' y='73' width='1' height='1'/><rect x='48' y='27' width='1' height='1'/><rect x='3' y='90' width='1' height='1'/></g><g fill='%23ffff99'><rect x='60' y='9' width='1' height='1'/><rect x='19' y='55' width='1' height='1'/><rect x='80' y='60' width='1' height='1'/></g></svg>");
  margin:8px;
}
/* classic Netscape defaults: blue, purple when visited, red when clicked */
a:link{color:#0000ff;text-decoration:underline}
a:visited{color:#800080;text-decoration:underline}
a:hover{color:#ff0000;text-decoration:underline}
a:active{color:#ff0000}
a img{border:0}
img{max-width:100%;border:2px outset #c0c0c0}

/* --- the "web page" itself: a gray beveled table-in-a-table look --- */
#header,#content,#footer{
  max-width:780px;
  margin:0 auto;
}
#header{
  background:#c0c0c0;
  color:#000000;
  border:4px ridge #808080;
  border-bottom:0;
  padding:10px 14px 6px;
  text-align:center;
}
#header h1{
  font-family:Impact,"Arial Black",Haettenschweiler,sans-serif;
  font-size:2.6em;
  letter-spacing:1px;
  margin:0;
  padding:8px 0;
  color:#ff00ff;
  text-shadow:3px 3px 0 #000080, 4px 4px 0 #00ffff;
  -webkit-text-stroke:1px #000000;
  background:#000080;
  border:3px outset #c0c0c0;
}
/* the mandatory "welcome to my homepage" ticker */
#header::after{
  content:"*** Welcome to my Home Page! *** This page is under construction *** Best viewed in Netscape Navigator 3.0 at 800x600 ***";
  display:block;
  margin-top:6px;
  font-family:"Courier New",Courier,monospace;
  font-size:12px;
  font-weight:bold;
  color:#00ff00;
  background:#000000;
  border:2px inset #808080;
  padding:2px 0;
  white-space:nowrap;
  overflow:hidden;
  text-align:left;
}
/* fake <marquee> */
#header::after{
  animation:marquee 28s linear infinite;
}
@keyframes marquee{
  0%{text-indent:100%}
  100%{text-indent:-115%}
}
#content{
  background:#c0c0c0;
  color:#000000;
  border:4px ridge #808080;
  border-top:0;
  border-bottom:0;
  padding:8px 14px 14px;
}
#footer{
  background:#c0c0c0;
  color:#000000;
  border:4px ridge #808080;
  border-top:0;
  padding:8px 14px;
  text-align:center;
  font-size:12px;
  font-family:"Courier New",Courier,monospace;
}
#footer::before{
  content:"";
  display:block;
  height:6px;
  margin-bottom:8px;
  background:repeating-linear-gradient(90deg,#ff0000 0 12px,#ffff00 12px 24px,#00ff00 24px 36px,#00ffff 36px 48px,#0000ff 48px 60px,#ff00ff 60px 72px);
  border:1px solid #000000;
}
#footer::after{
  content:"(C) 1976-Today Anthony Hu. All Rights Reserved. This page is Y2K compliant.";
  display:block;
  margin-top:6px;
  color:#800000;
}

/* --- headings: Comic Sans + Arial bold --- */
h1,h2,h3,h4,h5,h6{margin:0;font-weight:bold}
h2{
  font-family:"Comic Sans MS","Comic Sans",cursive;
  font-size:1.5em;
  color:#0000cc;
  margin:14px 0 6px;
  padding-bottom:2px;
  border-bottom:3px double #0000cc;
}
h3{
  font-family:Arial,Helvetica,sans-serif;
  font-size:1.2em;
  color:#800080;
  margin:10px 0 4px;
}
h3::before{content:"\25BA\00a0";color:#ff0000}
h4,h5,h6{font-family:Arial,Helvetica,sans-serif;color:#008000;margin:8px 0 4px}
h2>a.link,h3>a.link{color:inherit !important;text-decoration:none}

/* --- body text --- */
p{margin:0 0 10px}
.paragraph>.title,.imageblock>.title,.listingblock>.title,table.tableblock>.title{
  font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:.9em;color:#800000;margin-bottom:2px
}
ul,ol{margin:0 0 10px 0;padding-left:28px}
li{margin:2px 0}
ul{list-style:square}
li>p{margin:0}
em{color:#000080}
strong{color:#800000}

/* --- admonitions (NOTE/TIP): the classic yellow-on-red "attention" box --- */
.admonitionblock{margin:10px 0 14px}
.admonitionblock>table{
  width:100%;
  border:3px outset #c0c0c0;
  border-collapse:separate;
  background:#ffffcc;
  color:#000000;
}
.admonitionblock td.icon{
  width:1%;
  white-space:nowrap;
  vertical-align:middle;
  padding:4px 10px;
  background:#ff0000;
  border-right:3px outset #c0c0c0;
}
.admonitionblock td.icon .title{
  font-family:Arial,Helvetica,sans-serif;
  font-weight:bold;
  font-size:.85em;
  color:#ffff00;
  text-transform:uppercase;
  letter-spacing:1px;
  animation:blink 1s steps(1,end) infinite;
}
.admonitionblock td.icon .title::before{content:"!!! "}
.admonitionblock td.icon .title::after{content:" !!!"}
.admonitionblock td.content{padding:6px 10px;font-family:Arial,Helvetica,sans-serif;font-size:.95em}
@keyframes blink{50%{visibility:hidden}}

/* --- tables: the old gray cellspacing look --- */
table.tableblock{
  width:100%;
  border-collapse:separate;
  border-spacing:3px;
  margin:6px 0 12px;
  background:#808080;
  border:3px outset #c0c0c0;
}
table.tableblock td.tableblock,table.tableblock th.tableblock{
  background:#e0e0e0;
  color:#000000;
  padding:6px 8px;
  border:2px inset #ffffff;
  vertical-align:top;
}
table.tableblock th.tableblock{background:#000080;color:#ffffff;font-family:Arial,Helvetica,sans-serif}
table.tableblock td.tableblock a:hover{color:#ffffff;background:#ff0000}
table.tableblock .sect1,table.tableblock .sect2{margin:0}
table.tableblock p:last-child{margin-bottom:0}

/* --- code: green on black, like a real terminal --- */
pre,code,kbd,samp,.listingblock,.literalblock{font-family:"Courier New",Courier,monospace}
code{color:#000080;background:#ffffff;padding:0 2px;border:1px solid #808080;font-size:.95em}
.listingblock,.literalblock{margin:6px 0 12px}
.listingblock pre,.literalblock pre{
  margin:0;
  padding:8px 10px;
  color:#00ff00;
  background:#000000;
  border:3px inset #808080;
  overflow-x:auto;
  white-space:pre;
  font-size:13px;
  line-height:1.3;
}
.listingblock pre code{color:inherit;background:transparent;border:0;padding:0;font-size:inherit}

/* --- images: beveled photo frames --- */
.imageblock{margin:6px 0 12px;text-align:center}
.imageblock.left{float:left;margin:4px 14px 8px 0}
.imageblock.right{float:right;margin:4px 0 8px 14px}
.imageblock img{
  border:4px outset #c0c0c0;
  background:#ffffff;
  padding:3px;
}
.imageblock .title{text-align:center;font-style:italic;font-size:.85em;color:#000080}
.image.right{float:right;margin:0 0 8px 14px}
.image.left{float:left;margin:0 14px 8px 0}

/* --- misc blocks --- */
blockquote,.quoteblock{
  margin:8px 20px;padding:6px 10px;
  border-left:6px ridge #808080;background:#ffffff;color:#000000;font-style:italic
}
hr{border:0;height:4px;background:linear-gradient(90deg,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff);margin:12px 0}
.sect1{clear:both}
.sect1+.sect1{margin-top:8px;padding-top:8px;border-top:2px groove #ffffff}
#toc{background:#ffffcc;border:3px outset #c0c0c0;padding:6px 10px;margin:8px 0 14px}
#toctitle{font-family:Arial,Helvetica,sans-serif;font-weight:bold;color:#800000}
video{max-width:100%;border:3px inset #808080}

/* --- 800x600 was the resolution, but be kind to phones --- */
@media all and (max-width:600px){
  body{margin:4px;font-size:15px}
  #header h1{font-size:1.8em}
  #header::after,#footer::after{white-space:normal;font-size:11px}
  table.tableblock,table.tableblock tbody,table.tableblock tr,table.tableblock td.tableblock{display:block;width:auto !important}
  table.tableblock colgroup{display:none}
  .imageblock.left,.imageblock.right,.image.left,.image.right{float:none;margin:6px 0}
}