526 lines
8.7 KiB
SCSS
526 lines
8.7 KiB
SCSS
/* Heading */
|
|
main header.article {
|
|
overflow: hidden;
|
|
background: $background;
|
|
color: $text-color;
|
|
display: grid;
|
|
background-size: cover;
|
|
background-position: center;
|
|
|
|
&.illustrated {
|
|
min-height: 75vh;
|
|
color: $white;
|
|
|
|
a, a:visited {
|
|
color: $white;
|
|
border-bottom: 1px solid transparent;
|
|
transition: border-bottom-color 0.1s ease-in;
|
|
|
|
&:hover {
|
|
border-bottom-color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > * {
|
|
grid-row: 1;
|
|
grid-column: 1;
|
|
}
|
|
|
|
& > div:not(.shadow) {
|
|
z-index: 3;
|
|
font-family: $lora;
|
|
font-size: 1.2em;
|
|
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
max-width: $article-width;
|
|
margin: 2em auto;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
|
|
h1, .article-info {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
& > div.shadow {
|
|
z-index: 2;
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
background: linear-gradient(180deg, transparent 20vh, $black 80vh);
|
|
}
|
|
|
|
& > img {
|
|
z-index: 1;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
background: $primary;
|
|
}
|
|
}
|
|
|
|
main .article-info {
|
|
margin: 0 auto 3em;
|
|
font-size: 0.95em;
|
|
font-weight: 400;
|
|
|
|
.author, .author a {
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
/* The article itself */
|
|
main article {
|
|
max-width: $article-width;
|
|
margin: 2.5em auto;
|
|
font-family: $lora;
|
|
font-size: 1.2em;
|
|
line-height: 1.7;
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
margin: 3em auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
pre {
|
|
padding: 1em;
|
|
background: $gray;
|
|
overflow: auto;
|
|
}
|
|
|
|
blockquote {
|
|
border-inline-start: 5px solid $gray;
|
|
margin: 1em auto;
|
|
padding: 0em 2em;
|
|
}
|
|
}
|
|
|
|
/* Metadata under the article */
|
|
main .article-meta, main .article-meta button {
|
|
padding: 0;
|
|
font-size: 1.1em;
|
|
margin-top: 10%;
|
|
}
|
|
|
|
main .article-meta {
|
|
|
|
> * {
|
|
margin: $margin;
|
|
}
|
|
|
|
> .banner {
|
|
margin: 3em 0;
|
|
& > * {
|
|
margin: $margin;
|
|
}
|
|
}
|
|
|
|
> p {
|
|
margin: 2em $horizontal-margin;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* Article Tags */
|
|
.tags {
|
|
list-style: none;
|
|
padding: 0px;
|
|
max-width: none;
|
|
flex: 20;
|
|
|
|
li {
|
|
display: inline-block;
|
|
padding: 0px;
|
|
margin: 0px 10px 10px 0px;
|
|
transition: all 0.2s ease-in;
|
|
border: 1px solid $primary;
|
|
|
|
a {
|
|
display: inline-block;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
&:hover {
|
|
background: transparentize($primary, 0.9);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 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: $text-color;
|
|
border: none;
|
|
font-size: 1.1em;
|
|
cursor: pointer;
|
|
|
|
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: $background;
|
|
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: $primary; }
|
|
|
|
.action svg.feather {
|
|
padding: 0.7em;
|
|
box-sizing: border-box;
|
|
color: $primary;
|
|
border: solid $primary thin;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.action:hover svg.feather {
|
|
background: transparentize($primary, 0.85);
|
|
}
|
|
|
|
.action.reshared svg.feather {
|
|
background: $primary;
|
|
}
|
|
.action.reshared:hover svg.feather {
|
|
background: transparentize($primary, 0.75);
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
/* Comments */
|
|
.comments {
|
|
margin: 0 $horizontal-margin;
|
|
|
|
h2 {
|
|
color: $primary;
|
|
font-size: 1.5em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
summary {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* New comment form */
|
|
> form input[type="submit"] {
|
|
font-size: 1em;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
// Respond & delete comment buttons
|
|
a.button, form.inline, form.inline input {
|
|
padding: 0;
|
|
background: none;
|
|
color: $text-color;
|
|
margin-right: 2em;
|
|
font-family: $route159;
|
|
font-weight: normal;
|
|
|
|
&::before {
|
|
color: $primary;
|
|
padding-right: 0.5em;
|
|
}
|
|
|
|
&:hover { color: $primary; }
|
|
}
|
|
|
|
.comment {
|
|
margin: 1em 0;
|
|
font-size: 1em;
|
|
border: none;
|
|
|
|
.content {
|
|
background: $gray;
|
|
margin-top: 2.5em;
|
|
padding: 1em;
|
|
|
|
&::before {
|
|
display: block;
|
|
content: ' ';
|
|
border: 1em solid $gray;
|
|
border-top-color: transparent;
|
|
border-right-color: transparent;
|
|
position: relative;
|
|
top: -2.4em;
|
|
left: -1em;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.dt-published a {
|
|
color: transparentize($text-color, 0.6);
|
|
}
|
|
|
|
.author {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
align-content: center;
|
|
|
|
* {
|
|
transition: all 0.1s ease-in;
|
|
}
|
|
|
|
.display-name {
|
|
color: $text-color;
|
|
}
|
|
|
|
&:hover {
|
|
.display-name { color: $primary; }
|
|
small { opacity: 1; }
|
|
}
|
|
}
|
|
|
|
& > .comment {
|
|
padding-left: 2em;
|
|
}
|
|
|
|
.text {
|
|
padding: 1.25em 0;
|
|
font-family: $lora;
|
|
font-size: 1.1em;
|
|
line-height: 1.4;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#plume-editor {
|
|
header {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
background: transparent;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
button {
|
|
flex: 0 0 10em;
|
|
font-size: 1.25em;
|
|
margin: .5em 0em .5em 1em;
|
|
}
|
|
}
|
|
|
|
& > * {
|
|
min-height: 1em;
|
|
outline: none;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.placeholder {
|
|
color: transparentize($text-color, 0.6);
|
|
}
|
|
|
|
article {
|
|
max-width: none;
|
|
min-height: 80vh;
|
|
}
|
|
}
|
|
|
|
.popup {
|
|
position: fixed;
|
|
top: 15vh;
|
|
bottom: 20vh;
|
|
left: 20vw;
|
|
right: 20vw;
|
|
background: $gray;
|
|
border: 1px solid $primary;
|
|
z-index: 2;
|
|
padding: 2em;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.popup:not(.show), .popup-bg:not(.show) {
|
|
display: none;
|
|
appearance: none;
|
|
}
|
|
|
|
.popup-bg {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
}
|
|
|
|
|
|
/* Content warning */
|
|
.cw-container {
|
|
position: relative;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
|
|
img {
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
.cw-text {
|
|
display: none;
|
|
appearance: none;
|
|
}
|
|
|
|
input[type="checkbox"].cw-checkbox {
|
|
display: none;
|
|
}
|
|
|
|
input:checked ~ .cw-container:before {
|
|
content: " ";
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: rgba(0, 0, 0, 1);
|
|
}
|
|
|
|
input:checked ~ .cw-container > .cw-text {
|
|
display: inline;
|
|
position: absolute;
|
|
color: white;
|
|
width: 100%;
|
|
text-align: center;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
/* Bottom action bar */
|
|
|
|
.bottom-bar {
|
|
z-index: 10;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: $gray;
|
|
margin: 0;
|
|
display: flex;
|
|
|
|
& > div {
|
|
margin: 1em;
|
|
}
|
|
|
|
& > div:nth-child(2) {
|
|
flex: 1;
|
|
display: flex;
|
|
margin: auto $horizontal-margin;
|
|
}
|
|
}
|
|
|
|
/* Footnote related styles */
|
|
.footnote-definition {
|
|
p {
|
|
font-size: smaller;
|
|
/* Make sure the definition is inline with the label-definition */
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
// Small screens
|
|
@media screen and (max-width: 600px) {
|
|
#plume-editor header {
|
|
flex-direction: column-reverse;
|
|
|
|
button {
|
|
flex: 0 0 0;
|
|
}
|
|
}
|
|
|
|
.popup {
|
|
top: 10vh;
|
|
bottom: 10vh;
|
|
left: 1vw;
|
|
right: 1vw;
|
|
}
|
|
|
|
main article {
|
|
margin: 2.5em .5em;
|
|
max-width: none;
|
|
}
|
|
|
|
main .article-meta > *, main .article-meta .comments, main .article-meta > .banner > * {
|
|
margin: 0 5%;
|
|
}
|
|
|
|
.bottom-bar {
|
|
align-items: center;
|
|
& > div:nth-child(2) {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|