diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/main.css | 325 |
1 files changed, 325 insertions, 0 deletions
diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..a0aab85 --- /dev/null +++ b/css/main.css @@ -0,0 +1,325 @@ +/*! minireset.css v0.0.5 | MIT License | github.com/jgthms/minireset.css */ +blockquote, body, dd, dl, dt, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, html, iframe, legend, li, ol, p, pre, textarea, ul { + margin: 0; + padding: 0; +} + +h1, h2, h3, h4, h5, h6 { + font-size: 100%; + font-weight: 400; +} + +ul { + list-style: none; +} + +button, input, select, textarea { + margin: 0; +} + +html { + box-sizing: border-box; +} + +*, +:after, + +:before { + box-sizing: inherit; +} + +img, video { + height: auto; + max-width: 100%; +} + +iframe { + border: 0; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, th { + padding: 0; + text-align: left; +} + +/*! veil.netlify.com/main.css | 0BSD | github.com/s1nical/veil */ +:root { + --black: #000; + --red: #a00; + --green: #0a0; + --yellow: #a50; + --blue: #00a; + --magenta: #a0a; + --cyan: #0aa; + --white: #aaa; + --bright-black: #555; + --bright-red: #f55; + --bright-green: #5f5; + --bright-yellow: #ff5; + --bright-blue: #55f; + --bright-magenta: #f5f; + --bright-cyan: #5ff; + --bright-white: #fff; + --text-color: var(--white); + --text-color-strong: var(--bright-white); + --background-color: var(--black); + --link-color: var(--magenta); + --link-color-hover: var(--bright-magenta); + --header-color: var(--bright-cyan); + --snippet-color: var(--yellow); + --input-color: var(--black); + --input-background-color: var(--bright-white); + --input-color-active: var(--black); + --input-border-color-active: var(--link-color-hover); + --page-width: 84ch; +} + +@font-face { + font-family: IBM VGA8; + src: url(Px437_IBM_VGA8.ttf); +} + +* { + font-family: IBM VGA8, Menlo, Consolas, Roboto Mono, "Ubuntu Monospace", Noto Mono, Oxygen Mono, Liberation Mono, monospace; +} + +:root { + font-size: 16px; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.embed { + border: 4px double #fff; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} + +.embed .container { + padding: 1em 2ch; +} + +.ring-nav { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +html { + width: 100%; + height: 100%; +} + +:root { + color: #aaa; + color: var(--text-color); + background: #000; + background: var(--background-color); +} + +.site { + padding: 1em 1ch; +} + +.site .container { + max-width: 84ch; + max-width: var(--page-width); + margin: 0 auto; +} + +.center-block { + padding-left: 2ch; + padding-right: 2ch; + max-width: 72ch; + max-width: calc(var(--page-width) - 12ch); + margin-left: auto; + margin-right: auto; +} + +.section-head, blockquote, footer, form, header, label, p, pre, ul { + display: block; + margin-bottom: 1em; +} + +section { + margin-bottom: 2em; +} + +*>:last-child { + margin-bottom: 0; +} + +ul { + list-style-type: none; + margin-left: 2ch; +} + +ul li:before { + content: "♦ "; +} + +h1, h2 { + color: #5ff; + color: var(--header-color); +} + +h1 { + white-space: nowrap; +} + +.title-item, h1 { + display: inline-block; +} + +.header-colon { + color: #aaa; + color: var(--text-color); + text-decoration: none; +} + +.section-head { + display: block; + width: 100%; + border-bottom: 1px solid #5ff; + border-bottom: 1px solid var(--header-color); + padding-bottom: .5em; +} + +footer { + border-top: 1px solid #5ff; + border-top: 1px solid var(--header-color); + padding-top: .5em; +} + +.members-title, footer { + display: flex; + justify-content: space-between; +} + +.members-title { + flex-wrap: wrap; +} + +.members-list { + list-style: none; + margin-left: 0; +} + +.members-list li { + color: #a0a; + color: var(--link-color); +} + +.members-list li:before { + content: "» "; +} + +a[href] { + color: #a0a; + color: var(--link-color); + text-decoration: none; +} + +a[href]:focus, a[href]:hover { + color: #f5f; + color: var(--link-color-hover); + text-decoration: underline; +} + +pre { + word-wrap: break-word; + white-space: pre-wrap; + color: #a50; + color: var(--snippet-color); + text-align: center; +} + +.form-wrap { + display: flex; + margin: 2em auto; + justify-content: center; +} + +form { + display: flex; + flex-direction: column; + align-content: center; +} + +@media (max-width:72ch) { + label { + flex-direction: column; + } +} + +label { + color: #fff; + color: var(--text-color-strong); + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; +} + +button, input[type=text], input[type=url] { + font-size: 1rem; + color: #000; + color: var(--input-color); + background: #fff; + background: var(--input-background-color); + border: 1px solid #000; + border: 1px solid var(--background-color); + outline: none; + box-shadow: none; +} + +input[type=text], input[type=url] { + width: 30ch; + margin-left: 1ch; +} + +input[type=text]:focus, input[type=text]:hover, input[type=url]:focus, input[type=url]:hover { + color: #000; + color: var(--input-color-active); + border: 1px solid #f5f; + border: 1px solid var(--input-border-color-active); +} + +button { + align-self: center; +} + +iframe { + display: block; + margin: auto; +} + +blockquote { + color: #0a0; + color: var(--green); +} + +.quote-attribution { + text-align: right; + white-space: nowrap; +} + +.quote-attribution, .quote-attribution a { + color: #aaa; + color: var(--text-color); +} + +.quote-attribution a:active, .quote-attribution a:hover { + color: #fff; + color: var(--text-color-strong); +}
\ No newline at end of file |