a
9aa43df629
The basic parts of the layouts/theme should work. I have only populated 2 albums so far.
73 lines
1.1 KiB
SCSS
73 lines
1.1 KiB
SCSS
.photo-page .photo {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"image"
|
|
"title"
|
|
"caption"
|
|
"meta"
|
|
"footer";
|
|
@media (min-width: 80rem) {
|
|
grid-template-areas:
|
|
"image title"
|
|
"image caption"
|
|
"image meta"
|
|
"image footer";
|
|
grid-template-columns: 1fr 20em;
|
|
grid-template-rows: auto auto auto 1fr;
|
|
min-height: 100vh;
|
|
}
|
|
}
|
|
|
|
.photo-page picture, .photo-page source {
|
|
display: contents;
|
|
}
|
|
|
|
.photo-page .photo .title {
|
|
grid-area: title;
|
|
text-align: center;
|
|
font-weight: normal;
|
|
margin-block-start: 2rem;
|
|
margin-block-end: 1rem;
|
|
}
|
|
|
|
.photo-page .photo .caption {
|
|
grid-area: caption;
|
|
font-style: italic;
|
|
font-family: monospace;
|
|
margin-block-end: 2rem;
|
|
max-width: 90%;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.photo-page .photo img {
|
|
grid-area: image;
|
|
display: block;
|
|
max-width: 100%;
|
|
place-self: center;
|
|
}
|
|
|
|
.photo-page .photo .metadata {
|
|
grid-area: meta;
|
|
text-align: center;
|
|
dt {
|
|
font-weight: bold;
|
|
font-variant: small-caps;
|
|
}
|
|
}
|
|
|
|
.photo-page footer {
|
|
text-align: center;
|
|
h2 {
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
|
|
.photo-page .tags {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
gap: 1em;
|
|
a {
|
|
color: #777;
|
|
}
|
|
} |