133 lines
1.7 KiB
CSS
133 lines
1.7 KiB
CSS
/* || general styles */
|
|
|
|
html {
|
|
font-family: monospace, sans-serif;
|
|
font-weight: thin;
|
|
}
|
|
|
|
#comments > a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
article {
|
|
font-family: monospace, sans-serif;
|
|
color: #fff;
|
|
background:#313543;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"profile header "
|
|
"profile content"
|
|
"footer footer";
|
|
grid-template-columns: 1fr 3fr;
|
|
gap: 0.5em;
|
|
width: 40em;
|
|
padding: 1em 0.25em 0em 0.25em;
|
|
|
|
}
|
|
|
|
article a {
|
|
color: #4d9fdb;
|
|
}
|
|
|
|
|
|
article header {
|
|
width:100%;
|
|
grid-area: header;
|
|
}
|
|
|
|
article header summary {
|
|
font-weight: 300;
|
|
width:100%;
|
|
|
|
}
|
|
|
|
article aside {
|
|
grid-area: profile;
|
|
text-align:center;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
article aside h1 {
|
|
font-size: 1em;
|
|
font-weight: 300;
|
|
padding:0.25em; margin-bottom:0;
|
|
}
|
|
|
|
article aside h2 {
|
|
font-size: 0.8em;
|
|
font-weight: 200;
|
|
padding:0.25em; margin:0;
|
|
}
|
|
|
|
article aside h2 > a {
|
|
color: #fff;
|
|
font-style: oblique;
|
|
}
|
|
|
|
article aside h2 > a:before {
|
|
content: "@";
|
|
}
|
|
|
|
article aside img {
|
|
max-width: 100px;
|
|
}
|
|
|
|
article > aside > div {
|
|
|
|
}
|
|
|
|
article > aside > div > time {
|
|
font-size: 0.7em;
|
|
color:#b4b5ba;
|
|
}
|
|
|
|
article section {
|
|
grid-area: content;
|
|
}
|
|
|
|
article > footer {
|
|
grid-area: footer;
|
|
background: #282c37;
|
|
}
|
|
|
|
article > footer > ul {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"replies favs boosts";
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap:0em;
|
|
}
|
|
|
|
article > footer > ul > li:before {
|
|
padding:0 1em;
|
|
|
|
}
|
|
|
|
article > footer > ul > li.replies {
|
|
grid-area: replies;
|
|
|
|
}
|
|
|
|
article > footer > ul > li.favs {
|
|
grid-area: favs;
|
|
}
|
|
|
|
article > footer > ul > li.boosts {
|
|
grid-area: boosts;
|
|
}
|
|
|
|
|
|
|
|
|
|
strong, b {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.hashtag {
|
|
text-decoration:none;
|
|
}
|
|
|
|
|
|
|