cohost-wc/cohost-wc.css

/* Atkinson Hyperlegible */

@font-face {
  font-display: swap;
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/atkinson-hyperlegible-v11-latin_latin-ext-regular.woff2")
    format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/atkinson-hyperlegible-v11-latin_latin-ext-italic.woff2")
    format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/atkinson-hyperlegible-v11-latin_latin-ext-700.woff2")
    format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-weight: 700;
  src: url("./fonts/atkinson-hyperlegible-v11-latin_latin-ext-700italic.woff2")
    format("woff2");
}

/* Keyframes */

@keyframes bounce {
  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
@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;
  }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes bounce {
    0%,
    100% {
      transform: translateY(-25%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: none;
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }
  .motion-safe\:animate-bounce {
    animation: bounce 1s infinite;
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  .motion-safe\:animate-spin {
    animation: spin 1s linear infinite;
  }
  .motion-safe\:transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes pulse {
    50% {
      opacity: 0.5;
    }
  }
  .motion-reduce\:animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .motion-reduce\:transition-none {
    transition-property: none;
  }
}

/* Cohost post content styling */

cohost-post * {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #ded9d3;
}
cohost-post a {
  color: inherit;
  text-decoration: inherit;
}

cohost-post hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}
cohost-post blockquote,
cohost-post dl,
cohost-post dd,
cohost-post h1,
cohost-post h2,
cohost-post h3,
cohost-post h4,
cohost-post h5,
cohost-post h6,
cohost-post hr,
cohost-post figure,
cohost-post p,
cohost-post pre {
  margin: 0;
}
.prose {
  color: light-dark(#191919, #fff9f2);
  --tw-prose-body: light-dark(#374151, #fff9f2);
  --tw-prose-headings: light-dark(#111827, #fff9f2);
  --tw-prose-lead: light-dark(#4b5563, #fff9f2);
  --tw-prose-links: light-dark(#111827, #fff9f2);
  --tw-prose-bold: light-dark(#111827, #fff9f2);
  --tw-prose-counters: light-dark(#6b7280, #fff9f2);
  --tw-prose-bullets: light-dark(#d1d5db, #fff9f2);
  --tw-prose-hr: light-dark(#e5e7eb, #bfbab5);
  --tw-prose-quotes: light-dark(#111827, #fff9f2);
  --tw-prose-quote-borders: light-dark(#e5e7eb, #bfbab5);
  --tw-prose-captions: light-dark(#6b7280, #fff9f2);
  --tw-prose-code: light-dark(#111827, #fff9f2);
  --tw-prose-pre-code: light-dark(#e5e7eb, #fff9f2);
  --tw-prose-pre-bg: light-dark(#1f2937, #191919);
  --tw-prose-th-borders: light-dark(#d1d5db, #bfbab5);
  --tw-prose-td-borders: light-dark(#e5e7eb, #bfbab5);
  font-size: 1em;
  line-height: 1.75;
}
cohost-post
  .prose
  :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}
cohost-post
  .prose
  :where(.prose > :first-child):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  margin-top: 0;
}
cohost-post
  .prose
  :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
cohost-post
  .prose
  :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 1em;
  margin-bottom: 1em;
}
cohost-post
  .prose
  :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  text-decoration: underline;
  font-weight: 500;
}
cohost-post
  .prose
  :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  list-style-type: disc;
}
cohost-post
  .prose
  :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}
cohost-post
  .prose
  :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
cohost-post
  .prose
  :where(.prose > :last-child):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  margin-bottom: 0;
}
cohost-post
  .prose
  :where(.prose > :first-child):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  margin-top: 0;
}
cohost-post .co-embed {
  background-color: light-dark(rgb(255 241 223), rgb(25 25 25));
}
cohost-post .co-ui-text {
  color: light-dark(rgb(25 25 25), rgb(255 249 242));
}

/* Hide interactive UI */
cohost-post button.co-link-button {
  display: none;
}

/* Tailwind properties */

cohost-post .text-right {
  text-align: right;
}
cohost-post .p-3 {
  padding: 0.75rem;
}
cohost-post .mt-0 {
  margin-top: 0px;
}
cohost-post .my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
cohost-post .overflow-hidden {
  overflow: hidden;
}
cohost-post .break-words {
  overflow-wrap: break-word;
}
cohost-post .px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* TODO: light */
@media (prefers-color-scheme: dark) {
  cohost-post {
    --color-notWhite: 255 249 242;
    --color-notBlack: 25 25 25;
    --color-cherry: 131 37 79;
    --color-strawberry: 229 107 111;
    --color-mango: 255 171 92;
    --color-longan: 255 216 168;
    --color-tertiary: var(--color-longan);
    --color-tertiary-200: 255 229 196;
    --color-tertiary-300: 255 216 168;
    --color-tertiary-400: 255 202 122;
    --color-tertiary-500: 183 133 61;
    --color-tertiary-600: 183 133 61;
    --color-tertiary-700: 132 94 38;
    --color-text: var(--color-notWhite);
    --color-bg-text: var(--color-notWhite);
    --color-foreground-100: 253 206 224;
    --color-foreground-200: 238 173 199;
    --color-foreground-300: 211 116 155;
    --color-foreground-400: 174 68 115;
    --color-foreground-500: 131 37 79;
    --color-foreground-600: 103 26 61;
    --color-foreground-700: 81 17 46;
    --color-foreground-800: 59 9 32;
    --color-foreground: var(--color-cherry);
    --color-secondary-200: 255 208 172;
    --color-secondary-300: 255 191 131;
    --color-secondary-400: 255 171 92;
    --color-secondary-600: 188 109 40;
    --color-secondary-700: 147 74 21;
    --color-secondary: var(--color-mango);
    --color-accent: var(--color-mango);
    --color-background: var(--color-notBlack);
    --color-sidebar-bg: var(--color-notBlack);
    --color-sidebar-text: var(--color-notWhite);
    --color-sidebar-accent: var(--color-mango);
    --color-compose-button: var(--color-foreground);
    --color-compose-button-400: var(--color-foreground-400);
    --color-compose-button-600: var(--color-foreground-600);
    --emoji-scale: 1.25em;
  }
}