Hugo-theme-stack/assets/scss/partials/layout/article.scss
2020-08-22 13:20:08 +02:00

304 lines
6.2 KiB
SCSS

@import "variables.scss";
.article-page {
.left-sidebar {
@media (max-width: $on-tablet) {
display: none;
}
}
.article-sidebar {
position: sticky;
top: 50px;
flex-shrink: 0;
@media (max-width: $on-tablet) {
display: none;
}
@media (min-width: $on-tablet) {
padding-left: 15px;
margin-left: 1%;
}
@media (min-width: $on-tablet) {
width: 25%;
margin-right: 1%;
}
@media (min-width: $on-desktop) {
width: 30%;
}
}
article {
background: var(--card-background);
border-radius: var(--card-border-radius);
@include box_shadow(1);
overflow: hidden;
&.main-article {
margin-bottom: 40px;
}
.article-header {
.article-image {
img {
height: auto;
width: 100%;
max-height: 500px;
width: 100%;
object-fit: cover;
}
}
.article-details {
padding: 30px 30px 0 30px;
@media (max-width: $on-tablet) {
padding: 20px 20px 0 20px;
}
}
}
.article-content {
margin: 30px 0;
padding: 0 30px;
line-height: 1.75;
color: var(--card-text-color-main);
@media (max-width: $on-tablet) {
padding: 0 20px;
font-size: 1.6rem;
}
img {
max-width: 100%;
height: auto;
}
}
.article-footer {
padding: 30px;
@media (max-width: $on-phone) {
padding: 20px;
}
.article-copyright {
color: var(--card-text-color-tertiary);
text-transform: uppercase;
display: flex;
align-items: center;
svg {
margin-right: 15px;
stroke-width: 1.33;
}
}
}
}
}
#TableOfContents {
background: var(--card-background);
border-radius: var(--card-border-radius);
@include box_shadow(1);
ul {
padding: 0;
margin: 0;
list-style: none;
li {
padding: 15px 30px;
padding-right: 50px;
position: relative;
&:not(:last-of-type) {
border-bottom: 1px solid var(--card-separator-color);
}
a {
color: var(--accent-color);
}
ul {
border-top: 1px solid var(--card-separator-color);
margin-top: 15px;
}
}
}
}
#article-toolbar {
background: var(--card-background);
@include box_shadow(1);
border-radius: var(--card-border-radius);
margin-bottom: 20px;
padding: 15px 20px;
display: flex;
align-items: center;
@media (max-width: $on-phone) {
margin-top: 15px;
}
@media (min-width: $on-tablet) {
display: none;
}
.back-home {
color: var(--card-text-color-secondary);
margin-right: 30px;
display: inline-flex;
align-items: center;
svg {
margin-right: 5px;
}
span {
font-weight: 500;
}
}
}
.related-contents--wrapper {
margin-bottom: 40px;
.widget-title {
//padding-left: 15px;
}
}
.related-contents {
overflow-x: auto;
//padding: 0 15px;
padding-bottom: 15px;
& > .flex {
float: left;
}
article {
margin-right: 15px;
flex-shrink: 0;
overflow: hidden;
@media (max-width: $on-phone) {
height: 250px;
width: 200px;
}
@media (min-width: $on-phone) {
height: 200px;
width: 300px;
}
.article-title {
font-size: 1.8rem;
}
.article-details {
transition: background-color 0.5s ease;
}
}
}
.article-content {
font-family: -apple-system, BlinkMacSystemFont, "noto-sans", "Segoe UI", "Droid Sans", "Helvetica Neue",
"PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
p {
margin: 1.5em 0;
}
figure {
margin: 0 auto;
text-align: center;
figcaption {
font-size: 1.6rem;
}
}
blockquote {
position: relative;
margin: 10px 0;
border-left: 4px solid var(--card-separator-color);
padding-left: 20px;
}
hr {
width: 100px;
margin: 40px 0;
background: var(--card-text-color-tertiary);
height: 4px;
border: 0;
}
code {
color: #808080;
font-size: 0.96em;
background-color: #f9f9f7;
padding: 1px 2px;
border: 1px solid #eee;
border-radius: 3px;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
word-wrap: break-word;
}
.gallery {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
margin: 20px 0;
figure {
margin: 0 5px;
a:after {
display: none;
}
img {
//width: 100%;
}
}
}
pre {
overflow-x: auto;
display: block;
background-color: #fafafa;
color: #999;
font-family: Consolas, monospace;
line-height: 1.428571429;
word-break: break-all;
padding: 20px;
border-radius: var(--card-border-radius);
code {
color: unset;
border: none;
background: none;
padding: 0;
}
}
a {
position: relative;
&:after {
content: "";
display: block;
position: absolute;
bottom: -3px;
left: 0;
width: 100%;
background-color: var(--accent-color);
opacity: 0.2;
height: 3px;
}
}
}