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%; +}