tootkomm/style.css

/* || general styles */

html {
    font-family: monospace,  sans-serif;
    font-weight: thin;
}

#comments > a {
    text-decoration: none;
}

#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  {
    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;
    display:grid;
    grid-template-areas:
	"cw button";
    grid-template-columns: 3fr 1fr;

}

article header summary {
    grid-area: cw;
    font-weight: 300;
    width:100%;

}

article header time {
    width:100%;

    padding-right:1em;
}

header button {
    grid-area: button;
    width: 2em;
    height: 1.5em;
    background: #313543;
    border:solid thin #b4b5ba;
    border-radius: 10px;
    
    color:#b4b5ba;    
}

header button.show {
    font-size: 2em;
}

header button.show:before {
    content: "\1F648";
}

header button.hide {
    font-size: 2em;

}

header button.hide:before {
    content: "\1F649";
}


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 {

}

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;
    list-style-type: none;
}

article > footer > ul > li:before {
    padding:0 1em;

}

article > footer > ul > li.replies {
    grid-area: replies;

}

article > footer > ul > li.replies:before {
    content: '\1F4AC';
}

article > footer > ul > li.favs {
    grid-area: favs;
}

article > footer > ul > li.favs:before {
    content:'\2B50';
}

article > footer > ul > li.boosts {
    grid-area: boosts;
}

article > footer > ul > li.boosts:before {
    content:'\1F680';
}



strong, b {
    font-weight: 300;
}

.hashtag {
    text-decoration:none;
}