initial commit
This commit is contained in:
commit
5c664be9a8
55 changed files with 8825 additions and 0 deletions
4
assets/css/abstracts/_fonts.scss
Normal file
4
assets/css/abstracts/_fonts.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@font-face {
|
||||
font-family: "Input Mono";
|
||||
src: url(/fonts/InputMono-Regular.ttf);
|
||||
}
|
||||
12
assets/css/abstracts/_mixins.scss
Normal file
12
assets/css/abstracts/_mixins.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
24
assets/css/abstracts/_variables.scss
Normal file
24
assets/css/abstracts/_variables.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
// Colours
|
||||
$dark: #020202;
|
||||
$light: #fffff0;
|
||||
|
||||
// Fonts
|
||||
$defaultFont: "Domitian", "Palatino Linotype", "Book Antiqua", Palatino, serif;
|
||||
$codeFont: /*"Input Mono", */"Lucida Console", Monaco, monospace;
|
||||
|
||||
// Breakpoints
|
||||
$breakpoints: (
|
||||
"phone": 400px,
|
||||
"phone-wide": 480px,
|
||||
"phablet": 560px,
|
||||
"tablet-small": 640px,
|
||||
"tablet": 768px,
|
||||
"tablet-wide": 1024px,
|
||||
"desktop": 1248px,
|
||||
"desktop-wide": 1440px
|
||||
);
|
||||
|
||||
// Old Site Versions
|
||||
$ohwhatohjeez: #ff8900;
|
||||
$oldphaloskepsis: #003d52;
|
||||
$omphaloskepsis: #fffff0;
|
||||
328
assets/css/base/_typography.scss
Normal file
328
assets/css/base/_typography.scss
Normal file
|
|
@ -0,0 +1,328 @@
|
|||
html {
|
||||
font-size: 16px;
|
||||
color: $dark;
|
||||
background-color: $light;
|
||||
font-family: $defaultFont;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.sic::after {
|
||||
content: " [sic]";
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.latex {
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding-left: 1em;
|
||||
border-left: 2px outset $dark;
|
||||
display: inline-block;
|
||||
max-width: 85%;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
pre {
|
||||
margin: 1em 2em;
|
||||
}
|
||||
}
|
||||
|
||||
q.guillemets {
|
||||
quotes: "«" "»" "«" "»";
|
||||
}
|
||||
|
||||
q,
|
||||
blockquote {
|
||||
quotes: "‘" "’" "“" "”";
|
||||
}
|
||||
|
||||
q::before {
|
||||
content: open-quote;
|
||||
}
|
||||
|
||||
q::after {
|
||||
content: close-quote;
|
||||
}
|
||||
|
||||
cite,
|
||||
cite.book,
|
||||
cite.film,
|
||||
cite.tv-show,
|
||||
cite.comic,
|
||||
cite.book,
|
||||
cite.podcast,
|
||||
cite.album,
|
||||
cite.report {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
cite.book--bible {
|
||||
font-style: inherit;
|
||||
}
|
||||
|
||||
cite.legislation,
|
||||
cite.smallcite,
|
||||
cite.comic-strip,
|
||||
cite.short-story,
|
||||
cite.article,
|
||||
cite.episode,
|
||||
cite.video,
|
||||
cite.chapter,
|
||||
cite.software,
|
||||
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$="WebSite"],
|
||||
&[itemtype$="WebContent"],
|
||||
&[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$="Chapter"],
|
||||
&[itemtype$="Clip"],
|
||||
&[itemtype$="MovieClip"],
|
||||
&[itemtype$="RadioClip"],
|
||||
&[itemtype$="TVClip"],
|
||||
&[itemtype$="VideoGameClip"],
|
||||
&[itemtype$="Comment"],
|
||||
&[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: normal;
|
||||
|
||||
&::before {
|
||||
content: "“";
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "”";
|
||||
}
|
||||
}
|
||||
|
||||
&--normal {
|
||||
font-style: normal !important;
|
||||
|
||||
&::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table .cite {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.episode-number,
|
||||
.authors--additional,
|
||||
.comments,
|
||||
.edition,
|
||||
.year--original {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.comments,
|
||||
.edition {
|
||||
margin-block-start: 0.4em;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
code,
|
||||
samp,
|
||||
var,
|
||||
pre {
|
||||
font-family: $codeFont;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre .nocode {
|
||||
font-family: $defaultFont;
|
||||
font-size: 1em;
|
||||
padding: 1px 3px;
|
||||
border-radius: 6px;
|
||||
border: dashed 1px black;
|
||||
}
|
||||
|
||||
code,
|
||||
samp,
|
||||
var {
|
||||
background-color: #d1d1d1;
|
||||
border-radius: 5px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
pre {
|
||||
max-width: 50vw;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
h1 code,
|
||||
.post-title code,
|
||||
pre code,
|
||||
h1 samp,
|
||||
.post-title samp,
|
||||
pre samp,
|
||||
h1 var,
|
||||
.post-title var,
|
||||
pre var {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.heading code,
|
||||
.subheading code {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
pre.prettyprint ol {
|
||||
padding-left: 3.5em;
|
||||
}
|
||||
|
||||
pre.prettyprint li {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
samp {
|
||||
display: block;
|
||||
width: 80ch;
|
||||
margin: 1em 4em;
|
||||
border-left: 2px solid #ccc;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 0.1em 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: 0 0.1em;
|
||||
text-shadow: 0 1px 0 white;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/*
|
||||
* Special Text
|
||||
*/
|
||||
|
||||
|
||||
:where([title]) {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted;
|
||||
|
||||
&:not(a *) {
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
98
assets/css/components/_item-tile.scss
Normal file
98
assets/css/components/_item-tile.scss
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
.link--tile {
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid transparent;
|
||||
|
||||
&:hover {
|
||||
border-color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
.item-tile {
|
||||
display: grid;
|
||||
min-height: 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;
|
||||
|
||||
&.lazy {
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
&--heading {
|
||||
font-size: 3em;
|
||||
|
||||
& .item-tile__header {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&--ohwhatohjeez {
|
||||
border: 2px solid $ohwhatohjeez;
|
||||
}
|
||||
|
||||
&--oldphaloskepsis {
|
||||
border: 2px solid $oldphaloskepsis;
|
||||
}
|
||||
|
||||
&--omphaloskepsis {
|
||||
border: 2px solid $omphaloskepsis;
|
||||
}
|
||||
|
||||
&__header {
|
||||
text-align: center;
|
||||
background-color: $dark;
|
||||
opacity: 0.8;
|
||||
display: grid;
|
||||
grid-area: tile-details;
|
||||
grid-template-columns: 5px auto 5px;
|
||||
grid-template-rows: 0 auto auto auto;
|
||||
grid-template-areas:
|
||||
". . ."
|
||||
". banner ."
|
||||
". tile-title ."
|
||||
". tile-subtitle .";
|
||||
}
|
||||
|
||||
&__banner {
|
||||
padding: 0.5em 1em 0;
|
||||
grid-area: banner;
|
||||
width: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: 0 0 10px 10px;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
line-height: 0.5em;
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
|
||||
&__title,
|
||||
&__subtitle {
|
||||
color: $light;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 1.4em;
|
||||
grid-area: tile-title;
|
||||
align-self: center;
|
||||
|
||||
&--long {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 0.8em;
|
||||
grid-area: tile-subtitle;
|
||||
align-self: start;
|
||||
}
|
||||
}
|
||||
18
assets/css/components/_log-stats.scss
Normal file
18
assets/css/components/_log-stats.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
.log-stats {
|
||||
text-align: center;
|
||||
font-size: 1.4em;
|
||||
|
||||
& summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
& p {
|
||||
float: left;
|
||||
margin-inline-end: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
159
assets/css/components/gallery.scss
Normal file
159
assets/css/components/gallery.scss
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
/*
|
||||
Put this file in /static/css/hugo-easy-gallery.css
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
Grid Layout Styles
|
||||
*/
|
||||
.gallery {
|
||||
overflow: hidden;
|
||||
}
|
||||
.gallery .box {
|
||||
float: left;
|
||||
position: relative;
|
||||
/* Default: 1 tile wide */
|
||||
width: 100%;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
@media only screen and (min-width : 365px) {
|
||||
/* Tablet view: 2 tiles */
|
||||
.gallery .box {
|
||||
width: 50%;
|
||||
padding-bottom: 50%;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : 480px) {
|
||||
/* Small desktop / ipad view: 3 tiles */
|
||||
.gallery .box {
|
||||
width: 33.3%;
|
||||
padding-bottom: 33.3%; /* */
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : 9999px) {
|
||||
/* Medium desktop: 4 tiles */
|
||||
.box {
|
||||
width: 25%;
|
||||
padding-bottom: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Transition styles
|
||||
*/
|
||||
.gallery.hover-transition figure,
|
||||
.gallery.hover-effect-zoom .img,
|
||||
.gallery:not(.caption-effect-appear) figcaption,
|
||||
.fancy-figure:not(.caption-effect-appear) figcaption {
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/*
|
||||
figure styles
|
||||
*/
|
||||
figure {
|
||||
position:relative; /* purely to allow absolution positioning of figcaption */
|
||||
overflow: hidden;
|
||||
}
|
||||
.gallery figure {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
bottom: 5px;
|
||||
}
|
||||
.gallery.hover-effect-grow figure:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.gallery.hover-effect-shrink figure:hover {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.gallery.hover-effect-slidedown figure:hover {
|
||||
transform: translateY(5px);
|
||||
}
|
||||
.gallery.hover-effect-slideup figure:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
/*
|
||||
img / a styles
|
||||
*/
|
||||
|
||||
.gallery .img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.gallery.hover-effect-zoom figure:hover .img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.gallery img {
|
||||
display: none !important; /* only show the img if not inside a gallery */
|
||||
}
|
||||
.gallery figure a {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
figcaption styles
|
||||
*/
|
||||
.gallery figcaption,
|
||||
.fancy-figure figcaption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #000;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-size: 75%; /* change this if you want bigger text */
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.gallery.caption-position-none figcaption,
|
||||
.fancy-figure.caption-position-none figcaption {
|
||||
display: none;
|
||||
}
|
||||
.gallery.caption-position-center figcaption,
|
||||
.fancy-figure.caption-position-center figcaption {
|
||||
top: 0;
|
||||
padding: 40% 5px;
|
||||
}
|
||||
.gallery.caption-position-bottom figcaption,
|
||||
.fancy-figure.caption-position-bottom figcaption {
|
||||
padding: 5px;
|
||||
}
|
||||
.gallery.caption-effect-fade figure:not(:hover) figcaption,
|
||||
.gallery.caption-effect-appear figure:not(:hover) figcaption,
|
||||
.fancy-figure.caption-effect-fade figure:not(:hover) figcaption,
|
||||
.fancy-figure.caption-effect-appear figure:not(:hover) figcaption {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
.gallery.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption,
|
||||
.fancy-figure.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption {
|
||||
margin-bottom: -100%;
|
||||
}
|
||||
.gallery.caption-effect-slide.caption-position-center figure:not(:hover) figcaption,
|
||||
.fancy-figure.caption-effect-slide.caption-position-center figure:not(:hover) figcaption {
|
||||
top: 100%;
|
||||
}
|
||||
.gallery figcaption p {
|
||||
margin: auto; /* override style in theme */
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.site-header__icons a {
|
||||
text-decoration: none;
|
||||
}
|
||||
30
assets/css/components/table.scss
Normal file
30
assets/css/components/table.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
/* TODO: Not currently used */
|
||||
@media screen and (max-width: 480px) {
|
||||
.table-scroller {
|
||||
overflow-x: auto;
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
margin: auto;
|
||||
width: 80%;
|
||||
display: table;
|
||||
|
||||
& thead {
|
||||
border: 2px solid $dark;
|
||||
}
|
||||
|
||||
& td {
|
||||
padding: 0.5em 1em;
|
||||
border: 1px solid $dark;
|
||||
}
|
||||
}
|
||||
|
||||
td[colspan] {
|
||||
text-align: center;
|
||||
|
||||
& h3 {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
20
assets/css/layout/_footer.scss
Normal file
20
assets/css/layout/_footer.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
.site-footer {
|
||||
grid-area: footer;
|
||||
display: block;
|
||||
width: 99%; /* Overflows right of viewport otherwise */
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
||||
& p {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
background: $light;
|
||||
border: 2px solid black;
|
||||
padding: 0.4em;
|
||||
border-bottom: none;
|
||||
font-size: 0.6em;
|
||||
@include mq('desktop') {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
88
assets/css/layout/_header.scss
Normal file
88
assets/css/layout/_header.scss
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
.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";
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
|
||||
&__title,
|
||||
&__tagline,
|
||||
&__icons,
|
||||
&__nav {
|
||||
background-color: $light;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__title,
|
||||
&__tagline,
|
||||
&__icons {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: normal;
|
||||
grid-area: header-title;
|
||||
}
|
||||
|
||||
&__tagline {
|
||||
grid-area: header-tagline;
|
||||
}
|
||||
|
||||
&__icons {
|
||||
grid-area: header-icons;
|
||||
border-bottom: 2px solid $dark;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__nav {
|
||||
grid-area: header-nav;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
@include mq('desktop') {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
& ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& li {
|
||||
width: calc(100% / 4);
|
||||
display: block;
|
||||
float: left;
|
||||
border-bottom: 2px solid black;
|
||||
border-left: 1px solid black;
|
||||
border-right: 1px solid black;
|
||||
padding: 0.4em;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
& a:first-child li {
|
||||
border-left: 2px solid black;
|
||||
}
|
||||
|
||||
& a:last-child li {
|
||||
border-right: 2px solid black;
|
||||
}
|
||||
|
||||
& li {
|
||||
&:hover {
|
||||
background-color: #ffffd0;
|
||||
}
|
||||
|
||||
& a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
8
assets/css/layout/_main.scss
Normal file
8
assets/css/layout/_main.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
.site-content {
|
||||
grid-area: page-container;
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
@include mq('desktop') {
|
||||
margin: 2em;
|
||||
}
|
||||
}
|
||||
70
assets/css/main.scss
Normal file
70
assets/css/main.scss
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
@import "abstracts/fonts";
|
||||
@import "abstracts/variables";
|
||||
@import "abstracts/mixins";
|
||||
|
||||
@import "base/typography";
|
||||
|
||||
.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-height: calc(100vh - 4em);
|
||||
border-top: 0;
|
||||
@include mq('desktop') {
|
||||
margin-bottom: 2em;
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
". page-container ."
|
||||
"footer footer footer";
|
||||
border: 2px solid black;
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
&--homepage {
|
||||
align-items: center;
|
||||
grid-template-rows: auto 2.5%;
|
||||
grid-template-areas:
|
||||
"page-container page-container page-container"
|
||||
"footer footer footer";
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
@include mq('desktop') {
|
||||
border: 2px solid black;
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
grid-template-areas:
|
||||
". page-container ."
|
||||
"footer footer footer";
|
||||
}
|
||||
}
|
||||
|
||||
&--list,
|
||||
&--section {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@import "layout/header";
|
||||
@import "layout/footer";
|
||||
@import "layout/main";
|
||||
|
||||
@import "components/gallery";
|
||||
@import "components/icons";
|
||||
@import "components/item-tile";
|
||||
@import "components/table";
|
||||
@import "components/log-stats";
|
||||
|
||||
@import "pages/home";
|
||||
@import "pages/collection";
|
||||
@import "pages/single";
|
||||
@import "pages/organisations-list";
|
||||
@import "pages/single-organisation";
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/*@import "themes/dark";*/
|
||||
}
|
||||
87
assets/css/pages/_collection.scss
Normal file
87
assets/css/pages/_collection.scss
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
.site-content--section,
|
||||
.site-content--list {
|
||||
display: grid;
|
||||
grid-gap: 10px;
|
||||
grid-template-columns: 0.2fr 1fr 0.2fr;
|
||||
grid-template-rows: auto auto 60px;
|
||||
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-top: 5em;
|
||||
@include mq('desktop') {
|
||||
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;
|
||||
margin: auto;
|
||||
overflow: auto;
|
||||
|
||||
& ul {
|
||||
list-style: none;
|
||||
|
||||
& li {
|
||||
float: left;
|
||||
margin: 0 1em;
|
||||
|
||||
& * {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .minor-links__categories {
|
||||
width: 100%;
|
||||
display: block;
|
||||
font-size: 0.8em !important;
|
||||
overflow: auto;
|
||||
@include mq('desktop') {
|
||||
font-size: 1em !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .minor-links__years {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .site-content__body {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
grid-gap: 10px;
|
||||
grid-area: list-page-grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
|
||||
|
||||
&--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: 100%;
|
||||
grid-template-areas: ". section-chart .";
|
||||
}
|
||||
}
|
||||
|
||||
& .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-bottom: 1em;
|
||||
@include mq('desktop') {
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
& span {
|
||||
display: block !important;
|
||||
font-size: 0.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
4
assets/css/pages/_organisations-list.scss
Normal file
4
assets/css/pages/_organisations-list.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.organisations-table {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 5;
|
||||
}
|
||||
124
assets/css/pages/_single-organisation.scss
Normal file
124
assets/css/pages/_single-organisation.scss
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
#organisation-body {
|
||||
& .index {
|
||||
display: grid;
|
||||
grid-gap: 6px 5px;
|
||||
grid-area: items;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
grid-template-areas: "item1 item2 item3 item4";
|
||||
}
|
||||
|
||||
& .index .item:nth-child(1) {
|
||||
grid-area: item1;
|
||||
}
|
||||
|
||||
& .index .item:nth-child(2) {
|
||||
grid-area: item2;
|
||||
}
|
||||
|
||||
& .index .item:nth-child(3) {
|
||||
grid-area: item3;
|
||||
}
|
||||
|
||||
& .index .item:nth-child(4) {
|
||||
grid-area: item4;
|
||||
}
|
||||
|
||||
& details {
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
border: 2px solid $dark;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& summary {
|
||||
&::marker {
|
||||
font-size: 2em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
& .subheading {
|
||||
display: inline;
|
||||
width: 95%;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
& .index {
|
||||
border-top: 2px solid $dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#hierarchy ul {
|
||||
list-style: none;
|
||||
padding-left: 1em;
|
||||
|
||||
& .hierarchy-item {
|
||||
&:before {
|
||||
content: '\21B3';
|
||||
margin: 0 0.4em;
|
||||
}
|
||||
|
||||
&--current {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&--child:before {
|
||||
content: '\2192';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline__legend {
|
||||
& span {
|
||||
margin: 0 1em;
|
||||
|
||||
& * {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
& .colour-square {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border-radius: 2.5px;
|
||||
border: 1px solid $dark;
|
||||
|
||||
&--current {
|
||||
background-color: #bbbbb0;
|
||||
}
|
||||
|
||||
&--past {
|
||||
background-color: #fffff0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-content__body--chart {
|
||||
& #timeline,
|
||||
& #map {
|
||||
width: 100%;
|
||||
max-width: 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-left: 0;
|
||||
|
||||
& li * {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
381
assets/css/pages/_single.scss
Normal file
381
assets/css/pages/_single.scss
Normal file
|
|
@ -0,0 +1,381 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
32
assets/css/themes/_dark.scss
Normal file
32
assets/css/themes/_dark.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
html,
|
||||
.site-header {
|
||||
color: $light;
|
||||
background-color: $dark;
|
||||
}
|
||||
|
||||
.site-header__nav li {
|
||||
color: $light;
|
||||
border-color: $light;
|
||||
|
||||
&:hover {
|
||||
background-color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
.site-header__title a {
|
||||
color: $light;
|
||||
}
|
||||
|
||||
.item-tile {
|
||||
&--heading,
|
||||
&__header {
|
||||
background-color: $light;
|
||||
}
|
||||
|
||||
&--heading,
|
||||
&__header,
|
||||
&__title,
|
||||
&__subtitle {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue