emilyd/moodblog
1
1
Fork 0
Code Issues 6 Pull Requests Packages Projects Releases Activity

add c64 styles

Browse Source
This commit is contained in:
Emily Daemon 2022-11-17 23:28:59 +02:00
parent a9cdb0b260
commit 1a6a92d000
1 changed files with 113 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
css/c64.css Normal file
View File

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