312 lines
7.1 KiB
CSS
312 lines
7.1 KiB
CSS
@font-face {
|
|
font-family: IBMVGA8;
|
|
src: url("fonts/Web437_IBM_VGA_8x16.woff");
|
|
}
|
|
|
|
:root {
|
|
/* Color palette */
|
|
--color-fg: #d0d0d0;
|
|
--color-bg: #151515;
|
|
--color-cursor: var(--color-fg);
|
|
--color-0: #151515; --color-8: #505050;
|
|
--color-1: #ac4142; --color-9: #ac4142;
|
|
--color-2: #90a959; --color-10: #90a959;
|
|
--color-3: #f4bf75; --color-11: #f4bf75;
|
|
--color-4: #6a9fb5; --color-12: #6a9fb5;
|
|
--color-5: #aa759f; --color-13: #aa759f;
|
|
--color-6: #75b5aa; --color-14: #75b5aa;
|
|
--color-7: #d0d0d0; --color-15: #f5f5f5;
|
|
|
|
/* Font, character sizings and relative paddings */
|
|
--font-family: IBMVGA8, monospace;
|
|
--char-height: 16px;
|
|
--char-width: 8px;
|
|
--padding-1x: var(--char-width);
|
|
--padding-2x: calc(var(--padding-1x) * 2);
|
|
|
|
/* Text settings */
|
|
--text-bold: normal;
|
|
--text-italic: italic;
|
|
|
|
/* Color scheme */
|
|
--color-interactive: var(--color-3);
|
|
--color-interactive-accent: var(--color-11);
|
|
--color-text-emphasize: var(--color-4);
|
|
--color-code: var(--color-2);
|
|
--color-mark: var(--color-5);
|
|
--color-table-heading-bg: var(--color-7);
|
|
--color-table-heading-fg: var(--color-bg);
|
|
--color-border: #000000;
|
|
--color-shadow: rgba(0, 0, 0, .9);
|
|
}
|
|
|
|
/* Defaults, Resets */
|
|
html, body, div, span, hr, p, ul, ol, blockquote, table, tr, td, th, code, pre, h1, h2, h3, h4, h5, h6 {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body, h1, h2, h3, h4, h5, h6, pre, code {
|
|
font-family: var(--font-family);
|
|
font-size: var(--char-height);
|
|
line-height: var(--char-height);
|
|
}
|
|
|
|
.background, .container, .window {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.background, .window {
|
|
position: absolute;
|
|
}
|
|
|
|
.container, .content, .titlebar, header, main, footer, .player {
|
|
position: relative;
|
|
}
|
|
|
|
|
|
/* Structure */
|
|
|
|
.background {
|
|
top:0;
|
|
left:0;
|
|
background-image: url("backgrounds/a17.gif");
|
|
background-position: center center;
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
image-rendering: crisp-edges;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1920px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.window {
|
|
border-radius: 5px 5px 0 0;
|
|
border-top: 1px solid #999;
|
|
background: linear-gradient(180deg, rgb(86, 91, 96) 0%, rgb(56, 62, 73) 18px, rgb(46, 51, 59) 19px);
|
|
padding: 2px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.titlebar {
|
|
color: #fff;
|
|
padding: 6px 3px;
|
|
font-family: "IBM Plex Mono", monospace;
|
|
font-weight: bold;
|
|
font-size: 9pt;
|
|
text-shadow: 1px 2px 0px #000;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.titlebar .btn {
|
|
display: inline-block;
|
|
border-radius: 3px;
|
|
padding: 2px 5px 4px 5px;
|
|
margin: -5px 0 0 3px;
|
|
font-size: 16pt;
|
|
border: 1px solid #ccc;
|
|
background: linear-gradient(135deg, rgba(50,50,50,1) 0%, rgba(78,78,78,1) 28%, rgba(105,105,105,1) 60%);
|
|
}
|
|
|
|
.titlebar .btn.close {
|
|
background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(251, 103, 103) 28%, rgb(253, 29, 29) 60%);
|
|
}
|
|
|
|
.content {
|
|
padding: var(--padding-2x);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
box-sizing: border-box;
|
|
|
|
background-color: var(--color-bg);
|
|
color: var(--color-fg);
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
header, main, footer {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
main {
|
|
margin: var(--padding-2x) 0;
|
|
padding: 0 var(--padding-2x);
|
|
flex: 1 1 auto;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.reader-close {
|
|
float: right;
|
|
}
|
|
|
|
/* Content */
|
|
|
|
a {
|
|
color: var(--color-interactive);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:before { content: '['; }
|
|
a:after { content: ']'; }
|
|
|
|
a:hover, a:active {
|
|
background-color: var(--color-interactive);
|
|
color: var(--color-bg);
|
|
}
|
|
|
|
a.active {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
b:not(#reader b), strong:not(#reader strong) { font-weight: var(--text-bold); }
|
|
i:not(#reader i), em:not(#reader em) { font-style: vaR(--text-italic); }
|
|
b, strong, blockquote, i, em { color: var(--color-text-emphasize); }
|
|
code { font-weight: normal; color: var(--color-code); }
|
|
|
|
h1, h2, h3, h4, h5, h6, p, ul, ol, table, blockquote, hr {
|
|
margin-bottom: var(--padding-2x);
|
|
}
|
|
|
|
.content-tab p:last-child {
|
|
margin-bottom:0;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-weight: normal;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
h1:not(#reader h1):before { content: '# '; }
|
|
h2:not(#reader h2):before { content: '## '; }
|
|
h3:not(#reader h3):before { content: '### '; }
|
|
h4:not(#reader h4):before { content: '#### '; }
|
|
h5:not(#reader h5):before { content: '##### '; }
|
|
h6:not(#reader h6):before { content: '###### '; }
|
|
|
|
mark {
|
|
background-color: var(--color-mark);
|
|
color: var(--color-bg);
|
|
}
|
|
|
|
ul { list-style: none; }
|
|
ul li:before { content: '- '; }
|
|
ol { list-style: decimal outside; }
|
|
|
|
img {
|
|
max-width: 100%;
|
|
max-height: 480px;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
border: none;
|
|
}
|
|
|
|
table tr td { vertical-align: top; }
|
|
table.blog-table tr td:first-child { width: 96px; color: var(--color-4); }
|
|
table.blog-table tr td:nth-child(2) { color: var(--color-2); }
|
|
table.blog-table tr td:last-child { width: 114px; text-align: right; }
|
|
|
|
/* Reader Content */
|
|
|
|
blockquote {
|
|
border-left: 4px solid var(--color-text-emphasize);
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
#reader pre {
|
|
color: var(--color-text-emphasize);
|
|
border-left: 4px solid var(--color-text-emphasize);
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
hr {
|
|
margin: 1rem 0 2rem 0;
|
|
border: none;
|
|
border-top: 1px solid var(--color-fg);
|
|
}
|
|
|
|
#reader p {
|
|
text-align: justify;
|
|
margin: 0 0 1.5rem 0
|
|
}
|
|
|
|
#reader,
|
|
#reader h1, #reader h2, #reader h3,
|
|
#reader h4, #reader h5, #reader h6{
|
|
font-family: "IBM Plex Mono", monospace;
|
|
font-size: .9rem;
|
|
line-height: 1.5rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
#reader h1, #reader h2, #reader h3,
|
|
#reader h4, #reader h5, #reader h6 {
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#reader h1 { font-size: 1.5rem; margin: 1.5rem 0; text-align: center; }
|
|
#reader h1 + p { text-align: center; text-indent: 0; }
|
|
#reader h2 { font-size: 1.1rem; margin: 2rem 0 .9rem 0; }
|
|
#reader h3 { font-size: 1rem; margin: 1.5rem 0 .9rem 0; text-indent: 1rem; }
|
|
#reader h4 { font-size: 1rem; margin: 1rem 0 .4rem 0; }
|
|
#reader h5 { font-size: .9rem; margin: 1rem 0 .4rem 0; }
|
|
#reader h6 { font-size: .75rem; margin: 1rem 0 .4rem 0; }
|
|
|
|
#reader table { margin: 0 0 1.5rem 0; }
|
|
#reader table thead { background-color: var(--color-table-heading-bg); color: var(--color-table-heading-fg); }
|
|
#reader table tbody tr:not(:last-child) { border-bottom: 1px solid var(--color-table-heading-bg); line-height:calc(1.5rem - 1px); }
|
|
|
|
/* Special */
|
|
|
|
#ascii {
|
|
text-align: center;
|
|
}
|
|
|
|
#ascii pre {
|
|
display: inline-block;
|
|
text-align: left;
|
|
}
|
|
|
|
.hide {
|
|
display: none;
|
|
}
|
|
|
|
|
|
@media only screen and (min-width: 864px) {
|
|
.window {
|
|
display: block;
|
|
width: unset;
|
|
height: unset;
|
|
left: 32px;
|
|
bottom: 32px;
|
|
}
|
|
|
|
.content {
|
|
width: 800px;
|
|
height: 592px;
|
|
padding: 16px 16px;
|
|
transition: height .66s ease-out;
|
|
}
|
|
|
|
.content.expand {
|
|
height: calc(100vh - 64px - 32px);
|
|
}
|
|
|
|
#reader {
|
|
width: 40rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
} |