:root {
--text-color: #fef6e8;
--dim-text-color: #77aba6;
--secondary-color: #323d49;
--tertiary-color: #3a3347;
--shadow-color: #5900ff52;
--accent-color: #ff4f89;
--background-gradient: linear-gradient(var(--tertiary-color), var(--secondary-color));
--gallery-background-color: var(--text-color);
--artwork-background-color: var(--background-gradient);
--link-base-color: var(--text-color);
--link-visited-color: var(--link-base-color);
--link-hover-color: var(--accent-color);
--link-active-color: var(--link-hover-color);
--page-width: 60rem;
--paragraph-width: 30rem;
--gallery-frame: 0.4rem;
color: var(--text-color);
font-family: "Raleway", sans-serif;
font-size: 16px;
scroll-behavior: smooth;
}
*, *:before, *:after {
box-sizing: border-box;
}
body {
height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
background: var(--background-gradient);
background-color: var(--tertiary-color);
background-attachment: fixed;
}
p {
margin: 0;
}
h1 {
font-size: 3rem;
font-weight: normal;
margin: 0;
}
h2 {
font-size: 2.4rem;
font-weight: normal;
margin: 0;
}
h3 {
font-weight: normal;
margin: 0;
font-size: 160%;
}
a:link {
color: var(--link-base-color);
}
a:visited {
color: var(--link-visited-color);
}
a:hover {
color: var(--accent-color);
}
a:active {
color: var(--accent-color);
}
a {
text-decoration: none;
}
.expander {
display: flex;
flex: 1 1 auto;
}
.color-bar-thin {
background: var(--accent-color);
height: 0.125rem;
width: 100%;
}
.color-bar {
background: var(--accent-color);
height: 0.125rem;
margin: 0.5rem 0 0.5rem 0;
width: 100%;
flex: 0 0 auto;
border-radius: 100vh;
}
.color-bar.flexible {
min-width: 0;
flex: 1 1;
}
.color-dot {
background: var(--accent-color);
aspect-ratio: 1;
height: 0.3rem;
width: auto;
border-radius: 50%;
}
.link-button {
border-style: solid;
border-color: var(--accent-color);
border-width: 0.125rem;
border-radius: 100vh;
padding: 0.5rem 1rem 0.5rem 1rem;
}
.gap-vertical-thick {
width: 100%;
height: 2rem;
flex: 0 0 auto;
}
.gap-vertical-thin {
width: 100%;
height: 1rem;
flex: 0 0 auto;
}
.gap-horizontal-thick {
width: 2rem;
height: 100%;
flex: 0 0 auto;
}
.gap-horizontal-thin {
width: 1rem;
height: 100%;
flex: 0 0 auto;
}
.scriptless {
max-width: 50rem;
display: flex;
flex-direction: column;
row-gap: 0.5rem;
border-style: solid;
border-width: 0.125rem;
border-radius: 1rem;
border-color: var(--dim-text-color);
color: var(--dim-text-color);
padding: 1rem;
}
.pswp__icn {
filter: drop-shadow(1px 1px 1px var(--shadow-color));
}
@font-face {
font-family: "Raleway";
font-weight: 100 900;
src: url("/resources/fonts/Raleway-VariableFont_wght.ttf")
}
.header {
--roundness: 100vh;
}
.header {
text-align: center;
display: flex;
flex-direction: column;
width: 100%;
max-width: var(--page-width);
flex: 0 0 auto;
a {
display: inline-block;
margin-inline: auto;
}
}
.header .site-navbar {
border-radius: var(--roundness);
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
column-gap: 0.6rem;
font-size: 130%;
}
.doorway-background {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
height: 100%;
background-image: url("/resources/images/beachbg.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
--button-padding: 1.5rem;
--button-border: 0.125rem;
--h3-size: 1.6rem;
--h1-size: 3rem;
--dynamic-h1-size: 10vw;
--dynamic-h3-size: calc(1.6/3 * 10vw);
}
.doorway-container {
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
max-width: var(--paragraph-width);
height: 100%;
padding: 0 1rem 0 1rem;
background: var(--background-gradient);
}
.doorway-header {
text-align: center;
}
.scalable-h1 {
font-size: clamp(1px, var(--dynamic-h1-size), var(--h1-size));
}
.scalable-h3 {
font-size: clamp(1px, var(--dynamic-h3-size), var(--h3-size));
}
.doorway-image {
width: 100%;
height: auto;
border-radius: 0.5rem;
}
.doorway-text {
max-width: 20rem;
p {
font-size: 80%;
}
h3 {
font-size: 1.4rem;
}
}
.doorway-container a {
font-size: 110%;
background: var(--accent-color);
border-radius: 100vh;
color: var(--text-color);
border-style: solid;
border-width: var(--button-border);
border-color: var(--text-color);
padding:
calc(var(--button-padding)/2 - var(--button-border))
calc(var(--button-padding) - var(--button-border))
calc(var(--button-padding)/2 - var(--button-border))
calc(var(--button-padding) - var(--button-border));
}
.doorway-container a:hover {
border-color: var(--accent-color);
background: var(--text-color);
color: var(--accent-color);
}
.doorway-column {
background: var(--accent-color);
width: 0.25rem;
margin: 0 0.5rem 0 0.5rem;
height: 100%;
flex: 0 0 auto;
border-radius: 100vh;
}
.doorway-expander-top {
display: flex;
flex: 1 1 auto;
}
.doorway-expander-bottom {
display: flex;
flex: 2 1 auto;
}
.justified-grid-gallery {
--min-height: 15rem;
--cell-radius: 0.4rem;
}
@media not all and (max-width: 30rem) {
.justified-grid-gallery {
display: flex;
flex-wrap: wrap;
grid-gap: var(--gallery-frame);
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
.justified-grid-gallery > * {
flex-grow: calc(var(--width) * (100000 / var(--height)));
flex-basis: calc(var(--min-height) * (var(--width) / var(--height)));
aspect-ratio: var(--width) / var(--height);
position: relative;
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
}
.justified-grid-gallery > * > img {
position: absolute;
width: 100%;
height: 100%;
border-radius: var(--cell-radius);
}
.justified-grid-gallery::after {
content: " ";
flex-grow: 1000000000;
background: var(--text-color);
border-radius: var(--cell-radius);
}
}
@media all and (max-width: 30rem) {
.thumbnail-anchor {
position: relative;
display: flex;
}
.justified-grid-gallery {
display: flex;
flex-direction: column;
row-gap: var(--gallery-frame);
}
.justified-grid-gallery > * > img {
width: 100%;
height: auto;
border-radius: var(--cell-radius);
}
}
.gallery-container {
width: 100%;
max-width: var(--page-width);
min-width: 0;
margin: 0 1rem 0 1rem;
display: flex;
flex-direction: column;
}
.gallery-border {
padding: var(--gallery-frame);
background-color: var(--gallery-background-color);
border-radius: 0.4rem;
}
.stack-icon {
position: absolute;
bottom: 0 !important;
right: 0 !important;
width: 12% !important;
height: 12% !important;
border-radius: 0 !important;
filter: drop-shadow(1px 1px 1px var(--shadow-color));
}
.misc-gallery-info {
max-width: 30rem;
margin: 0 1rem 0 1rem;
}
.image-container {
max-width: var(--page-width);
display: flex;
flex-direction: column;
align-items: center;
}
.main-image {
max-width: 100%;
height: auto;
object-fit: contain;
border-radius: 0.3rem;
}
.image-info {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 2rem;
}
.narrower {
max-width: var(--paragraph-width);
width: 100%;
padding: 0 1rem 0 1rem;
}
.image-meta {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
color: var(--dim-text-color);
font-size: 85%;
.pleft {
justify-self: flex-start;
text-align: left;
white-space: nowrap;
}
.pright {
justify-self: flex-end;
text-align: right;
}
}
.image-description {
max-width: var(--paragraph-width);
width: 100%;
font-size: 120%;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
a {
color: var(--accent-color);
}
}
.gallery-nav {
--nav-height: 5rem;
--nav-padding: 1rem;
--roundness: 0.6rem;
display: flex;
flex-direction: row;
align-items: center;
max-width: var(--page-width);
width: 100%;
flex-wrap: nowrap;
justify-content: center;
.nav-link {
width: var(--nav-height);
height: var(--nav-height);
}
@media (max-width: 30rem) {
.nav-link.erasable {
display: none;
}
}
.nav-gap {
width: calc((var(--paragraph-width) - var(--nav-height)*5)/6);
height: 100%;
flex: 0 0 auto;
}
.nav-thumbnail-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--roundness);
}
.nav-placeholder {
width: 100%;
height: 100%;
border-color: var(--accent-color);
border-style: solid;
border-width: 0.1rem;
border-radius: var(--roundness);
}
#nav-gallery-button {
border-color: var(--text-color);
border-style: solid;
border-width: 0.1rem;
border-radius: var(--roundness);
text-align: center;
align-content: center;
width: 100%;
height: 100%;
}
#nav-gallery-button:hover {
border-color: var(--accent-color);
}
#nav-gallery-button:active {
border-color: var(--accent-color);
}
}
.about-container {
--total-max-width: 40rem;
--scrungly-width: 8rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: start;
justify-content: center;
row-gap: 1rem;
max-width: var(--total-max-width);
width: 100%;
}
.about-image {
display: flex;
flex-direction: row;
margin-top: 0.3rem; /* silly hack to line up with capital height */
margin-left: 1rem;
margin-right: 1rem;
img {
width: var(--scrungly-width);
height: auto;
object-fit: contain;
border-radius: 0.5rem;
}
}
.about-text {
display: flex;
flex-direction: column;
margin-left: 1rem;
margin-right: 1rem;
max-width: calc(var(--total-max-width) - var(--scrungly-width) - 4rem);
a {
color: var(--accent-color);
}
}
.footer {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
}
.footer-links a {
font-weight: normal;
font-size: 110%;
}
.footer-links {
width: 100%;
max-width: var(--page-width);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
text-align: center;
column-gap: 0.6rem;
}
.CRITICALLY-IMPORTANT-SYSTEM-MESSAGE-DO-NOT-IGNORE-UNDER-ANY-CIRCUMSTANCES {
color: var(--dim-text-color);
font-size: 40%;
max-width: 28rem;
text-align: justify;
text-align-last: center;
padding: 0 4rem 0.5rem 4rem;
}
.background-404 {
display: flex;
flex-direction: row;
justify-content: center;
align-items:center;
width: 100%;
height: 100%;
background-image: url("/resources/images/beachbg.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
overflow: hidden;
}
#spinner-404 {
color: var(--accent-color);
filter: drop-shadow(0.8vh 0.8vh 0px var(--shadow-color));
font-weight: bold;
font-size: min(40vw, 30vh);
text-align: center;
line-height: 80%;
animation:spin 4s linear infinite;
}
@keyframes spin {
100% {
transform:rotate(360deg);
}
}