tootkomm/style.css

216 lines
3.0 KiB
CSS
Raw Normal View History

2022-02-11 14:04:23 +01:00
/* || general styles */
html {
2022-02-15 21:25:15 +01:00
font-family: monospace, sans-serif;
font-weight: thin;
2022-02-11 14:04:23 +01:00
}
#comments > a {
text-decoration: none;
}
2022-02-18 22:37:24 +01:00
#comments > header {
display:grid;
grid-template-areas:
"title button";
grid-template-columns: 4fr 1fr;
width:40em;
background: #282c37;
padding: 0.5em 0.25em 0.5em 0.25em;
}
#comments > header > h1 {
grid-area: title;
color: #b4b5ba;
text-shadow:2px 2px #424553;
font-size: 1em;
font-variant:oblique;
font-weight:thin;
padding-left:1em;
}
#comments > header > button {
grid-area:button;
}
time {
display:inline-block;
font-size: 0.7em;
color:#b4b5ba;
}
article {
2022-02-15 21:25:15 +01:00
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;
2022-02-15 21:25:15 +01:00
width: 40em;
padding: 1em 0.25em 0em 0.25em;
}
article a {
color: #4d9fdb;
2022-02-11 14:04:23 +01:00
}
article header {
width:100%;
grid-area: header;
2022-02-17 20:51:26 +01:00
display:grid;
grid-template-areas:
"cw button";
grid-template-columns: 3fr 1fr;
2022-02-11 14:04:23 +01:00
}
article header summary {
2022-02-17 20:51:26 +01:00
grid-area: cw;
font-weight: 300;
width:100%;
2022-02-11 14:04:23 +01:00
}
article header time {
2022-02-17 20:51:26 +01:00
width:100%;
padding-right:1em;
}
2022-02-18 22:37:24 +01:00
header button {
2022-02-17 20:51:26 +01:00
grid-area: button;
width: 2em;
height: 1.5em;
background: #313543;
border:solid thin #b4b5ba;
border-radius: 10px;
color:#b4b5ba;
}
2022-02-18 22:37:24 +01:00
header button.show {
2022-02-17 20:51:26 +01:00
font-size: 2em;
}
2022-02-18 22:37:24 +01:00
header button.show:before {
2022-02-17 20:51:26 +01:00
content: "\1F648";
}
2022-02-18 22:37:24 +01:00
header button.hide {
2022-02-17 20:51:26 +01:00
font-size: 2em;
}
2022-02-18 22:37:24 +01:00
header button.hide:before {
2022-02-17 20:51:26 +01:00
content: "\1F649";
}
article aside {
grid-area: profile;
text-align:center;
2022-02-15 21:25:15 +01:00
overflow-wrap: anywhere;
2022-02-11 14:04:23 +01:00
}
article aside h1 {
2022-02-15 21:25:15 +01:00
font-size: 1em;
font-weight: 300;
2022-02-15 21:25:15 +01:00
padding:0.25em; margin-bottom:0;
}
article aside h2 {
2022-02-15 21:25:15 +01:00
font-size: 0.8em;
font-weight: 200;
2022-02-15 21:25:15 +01:00
padding:0.25em; margin:0;
}
article aside h2 > a {
color: #fff;
font-style: oblique;
}
article aside h2 > a:before {
content: "@";
}
2022-02-11 14:04:23 +01:00
article aside img {
max-width: 100px;
2022-02-11 14:04:23 +01:00
}
2022-02-15 21:25:15 +01:00
article > aside > div {
2022-02-15 21:25:15 +01:00
}
article > aside > div > time {
2022-02-15 21:25:15 +01:00
}
article section {
grid-area: content;
}
2022-02-14 18:47:15 +01:00
article > footer {
grid-area: footer;
2022-02-14 18:47:15 +01:00
background: #282c37;
}
2022-02-14 18:47:15 +01:00
article > footer > ul {
width: 100%;
display: grid;
grid-template-areas:
2022-02-14 18:47:15 +01:00
"replies favs boosts";
grid-template-columns: 1fr 1fr 1fr;
2022-02-17 17:40:43 +01:00
gap:0em;
list-style-type: none;
2022-02-11 14:04:23 +01:00
}
article > footer > ul > li:before {
padding:0 1em;
2022-02-14 18:47:15 +01:00
}
article > footer > ul > li.replies {
grid-area: replies;
2022-02-14 18:47:15 +01:00
2022-02-11 14:04:23 +01:00
}
2022-02-17 17:40:43 +01:00
article > footer > ul > li.replies:before {
content: '\1F4AC';
}
2022-02-14 18:47:15 +01:00
article > footer > ul > li.favs {
grid-area: favs;
2022-02-11 14:04:23 +01:00
}
2022-02-17 17:40:43 +01:00
article > footer > ul > li.favs:before {
content:'\2B50';
}
2022-02-14 18:47:15 +01:00
article > footer > ul > li.boosts {
grid-area: boosts;
}
2022-02-17 17:40:43 +01:00
article > footer > ul > li.boosts:before {
content:'\1F680';
}
strong, b {
font-weight: 300;
}
.hashtag {
text-decoration:none;
}