From 1e306b9306a45d53fd55d66235faaf52eb2de97a Mon Sep 17 00:00:00 2001 From: emilyd Date: Sat, 19 Nov 2022 19:16:49 +0200 Subject: [PATCH] move extra styles to here from moodblog --- css/98.css | 154 +++++++++++++++++++++++++++++++++++++++++ css/c64.css | 113 ++++++++++++++++++++++++++++++ css/gameboy.css | 112 ++++++++++++++++++++++++++++++ css/modernio.css | 104 ++++++++++++++++++++++++++++ css/terminal.css | 110 +++++++++++++++++++++++++++++ css/the-papes.css | 127 ++++++++++++++++++++++++++++++++++ css/xp.css | 173 ++++++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 893 insertions(+) create mode 100644 css/98.css create mode 100644 css/c64.css create mode 100644 css/gameboy.css create mode 100644 css/modernio.css create mode 100644 css/terminal.css create mode 100644 css/the-papes.css create mode 100644 css/xp.css 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; +} diff --git a/css/c64.css b/css/c64.css new file mode 100644 index 0000000..b104fe8 --- /dev/null +++ b/css/c64.css @@ -0,0 +1,113 @@ +@font-face {font-family: "Commodore 64"; src: url("//db.onlinewebfonts.com/t/9bc5e6e04b0e1b49df457e90788df794.eot"); src: url("//db.onlinewebfonts.com/t/9bc5e6e04b0e1b49df457e90788df794.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/9bc5e6e04b0e1b49df457e90788df794.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/9bc5e6e04b0e1b49df457e90788df794.woff") format("woff"), url("//db.onlinewebfonts.com/t/9bc5e6e04b0e1b49df457e90788df794.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/9bc5e6e04b0e1b49df457e90788df794.svg#Commodore 64") format("svg"); } + +html, body { + margin: 0px 5px 5px 5px; + background-color: #a397ff; +} +body { + margin: auto; + width: 728px; + font-family: "Commodore 64", monospace; + font-size: 10px; + background-color: #4f44d8; + color: #a397ff; +} +@media screen and (max-width: 728px) { + body { + width: 100%; + } +} +div.window-bar { + /*padding: 2px 8px 2px 8px;*/ + padding: 4px 8px 4px 8px; + color: #4f44d8; + background-color: #a397ff; +} +div.window { + margin-top: 10px; + margin-bottom: 10px; +} +div.window-content { + padding: 15px; +} +.post-date { + float: right; +} +img.pfp { + float: left; + padding: 2px; + margin-right: 15px; + display: block; +} +div.bio { + grid-area: bio; +} +.clearfix::after { + content: ""; + clear: both; + display: table; +} +hr { + border: 0px; + border-bottom: 1px solid #a397ff; +} +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; +} +a, label.show-info { + color: #CB7E75; + cursor: pointer; +} +a, label.show-info:active { + color: #9F4E44; +} +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; + background-color: #4f44d8; + color: #a397ff; + font-family: "Commodore 64", monospace; + font-size: 10px; +} +textarea, input { + color: #4f44d8; + background-color: #a397ff; + border: 1px solid #a397ff; + font-family: "Commodore 64", monospace; + font-size: 10px; +} +input[type=text] { + width: 80%; +} diff --git a/css/gameboy.css b/css/gameboy.css new file mode 100644 index 0000000..da1199c --- /dev/null +++ b/css/gameboy.css @@ -0,0 +1,112 @@ +html, body { + margin: 0px 5px 5px 5px; + background-color: #003f00; + color: #a0cf0a; +} +::selection { + background-color: #2e7320; + color: #a0cf0a; +} +body { + margin: auto; + width: 728px; + font-family: Terminus, monospace; +} +pre, input, textarea { + font-family: Terminus, monospace; +} +input, textarea { + border: 1px solid #a0cf0a; + color: #a0cf0a; + background-color: #003f00; +} +input[readonly="readonly"] { + width: 80%; +} +i { + font-style: normal; + background-color: #a0cf0a; + color: #003f00; +} +@media screen and (max-width: 728px) { + body { + width: 100%; + } +} +div.window-bar { + background-color: #a0cf0a; + color: #003f00; + /*padding: 2px 8px 2px 8px;*/ + padding: 4px 8px 4px 8px; +} +div.window { + background-color: #003f00; + margin-top: 10px; + margin-bottom: 10px; +} +div.window-content { + padding: 15px; + border: 2px solid #a0cf0a; + border-top: 0px; +} +.post-date { + float: right; +} +img.pfp { + float: left; + padding: 2px; + border: 2px solid #a0cf0a; + margin-right: 15px; + display: block; +} +div.bio { + grid-area: bio; +} +.clearfix::after { + content: ""; + clear: both; + display: table; +} +hr { + border: 1px solid #a0cf0a; +} +footer { + text-align: center; +} +a, label.show-info { + color: #a0cf0a; + text-decoration: underline; +} +.monospace { + font-family: monospace; +} +img.mood { + display: none; +} +div.hidden-info { + display: none; + font-family: monospace; +} +label.show-info { + cursor: pointer; +} +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; +} diff --git a/css/modernio.css b/css/modernio.css new file mode 100644 index 0000000..99537e1 --- /dev/null +++ b/css/modernio.css @@ -0,0 +1,104 @@ +html, body { + /*margin: 0px 5px 5px 5px;*/ + background-color: #dddddd; +} +body { + margin: auto; + font-family: Roboto, sans-serif; + width: 60%; +} +div.window-bar { + background-color: #6002ee; + color: #ffffff; + padding: 14px; + position: sticky; + top: 0; +} +div.window { + background-color: #ffffff; + margin: 20px; +} +@media screen and (max-width: 1200px) { + body { + width: 80%; + } +} +@media screen and (max-width: 900px) { + body { + width: 100%; + } +} +div.window-content { + padding: 15px; +} +.post-date { + float: right; +} +img.pfp { + float: left; + padding: 2px; + margin-right: 15px; + display: block; +} +div.bio { + grid-area: bio; +} +.clearfix::after { + content: ""; + clear: both; + display: table; +} +hr { + border: 0; + border-bottom: 1px solid #c0c0c0; +} +footer { + text-align: center; + margin-bottom: 20px; + color: #888888; +} +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; +} +a, label.show-info { + color: #0000ee; + cursor: pointer; +} +a:active, label.show-info:active { + color: #8080ff; +} +input.show-info:checked ~ div.hidden-info { + display: flex; +} +pre.hidden-info { + margin: 5px 0px 0px 0px; + font-family: Roboto, sans-serif; + font-size: 10pt; +} +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; +} diff --git a/css/terminal.css b/css/terminal.css new file mode 100644 index 0000000..7ee768b --- /dev/null +++ b/css/terminal.css @@ -0,0 +1,110 @@ +html, body { + margin: 0px 10px 10px 10px; + color: #00ff00; + background-color: #000000; +} +body { + margin: 0; + width: 728px; + font-family: monospace; +} +@media screen and (max-width: 728px) { + body { + width: 100%; + } +} +div.window-bar { + background-color: #00ff00; + color: #000000; + /*padding: 2px 8px 2px 8px;*/ + padding: 4px 8px 4px 8px; +} +div.window { + margin-top: 10px; + margin-bottom: 10px; +} +div.window-content { + padding: 15px; + border-top: 0px; +} +.post-date { + float: right; +} +img.pfp { + display: none; +} +div.bio { + grid-area: bio; +} +.clearfix::after { + content: ""; + clear: both; + display: table; +} +hr { + border: none; +} +hr:before { + content: "--------------"; + color: #00ff00; +} +footer { + text-align: center; +} +a.options { + text-decoration: none; +} +a.options:visited { + color: #0000ff; +} +.monospace { + font-family: monospace; +} +img.mood { + vertical-align: middle; +} +div.hidden-info { + display: none; + font-family: monospace; +} +a, label.show-info { + text-decoration: underline; + color: #00ff00; + cursor: pointer; +} +a, label.show-info:active { + background-color: #00ff00; + color: #000000; +} +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; +} +img { + display: none; +} +input { + background-color: #000000; + color: #00ff00; + border: 1px solid #00ff00; + font-family: monospace +} +input[type=text] { + width: 60%; +} diff --git a/css/the-papes.css b/css/the-papes.css new file mode 100644 index 0000000..b4607a9 --- /dev/null +++ b/css/the-papes.css @@ -0,0 +1,127 @@ +html, body { + margin: 0; + background-color: #c0c0c0; +} +body { + margin: auto; + width: 1000px; + font-family: serif; +} +div.window-bar { + background: repeating-linear-gradient( + 45deg, + #ffffff 0px, + #ffffff 1px, + #eeeeee 2px, + #ffffff 3px, + #ffffff 4px, + #ffffff 5px, + #eeeeee 6px, + #ffffff 7px, + #ffffff 8px + ); + color: #000000; + /*padding: 2px 8px 2px 8px;*/ + padding: 4px 8px 4px 8px; +} +div.window { + background-color: #eeeeee; + margin: 10px; + margin-left: 260px; +} +div.bio-window { + left: 0; + top: 0; + position: fixed; + width: 250px; + height: 100%; + margin: 0; +} +@media screen and (max-width: 1000px) { + body { + width: 100%; + } + div.bio-window { + position: relative; + width: calc(100% - 20px); + margin: 10px; + } + div.window { + background-color: #eeeeee; + margin: 10px; + } + +} +div.window-content { + padding: 15px; +} +.post-date { + color: #808080; +} +img.pfp { + padding: 2px; + border: 2px solid #000000; + display: block; + margin: auto; +} +div.bio { + grid-area: bio; +} +.clearfix::after { + content: ""; + clear: both; + display: table; +} +hr { + border: 1px solid #000000; +} +footer { + width: 250px; + left: 0; + bottom: 0; + position: fixed; + 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; +} diff --git a/css/xp.css b/css/xp.css new file mode 100644 index 0000000..7043272 --- /dev/null +++ b/css/xp.css @@ -0,0 +1,173 @@ +/* Thanks to the xp.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 { + font-family: "Trebuchet MS", Arial, sans-serif; + background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7); + border-top: 1px solid #0831d9; + border-left: 1px solid #0831d9; + border-right: 1px solid #001ea0; + border-top-left-radius: 7px; + border-top-right-radius: 7px; + color: #ffffff; + font-size: 14px; + text-shadow: 1px 1px #0f1089; + padding: 3px 5px 3px 3px; + font-weight: 700; + margin: 0 auto; +} +div.window { + background-color: #ece9d8; + border-top-left-radius: 7px; + border-top-right-radius: 7px; + box-shadow: inset -1px -1px #00138c,inset 1px 1px #0831d9,inset -2px -2px #001ea0,inset 2px 2px #166aee,inset -3px -3px #003bda,inset 3px 3px #0855dd; + padding: 0 0 3px; + /*border: 1px outset #ffffff; + box-shadow: 1px 1px #000000;*/ + margin-top: 10px; + margin-bottom: 10px; +} +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"] { + font-size: 11px; + box-sizing: border-box; + border: 1px solid #003c74; + background: linear-gradient(180deg,#fff,#ecebe5 86%,#d8d0c4); + box-shadow: none; + border-radius: 3px; + padding: 0 12px; + min-width: 75px; + min-height: 23px; +} +button:hover, input[type="reset"]:hover, input[type="submit"]:hover { + box-shadow: inset -1px 1px #fff0cf,inset 1px 2px #fdd889,inset -2px 2px #fbc761,inset 2px -2px #e5a01a; +} +button:focus, input[type="reset"]:focus, input[type="submit"]:focus { + box-shadow: inset -1px 1px #cee7ff,inset 1px 2px #98b8ea,inset -2px 2px #bcd4f6,inset 1px -1px #89ade4,inset 2px -2px #89ade4; + outline: 1px dotted #000; + outline-offset: -4px; +} +button:active, input[type="reset"]:active, input[type="submit"]:active { + box-shadow: none; + background: linear-gradient(180deg,#cdcac3,#e3e3db 8%,#e5e5de 94%,#f2f2f1); +}