@charset "utf-8";

/******************************************************
 *  RUBENERD RUBI THEME                               *
 *  Named for the bishoujo mascot Clara drew for me!  *
 *  And it pre-dates the WordPress 2019 theme, grr!   *
 *                                                    *
 *  Last revised: November 2019                       *
 ******************************************************/



/***** ROOT です**************************************************************/

html, body, h1, h2, h3, form, fieldset, 
#archive ol, #archive ul, #archive li {
  border:0;
  list-style-type:none;
  margin:0;
  padding:0;
}
body {
  background:#ffffff url("rubi@1x.jpg") fixed no-repeat;
  background-position:right 30px top 30px;
  font:1em "Helvetica Neue", "Liberation Sans", Arial, sans-serif;
  height:100%;
  overflow-y:scroll;
  padding:40px 40px 240px 40px;
  width:580px;
}
code, pre {
  font:13px "Liberation Mono", Menlo, Consolas, monospace;
}
h1, h2, h3 { letter-spacing:-1px }
h1 a, h2 a, a:hover { text-decoration:none }
article, figure, footer, header, main, nav, section { display:block }



/***** PALETTE です***********************************************************/

body { color:black } /* https://www.nngroup.com/articles/low-contrast/ */
a { color:#036ad3 }
blockquote { border-left:4px solid #efeffa }
code, pre {
  background:#f3f8fd;
  color:#036ad3;
}
pre { border-left:4px solid #036ad3 }
#site-navigation a, .post-meta, .post-meta a, time { color:#2b9c27 }



/***** ACCESSIBILITY です*****************************************************/

hr {
  display:none;
  visibility:hidden;
}
#skip, #skip:hover, #skip:visited, legend {
  height:1px;
  left:0px;
  overflow:hidden;
  position:absolute;
  top:-1000px;
  width:1px;
}



/*** NAVIGATION です**********************************************************/

#site-navigation { padding-top:20px }
#site-navigation a { margin-right:5px }



/***** POST です**************************************************************/

.post, #bio, #support {
  line-height:24px;
  padding-top:100px;
}
.post h2 { padding-bottom:4px; }
.post h3 { padding-top:20px }
.post-meta, time { font-size:14px; }
.post-meta time::after { content: " ‧ " }



/***** POST CONTENT です******************************************************/

.post img {
  max-width:500px;
  margin-top:5px;
  border-radius:2px;
}
.post pre {
  line-height:18px;
  padding:20px;
  margin:2em 0;
  overflow-x:auto;
}
.post blockquote {
  margin-left:0;
  padding-left:1.2em;
}
table {
  border-collapse:collapse;
  font-size:14px;
  margin:1.4em 0;
}
table th { background:#f3f8fd; }
table th, table td {
  border:1px solid #f3f8fd;
  vertical-align:top;
  padding:0.3em 1em;
}
table code {
  background:transparent;
  font-size:12px;
}
figcaption {
  font-size:14px;
  font-style:italic;
  text-align:center;
}
figure {
  margin-left:0;
  margin-right:0;
  max-width:500px;
}



/***** PODCAST です***********************************************************/

/* Funny story, the podcast used to be on a separate site. I've always had
   problems integrating these posts into the rest of this site here, because
   they all have distinct metadata from regular posts. I think this works
   mostly fine. */

.show-licence, .show-release, .show-subscribe {
  font-size:14px;
  font-style:italic;
  line-height:22px;
}



/***** ARCHIVES です**********************************************************/

.archive-tag li { display: inline }
.archive-tag a {
	white-space:nowrap;
	margin:0;
}
.archive-category li, .archive-location li { list-style-type:circle }
#archive h2, .archive-location li a { text-transform: capitalize; }



/***** PAGINATION です********************************************************/

#pagination {
  font-weight:bold;
  line-height:24px;
  padding-top:95px;
}
#pagination a { font-weight:normal }
#pagination #page-number { font-weight:bold }



/***** FOOTER です************************************************************/

#boots {
    font-size:14px;
    padding-top:70px
}



/***** RETINA です************************************************************/

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 144dpi) {
  body {
    background-image: url("rubi@2x.jpg");
    background-size:190px 559px;
  }
}



/***** SMALL SCREEN です******************************************************/

@media screen and (max-width: 870px) {
  body {
    background-image:none;
    margin:0 auto;
    padding-left:0;
    padding-right:0;
  }
}



/***** CLARA-SIZED SCREEN です************************************************/

@media screen and (max-width: 630px) {
  body {
    padding:30px 15px;
    width:auto;
  }
  .post img, figure {
    max-width:100% !important;
    height:auto !important;
    width:auto !important;
  }
  table, iframe, pre { overflow-x:scroll }
}


/***** EOF です*****/