muhh.lol/assets/new.scss

801 lines
13 KiB
SCSS

---
---
:root {
/* Light Mode */
--backgroundColor: #EFF1F5; /* froth */
--textColor: #4C4F69; /* text */
--secondaryTextColor: #565A6E; /* overlay2 */
--mutedTextColor: #727585; /* overlay1 */
--subtleBackgroundColor: #E6E9EF; /* surface2 */
--heartedBackgroundColor: #F5E0DC; /* peach */
--selectionBackgroundColor: #A6E3A1; /* green */
--linkColor: #89B4FA; /* blue */
--borderColor: #D9E0EE; /* crust */
--hrColor: #ABAEC6; /* mantle */
--activeColor: #F28FAD; /* pink */
--langBackgroundColor: #DCE0EA; /* surface1 */
--langShadowColor: transparent;
--logoColor: #B8C0E0; /* lavender */
--photoBackground: #E9ECF2; /* surface0 */
}
@media (prefers-color-scheme: dark) {
:root {
/* Dark Mode */
--backgroundColor: #1E1E2E; /* base */
--textColor: #CDD6F4; /* text */
--secondaryTextColor: #A6ADC8; /* overlay2 */
--mutedTextColor: #88909F; /* overlay1 */
--subtleBackgroundColor: #313244; /* surface2 */
--heartedBackgroundColor: #913C3C; /* red */
--selectionBackgroundColor: #223249; /* blue darker */
--linkColor: #89B4FA; /* blue */
--borderColor: #414559; /* crust */
--hrColor: #4C4F69; /* mantle */
--activeColor: #ABE9B3; /* green */
--langBackgroundColor: #2A2A3C; /* surface1 */
--langShadowColor: #00000033;
--logoColor: #6E6C7E; /* lavender darker */
--photoBackground: #24273A; /* surface0 */
}
}
body {
background: var(--backgroundColor);
color: var(--textColor);
line-height: 1.7em;
padding: 0 2.5em;
margin: 0;
font-size: 1.1em;
word-wrap: break-word;
}
body, kbd {
font-family: system-ui, sans-serif;
}
a {
color: var(--linkColor);
text-underline-position: under;
}
::selection {
background: var(--selectionBackgroundColor);
}
header {
padding-top: 2.5em;
}
footer {
padding-bottom: 2.5em;
}
header,
main,
footer {
max-width: 36em;
margin: auto;
}
h1, h2, h3, h4, h5, h6, .font {
font-family: 'Readex Pro', sans-serif;
}
.plain {
font-family: system-ui, sans-serif
}
h1, h2, h3, h4, h5, h6 {
margin: 1.4em 0 1em 0;
font-weight: normal;
}
.logo {
width: 2em;
path {
stroke: var(--logoColor);
}
}
.logo-container {
display: flex;
align-items: center;
}
.post-body {
.logo-container {
line-height: 1em;
color: var(--mutedTextColor);
}
.logo {
width: 1em;
margin-left: .8em;
margin-right: .4em;
path {
stroke: var(--mutedTextColor);
stroke-width: 22;
}
}
.h1 {
font-size: 1.5rem;
}
}
.h1 {
font-size: 1.2rem;
font-weight: normal;
margin-bottom: 0;
}
.text {
margin-right: .4rem;
font-size: inherit;
font-weight: normal;
display: inline-block;
margin-top: 0;
}
.terminal .line {
padding: 0;
margin-bottom: 1em;
line-height: 1.6em;
}
.terminal {
list-style: none;
padding-left: 0;
li {
padding: .1rem 0;
}
ul {
margin-top: 0.5rem;
}
}
.hr {
border: 0;
border-left: .7rem solid var(--textColor);
height: .7rem;
margin: 3rem 0;
}
.inline-hr {
border: 0;
border-left: .3rem solid var(--borderColor);
height: .3rem;
display: inline-block;
vertical-align: middle;
align-self: center;
margin: 0;
}
.notes {
list-style: none;
margin: 0;
padding: 0;
.note {
border-bottom: 1px solid var(--borderColor);
padding-bottom: 3em;
margin-top: 3em;
}
}
.note {
scroll-margin: 2em;
main > & {
margin-top: -.6em;
}
& > ul {
margin-top: 1.5em;
list-style: disc;
}
&:last-of-type {
border-bottom: 0;
}
p:first-child, blockquote:first-child { margin-top: 0; }
p:last-child, blockquote:last-child, img:last-child { margin-bottom: 0; }
}
.note-heading {
font-size: .8em;
line-height: 1;
font-weight: normal;
margin: 0;
color: var(--mutedTextColor);
a {
color: inherit;
text-decoration: none;
}
}
blockquote {
color: var(--secondaryTextColor);
margin: 2em 0 2em 1.5em;
&::before {
content: '';
font-size: 2rem;
position: absolute;
margin-left: -.5em;
font-family: sans-serif;
}
}
img {
max-width: 100%;
margin: 1em 0;
&[width] {
margin: 0;
vertical-align: middle;
}
}
hr {
margin: 2em 0;
border: 0;
border-bottom: 1px solid var(--hrColor);
}
.pagination {
margin-top: 4em;
}
article {
font-family: system-ui, sans-serif;
font-size: 1em;
}
.smol {
font-size: .8em;
font-weight: normal;
}
.task-list-item-checkbox {
margin-right: .5em;
vertical-align: middle;
}
.entry-title {
margin: 0;
}
.entry {
margin-bottom: 3em;
}
.lang {
font-size: .8rem;
display: inline-flex;
margin-top: 2em;
white-space: nowrap;
box-shadow: 0 5px 15px var(--langShadowColor);
a[aria-current] {
color: var(--textColor);
&:before {
content: "";
color: var(--activeColor);
}
}
a {
background-color: var(--langBackgroundColor);
border-color: var(--borderColor);
color: var(--mutedTextColor);
padding: 4px 16px;
margin-right: 1px;
text-decoration: none;
&:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
&:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
&:hover {
background: var(--langBackgroundColor);
}
&:focus {
z-index: 1;
}
&:before {
content: "";
color: var(--borderColor);
padding-right: 10px;
}
}
}
.styled-link {
margin-left: .4rem;
font-size: .7em;
}
time {
font-size: .8em;
color: var(--mutedTextColor);
}
.desc {
color: var(--mutedTextColor);
font-size: 0.8em;
line-height: 1.5;
}
@keyframes flash {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.timestamp-colon {
animation-name: flash;
animation-duration: 2s;
animation-timing-function: step-end;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.timestamp-colon {
animation-name: none;
}
}
.offsetthis {
vertical-align: super;
font-size: .6em;
}
.photos {
display: flex;
gap: 1em;
flex-wrap: nowrap;
overflow: auto;
align-items: center;
.image-link {
flex-shrink: 0;
}
img {
background-color: var(--photoBackground);
}
}
figure {
margin: 1em 0 3em;
img {
margin: 0 auto;
max-height: calc(100vh - 6em);
background-color: var(--photoBackground);
display: block;
}
.image-link {
display: block;
width: fit-content;
margin: 0 auto 0.5em;
}
p {
margin-bottom: 0;
}
}
[data-page-type="photos"] {
header, main, footer {
max-width: 100%;
}
input {
position: absolute;
left: -100px;
&:checked + label path {
fill: var(--activeColor);
}
&:focus + label {
outline: auto;
outline-color: var(--activeColor);
}
}
label {
top: -30px;
left: 100px;
padding: .5em;
cursor: pointer;
position: relative;
display: inline-flex;
}
label path {
fill: var(--logoColor);
}
}
.photos-wrapper {
&:focus { outline: none; }
scroll-behavior: smooth;
clear: both;
text-align: center;
}
.back-link {
text-decoration: none;
color: var(--textColor);
background-color: var(--langBackgroundColor);
width: 1.6em;
text-align: center;
line-height: 1.6em;
aspect-ratio: 1/1;
display: inline-block;
border-radius: 4em;
}
[value*="grid"]:checked ~ .photos-wrapper {
display: grid;
column-gap: 2.5em;
grid-template-columns: repeat(2, 1fr);
grid-auto-flow: dense;
.figure-landscape {
grid-column: span 2;
}
figure {
margin-bottom: 0;
align-self: start;
}
img {
max-height: none;
height: auto;
}
}
[value="grid3fr"]:checked ~ .photos-wrapper {
grid-template-columns: repeat(3, 1fr);
.figure-landscape {
grid-column: span 3;
}
}
[value="x-scroll"]:checked ~ .photos-wrapper {
display: flex;
overflow: auto;
gap: 1.5em;
scroll-snap-type: x mandatory;
scroll-snap-align: center;
figure {
scroll-snap-align: center;
margin-bottom: 0;
flex-shrink: 0;
width: min-content;
&:has(.portrait) figcaption {
max-width: calc(100vh * 0.667 - 6em);
margin: auto;
}
&:has(.landscape) figcaption {
max-width: calc(100vw * 0.667 - 2em);
margin: auto;
}
}
img {
max-height: calc(100vh - 6em);
max-width: calc(100vw - 5em);
flex-shrink: 0;
}
}
.photo-metadata {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: auto;
gap: 0.5em;
open-heart {
margin-left: 0;
}
}
figcaption {
padding: .5em 1em;
p {
margin: 0;
}
}
[data-status-loading] {
margin: .17em 0 0;
display: block;
opacity: .3;
animation: loading .5s infinite alternate;
[data-status-text]:empty {
display: inline-block;
width: 100px;
height: 1em;
border-radius: .3em;
background: var(--subtleBackgroundColor);
}
}
// This ensures that
// 1. screens that are too short
// 2. screens that are not tall enough to display the full width of a 3:2 image
// at height: (100v - 6em) height
// don't get the option to use horizontal scroll.
// https://github.com/web-platform-tests/wpt/pull/34865
// @media (max-height: 540px), (max-width: calc((100vh - 6em) * 1.5)) {
@media (max-height: 540px), (max-width: calc(100vh * 1.4)) {
body {
padding: 0 2em;
}
.photos-wrapper {
margin-left: -2em;
margin-right: -2em;
img {
max-height: none;
&.landscape {
height: calc(100vw / 1.5);
}
&.portrait {
height: calc(100vw / 0.667);
}
&.square {
height: 100vw;
}
}
}
[name="layout"] {
&, + label { visibility: hidden; }
}
}
.stories {
display: flex;
gap: 1em;
align-items: center;
overflow: auto;
padding: 10px;
margin: -10px;
}
open-stories {
.count {
font-size: 0.8em;
}
&::part(dialog):focus {
outline: none;
}
&:not(:defined),
&::part(button) {
font-family: system-ui, sans-serif;
border: 1px solid var(--borderColor);
box-shadow: inset 0 0 0 2px var(--backgroundColor);
color: var(--textColor);
background: var(--subtleBackgroundColor);
padding: 1em 0;
text-align: center;
height: 76px;
width: 76px;
border-radius: 50%;
font-size: 0.65em;
box-sizing: border-box;
align-items: center;
display: flex;
flex-direction: column;
flex-shrink: 0;
transition: all .3s;
text-transform: lowercase;
line-height: normal;
justify-content: center;
cursor: pointer;
&:hover {
background: var(--linkColor);
color: var(--backgroundColor);
transform: scale(1.05);
}
}
&:not([is-highlight])::part(button) {
border-color: var(--secondaryTextColor);
}
&:not(.is-read):not(.is-empty):not([is-highlight]):not(.is-loading)::part(button) {
border-color: var(--linkColor);
}
&.is-loading {
opacity: .3;
animation: loading 1s infinite alternate;
&::part(button) {
pointer-events: none;
border: 0;
}
}
&.is-empty::part(button) {
pointer-events: none;
opacity: 0.5;
overflow: hidden;
position: relative;
&:before {
display: block;
content: '';
border-left: 1px solid var(--mutedTextColor);
position: absolute;
transform: rotate(-45deg);
top: 0;
left: 0;
width: 150%;
height: 150%;
transform-origin: top left;
}
}
}
@keyframes loading {
0% { opacity: .3 }
100% { opacity: .5 }
}
.monospace {
font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
font-size: 0.9em;
}
open-heart.text-open-heart {
display: inline;
margin-left: 1em;
transition: color .4s, border-color .4s;
&:not([disabled]):hover {
cursor: pointer;
color: var(--activeColor);
}
.on { display: none; }
&[aria-pressed="true"] {
border-color: var(--heartedBackgroundColor);
.on { display: initial; }
.off { display: none; }
}
&[count]:not([count="0"])::after {
content: "(" attr(count) ")";
}
}
kbd {
border: 1px solid var(--borderColor);
padding: 1px 4px;
border-radius: 3px;
box-shadow: 0 1px;
font-size: 0.9em;
}
nav {
display: flex;
flex-wrap: wrap;
column-gap: .8em;
margin: .6em 0;
}
.col-stories {
padding: 0;
margin: 0;
overflow: hidden;
background: black;
font-size: 2.2vh;
header, main, footer {
box-sizing: border-box;
width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
.story-header {
padding: 1vh 2vh;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
column-gap: .5vh;
row-gap: 0.2vh;
align-items: center;
position: absolute;
z-index: 1;
bottom: 0;
background-color: rgba(0, 0, 0, .7);
color: #fff;
}
.story-meta {
display: flex;
justify-content: space-between;
gap: 1em;
}
main {
display: flex;
height: 100vh;
align-items: center;
text-align: center;
justify-content: space-around;
}
main img {
max-height: 96vh;
max-width: 98vw;
border-radius: .5vh;
}
}
open-stories:not(:defined),
open-heart:not(:defined) {
display: none !important;
}
[hidden] {
display: none !important;
}
.time {
font-variant-numeric: tabular-nums;
}