diff --git a/html/stars.tsx b/html/stars.tsx new file mode 100644 index 0000000..56eb7b3 --- /dev/null +++ b/html/stars.tsx @@ -0,0 +1,24 @@ +import { render_and_copy } from "./common.tsx"; + +const Star = () => ( +
+ * +
+); +const Stars = ({ n }: { n: number }) => ( +
+ {...Array.from({ length: n }, Star)} +
+); + +render_and_copy(); diff --git a/pch/stars.toml b/pch/stars.toml new file mode 100644 index 0000000..777a10a --- /dev/null +++ b/pch/stars.toml @@ -0,0 +1,525 @@ +version = 1 +title = 'Style Inlining' + +[[modules]] +plugin = 'source.text' +data.contents = ''' +
+
+
🌝
+
🌞
+
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
+
+''' +data.language = 'html' +sends = [2] + +[[modules]] +plugin = 'source.text' +data.contents = ''' +.same-place { + grid-area: 1/1; +} + +#moon, #sun { + font-size: 5rem; + height: 100%; + transform-origin: bottom; + transition: transform 5s; +} + +#stars { + color: white; + display: grid; + z-index: -100; + opacity: var(--tw-border-opacity, 0); + transition: opacity 0s 5s; + //outline: 1px solid red; + aspect-ratio: 1/2; +} + +.star { + text-align: center; + transition: transform 1s 5s; + transform-origin: top; +} + +#sun { + transform: rotate(calc(0.5turn * var(--tw-border-opacity, 0))); +} + +#moon { + transform: rotate(calc(-0.5turn * (1 - var(--tw-border-opacity, 0)))); +} + +#grid { + display: grid; + width: 100%; + aspect-ratio: 2/1; + justify-content: center; + align-items: center; + //background-color: rgb(157 252 238 / calc(1 - var(--tw-border-opacity, 0))); + transition: background-color 1s; +} + +#bushes { + transform: translateY(calc(30rem * var(--tw-border-opacity, 0))); + transition: transform 5s; + height: 100%; + width: 100%; + overflow: hidden; + display: grid; + z-index: -100; + opacity: calc(1 - var(--tw-border-opacity, 0)); +} + +.bush { + aspect-ratio: 1; + background-color: #32b83f; + border-radius: 4113rem; + overflow: hidden; +} + +#sky { + width: 100vw; + height: 1000rem; + overflow: hidden; + position: absolute; + top: 0; + left: 0; + right: 0; + background-color: red; + background: linear-gradient(to bottom, rgb(107, 207, 255), rgb(75, 197, 255), rgb(51, 190, 255), rgb(0, 173, 255), rgb(133, 89, 136), rgb(107, 73, 132), rgb(72, 52, 117), rgb(43, 47, 119), rgb(20, 24, 82), rgb(7, 11, 52), black); + background-repeat: no-repeat; + background-position-y: calc(-1000rem * var(--tw-border-opacity, 0)); + transition: background-position 5s; +}''' +data.language = 'css' +sends = [2] + +[[modules]] +plugin = 'transform.style-inliner' +data.mode = 'attr' +sends = [3] + +[[modules]] +plugin = 'transform.svg-to-background' +data.useSvgo = true +sends = ['output'] + +[[modules]] +plugin = 'source.sass' +data.contents = ''' +@font-face { font-family: "League Mono"; + src: url("../src/fonts/LeagueMono-VF.woff") format("woff"); + font-weight: 100 900; + font-stretch: 50% 200%; + font-display: swap; +} + +@font-face { + font-family: "Papyrus"; + src: local("Papyrus"), url("../src/fonts/Papyrus.woff") format("woff"), + url("../src/fonts/Papyrus.woff2") format("woff2"); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@mixin display { + font-family: "League Mono", serif; +} + +@mixin body { + font-family: "Atkinson Hyperlegible", sans-serif; +} + +.headline { + @include display; + font-size: 2.25rem; + font-weight: 400; +} + +.subhed { + @include display; + font-size: 1.5rem; + font-weight: 400; +} + +.big-body { + @include body; + font-size: 1.5rem; + font-weight: 600; +} + +.big-body-thin { + @include body; + font-size: 1.5rem; + font-weight: 400; +} +/* source-code-pro-cyrillic-ext-400-normal */ +@font-face { + font-family: 'Source Code Pro'; + font-style: normal; + font-display: swap; + font-weight: 400; + src: url(./files/source-code-pro-cyrillic-ext-400-normal.woff2) format('woff2'), url(./files/source-code-pro-cyrillic-ext-400-normal.woff) format('woff'); + unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; +} + +/* source-code-pro-cyrillic-400-normal */ +@font-face { + font-family: 'Source Code Pro'; + font-style: normal; + font-display: swap; + font-weight: 400; + src: url(./files/source-code-pro-cyrillic-400-normal.woff2) format('woff2'), url(./files/source-code-pro-cyrillic-400-normal.woff) format('woff'); + unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; +} + +/* source-code-pro-greek-ext-400-normal */ +@font-face { + font-family: 'Source Code Pro'; + font-style: normal; + font-display: swap; + font-weight: 400; + src: url(./files/source-code-pro-greek-ext-400-normal.woff2) format('woff2'), url(./files/source-code-pro-greek-ext-400-normal.woff) format('woff'); + unicode-range: U+1F00-1FFF; +} + +/* source-code-pro-greek-400-normal */ +@font-face { + font-family: 'Source Code Pro'; + font-style: normal; + font-display: swap; + font-weight: 400; + src: url(./files/source-code-pro-greek-400-normal.woff2) format('woff2'), url(./files/source-code-pro-greek-400-normal.woff) format('woff'); + unicode-range: U+0370-03FF; +} + +/* source-code-pro-vietnamese-400-normal */ +@font-face { + font-family: 'Source Code Pro'; + font-style: normal; + font-display: swap; + font-weight: 400; + src: url(./files/source-code-pro-vietnamese-400-normal.woff2) format('woff2'), url(./files/source-code-pro-vietnamese-400-normal.woff) format('woff'); + unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; +} + +/* source-code-pro-latin-ext-400-normal */ +@font-face { + font-family: 'Source Code Pro'; + font-style: normal; + font-display: swap; + font-weight: 400; + src: url(./files/source-code-pro-latin-ext-400-normal.woff2) format('woff2'), url(./files/source-code-pro-latin-ext-400-normal.woff) format('woff'); + unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; +} + +/* source-code-pro-latin-400-normal */ +@font-face { + font-family: 'Source Code Pro'; + font-style: normal; + font-display: swap; + font-weight: 400; + src: url(./files/source-code-pro-latin-400-normal.woff2) format('woff2'), url(./files/source-code-pro-latin-400-normal.woff) format('woff'); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} + +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + [type="text"], + [type="email"], + [type="url"], + [type="password"], + [type="number"], + [type="date"], + [type="datetime-local"], + [type="month"], + [type="search"], + [type="tel"], + [type="time"], + [type="week"], + [multiple], + textarea, + select { + @apply bg-notWhite text-notBlack placeholder-gray-700; + } + + *:focus { + // outline: 3px solid rebeccapurple; + @apply outline outline-4 outline-foreground; + @apply ring-foreground #{!important}; + } + + /* Remove :focus styling for browsers that do support :focus-visible */ + *:focus:not(:focus-visible) { + @apply outline-none; + } + + /* Add focus styling back in browsers that do support :focus-visible */ + *:focus-visible { + @apply outline outline-4 outline-foreground; + @apply ring-foreground #{!important}; + } + + * { + @apply antialiased; + } + + html { + --font-sans: theme("fontFamily.sans"); + } +} + +@layer components { + // TODO: clean up use of h* elements everywhere so we don't have to use + // classes for heading styles + .h1 { + @apply font-league text-8xl font-semibold tracking-[-0.07em]; + font-stretch: 200%; + } + + .h2 { + @apply font-league text-6xl font-normal tracking-[-0.07em]; + font-stretch: 150%; + } + + .h3 { + @apply font-atkinson text-5xl; + } + + .h4 { + @apply font-atkinson text-4xl font-bold; + } + + .h5 { + @apply font-league text-2xl tracking-tighter; + } + + .h6 { + @apply font-league text-xl font-semibold leading-6 tracking-tighter; + } + + .subtitle-1 { + @apply font-atkinson text-base; + } + + .subtitle-2 { + @apply font-atkinson text-sm font-bold tracking-wide; + } + + .body-1 { + @apply font-atkinson text-base; + } + + .body-2 { + @apply font-atkinson text-sm; + } + + [type="radio"] { + @apply appearance-none border-2 border-foreground checked:bg-foreground + checked:focus:bg-foreground; + } + + [id$="footnote-label"] { + @apply sr-only; + } + + input[type="checkbox"] { + @apply bg-notWhite text-cherry disabled:cursor-not-allowed disabled:text-cherry-300; + + &.rounded-checkbox { + @apply h-6 w-6 rounded-lg border-2 border-foreground text-foreground focus:ring-foreground; + } + } + + div[data-post-preview] hr:first-of-type { + @apply overflow-visible; + + &::after { + content: "read more"; + + @apply relative left-4 top-[-1rem]; + @apply bg-white px-2 text-sm font-bold text-gray-700; + } + } +} + +@layer utilities { + .mask { + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center; + } + + .mask-squircle { + mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==); + } + + .mask-roundrect { + @apply rounded-[12.5%]; + } + + .mask-circle { + @apply rounded-full; + } + + .mask-egg { + mask-image: url("../client/images/icons/egg.svg"); + } + + .mask-capsule-big { + mask-image: url("../client/images/icons/capsule-big.svg"); + } + + .mask-capsule-small { + mask-image: url("../client/images/icons/capsule-small.svg"); + } + + svg.cohost-shadow-light { + filter: drop-shadow(0px 4px 5px rgba(25, 25, 25, 0.14)) + drop-shadow(0px 1px 10px rgba(25, 25, 25, 0.12)) + drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2)); + } + + .cohost-shadow-light { + &.mask { + filter: drop-shadow(0px 4px 5px rgba(25, 25, 25, 0.14)) + drop-shadow(0px 1px 10px rgba(25, 25, 25, 0.12)) + drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2)); + } + } + + .cohost-shadow-dark { + &.mask { + filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14)) + drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12)) + drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2)); + } + } + + svg.cohost-shadow-dark { + filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14)) + drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12)) + drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2)); + } + + :not(svg):not(.mask).cohost-shadow-light { + box-shadow: 0px 4px 5px rgba(25, 25, 25, 0.14), + 0px 1px 10px rgba(25, 25, 25, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2); + } + + :not(svg):not(.mask).cohost-shadow-dark { + box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), + 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2); + } + + .duotone-wrapper { + @apply relative flex h-full overflow-hidden bg-mango; + flex: 1 1 100%; + } + + .duotone-wrapper div { + @apply relative h-full w-full max-w-full mix-blend-multiply contrast-100 grayscale will-change-transform; + flex: 1 0 100%; + } + + .duotone-wrapper::before { + @apply absolute inset-0 z-[1] h-full w-full bg-cherry mix-blend-lighten; + content: ""; + } + + .styled-scrollbars-light { + scrollbar-color: rgb(var(--color-mango)) rgb(var(--color-notWhite)); + } + + .styled-scrollbars-dark { + scrollbar-color: rgb(var(--color-mango)) rgb(var(--color-notBlack)); + } +} + +@mixin base-button( + $border-width, + $border-line-style: none, + $border-color: currentcolor +) { + align-items: center; + border: $border-width $border-line-style $border-color; + border-radius: 200px; + display: flex; + font-weight: 600; + line-height: 1.25; + // so the button works out the same height no matter the border width + padding: calc(0.5rem - #{$border-width}) 1rem; + + svg:first-child { + // leave some extra space to the right of an icon, if one's present + margin-right: 0.5rem; + } +} + +/////////////////////////////////////////////////////////////////////////////// +// common styles +/////////////////////////////////////////////////////////////////////////////// +.button-bar { + align-items: center; + display: flex; + flex-direction: row; + + .spacer { + flex: 1; + } + + * ~ .spacer { + margin-right: 1rem; + } + + .spacer ~ * { + margin-left: 1rem; + } +} + +// bring these in from the freshdesk widget so we don't have a loadbearing crime +// dependency on that +@keyframes slideupright { + 0% { + transform: scale(0); + transform-origin: bottom right; + } + + 100% { + transform: scale(1); + transform-origin: bottom right; + } +} + +@keyframes slideupleft { + 0% { + transform: scale(0); + transform-origin: bottom left; + } + + 100% { + transform: scale(1); + transform-origin: bottom left; + } +} +''' +data.syntax = 'scss' +sends = [2] +graphPos = [-456, 120] + +[[modules]] +plugin = 'source.sass' +data.contents = '' +data.syntax = 'scss' + +[[modules]] +plugin = 'source.sass' +data.contents = '' +data.syntax = 'scss'