Plume/static/css/_article.scss
Baptiste Gelez 9e799f2cf2
Use SCSS (#355)
- Use variables
- Split everything in various files

The SCSS is compiled with `cargo build`/`run`

I also fixed a few visual issues.
2018-12-15 22:06:27 +01:00

267 lines
4.4 KiB
SCSS

// Heading
main .article-info {
max-width: 40rem;
margin: 0 auto 3em;
font-size: 0.95em;
font-weight: 400;
.author, .author a {
font-weight: 600;
}
}
// The article itself
main article {
max-width: 40rem;
margin: 2.5em auto;
font-family: $lora;
font-size: 1.2em;
line-height: 1.7em;
a:hover {
text-decoration: underline;
}
img {
display: block;
margin: 3em auto;
max-width: 100%;
}
pre {
padding: 1em;
background: $lightgray;
overflow: auto;
border-radius: 5px;
}
}
// Metadata under the article
main .article-meta, main .article-meta button {
padding: 0;
font-size: 1.1em;
margin-top: 10%;
}
main .article-meta {
> * {
margin: 0 20%;
}
> p {
margin: 2em 20%;
font-size: 0.9em;
}
// Tags
.tags {
list-style: none;
display: inline-block;
padding: 0px;
margin-bottom: 2em;
li {
display: inline-block;
background: $lightgray;
padding: 0px;
margin: 0px 10px 10px 0px;
border-radius: 3px;
transition: all 0.2s ease-in;
a {
display: inline-block;
padding: 10px 20px;
color: $black;
}
&:hover {
background: mix($black, $lightgray, 10%);
}
}
}
// Likes & Boosts
.actions {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.likes, .reshares {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5em 0;
p {
font-size: 1.5em;
display: inline-block;
margin: 0;
}
.action {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
background: none;
color: $black;
border: none;
font-size: 1.1em;
svg.feather {
transition: background 0.1s ease-in;
display: flex;
align-items: center;
justify-content: center;
margin: 0.5em 0;
width: 2.5em;
height: 2.5em;
border-radius: 50%;
}
&.reshared, &.liked {
svg.feather {
color: $white;
font-weight: 900;
}
}
}
}
.likes {
p, .action:hover { color: $red; }
.action svg.feather {
padding: 0.7em;
box-sizing: border-box;
color: $red;
fill: none;
border: solid $red thin;
}
.action:hover svg.feather {
background: transparentize($red, 0.85);
}
.action.liked svg.feather {
background: $red;
fill: currentColor;
}
.action.liked:hover svg.feather {
background: transparentize($red, 0.75)
color: $red;
}
}
.reshares {
p, .action:hover { color: $purple; }
.action svg.feather {
padding: 0.7em;
box-sizing: border-box;
color: $purple;
border: solid $purple thin;
font-weight: 600;
}
.action:hover svg.feather {
background: transparentize($purple, 0.85);
}
.action.reshared svg.feather {
background: $purple;
}
.action.reshared:hover svg.feather {
background: transparentize($purple, 0.75)
color: $purple;
}
}
// Comments
.comments {
margin: 0;
> * {
margin-left: 20%;
margin-right: 20%;
}
h2 {
color: $purple;
font-size: 1.5em;
font-weight: 600;
}
summary {
cursor: pointer;
}
// New comment form
form input[type="submit"] {
font-size: 1em;
}
// Response button
a.button {
display: inline-block;
padding: 0;
background: none;
color: $black;
border: none;
&::before {
color: $purple;
padding-right: 0.5em;
}
&:hover { color: $purple; }
}
.list {
display: grid;
margin: 0 0 -5em;
padding: 0 20%;
background: $lightgray;
}
.comment {
padding: 2em;
font-size: 1em;
border: none;
.author {
display: flex;
flex-direction: row;
align-items: center;
align-content: center;
* {
transition: all 0.1s ease-in;
}
.display-name {
color: $black;
}
&:hover {
.display-name { color: $purple; }
small { opacity: 1; }
}
}
.text {
padding: 1.25em 0;
font-family: $lora;
font-size: 1.1em;
line-height: 1.4em;
text-align: left;
}
}
}
}