even more CSS

cohost-wc.css

@@ -142,7 +142,42 @@ cohost-post p,
 cohost-post pre {
   margin: 0;
 }
-.prose {
+cohost-post img,
+cohost-post video {
+  max-width: 100%;
+  height: auto;
+}
+cohost-post img,
+cohost-post svg,
+cohost-post video,
+cohost-post canvas,
+cohost-post audio,
+cohost-post iframe,
+cohost-post embed,
+cohost-post object {
+  display: block;
+}
+cohost-post button,
+cohost-post input,
+cohost-post optgroup,
+cohost-post select,
+cohost-post textarea {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+cohost-post button,
+cohost-post select {
+  text-transform: none;
+}
+cohost-post .prose {
   color: light-dark(#191919, #fff9f2);
   --tw-prose-body: light-dark(#374151, #fff9f2);
   --tw-prose-headings: light-dark(#111827, #fff9f2);
@@ -236,6 +271,32 @@ cohost-post .co-embed {
 cohost-post .co-ui-text {
   color: light-dark(rgb(25 25 25), rgb(255 249 242));
 }
+cohost-post .mask {
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+}
+cohost-post .mask-squircle {
+  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==);
+  mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==);
+}
+cohost-post .mask-roundrect {
+  border-radius: 12.5%;
+}
+cohost-post .mask-circle {
+  border-radius: 9999px;
+}
+cohost-post .co-embedded-ask {
+  border-color: rgb(229 107 111);
+  background-color: light-dark(rgb(255 249 242), rgb(25 25 25));
+  color: light-dark(rgb(25 25 25), rgb(255 249 242));
+}
+cohost-post .co-attribution {
+  color: light-dark(rgb(130 127 124), rgb(160 156 152));
+}
 
 /* Hide interactive UI */
 cohost-post button.co-link-button {
@@ -244,11 +305,72 @@ cohost-post button.co-link-button {
 
 /* Tailwind properties */
 
-cohost-post .text-right {
+cohost-post .align-middle {
-  text-align: right;
+  vertical-align: middle;
 }
-cohost-post .p-3 {
+cohost-post .aspect-square {
-  padding: 0.75rem;
+  aspect-ratio: 1 / 1;
+}
+cohost-post .border {
+  border-width: 1px;
+}
+cohost-post .break-words {
+  overflow-wrap: break-word;
+}
+cohost-post .col-start-1 {
+  grid-column-start: 1;
+}
+cohost-post .col-start-2 {
+  grid-column-start: 2;
+}
+cohost-post .content-start {
+  align-content: flex-start;
+}
+cohost-post .flex {
+  display: flex;
+}
+cohost-post .flex-initial {
+  flex: 0 1 auto;
+}
+cohost-post .flex-nowrap {
+  flex-wrap: nowrap;
+}
+cohost-post .font-bold {
+  font-weight: 700;
+}
+cohost-post .gap-x-3 {
+  -moz-column-gap: 0.75rem;
+  column-gap: 0.75rem;
+}
+cohost-post .gap-y-2 {
+  row-gap: 0.5rem;
+}
+cohost-post .grid {
+  display: grid;
+}
+cohost-post .grid-rows-\[2rem_1fr\] {
+  grid-template-rows: 2rem 1fr;
+}
+cohost-post .grid-cols-\[2rem_1fr\] {
+  grid-template-columns: 2rem 1fr;
+}
+cohost-post .h-8 {
+  height: 2rem;
+}
+cohost-post .h-full {
+  height: 100%;
+}
+cohost-post .hover\:underline:hover {
+  text-decoration: underline;
+}
+cohost-post .justify-between {
+  justify-content: space-between;
+}
+cohost-post .leading-8 {
+  line-height: 2rem;
+}
+cohost-post .m-3 {
+  margin: 0.75rem;
 }
 cohost-post .mt-0 {
   margin-top: 0px;
@@ -257,18 +379,81 @@ cohost-post .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+cohost-post .object-cover {
+  -o-object-fit: cover;
+  object-fit: cover;
+}
 cohost-post .overflow-hidden {
   overflow: hidden;
 }
-cohost-post .break-words {
+cohost-post .p-3 {
-  overflow-wrap: break-word;
+  padding: 0.75rem;
 }
 cohost-post .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
+cohost-post .relative {
+  position: relative;
+}
+cohost-post .rounded-lg {
+  border-radius: 0.5rem;
+}
+cohost-post .row-start-1 {
+  grid-row-start: 1;
+}
+cohost-post .text-right {
+  text-align: right;
+}
+cohost-post .w-8 {
+  width: 2rem;
+}
+cohost-post .w-full {
+  width: 100%;
+}
+
+/* CSS variables */
+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-text: var(--color-notWhite);
+  --color-bg-text: var(--color-notBlack);
+  --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: 244 187 187;
+  --color-secondary-300: 238 153 155;
+  --color-secondary-400: 229 107 111;
+  --color-secondary-600: 164 42 47;
+  --color-secondary-700: 123 27 31;
+  --color-secondary: var(--color-strawberry);
+  --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-accent: var(--color-mango);
+  --color-background: var(--color-notWhite);
+  --color-sidebar-bg: var(--color-notWhite);
+  --color-sidebar-text: var(--color-notBlack);
+  --color-sidebar-accent: var(--color-cherry);
+  --color-compose-button: var(--color-foreground);
+  --color-compose-button-400: var(--color-foreground-400);
+  --color-compose-button-600: var(--color-foreground-600);
+}
 
-/* TODO: light */
 @media (prefers-color-scheme: dark) {
   cohost-post {
     --color-notWhite: 255 249 242;
@@ -310,5 +495,7 @@ cohost-post .px-3 {
     --color-compose-button-400: var(--color-foreground-400);
     --color-compose-button-600: var(--color-foreground-600);
     --emoji-scale: 1.25em;
+    --tw-border-opacity: 1;
+    --tw-bg-opacity: 1;
   }
 }