Merge pull request #114 from ceph/feature/additional-richtext-CSS

Additional richtext CSS.
ceph · Apr 6, 2021 · b458f86 · b458f86
2 parents 88badbd + d7fbc0a
commit b458f86
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 6 deletions.
diff --git a/src/css/base.blockquote.css b/src/css/base.blockquote.css
@@ -0,0 +1,10 @@
+/* ---------- BASE codeblock ---------- */
+
+.richtext blockquote {
+  border-left: var(--size-0_5) solid var(--color-grey-500);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--size-6);
+  margin: var(--size-6) 0;
+  padding: var(--size-4) var(--size-6);
+}
diff --git a/src/css/base.codeblock.css b/src/css/base.codeblock.css
@@ -0,0 +1,27 @@
+/* ---------- BASE codeblock ---------- */
+
+/* code */
+.richtext code {
+  background-color: var(--color-grey-300);
+  border: var(--size-px) solid var(--color-grey-500);
+  border-radius: var(--size-1);
+  font-size: inherit;
+  line-height: inherit;
+  padding: var(--size-0_5);
+}
+
+/* pre */
+.richtext pre {
+  background-color: var(--color-grey-300);
+  font-size: var(--font-size-md);
+  line-height: var(--size-6);
+  margin: var(--size-6) 0;
+  overflow-x: auto;
+  padding: var(--size-6);
+}
+
+.richtext pre code {
+  background: none;
+  border: 0;
+  padding: 0;
+}
diff --git a/src/css/base.table.css b/src/css/base.table.css
@@ -1,13 +1,33 @@
 /* ---------- BASE table ---------- */
 
-.table,
+.table {
+  font-size: var(--font-size-md);
+  line-height: var(--size-6);
+  width: var(--size-full);
+}
+
+.table td {
+  border-bottom: var(--size-px) solid var(--color-grey-500);
+  padding: var(--size-4) 0;
+  vertical-align: top;
+}
+
+/* richtext */
 .richtext table {
   font-size: var(--font-size-md);
   line-height: var(--size-6);
+  margin: var(--size-6) 0;
   width: var(--size-full);
 }
 
-.table td,
+.richtext table th {
+  border-bottom: var(--size-0_5) solid var(--color-grey-500);
+  font-weight: var(--font-weight-semibold);
+  padding: 0 0 var(--size-4);
+  text-align: left;
+  vertical-align: top;
+}
+
 .richtext table td {
   border-bottom: var(--size-px) solid var(--color-grey-500);
   padding: var(--size-4) 0;

diff --git a/src/css/main.css b/src/css/main.css
@@ -12,6 +12,8 @@
 @import "settings.sizes.css";
 @import "settings.typography.css";
 
+@import "base.blockquote.css";
+@import "base.codeblock.css";
 @import "base.document.css";
 @import "base.focus.css";
 @import "base.forms.css";

diff --git a/src/css/object.grid.css b/src/css/object.grid.css
@@ -144,7 +144,7 @@
   }
 
   .md\:grid--cols-56-auto {
-    grid-template-columns: var(--size-56) 1fr;
+    grid-template-columns: var(--size-56) minmax(0, 1fr);
   }
 }
 
@@ -204,15 +204,15 @@
   }
 
   .lg\:grid--cols-72-auto {
-    grid-template-columns: var(--size-72) 1fr;
+    grid-template-columns: var(--size-72) minmax(0, 1fr);
   }
 
   .lg\:grid--cols-auto-72 {
-    grid-template-columns: 1fr var(--size-72);
+    grid-template-columns: minmax(0, 1fr) var(--size-72);
   }
 
   .lg\:grid--cols-auto-160 {
-    grid-template-columns: 1fr var(--size-160);
+    grid-template-columns: minmax(0, 1fr) var(--size-160);
   }
 }