convert into Hugo module theme

This commit is contained in:
Ben Goldsworthy 2025-01-04 20:22:41 +01:00
parent b07a2a6cf5
commit 04abc92ae5
Signed by: Rumperuu
SSH key fingerprint: SHA256:e5XfzNOr9UvWpEzyLfw0GtTMZWIFh3NmxH+/qQIi3xE
98 changed files with 2137 additions and 15971 deletions

19
.gitignore vendored
View file

@ -1,19 +0,0 @@
# ---> Hugo
# Generated files by hugo
/public/
/resources/_gen/
/assets/jsconfig.json
hugo_stats.json
# Executable may be added to repository
hugo.exe
hugo.darwin
hugo.linux
# Temporary lock file while building
/.hugo_build.lock
# TEMP - until I figure out licensing
/js/
/css/openlayers.css
/css/leaflet.css

View file

@ -0,0 +1,13 @@
@mixin mq($width, $type: min) {
@if map_has_key($breakpoints, $width) {
$width: map_get($breakpoints, $width);
@if $type == max {
$width: $width - 1px;
}
@media only screen and (#{$type}-width: $width) {
@content;
}
}
}

View file

@ -0,0 +1,20 @@
// Colours
$dark: #020202;
$light: #fffff0;
// Fonts
$default-font: "Domitian", "Palatino Linotype", "Book Antiqua", palatino,
garamond, serif;
$code-font: "Input Mono", "Lucida Console", monaco, monospace;
// Breakpoints
$breakpoints: (
"small": 480px,
"medium": 768px,
"large": 1248px,
);
// Old Site Versions
$ohwhatohjeez: #ff8900;
$oldphaloskepsis: #003d52;
$omphaloskepsis: #fffff0;

View file

@ -0,0 +1,352 @@
/*
* Fonts
*/
/*
* Commented out until I decide to buy a licence for Input Mono.
*
* @font-face {
* font-family: "Input Mono";
* src: url(/fonts/InputMono-Regular.ttf);
* }
*/
@font-face {
font-family: Domitian;
src: url("/fonts/Domitian-Roman.woff2") format("woff2");
}
@font-face {
font-family: Domitian;
src: url("/fonts/Domitian-Bold.woff2") format("woff2");
font-weight: bold;
}
@font-face {
font-family: Domitian;
src: url("/fonts/Domitian-Italic.woff2") format("woff2");
font-style: italic;
}
@font-face {
font-family: Domitian;
src: url("/fonts/Domitian-BoldItalic.woff2") format("woff2");
font-weight: bold;
font-style: italic;
}
/*
* Base
*/
html {
font-size: 16px;
color: $dark;
background-color: $light;
font-family: $default-font;
font-variant-numeric: 'oldstyle-nums slashed-zero';
writing-mode: horizontal-tb;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
margin: 0;
}
a {
text-decoration-skip-ink: auto;
color: $dark;
text-decoration: underline;
opacity: 0.8;
&:hover {
text-decoration: none;
opacity: 1;
}
}
/*
* Quotations
*/
q:lang(en) {
quotes: "" "" "" "";
}
/*
* Citations
*/
// Legacy citations
cite,
cite.book,
cite.film,
cite.tv-show,
cite.comic,
cite.podcast,
cite.album,
cite.report {
font-style: italic;
}
cite.book--proper-noun {
font-style: inherit;
}
cite.legislation,
cite.smallcite,
cite.comic-strip,
cite.short-story,
cite.article,
cite.episode,
cite.video,
cite.chapter,
cite.poem,
cite.software,
cite.website,
cite.campaign,
cite.song,
cite.speech,
cite.course,
cite.presentation {
font-style: normal;
}
cite.smallcite::before,
cite.article::before,
cite.comic-strip::before,
cite.short-story::before,
cite.episode::before,
cite.video::before,
cite.chapter::before,
cite.song::before,
cite.poem::before,
cite.campaign::before,
cite.speech::before,
cite.course::before,
cite.presentation::before {
content: "";
}
cite.smallcite::after,
cite.article::after,
cite.comic-strip::after,
cite.short-story::after,
cite.episode::after,
cite.video::after,
cite.chapter::after,
cite.song::after,
cite.poem::after,
cite.campaign::after,
cite.speech::after,
cite.course::after,
cite.presentation::after {
content: "";
}
cite.article--shortcite::before,
cite.article--shortcite::after {
content: none;
}
// Schema.org citations
cite,
.cite {
font-style: italic;
&[itemtype$="Code"],
&[itemtype$="SocialMediaPosting"],
&[itemtype$="SoftwareApplication"],
&[itemtype$="WebApplication"],
&[itemtype$="MobileApplication"],
&[itemtype$="WebSite"],
&[itemtype$="WebContent"],
&[itemtype$="Comment"],
&[itemtype$="Statement"],
&[itemtype$="CreativeWorkSeason"],
&[itemtype$="PodcastSeason"],
&[itemtype$="RadioSeason"],
&[itemtype$="TVSeason"],
&[itemtype$="CreativeWorkSeries"],
&[itemtype$="BookSeries"],
&[itemtype$="MovieSeries"],
&[itemtype$="VideoGameSeries"],
&[itemtype$="Legislation"],
&--inherit {
font-style: inherit;
}
&[itemtype$="Article"],
&[itemtype$="BlogPosting"],
&[itemtype$="NewsArticle"],
&[itemtype$="AnalysisNewsArticle"],
&[itemtype$="ReportageNewsArticle"],
&[itemtype$="OpinionNewsArticle"],
&[itemtype$="ScholarlyArticle"],
&[itemtype$="TechArticle"],
&[itemtype$="Event"],
&[itemtype$="Chapter"],
&[itemtype$="Clip"],
&[itemtype$="MovieClip"],
&[itemtype$="RadioClip"],
&[itemtype$="TVClip"],
&[itemtype$="VideoGameClip"],
&[itemtype$="Course"],
&[itemtype$="DigitalDocument"],
&[itemtype$="NoteDigitalDocument"],
&[itemtype$="PresentationDigitalDocument"],
&[itemtype$="TextDigitalDocument"],
&[itemtype$="Episode"],
&[itemtype$="PodcastEpisode"],
&[itemtype$="RadioEpisode"],
&[itemtype$="TVEpisode"],
&[itemtype$="MusicRecording"],
&[itemtype$="MusicComposition"],
&[itemtype$="Message"],
&--enquote {
font-style: inherit;
&::before {
content: "";
}
&::after {
content: "";
}
}
&--normal {
font-style: normal !important;
&::before {
content: none !important;
}
&::after {
content: none !important;
}
}
}
/*
* Code
*/
pre {
padding-inline-start: 1em;
border-inline-start: 2px outset $dark;
display: inline-block;
overflow: hidden;
max-inline-size: 80%;
overflow: scroll;
@include mq("large") {
margin-block: 1em;
margin-inline: 2em;
}
}
code,
samp,
var,
pre {
font-family: $code-font;
font-size: 1em;
}
code,
samp,
var {
background-color: #d1d1d1;
border-radius: 5px;
padding: 2px;
}
samp {
display: block;
inline-size: 80ch;
margin-block: 1em;
margin-inline: 4em;
border-inline-start: 2px solid #ccc;
color: #333;
}
h1 code,
pre code,
pre samp,
pre var,
h1 samp,
h1 var,
.post-title code,
.post-title samp,
.post-title var {
background-color: transparent;
padding: 0;
}
.heading code,
.subheading code {
background-color: transparent;
}
// Source: Stack Overflow Stylesheet
kbd {
padding-block: 0.1em;
padding-inline: 0.6em;
border: 1px solid #ccc;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
background-color: #f7f7f7;
color: #333;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px white inset;
border-radius: 3px;
display: inline-block;
margin-block: 0;
margin-inline: 0.1em;
text-shadow: 0 1px 0 white;
line-height: 1.4;
white-space: nowrap;
}
/*
* Special Text
*/
.pre-nominals,
.post-nominals {
font-size: 0.6em;
font-variant: small-caps;
}
.sic::after {
content: " [sic]";
font-style: italic;
}
.latex {
display: inline !important;
}
.MathJax {
font-size: 1em !important;
}
:where([title]) {
text-decoration: underline;
text-decoration: underline dotted;
&:not(a *) {
cursor: help;
}
}
dfn {
font-variant: small-caps;
}

View file

View file

@ -0,0 +1,81 @@
.blockquote {
padding-inline-start: 1em;
border-inline-start: 2px outset $dark;
display: inline-block;
max-inline-size: 85%;
@media only screen and (min-width: 1024px) {
margin-block: 0.5em;
margin-inline: 1em;
}
&__body {
& p:first-child {
margin-block-start: 0;
}
& p:last-of-type {
margin-block-end: 0.5em;
}
}
&__caption {
display: none;
text-align: end;
font-style: normal;
margin-inline-start: 5em;
inline-size: 80%;
orphans: 3;
&::before {
content: "";
}
}
&--epigram {
font-size: 1.1em;
text-align: center;
display: block;
margin-block: 0;
margin-inline: auto;
border-inline-start: 0;
padding-inline-start: 0;
inline-size: 100%;
padding-block-start: 1em;
padding-block-end: 1.2em;
border-block-start: 2px outset $dark;
border-block-end: 2px inset $dark;
& .blockquote {
&__caption {
display: block;
}
}
}
&--script {
& .blockquote__body {
display: grid;
grid-template-columns: auto 1fr 0.2fr;
padding-block-end: 0.4em;
text-align: start;
& > p::before,
& > p::after {
content: none !important;
}
& > .script-line__character {
margin-inline: 2em 0.5em;
margin-block: 0.5em;
font-style: italic;
}
& > .script-line__text {
grid-column-start: 2;
grid-column-end: 4;
margin: 0.5em;
}
}
}
}

View file

@ -0,0 +1,17 @@
.label--button {
cursor: pointer;
display: block;
inline-size: fit-content;
margin-inline: auto;
}
.button {
border: 2px solid $dark;
background-color: $light;
padding: 0.4em 1em;
cursor: pointer;
&:hover {
box-shadow: 2px 2px gray;
}
}

View file

@ -0,0 +1,22 @@
.chart-container {
position: relative;
margin-inline: auto;
block-size: 50vh;
inline-size: 95vw;
display: flex;
justify-content: center;
@media (orientation: landscape) {
block-size: 75vh;
inline-size: 95vw;
}
@include mq("large") {
block-size: 50vh;
inline-size: 50vw;
}
& + .chart-container {
margin-block-start: 1em;
}
}

View file

@ -0,0 +1,35 @@
.comment {
&__header {
}
&__author {
display: inline;
font-weight: bold;
margin-inline-end: 0.5em;
}
&__publish-date {
display: inline;
font-style: italic;
}
&__source {
font-style: italic;
font-size: 0.8em;
}
&__subheading {
font-weight: bold;
margin-block-end: 1em;
margin-block-start: 1em;
}
&__thread,
&__subthread {
list-style: none;
margin-block-start: 1em;
padding-inline-start: 1em;
border-inline-start: 1px dotted $dark;
margin-inline-start: 0;
}
}

View file

@ -0,0 +1,5 @@
details {
& summary {
cursor: pointer;
}
}

View file

@ -0,0 +1,55 @@
.figure {
inline-size: fit-content;
margin: 16px auto;
&__caption {
block-size: auto;
margin: auto;
text-align: center;
&--no-height {
height: 0;
}
& .figcaption {
&__caption {
font-size: 0.9em;
font-style: italic;
}
&__title {
font-size: 0.95em;
font-weight: bold;
}
&__attr {
background-color: $dark;
font-size: 0.7em;
color: $light;
inline-size: fit-content;
inset-block-start: -2em;
position: relative;
padding: 0.2em 0.5em;
opacity: 0.8;
margin: 0 auto;
}
&__attr + .figcaption__caption {
margin-block-start: -0.5em;
}
&__full-size-link {
font-size: 0.6em;
padding-inline-start: 1em;
&::before {
content: "[";
}
&::after {
content: "]";
}
}
}
}
}

View file

@ -0,0 +1,12 @@
.gallery {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
grid-template-rows: 1fr auto;
overflow-inline: scroll;
&__caption {
grid-column-end: -1;
grid-column-start: 1;
}
}

View file

@ -0,0 +1,10 @@
.feed-icon {
display: inline-block;
block-size: 1em;
inline-size: 1em;
margin-block-end: 0.2em;
}
.site-header__icons a {
text-decoration: none;
}

View file

@ -0,0 +1,109 @@
.link--tile {
text-decoration: none;
box-sizing: border-box;
border: 2px solid transparent;
&:hover {
border-color: $dark;
}
}
.site-container--section .item-tile.lazy {
background-image: none !important;
}
.item-tile {
display: grid;
min-block-size: 180px;
grid-template-columns: 5% auto 5%;
grid-template-rows: 2.5% auto 2.5%;
grid-template-areas:
". . ."
". tile-details ."
". . .";
background-size: cover;
background-repeat: no-repeat;
background-position: center;
word-break: break-word;
@media (prefers-reduced-data: reduce) {
background: none !important;
}
&__header {
text-align: center;
background-color: $dark;
opacity: 0.9;
display: grid;
grid-area: tile-details;
grid-template-columns: 5px auto 5px;
grid-template-rows: 0 1.8em auto auto;
grid-template-areas:
". . ."
". banner ."
". tile-title ."
". tile-subtitle .";
}
&--heading {
font-size: 3em;
& .item-tile__header,
& .item-tile__redacted {
opacity: 1;
grid-template-rows: auto;
grid-template-areas: ". tile-title .";
}
}
&--ohwhatohjeez {
border: 2px solid $ohwhatohjeez;
}
&--oldphaloskepsis {
border: 2px solid $oldphaloskepsis;
}
&--omphaloskepsis {
border: 2px solid $omphaloskepsis;
}
&__banner {
padding-inline: 0.75em;
grid-area: banner;
inline-size: auto;
margin-inline: auto;
border-start-start-radius: 0;
border-start-end-radius: 0;
border-end-end-radius: 10px;
border-end-start-radius: 10px;
text-align: center;
text-decoration: none !important;
line-height: 1.8em;
background-color: #ebebeb;
}
&__title,
&__subtitle {
color: $light;
margin: 0;
font-weight: normal;
}
&__title {
font-size: 1.4em;
line-height: 1em;
grid-area: tile-title;
align-self: center;
&--long {
font-size: 1em;
}
}
&__subtitle {
font-size: 1em;
grid-area: tile-subtitle;
align-self: start;
}
}

View file

@ -0,0 +1,19 @@
// TODO: remove once replaced in content with figures
img,
video {
max-inline-size: 100%;
block-size: auto;
inline-size: auto;
max-block-size: 50vh;
margin: auto;
display: block;
}
.picture {
display: block;
inline-size: auto;
max-inline-size: 100%;
margin: auto;
block-size: auto;
max-block-size: 50vh;
}

View file

@ -0,0 +1,44 @@
/* TODO: Not currently used */
@media screen and (max-width: 480px) {
.table-scroller {
overflow-inline: auto;
inline-size: 320px;
}
}
table {
border: 1px solid $dark;
margin: auto;
& thead {
background-color: #808080;
color: $light;
z-index: 1;
position: sticky;
vertical-align: middle;
inset-block-start: 0;
max-block-size: 1.8em;
& th {
font-weight: bold;
text-align: start;
padding: 1em;
font-size: 1.4em;
border: 1px solid $dark;
}
}
& tbody {
& tr {
&:nth-child(2n) {
background-color: #DDDDD0;
}
& td {
padding: 0.5em 1em;
border: 1px solid $dark;
}
}
}
}

View file

@ -0,0 +1,3 @@
video {
background-color: black;
}

View file

@ -0,0 +1,23 @@
.site-footer {
grid-area: footer;
display: block;
inline-size: 100%;; /* Overflows right of viewport otherwise */
position: fixed;
inset-block-end: 0;
& p {
text-align: center;
background: $light;
padding: 0.4em;
margin-block-end: unset;
border-block-end: none;
font-size: 1em;
border-block-start: 2px solid black;
@include mq("medium") {
inline-size: fit-content;
margin: auto;
border-inline: 2px solid black;
}
}
}

View file

@ -0,0 +1,42 @@
.site-container {
display: grid;
grid-template-columns: 2.5% 1fr 2.5%;
grid-template-rows: auto 1fr 2.5%;
grid-template-areas:
"header header header"
"page-container page-container page-container"
"footer footer footer";
min-block-size: calc(100vh - 4em);
border-block-start: 0;
@include mq("large") {
margin-block-end: 2em;
grid-template-areas:
"header header header"
". page-container ."
"footer footer footer";
border: 2px solid black;
margin-inline: 2em;
}
&--homepage {
align-items: center;
grid-template-rows: auto 2.5%;
grid-template-areas:
"page-container page-container page-container"
"footer footer footer";
margin: 2em;
@include mq("large") {
border: 2px solid black;
grid-template-areas:
". page-container ."
"footer footer footer";
}
}
&--list,
&--section {
align-items: center;
}
}

View file

@ -0,0 +1,89 @@
.site-header {
display: grid;
grid-area: header;
grid-gap: 0;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto;
grid-template-areas:
"header-title"
"header-tagline"
"header-icons"
"header-nav";
inset-block-start: 0;
inset-inline-start: 0;
inline-size: 100%;
text-align: center;
z-index: 1;
&__title,
&__tagline,
&__icons,
&__nav {
background-color: $light;
margin: 0;
}
&__title,
&__tagline,
&__icons {
padding-block: 5px;
padding-inline: 0;
}
&__title {
font-weight: normal;
grid-area: header-title;
}
&__tagline {
grid-area: header-tagline;
}
&__icons {
grid-area: header-icons;
border-block-end: 2px solid $dark;
margin-block-end: 0;
}
&__nav {
grid-area: header-nav;
margin: auto;
inline-size: 100%;
@include mq("large") {
inline-size: 60%;
}
& ul {
margin-block: 0;
& li {
inline-size: calc(100% / 3);
display: block;
float: inline-start;
border-block-end: 2px solid black;
border-inline: 1px solid black;
padding: 0.4em;
background-color: inherit;
&:hover {
background-color: #ffffd0;
}
& a {
inline-size: 100%;
block-size: 100%;
display: block;
}
}
& a:first-child li {
border-inline-start: 2px solid black;
}
& a:last-child li {
border-inline-start: 2px solid black;
}
}
}
}

View file

@ -0,0 +1,7 @@
.site-content {
grid-area: page-container;
@include mq("large") {
margin: 2em;
}
}

View file

31
assets/css/main.scss Normal file
View file

@ -0,0 +1,31 @@
@import "abstracts/variables";
@import "abstracts/mixins";
@import "base/typography";
@import "layout/grid";
@import "layout/header";
@import "layout/footer";
@import "layout/main";
@import "components/audio";
@import "components/blockquote";
@import "components/button";
@import "components/chart";
@import "components/comment";
@import "components/details";
@import "components/figure";
@import "components/gallery";
@import "components/picture";
@import "components/icons";
@import "components/item-tile";
@import "components/table";
@import "components/video";
@import "pages/home";
@import "pages/collection";
@import "pages/single";
@import "pages/organisations-list";
@import "pages/single-organisation";
/* @import "themes/dark"; */

View file

@ -0,0 +1,113 @@
.site-content--section,
.site-content--list {
display: grid;
grid-gap: 10px;
grid-template-columns: 0.2fr 1fr 0.2fr;
grid-template-rows: auto auto auto;
justify-items: center;
align-items: center;
grid-template-areas:
"list-page-header list-page-header list-page-header"
"list-page-grid list-page-grid list-page-grid"
"list-page-footer list-page-footer list-page-footer";
margin-block-start: 5em;
@include mq("large") {
grid-template-areas:
". list-page-header ."
"list-page-grid list-page-grid list-page-grid"
". list-page-footer .";
}
& .site-content__header {
grid-area: list-page-header;
text-align: center;
& .page-header__minor-links {
text-align: center;
overflow: auto;
& ul {
list-style: none;
& li {
float: inline-start;
margin-block: 0;
margin-inline: 1em;
& * {
display: inline-block;
}
}
}
& .minor-links {
&__categories {
inline-size: fit-content;
margin: auto;
display: block;
overflow: auto;
@include mq("large") {
font-size: 1em !important;
}
}
&__years {
display: block;
margin: auto;
inline-size: fit-content;
& li {
inline-size: fit-content;
min-inline-size: fit-content;
padding: 0.5em;
@include mq("large") {
padding: 0;
}
}
}
}
}
}
& .site-content__body {
inline-size: 100%;
display: grid;
grid-gap: 10px;
grid-area: list-page-grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(8, 1fr);
justify-items: stretch;
align-items: stretch;
@include mq("medium") {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
}
@include mq("large") {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
}
&--list {
grid-template-columns: 1fr auto 1fr;
grid-template-rows: auto;
grid-template-areas: ". sections-list .";
}
&--chart {
grid-template-columns: 1em 100% 1fr;
grid-template-rows: auto auto;
grid-template-areas:
". section-chart ."
". section-content .";
}
}
& .site-content__footer {
grid-area: list-page-footer;
}
}

View file

@ -0,0 +1,16 @@
.site-content--homepage {
text-align: center;
& .page-title {
font-size: 2.5em;
margin-block-end: 1em;
@include mq("large") {
font-size: 4em;
}
& span {
display: block !important;
}
}
}

View file

@ -0,0 +1,14 @@
.organisations-table {
grid-column-start: 1;
grid-column-end: 5;
&__items-icon {
text-align: center;
float: inline-start;
padding-inline-end: 1em;
&--none {
opacity: 0.4;
}
}
}

View file

@ -0,0 +1,205 @@
.organisation {
&__description {
margin-block-end: 2em;
details {
margin-inline-start: 1em;
padding-inline-start: 1em;
border-inline-start: 2px solid $dark;
summary {
font-style: italic;
}
}
}
&__timeline {
margin-block-end: 1em;
& #timeline {
clear: both;
& > div > div {
block-size: unset !important;
& > div {
position: unset !important;
inline-size: unset !important;
block-size: unset !important;
& > div:first-of-type {
overflow: unset !important;
position: unset !important;
}
}
}
}
}
&__related {
& .related-section {
text-align: center;
&--list {
text-align: start;
inline-size: 50%;
display: inline-block;
vertical-align: top;
padding-block: 0;
padding-inline: 2em;
}
& .related-items {
margin-block: 2em;
&--tiles {
& .index {
display: grid;
grid-gap: 1em;
grid-template-columns: repeat(4, 1fr);
}
}
&--collapsible {
margin-block-end: 1em;
& summary {
text-align: center;
cursor: pointer;
padding-block-end: 1em;
&::marker {
font-size: 2em;
padding-inline-start: 2em;
display: inline-block;
}
}
}
&--list {
.related-item {
&__expiry,
&__grade {
font-size: 0.8em;
display: block;
margin-inline-start: 0.5em;
}
}
}
&-title {
border-block-end: none;
display: inline-block;
}
& .related-item {
&--expired {
opacity: 0.4;
}
}
}
}
}
}
.organisation-table {
&__logo {
max-inline-size: 5em;
max-block-size: 5em;
}
}
.timeline__legend > fieldset {
inline-size: 45%;
float: inline-start;
text-align: center;
border: none;
& legend {
display: block;
inline-size: 100%;
}
}
#hierarchy ul {
list-style: none;
padding-inline-start: 1em;
& .hierarchy-item {
&::before {
content: "\21B3";
margin-block: 0;
margin-inline: 0.4em;
}
&--current {
font-weight: bold;
}
&--child::before {
content: "\2192";
}
}
}
.timeline__legend {
& .legend__button {
cursor: pointer;
& span {
margin-block: 0;
margin-inline: 1em;
display: inline-block;
&.colour-square {
inline-size: 1em;
block-size: 1em;
border-radius: 2.5px;
border: 1px solid $dark;
&--unpaid-current {
background-color: #bbbbb0;
}
&--unpaid-past {
background-color: #fffff0;
}
&--paid-current {
background-color: #bcbc7e;
}
&--paid-past {
background-color: #fcfca6;
}
}
}
&--disabled {
text-decoration: line-through;
}
}
}
.site-content__body--chart {
& #timeline,
& #map {
inline-size: 100%;
max-inline-size: 100%;
grid-area: section-chart;
}
}
.site-content__body--list {
& .site-content__sections-list {
grid-area: sections-list;
display: block;
list-style: none;
margin: auto;
padding-inline-start: 0;
& li * {
display: inline-block;
}
}
}

View file

@ -0,0 +1,455 @@
.site-content--single {
display: grid;
column-gap: 2em;
grid-template-columns: 0.4fr 0.6fr;
grid-template-rows: auto auto auto auto 60px;
@include mq("large") {
grid-template-rows: auto 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("large") {
border: 2px solid $dark;
grid-column-end: 2;
padding: 2em;
}
}
& .site-content__header {
grid-row-start: 1;
grid-row-end: 2;
overflow: auto;
border-block-end: 2px solid $dark;
margin-block-end: 2em;
padding-inline: 1em;
& .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-block: 0 1em;
margin-inline: auto;
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;
block-size: 40vh;
min-block-size: 380px;
inline-size: 100%;
border: 2px solid $dark;
& .attr {
background-color: $dark;
font-size: 0.7em;
color: $light;
inline-size: fit-content;
position: fixed;
padding-block: 0.2em;
padding-inline: 0.5em;
opacity: 0.8;
margin-block: 0;
margin-inline: auto;
& a {
color: $light;
}
}
}
&__title,
&__subtitle {
border-block-end: 2px inset $dark;
margin-block: 0;