cohost/pch/stars.toml

version = 1
title = 'Style Inlining'

[[modules]]
plugin = 'source.text'
data.contents = '''
<div id=grid>
  <div id=sky></div>
  <div class=same-place id=moon>🌝</div>
<div class=same-place id=sun>🌞</div>
<div id="stars" class="same-place"><div class="star same-place" style="transform: translate(calc(-11.69rem * var(--tw-border-opacity, 0)), calc(-18.50rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(16.74rem * var(--tw-border-opacity, 0)), calc(2.63rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-5.67rem * var(--tw-border-opacity, 0)), calc(-0.75rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(1.55rem * var(--tw-border-opacity, 0)), calc(12.29rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-10.63rem * var(--tw-border-opacity, 0)), calc(-8.06rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(15.61rem * var(--tw-border-opacity, 0)), calc(16.46rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(4.42rem * var(--tw-border-opacity, 0)), calc(4.54rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(8.36rem * var(--tw-border-opacity, 0)), calc(3.39rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-2.88rem * var(--tw-border-opacity, 0)), calc(0.51rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(3.10rem * var(--tw-border-opacity, 0)), calc(0.05rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-24.24rem * var(--tw-border-opacity, 0)), calc(-21.06rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(15.48rem * var(--tw-border-opacity, 0)), calc(20.98rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-9.46rem * var(--tw-border-opacity, 0)), calc(-5.21rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-14.70rem * var(--tw-border-opacity, 0)), calc(15.89rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(8.28rem * var(--tw-border-opacity, 0)), calc(-11.25rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-13.26rem * var(--tw-border-opacity, 0)), calc(-5.86rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(15.09rem * var(--tw-border-opacity, 0)), calc(24.96rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-12.67rem * var(--tw-border-opacity, 0)), calc(-8.80rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(5.47rem * var(--tw-border-opacity, 0)), calc(-19.55rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(20.10rem * var(--tw-border-opacity, 0)), calc(12.32rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(16.06rem * var(--tw-border-opacity, 0)), calc(18.49rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-24.24rem * var(--tw-border-opacity, 0)), calc(-24.24rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-10.29rem * var(--tw-border-opacity, 0)), calc(8.80rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(-16.77rem * var(--tw-border-opacity, 0)), calc(12.94rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(8.02rem * var(--tw-border-opacity, 0)), calc(8.40rem * var(--tw-border-opacity, 0)));">*</div><div class="star same-place" style="transform: translate(calc(5.42rem * var(--tw-border-opacity, 0)), calc(-11
</div>
'''
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'