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'