:root{--base-font-size:18px;--h1-font-size:40px;--h2-font-size:30px;--h3-font-size:24px;--h4-font-size:18px;--font-color:#333;--font-color-deemphasized:#888;--content-width:52rem;--background-color:#fafafa;--color-pink:#ffdadf;--color-pink-dark:#ffcad1;--color-blue:#BBD0FF;--color-blue-dark:#B8C0FF;--color-blue-link:#1745D0;--color-blue-link-visited:var(--color-blue-link)}*,*::before,*::after{box-sizing:border-box}*{margin:0}body{line-height:1.6}body{font-size:var(--base-font-size);color:var(--font-color);font-family:sans-serif,segoe ui,helvetica neue,helvetica,arial;background-color:#fafafa}h1{margin:2rem 0 1rem;font-size:var(--h1-font-size);font-weight:700;line-height:1.2;text-shadow:3px 3px 0 var(--color-pink-dark)}h2{margin:1.75rem 0 .75rem;font-size:var(--h2-font-size);font-weight:600;line-height:1.3}h3{margin:1.5rem 0 .5rem;font-size:var(--h3-font-size);font-weight:600;line-height:1.3}h4{margin:1.25rem 0 .5rem;font-size:var(--h4-font-size);font-weight:600;line-height:1.4}h5{margin:1rem 0 .5rem;font-size:1.125rem;font-weight:600;line-height:1.4}h6{margin:1rem 0 .5rem;font-size:1rem;font-weight:600;line-height:1.5}p{margin:0 0 1rem;line-height:1.6}hr{margin:1rem 0;border:none;height:24px;background-image:url("data:image/svg+xml,%3csvg width='100' height='24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0 12c25-1 50 2 75-1c25-1 25 1 25 1' stroke='%23ffcad1' stroke-width='3' fill='none' stroke-linecap='round'/%3e%3c/svg%3e");background-repeat:repeat-x;background-position:50%;background-size:100px 24px}a{color:var(--color-blue-link)}a:visited{color:var(--color-blue-link-visited)}a:not(.no-underline){text-decoration:none;position:relative;background:linear-gradient(to right,transparent 0%,rgba(255,202,209,.3) 2%,rgba(255,202,209,.7) 15%,rgba(255,202,209,.8) 85%,rgba(255,202,209,.3) 98%,transparent 100%);background-position:0 93%;background-size:100% 23%;background-repeat:no-repeat}blockquote{margin:1.5rem 0;padding:1rem 1.5rem;border-left:4px solid var(--color-pink-dark);background-color:rgba(187,208,255,.1);font-style:italic;color:var(--font-color);border-radius:5px;p { margin: 0 0 0.5rem 0; &:last-child { margin-bottom: 0; } }}.site-main{margin:0 auto}.site-header{border-bottom:1px solid #e2e8f0;margin-bottom:1rem;.site-nav { max-width: var(--content-width); margin: 0 auto; display: flex; align-items: center; justify-content: flex-start; padding: 1rem; .home-link { display: flex; align-items: center; margin-right: 2rem; .site-icon { height: 2rem; width: auto; } } .nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 2rem; a { text-decoration: none; color: inherit; } } }}.homepage{.hero-container { text-align: center; background-image: url("/img/hero-background.png"); background-size: 1000px 104%; background-position: center -21px; background-repeat: no-repeat; img.hero-site-name { max-width: min(70%, 600px); height: auto; margin: 40px 0; } .hero-spacer { height: 30px; } } .content { max-width: var(--content-width); margin: auto; margin-bottom: 2em; padding: 0 1em; font-size: 24px; text-align: justify; text-justify: auto; } .recent-posts { margin: 2rem auto; max-width: var(--content-width); padding: 0 1rem; .recent-posts-border { position: relative; margin: 0; max-width: 36rem; .border-layer-1, .border-layer-2, .border-layer-3, .border-layer-4, .border-layer-5, .border-layer-6, .border-layer-7, .border-layer-8 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 2px; pointer-events: none; } .border-layer-1 { border-top: 3px solid var(--color-pink); transform: rotate(-0.6deg); z-index: 1; right: -5px; } .border-layer-2 { border-right: 3px solid var(--color-pink-dark); transform: rotate(0.8deg); z-index: 2; } .border-layer-3 { border-bottom: 3px solid var(--color-pink); transform: rotate(0.7deg); z-index: 3; left: -4px; } .border-layer-4 { border-left: 3px solid var(--color-pink-dark); transform: rotate(-0.6deg); z-index: 4; } .border-layer-5 { border-top: 3px solid var(--color-pink-dark); transform: rotate(0.4deg); z-index: 5; } .border-layer-6 { right: 5px; border-right: 3px solid var(--color-pink); transform: rotate(-0.1deg); z-index: 6; } .border-layer-7 { bottom: -5px; border-bottom: 3px solid var(--color-pink-dark); transform: rotate(0.2deg); z-index: 7; } .border-layer-8 { border-left: 3px solid var(--color-pink); transform: rotate(-0.2deg); z-index: 8; } } .content { position: relative; z-index: 9; font-size: var(--base-font-size); text-align: left; padding: 1.5rem; background: transparent; border-radius: 8px; } h2 { margin-top: 0; margin-bottom: 1rem; @media (max-width: 800px) { font-size: 24px; } } .recent-posts-list { list-style: none; padding: 0; margin: 0; li { margin-bottom: 0.5rem; display: flex; align-items: baseline; gap: 1rem; .post-date { color: var(--font-color-deemphasized); font-size: 0.9rem; min-width: 3rem; flex-shrink: 0; } a { font-size: 24px; font-weight: 600; background-size: 100% 8px; @media (max-width: 800px) { font-size: 18px; } } } } }}article.post{max-width:var(--content-width);padding:0 1em;margin:auto;.post-header { margin-bottom: 1rem; .post-title { margin-bottom: 0; } .post-meta { color: var(--font-color-deemphasized); } } .post-content { .poem { white-space: pre-line; margin-bottom: 1em; } }}section.posts-list{max-width:var(--content-width);padding:0 1em;margin:auto;.post-preview { position: relative; } .post-doodle { position: absolute; pointer-events: none; z-index: 10; img { max-width: none; height: auto; } @media (max-width: 800px) { display: none; } } .post-preview-header { h2.post-title { font-size: 24px; } .post-date { color: var(--font-color-deemphasized); font-style: italic; font-size: 0.7em; font-weight: normal; } } .post-summary { font-size: calc(0.9 * var(--base-font-size)); }}