First step of online html export

app/assets/stylesheets/exports.scss

@@ -0,0 +1,152 @@
+$font-family-sans-serif: // Cross-platform generic font family (default user interface font)
+  system-ui,
+  // Safari for macOS and iOS (San Francisco)
+  -apple-system,
+  // Windows
+  "Segoe UI",
+  // Android
+  Roboto,
+  // Basic web fallback
+  "Helvetica Neue", Arial,
+  // Linux
+  "Noto Sans",
+  "Liberation Sans",
+  // Sans serif fallback
+  sans-serif,
+  // Emoji fonts
+  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+
+$enable-rounded: false;
+
+@import 'bootstrap/scss/bootstrap';
+
+@font-face {
+  font-display: block;
+  font-family: "bootstrap-icons";
+  src: url("./bootstrap-icons.woff2") format("woff2"),
+    url("./bootstrap-icons.woff") format("woff");
+}
+
+@import 'bootstrap-icons/font/bootstrap-icons';
+
+
+.rails-bootstrap-forms-date-select select,
+.rails-bootstrap-forms-time-select select,
+.rails-bootstrap-forms-datetime-select select {
+  display: inline-block;
+  width: auto;
+}
+
+.rails-bootstrap-forms-error-summary {
+  margin-top: 10px;
+}
+
+
+@import "trix/dist/trix";
+
+/*
+ * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
+ * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
+ * inclusion directly in any other asset bundle and remove this file.
+ *
+ *= require trix
+*/
+
+/*
+ * We need to override trix.css’s image gallery styles to accommodate the
+ * <action-text-attachment> element we wrap around attachments. Otherwise,
+ * images in galleries will be squished by the max-width: 33%; rule.
+*/
+.trix-content .attachment-gallery>action-text-attachment,
+.trix-content .attachment-gallery>.attachment {
+  flex: 1 0 33%;
+  padding: 0 0.5em;
+  max-width: 33%;
+}
+
+.trix-content .attachment-gallery.attachment-gallery--2>action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--2>.attachment,
+.trix-content .attachment-gallery.attachment-gallery--4>action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--4>.attachment {
+  flex-basis: 50%;
+  max-width: 50%;
+}
+
+.trix-content action-text-attachment .attachment {
+  padding: 0 !important;
+  max-width: 100% !important;
+}
+
+
+/* Fix trix dark mode */
+.trix-button-row {
+  .trix-button-group {
+    border: var(--bs-border-width) solid var(--bs-border-color);
+
+    .trix-button {
+      border: 0;
+      padding: var(--bs-padding)
+    }
+  }
+}
+
+[data-bs-theme=dark] {
+  .trix-button-row {
+    .trix-button-group {
+      .trix-button {
+        background-color: transparent !important;
+        filter: invert(100%) !important;
+      }
+    }
+  }
+}
+
+/* end fix trix dark mode */
+
+.trix-content {
+  pre {
+    background-color: var(--bs-secondary-bg) !important;
+    color: var(--bs-secondary-color) !important;
+    border: var(--bs-border-width) solid var(--bs-border-color) !important;
+    border-radius: 0 !important;
+  }
+
+  p {
+    margin-bottom: 0.6rem;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+trix-toolbar .trix-dialog {
+  background: var(--bs-secondary-bg) !important;
+  background-color: var(--bs-secondary-bg) !important;
+  color: var(--bs-secondary-color) !important;
+  border: var(--bs-border-width) solid var(--bs-border-color) !important;
+  border-radius: 0 !important;
+  box-shadow: none;
+  font-size: 1.1rem;
+}
+
+trix-toolbar .trix-button {
+  background: var(--bs-secondary-bg) !important;
+  background-color: var(--bs-secondary-bg) !important;
+  color: var(--bs-secondary-color) !important;
+  border: var(--bs-border-width) solid var(--bs-border-color) !important;
+  border-radius: 0 !important;
+
+}
+
+trix-toolbar .trix-input--dialog {
+  background: var(--bs-secondary-bg) !important;
+  background-color: var(--bs-secondary-bg) !important;
+  color: var(--bs-secondary-color) !important;
+  border: var(--bs-border-width) solid var(--bs-border-color) !important;
+  border-radius: 0 !important;
+}
+
+trix-toolbar .trix-dialog--link {
+  max-width: 900px;
+}