blog/themes/typing/source/css/typing.css

@charset "utf-8";
/* Require postcss-normalize */
@import "sanitize";
@import "sanitize/forms";

html {
  cursor: unset;
  height: 100%;
  line-height: 1.15;
}

body {
  color: #e6e6e6;
  background: black;
  font-family: sans-serif;
  font-size: 1.2em;
  /* https://stackoverflow.com/a/6654996 */
  min-height: 100%;
  line-height: 1.5;
}

/*
 * Restrict sizing to the page width in all browsers (opinionated).
 * sanitize/page
 */
iframe,
img,
input,
select,
textarea {
  height: auto;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: serif;
  font-weight: bold;
  line-height: 1.35;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 1.5em;
  margin: 0.5em 0;
}

h2 {
  font-size: 1.3em;
}

h3 {
  font-size: 1.1em;
}

a {
  color: inherit;
  cursor: pointer;
}

a:active,
a:hover {
  outline-width: 0;
  color: white;
}

a,
a:hover {
  text-decoration: none;
}

button,
input,
select,
textarea {
  font-size: 100%;
  line-height: 1.15;
}

hr {
  background-image: -webkit-linear-gradient(0deg,transparent,#e6e6e6,transparent);
  border: none;
  box-sizing: content-box;
  height: 1px;
  margin-bottom: 1em;
  margin-left: 25%;
  overflow: visible;
  width: 50%;
}

.archive-container hr,
.category-container hr,
.tag-container hr,
.article hr {
  width: 100%;
  margin-left: 0;
}

.home hr {
  margin: 1em auto;
  width: 65%;
}

.article .article-footer,
.article .article-footer hr {
  margin-top: 1em;
}

.header-hr {
  background-image: -webkit-linear-gradient(0deg,#e6e6e6,#e6e6e6,transparent);
}

figcaption,
small {
  font-size: 0.9em;
  color: #888;
}

dl,
form,
hr,
ol,
p,
pre,
table,
ul,
blockquote {
  margin-bottom: 1em;
}

ul {
  margin-left: 1.3em;
  list-style: disc;
}

ol {
  list-style: decimal;
  margin-left: 1.9em;
}

li ol,
li ul,
ol,
ul {
  margin-bottom: 0.8em;
  margin-left: 2em;
}

li ul,
ul {
  list-style: circle;
}

table caption,
table td,
table th,
td,
th {
  border: 1px solid #ddd;
  padding: 0.5em 1em;
}

table th,
th {
  background: #fbfbfb;
}

table thead th,
thead th {
  background: #f1f1f1;
}

em,
caption,
legend {
  font-weight: inherit;
}

.highlight,
code,
kbd,
pre,
samp {
  font-size: 0.9em;
  background: #333;
}

/* Hide post's excerpt in article */
.p-summary {
  display: none;
}

.main-nav-link {
  margin-right: 0.5em;
  color: #cacdd0;
  padding-bottom: 0.5em;
  display: inline-block;
  border: 0;
}

em {
  font-style: italic;
  font-weight: lighter;
}

b,
strong {
  font-weight: 700;
}

blockquote {
  color: #666;
  border-left: 2px solid #666;
  padding-left: 1em;
  margin: 1em 3em 1em -1em;
}

.page-nav {
  margin-top: 2em;
  text-align: center;
}

.footer {
  box-sizing: border-box;
}

.home-footer {
  padding: 3em 0;
}

.archive-footer a,
.archive-footer b,
.archive-footer strong,
.post-footer a,
.post-footer b,
.post-footer strong {
  color: #cacdd0;;
}

.container {
  width: 100%;
}

.copyright,
.footer-content,
.footer-links {
  text-align: center;
  font-size: 0.95em;
  color: #cacdd0;
  max-width: 80ch;
  padding: 0 2ch;
  margin: auto;
}

.copyright li,
.footer-content li,
.footer-links li {
  display: inline-block;
}

.archive-footer,
.post-footer {
  color: #cacdd0;
}

.footer-content {
  margin: 0 auto;
  text-align: left;
}

.footer-links {
  font-size: 0.9em;
  padding: 0;
}

.footer-links a {
  text-decoration: none;
}

.footer-links li {
  margin-right: 1em;
}

.home-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home {
  font-weight: lighter;
  line-height: 1.4;
  text-align: center;
  position: relative;
}

.home a {
  border-bottom: 1px solid #e6e6e6;
}

.home a:hover {
  border-bottom: 1px solid white;
}

.home .content {
  width: 60%;
  position: relative;
  margin: 0 auto;
}

.home li {
  list-style: none;
}

.home .profile {
  width: 100%;
}

.home .profile h1 {
  font-weight: 300;
}

/* https://jrl.ninja/etc/1/ */
.archive-container,
.category-container,
.tag-container {
  position: relative;
  font-size: 1em;
  max-width: 80ch;
  padding: 2ch;
  margin: auto;
}

.archive-container article,
.category-container article,
.tag-container article {
  margin-bottom: 1em;
  line-height: 1em;
}

.archive-container a,
.archive-container a:hover,
.category-container a,
.category-container a:hover,
.tag-container a,
.tag-container a:hover {
  border: 0;
}

.archive-container .header,
.category-container .header,
.tag-container .header,
.article .header {
  font-size: 1.1em;
}

.archive-container .archive-article-header > a,
.archive-container .archive-article-header > h1,
.category-container .archive-article-header > a,
.category-container .archive-article-header > h1,
.tag-container .archive-article-header > a,
.tag-container .archive-article-header > h1 {
  vertical-align: middle;
}

.archive-container .archive-article-header h1,
.category-container .archive-article-header h1,
.tag-container .archive-article-header h1 {
  font-size: 1.2em;
  margin: 0;
}

.archive-container .archive-article-date,
.category-container .archive-article-date,
.tag-container .archive-article-date {
  font-size: 0.8em;
  color: #cacdd0;
}

.archive-container .extend,
.archive-container .page-number,
.category-container .extend,
.category-container .page-number,
.tag-container .extend,
.tag-container .page-number {
  margin-right: 1em;
}

.article {
  max-width: 80ch;
  padding: 2ch;
  margin: auto;
  position: relative;
}

.article .main-nav-link:hover {
  border: 0;
}

.article .caption {
  color: #cacdd0;
  display: block;
  text-align: center;
}

.article .article-entry {
  word-break: break-word;
}

.article .article-entry a {
  border-bottom: 1px solid #1abc9c;
}

.article .article-entry a:hover {
  border-bottom: none;
}

.article .article-entry img {
  display: block;
  margin: auto;
  margin-bottom: 0.5em;
  max-height: 30em;
}

.article .article-entry blockquote footer {
  text-align: center;
  font-size: 80%;
  color: #cacdd0;
}

.article .article-entry blockquote footer cite {
  font-style: italic;
}

.article .article-entry blockquote footer cite a {
  color: #cacdd0;
  border-bottom: 1px solid #eee;
}

.article .article-entry blockquote footer cite:before {
  content: "—";
  padding: 0 0.5em;
}

.article .article-entry blockquote footer strong {
  color: #cacdd0;
  font-weight: 400;
}

.article .article-entry table caption,
.article .article-entry table td,
.article .article-entry table th,
.article .article-entry td,
.article .article-entry th {
  word-break: normal;
}

.article .article-entry .pullquote {
  width: 45%;
  border: 0;
}

.article .article-entry .pullquote.left {
  float: left;
  text-align: left;
}

.article .article-entry .pullquote.right {
  float: right;
  text-align: right;
}

.article .article-entry .video-container {
  position: relative;
  padding-top: 56.25%;
  margin-bottom: 1em;
  height: 0;
  overflow: hidden;
}

.article .article-entry .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
}

.article .article-nav {
  max-width: 100%;
}

.article .article-nav-link-wrap {
  display: inline-block;
  padding: 0 1em;
  width: 49%;
  box-sizing: border-box;
  vertical-align: top;
  border: 0;
}

.article .article-nav-link-wrap strong {
  color: #cacdd0;
}

.article .article-nav-link-wrap:hover {
  border-bottom: 0;
}

.article .article-nav-link-wrap.newer {
  text-align: right;
}

.article .article-nav-link-wrap.older {
  text-align: left;
}

.article .article-meta {
  color: #cacdd0;
  font-size: 0.9em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.article .article-meta .label {
  margin-right: 0.5em;
}

.article .article-meta .article-category,
.article .article-meta .article-tag-list {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.article .article-meta .article-tag-list-item {
  display: inline-block;
  margin-right: 1em;
}

.article .article-meta .article-tag-list-item:before {
  content: "#";
}

.article .article-gallery img {
  width: 100%;
}

.article-type-page .article-footer {
  display: none;
}

table caption,
table td,
td {
  border: 1px solid #ddd;
}

.highlight .line.marked {
  background: #444;
}

.highlight {
  padding: 1em;
  font-size: 0.9em;
  overflow: auto;
  line-height: 1.8;
}

.highlight .gutter pre {
  color: #cacdd0;
  font-size: 0.9em;
}

.article-entry pre code {
  background: 0 0;
  text-shadow: none;
  padding: 0;
}

.highlight pre {
  border: 0;
  margin: 0;
  padding: 0;
}

.highlight table {
  margin: 0;
  width: 100%;
}

.highlight td {
  border: 0;
  padding: 0;
}

pre .comment,
pre .title,
.highlight figcaption {
  color: #8e908c;
}

highlight figcaption a {
  float: right;
}

pre .attribute,
pre .css .class,
pre .css .id,
pre .css .pseudo,
pre .html .doctype,
pre .regexp,
pre .ruby .constant,
pre .tag,
pre .variable,
pre .xml .doctype,
pre .xml .pi,
pre .xml .tag .title {
  color: #c82829;
}

pre .built_in,
pre .constant,
pre .literal,
pre .number,
pre .params,
pre .preprocessor {
  color: #f5871f;
}

pre .class,
pre .css .rules .attribute,
pre .header,
pre .inheritance,
pre .ruby .class .title,
pre .ruby .symbol,
pre .string,
pre .value,
pre .xml .cdata {
  color: #718c00;
}

pre .css .hexcolor {
  color: #3e999f;
}

pre .coffeescript .title,
pre .function,
pre .javascript .title,
pre .perl .sub,
pre .python .decorator,
pre .python .title,
pre .ruby .function .title,
pre .ruby .title .keyword {
  color: #4271ae;
}

pre .javascript .function,
pre .keyword {
  color: #8959a8;
}

/* hide mobile nav menu and its checkbox */
/* when it's not mobile */
.mobile-nav,
#mobile-menu-toggle,
.mobile-nav-link {
  display: none;
}

/* set line-height in /archives page */
.mobile-nav-menu {
  line-height: 1.8;
}

/* overlap other elements */
.mobile-nav-link {
  background: black;
  border: 2px solid #999;
  border-radius: 5px;
  right: 0;
  margin-left: 5px;
  padding: 0.5em;
  position: absolute;
}

.mobile-nav-link-a {
  text-align: center;
}

/* search bar */
.searchContainer {
  border-radius: 5px;
  width: 10em;
  color:#e6e6e6;
  background:#333;
  outline: 0;
  float: right;
  height: 1.8em;
  position: relative;
  margin: auto;
}

/* inline-block to position them in same line */
.searchBox,
.searchBtn{
  display:inline-block;
  color: inherit;
  background: inherit;
}

/* hide the border and fill the height to parent's */
.searchBox {
  border: 0;
  border-radius: 5px;
  height:1.8em;
  width: 85%;
  padding-left: 0.2em;
  box-sizing: border-box;
}

/*
 * Override sanitize/forms
 * to prevent conflict with
 * .searchBox padding-left
 */
input {
  padding: 0;
}

/* highlight the text box when focused */
.searchBox:focus {
  border: 1px solid #1abc9c;
}

/* align the button to center */
.searchBtn {
  width: 10%;
  position: absolute;
  top: 45%;
  transform: translate(30%, -50%);
}

/* fill the svg with parent's font color */
svg {
  fill: currentColor;
}

/* don't underline specific <a> tag */
.no-underline {
  border-bottom: none;
}

/* fill the link icon with link's color */
svg#link {
  fill: #1abc9c;
}

/* don't underline link icon */
.article .article-entry a.headerlink {
  border-bottom: none;
}

/* underline link icon when hover */
.article .article-entry a.headerlink:hover {
  border-bottom: 1px solid #1abc9c;
}

@media (max-width: 768px) {
  body {
    font-size: 1.2em;
  }

  .article-title {
    font-size: 1.8rem;
  }

  /* hide desktop nav */
  .main-nav {
    display: none;
  }

  /* display mobile nav */
  .mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* display links when menu button is clicked */
  /* use grid to display each link in new line */
  #mobile-menu-toggle:checked + .mobile-nav-link {
    display: grid;
  }
}

@media (max-width: 468px) {
  body {
    font-size: 1em;
  }

  .home {
    color: #e6e6e6;
  }

  .home a {
    color: #e6e6e6;
  }

  .archive-container .archive-footer,
  .archive-container .post-footer {
    padding: 1em;
  }

  .archive-container .archive-article-header > a,
  .archive-container .archive-article-header > h1 {
    width: 100%;
  }
}

@media (max-width: 320px) {
  body {
    font-size: 0.9em;
  }

  .article {
    font-size: 1em;
  }

  .archive-container .archive-footer,
  .archive-container .post-footer {
    padding: 1em;
  }

  .footer,
  .footer-content {
    font-size: 0.9em;
  }
}

.copy-button {
  border: 1px solid #999;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.8em;
  line-height: 1em;
  padding: 5px;
  user-select: none;
}

.copy-button:hover {
  background: #e6e6e6;
  color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    background: black;
    color: #e6e6e6;
  }

  a:hover {
    color: white;
  }

  .highlight,
  code,
  kbd,
  pre,
  samp {
    background: #333;
  }

  hr {
    background-image: -webkit-linear-gradient(0deg,transparent,#e6e6e6,transparent);
  }

  .header-hr {
    background-image: -webkit-linear-gradient(0deg,#e6e6e6,#e6e6e6,transparent);
  }

  .copy-button:hover {
    background: #e6e6e6;
    color: black;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background: #f1f1f1;
    color: #333;
  }

  a:hover {
    color: black;
  }

  .highlight,
  code,
  kbd,
  pre,
  samp {
    background: #d8d8d8;
  }

  hr {
    background-image: -webkit-linear-gradient(0deg,transparent,#333,transparent);
  }

  .header-hr {
    background-image: -webkit-linear-gradient(0deg,#333,#333,transparent);
  }

  .copy-button:hover {
    background: #333;
    color: #f1f1f1;
  }
}