convert into Hugo module theme
This commit is contained in:
parent
b07a2a6cf5
commit
04abc92ae5
98 changed files with 2137 additions and 15971 deletions
19
.gitignore
vendored
19
.gitignore
vendored
|
@ -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
|
13
assets/css/abstracts/_mixins.scss
Normal file
13
assets/css/abstracts/_mixins.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
20
assets/css/abstracts/_variables.scss
Normal file
20
assets/css/abstracts/_variables.scss
Normal 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;
|
352
assets/css/base/_typography.scss
Normal file
352
assets/css/base/_typography.scss
Normal 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;
|
||||
}
|
0
assets/css/components/_audio.scss
Normal file
0
assets/css/components/_audio.scss
Normal file
81
assets/css/components/_blockquote.scss
Normal file
81
assets/css/components/_blockquote.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
17
assets/css/components/_button.scss
Normal file
17
assets/css/components/_button.scss
Normal 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;
|
||||
}
|
||||
}
|
22
assets/css/components/_chart.scss
Normal file
22
assets/css/components/_chart.scss
Normal 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;
|
||||
}
|
||||
}
|
35
assets/css/components/_comment.scss
Normal file
35
assets/css/components/_comment.scss
Normal 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;
|
||||
}
|
||||
}
|
5
assets/css/components/_details.scss
Normal file
5
assets/css/components/_details.scss
Normal file
|
@ -0,0 +1,5 @@
|
|||
details {
|
||||
& summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
55
assets/css/components/_figure.scss
Normal file
55
assets/css/components/_figure.scss
Normal 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: "]";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
12
assets/css/components/_gallery.scss
Normal file
12
assets/css/components/_gallery.scss
Normal 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;
|
||||
}
|
||||
}
|
10
assets/css/components/_icons.scss
Normal file
10
assets/css/components/_icons.scss
Normal 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;
|
||||
}
|
109
assets/css/components/_item-tile.scss
Normal file
109
assets/css/components/_item-tile.scss
Normal 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;
|
||||
}
|
||||
}
|
19
assets/css/components/_picture.scss
Normal file
19
assets/css/components/_picture.scss
Normal 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;
|
||||
}
|
44
assets/css/components/_table.scss
Normal file
44
assets/css/components/_table.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
3
assets/css/components/_video.scss
Normal file
3
assets/css/components/_video.scss
Normal file
|
@ -0,0 +1,3 @@
|
|||
video {
|
||||
background-color: black;
|
||||
}
|
23
assets/css/layout/_footer.scss
Normal file
23
assets/css/layout/_footer.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
42
assets/css/layout/_grid.scss
Normal file
42
assets/css/layout/_grid.scss
Normal 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;
|
||||
}
|
||||
}
|
89
assets/css/layout/_header.scss
Normal file
89
assets/css/layout/_header.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
7
assets/css/layout/_main.scss
Normal file
7
assets/css/layout/_main.scss
Normal file
|
@ -0,0 +1,7 @@
|
|||
.site-content {
|
||||
grid-area: page-container;
|
||||
|
||||
@include mq("large") {
|
||||
margin: 2em;
|
||||
}
|
||||
}
|
0
assets/css/layout/_navigation.scss
Normal file
0
assets/css/layout/_navigation.scss
Normal file
31
assets/css/main.scss
Normal file
31
assets/css/main.scss
Normal 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"; */
|
113
assets/css/pages/_collection.scss
Normal file
113
assets/css/pages/_collection.scss
Normal 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;
|
||||
}
|
||||
}
|
16
assets/css/pages/_home.scss
Normal file
16
assets/css/pages/_home.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
14
assets/css/pages/_organisations-list.scss
Normal file
14
assets/css/pages/_organisations-list.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
205
assets/css/pages/_single-organisation.scss
Normal file
205
assets/css/pages/_single-organisation.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
455
assets/css/pages/_single.scss
Normal file
455
assets/css/pages/_single.scss
Normal 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;
|
||||