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

898 lines
13 KiB
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;
}
.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;
}
ul.index-list {
margin-left: unset;
list-style: disc;
}
ol {
list-style: decimal;
margin-left: 1.9em;
}
ol.toc,
ol.toc-child {
margin-left: unset;
}
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: #333;
}
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;
}
.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;
}
/* Wrap count in brackets */
span.index-list-count:before {
content: ' (';
}
span.index-list-count:after {
content: ')';
}
/* align badge to the left */
.about-body .article .article-entry img {
margin: auto 0 .5em;
}
/* 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;
}
.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,
table th,
th {
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,
table th,
th {
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;
}
table th,
th {
color: #333;
}
}