convert into Hugo module theme
This commit is contained in:
parent
b07a2a6cf5
commit
04abc92ae5
SSH key fingerprint:
SHA256:e5XfzNOr9UvWpEzyLfw0GtTMZWIFh3NmxH+/qQIi3xE
98 changed files with 2137 additions and 15971 deletions
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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue