Plume/assets/themes/default/_article.scss
2023-04-16 16:10:54 +09:00

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;
}
}
}