diff --git a/css/98.css b/css/98.css new file mode 100644 index 0000000..33b80ed --- /dev/null +++ b/css/98.css @@ -0,0 +1,154 @@ +/* Thanks to the 98.css project */ + +@font-face { + font-family: "Pixelated MS Sans Serif"; + src: url("https://unpkg.com/98.css/fonts/converted/ms_sans_serif.woff") format("woff"); + src: url("https://unpkg.com/98.css/fonts/converted/ms_sans_serif.woff2") format("woff2"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Pixelated MS Sans Serif"; + src: url("https://unpkg.com/98.css/fonts/converted/ms_sans_serif_bold.woff") format("woff"); + src: url("https://unpkg.com/98.css/fonts/converted/ms_sans_serif_bold.woff2") format("woff2"); + font-weight: bold; + font-style: normal; +} + +html, body { + margin: 0px 5px 5px 5px; + background-color: #008080; + font-family: "Pixelated MS Sans Serif", Arial, sans-serif; + -webkit-font-smoothing: none; + font-size: 11px; +} +body { + margin: auto; + width: 728px; +} +@media screen and (max-width: 728px) { + body { + width: 100%; + } +} +div.window-bar { + background: linear-gradient(90deg,navy,#1084d0); + color: #ffffff; + /*padding: 2px 8px 2px 8px; + border-top: 2px solid #00000000;*/ + padding: 3px 2px 3px 3px; +} +div.window { + background-color: silver; + /*border: 1px outset #ffffff; + box-shadow: 1px 1px #000000;*/ + margin-top: 10px; + margin-bottom: 10px; + box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf; + padding: 3px; +} +div.window-content { + padding: 15px; +} +.post-date:before { + content: " - "; +} +img.pfp { + float: left; + padding: 2px; + box-shadow: inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a; + margin-right: 15px; + display: block; +} +div.bio { + grid-area: bio; +} +.clearfix::after { + content: ""; + clear: both; + display: table; +} +hr { + border: none; + border-bottom: 1px solid #808080; +} +footer { + text-align: center; +} +a.options { + text-decoration: none; +} +a.options:visited { + color: #0000ee; +} +.monospace { + font-family: monospace; +} +img.mood { + vertical-align: middle; +} +div.hidden-info { + display: none; + font-family: monospace; +} +label.show-info { + color: #0000ee; + cursor: pointer; +} +label.show-info:active { + color: #ff0000; +} +input.show-info:checked ~ div.hidden-info { + display: flex; +} +pre.hidden-info { + margin: 5px 0px 0px 0px; +} +div.grid-container { + display: grid; + grid-template-columns: auto auto auto; +} +div.bio-grid-container { + display: grid; + /*grid-template-columns: 98px auto auto;*/ + grid-template-areas: + 'pfp bio'; +} +pre { + white-space: pre-wrap; + word-break: break-word; +} +input, textarea { + font-family: "Pixelated MS Sans Serif", Arial, sans-serif; + font-size: 11px; +} +input[type="text"], input[type="password"] { + box-shadow: inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a; + height: 15px; + line-height: 2; + padding: 3px 4px; + background-color: #fff; + border: none; + width: 50%; +} +textarea { + box-shadow: inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a; + padding: 3px 4px; + background-color: #fff; + border: none; +} +button, input[type="reset"], input[type="submit"] { + background: silver; + box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf; + border: none; + border-radius: 0; + box-sizing: border-box; + min-height: 23px; + min-width: 75px; + padding: 0 12px; +} +button:active, input[type="reset"]:active, input[type="submit"]:active { + box-shadow: inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey; + padding: 2px 11px 0 13px; +}