quill for a blog page

assets/static/css/theme.css

@@ -575,6 +575,117 @@ body {
 /* --- square the icon buttons ------------------------------- */
 .btn-circle { border-radius: 0; }
 
+/* --- blog editor ------------------------------------------- */
+.blog-editor {
+  min-height: 24rem;
+  background: oklch(var(--b1));
+}
+.blog-editor .ql-editor {
+  min-height: 24rem;
+  font-size: 1rem;
+  line-height: 1.7;
+}
+.ql-toolbar.ql-snow,
+.ql-container.ql-snow {
+  border-color: oklch(var(--b3));
+}
+.ql-toolbar.ql-snow {
+  background: oklch(var(--b2));
+}
+.ql-snow .ql-stroke {
+  stroke: oklch(var(--bc));
+}
+.ql-snow .ql-fill {
+  fill: oklch(var(--bc));
+}
+.ql-snow .ql-picker,
+.ql-snow .ql-picker-options {
+  color: oklch(var(--bc));
+}
+.ql-snow .ql-picker-options {
+  background: oklch(var(--b1));
+  border-color: oklch(var(--b3));
+}
+.blog-image-size-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+}
+.blog-image-size-controls.hidden {
+  display: none;
+}
+.blog-image-size-controls button {
+  border: 1px solid oklch(var(--b3));
+  background: oklch(var(--b2));
+  padding: 0.3rem 0.65rem;
+  line-height: 1;
+}
+.blog-image-size-controls button:hover {
+  border-color: oklch(var(--p));
+  color: oklch(var(--p));
+}
+.blog-image-size-controls label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.blog-image-size-controls input {
+  width: 6rem;
+}
+.blog-editor img,
+.blog-content img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 1rem auto;
+  border-radius: 0.25rem;
+}
+.blog-editor img {
+  cursor: pointer;
+}
+.blog-image-small {
+  width: min(100%, 18rem);
+}
+.blog-image-medium {
+  width: min(100%, 34rem);
+}
+.blog-image-full {
+  width: 100%;
+}
+.blog-content {
+  line-height: 1.75;
+}
+.blog-content h2 {
+  margin: 1.5rem 0 0.75rem;
+  font-size: 1.35rem;
+  font-weight: 700;
+}
+.blog-content h3 {
+  margin: 1.25rem 0 0.5rem;
+  font-size: 1.15rem;
+  font-weight: 700;
+}
+.blog-content p,
+.blog-content ul,
+.blog-content ol {
+  margin: 0.75rem 0;
+}
+.blog-content ul {
+  list-style: disc;
+  padding-left: 1.4rem;
+}
+.blog-content ol {
+  list-style: decimal;
+  padding-left: 1.4rem;
+}
+.blog-content a {
+  color: oklch(var(--p));
+  text-decoration: underline;
+}
+
 /* --- small screens ----------------------------------------- */
 @media (max-width: 767px) {
   .term-nav { gap: 0.5rem; }