Cataloguer/assets/css/pages/_single.scss

382 lines
7.7 KiB
SCSS
Raw Normal View History

2022-12-17 18:41:44 +00:00
.site-content--single {
display: grid;
column-gap: 2em;
grid-template-columns: 0.4fr 0.6fr;
grid-template-rows: auto auto auto;
& .site-content__header,
& .site-content__footer {
display: grid;
grid-column-start: 1;
grid-column-end: 3;
background-color: $light;
filter: brightness(80%);
@include mq('desktop') {
border: 2px solid $dark;
grid-column-end: 2;
padding: 2em;
}
}
& .site-content__header {
grid-row-start: 1;
grid-row-end: 2;
overflow: auto;
border-bottom: 2px solid $dark;
margin-bottom: 2em;
& .article-header {
text-align: center;
background-color: $dark;
opacity: 0.8;
color: $light;
display: grid;
grid-area: post-header-details;
grid-template-columns: 1fr;
padding: 20px;
grid-template-rows: 1fr auto auto 1fr;
justify-items: center;
align-items: center;
grid-template-areas: "." "post-title" "post-subtitle" ".";
&__series {
margin: 0 auto 1em;
font-size: 1.2em;
}
&__featured-image {
display: grid;
grid-template-columns: 15% 1fr 15%;
grid-template-rows: 20% 1fr 20%;
grid-template-areas: ". . ." ". post-header-details ." ". . .";
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 40vh;
min-height: 380px;
width: 100%;
border: 2px solid $dark;
& .attr {
background-color: $dark;
font-size: 0.7em;
color: $light;
width: fit-content;
position: fixed;
padding: 0.2em 0.5em;
opacity: 0.8;
margin: 0 auto;
& a {
color: $light;
}
}
}
&__title,
&__subtitle {
border-bottom: 2px inset $dark;
margin-top: 0.5em;
margin-bottom: 0.5em;
line-height: 1.2em;
border-bottom: 2px inset $dark;
margin-top: 0.5em;
margin-bottom: 0.5em;
line-height: 1.2em;
}
&__title-wrapper {
display: grid;
grid-area: post-header-details;
background-color: $dark;
opacity: 0.8;
text-align: center;
grid-template-columns: 1fr;
padding: 20px;
grid-template-rows: 1fr auto auto 1fr;
justify-items: center;
align-items: center;
grid-template-areas: "." "post-title" "post-subtitle" ".";
&--no-title {
visibility: hidden;
}
& .article-header__title,
& .article-header__subtitle {
color: $light;
}
& .article-header__title {
grid-area: post-title;
font-weight: bold;
&--long {
font-size: 1.5em;
}
}
& .article-header__subtitle {
grid-area: post-subtitle;
}
}
&__word-count,
&__publish-date,
&__modified-date {
font-size: 1.2em;
margin: 0.2rem auto;
}
&__word-count {
margin-top: 1rem;
}
&__notes,
&__warnings {
width: 90%;
margin: 1.6em auto;
display: block;
padding-right: 1em;
& ul {
list-style: circle;
& li {
margin: 0.5em 0;
}
}
}
&__notes {
background-color: $light;
filter: brightness(70%);
border: 1px solid gray;
}
&__warnings {
border: 4px solid darkred;
background-color: #fc3a3a;
color: $light;
font-weight: 500;
& ul {
list-style: disc;
}
}
&__table-of-contents {
& ul {
list-style-type: arabic;
padding-left: 2em;
}
}
}
}
& .site-content__body {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
@include mq('desktop') {
grid-row-start: 1;
grid-row-end: 4;
grid-column-start: 2;
}
/* Temporary until I've fixed all the figures */
overflow-x: clip;
.heading {
text-align: center;
font-size: 2em;
font-weight: bold;
}
.heading::before,
.heading::after {
content: " ~ ";
}
.subheading {
font-size: 1.6em;
border-bottom: 2px inset $dark;
margin-top: 0.5em;
margin-bottom: 0.5em;
line-height: 1.2em;
text-align: center;
&__subtitle {
font-size: 1em;
border-bottom: 1px dashed $dark;
margin-top: 0;
margin-bottom: 1em;
padding-bottom: 0.5em;
line-height: 1em;
text-align: center;
font-weight: bold;
width: fit-content;
margin: auto;
padding: 0 3em 0.4em;
}
}
blockquote {
padding-left: 1em;
border-left: 2px outset $dark;
display: inline-block;
max-width: 85%;
& footer {
text-align: right;
font-style: normal;
display: inline-block;
margin-left: 5em;
&::before {
content: "";
}
}
&:first-child {
font-size: 1.2em;
text-align: center;
display: block;
margin: 0 auto;
border-left: 0;
padding-left: 0;
width: 100%;
padding-top: 1em;
padding-bottom: 1.2em;
border-top: 2px outset $dark;
border-bottom: 2px inset $dark;
}
& p:first-child {
margin-top: 0;
}
& p:last-of-type {
margin-bottom: 0.5em;
}
&.script {
display: grid;
grid-template-columns: auto 1fr 0.2fr;
padding-bottom: 0.4em;
text-align: left;
& > p::before,
& > p::after {
content: none !important;
}
& > .script-line__character {
grid-column: 1;
margin: 0.5em 2em 0.5em 0.5em;
font-style: italic;
}
& > .script-line__text {
grid-column-start: 2;
grid-column-end: 4;
margin: 0.5em;
}
& footer {
grid-column-start: 1;
grid-column-end: 3;
}
}
}
@media only screen and (min-width: 1024px) {
blockquote {
margin: 1em 2em;
}
}
/* TODO: remove once replaced in content with figures */
img,
video {
max-width: 100%;
height: auto;
width: auto;
max-height: 50vh;
margin: auto;
display: block;
}
.figure {
margin: 16px auto;
width: fit-content;
&__image {
display: block;
width: auto;
max-width: 100%;
margin: auto;
height: auto;
max-height: 50vh;
}
&__caption {
height: auto;
margin: auto;
&--no-height {
height: 0;
}
& .figcaption {
&__caption {
font-size: 0.9em;
font-style: italic;
text-align: center;
}
&__attr {
background-color: $dark;
font-size: 0.7em;
color: $light;
width: fit-content;
top: -2em;
position: relative;
padding: 0.2em 0.5em;
opacity: 0.8;
margin: 0 auto;
}
&__attr + .figcaption__caption {
margin-top: -0.5em;
}
}
}
}
}
& .site-content__footer {
grid-row-start: 3;
grid-row-end: 4;
border-top: 2px solid $dark;
@include mq('desktop') {
margin-bottom: 2em;
grid-row-start: 2;
grid-row-end: 3;
}
& h2 {
margin: 1rem 0;
}
& ul {
margin: 0;
}
#mapdiv {
border: 2px solid $dark;
}
}
}