Merge pull request #2293 from shanberg/typography-for-work-3

Typography for work 3
athensresearch · Aug 20, 2022 · 72b993a · 72b993a
2 parents 03530f0 + 8721fde
commit 72b993a
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 10 deletions.
diff --git a/src/cljs/athens/types/default/view.cljs b/src/cljs/athens/types/default/view.cljs
@@ -59,7 +59,33 @@
                     :borderBottomStyle "solid"
                     :borderBottomColor "ref.foreground"
                     :cursor            "alias"
-                    :sx                {"WebkitBoxDecorationBreak" "clone"}
+                    :sx                {"WebkitBoxDecorationBreak" "clone"
+                                        :h1 {:marginBlock 0
+                                             "&:not(:last-child)" {:paddingInlineEnd "0.35ch"}
+                                             :fontSize "inherit"
+                                             :display "inline-block"}
+                                        :h2 {:marginBlock 0
+                                             "&:not(:last-child)" {:paddingInlineEnd "0.35ch"}
+                                             :fontSize "inherit"
+                                             :display "inline-block"}
+                                        :h3 {:marginBlock 0
+                                             "&:not(:last-child)" {:paddingInlineEnd "0.35ch"}
+                                             :fontSize "inherit"
+                                             :display "inline-block"}
+                                        :h4 {:marginBlock 0
+                                             "&:not(:last-child)" {:paddingInlineEnd "0.35ch"}
+                                             :fontSize "inherit"
+                                             :display "inline-block"}
+                                        :h5 {:marginBlock 0
+                                             "&:not(:last-child)" {:paddingInlineEnd "0.35ch"}
+                                             :fontSize "inherit"
+                                             :display "inline-block"}
+                                        :h6 {:marginBlock 0
+                                             "&:not(:last-child)" {:paddingInlineEnd "0.35ch"}
+                                             :fontSize "inherit"
+                                             :display "inline-block"}
+                                        :p {:display "inline-block"
+                                            :marginBlock 0}}
                     :_hover            {:textDecoration    "none"
                                         :borderBottomColor "transparent"
                                         :bg                "ref.background"}

diff --git a/src/js/components/Block/Container.tsx b/src/js/components/Block/Container.tsx
@@ -52,7 +52,6 @@ const _Container = React.forwardRef(({ children, isDragging, isHidden, isSelecte
         isHoveredNotChild && "is-hovered-not-child",
         hasPresence ? "is-presence" : "",
       ].filter(Boolean).join(' ')}
-      display="flex"
       lineHeight="2em"
       position="relative"
       borderRadius="0.125rem"
@@ -141,7 +140,28 @@ const _Container = React.forwardRef(({ children, isDragging, isHidden, isSelecte
         ".block-container": {
           marginLeft: "2em",
           gridArea: "body"
-        }
+        },
+        ".block-ref > .block > h2": {
+          margin: 0,
+        },
+        "&:not(:first-of-type):has(> .block-body .block-content .block > h1)": {
+          mt: 3
+        },
+        "&:not(:first-of-type):has(> .block-body .block-content .block > h2)": {
+          mt: 3
+        },
+        "&:not(:first-of-type):has(> .block-body .block-content .block > h3)": {
+          mt: 2
+        },
+        "&:not(:first-of-type):has(> .block-body .block-content .block > h4)": {
+          mt: 2
+        },
+        "&:not(:first-of-type):has(> .block-body .block-content .block > h5)": {
+          mt: 1
+        },
+        "&:not(:first-of-type):has(> .block-body .block-content .block > h6)": {
+          mt: 1
+        },
       }}
       {...menuSourceProps}
       onContextMenu={

diff --git a/src/js/components/Block/Content.tsx b/src/js/components/Block/Content.tsx
@@ -105,12 +105,12 @@ const _Content = ({ children, ...props }) => {
         borderRadius: "0.25rem",
         maxWidth: "calc(100% - 0.25rem)",
       },
-      "h1": { fontSize: "xl" },
-      "h2": { fontSize: "lg" },
-      "h3": { fontSize: "md" },
-      "h4": { fontSize: "sm" },
-      "h5": { fontSize: "xs" },
-      "h6": { fontSize: "xs" },
+      "h1": { fontSize: "xl", fontWeight: "600", letterSpacing: "0.025ch", color: "foreground.secondary" },
+      "h2": { fontSize: "lg", fontWeight: "600", letterSpacing: "0.025ch", color: "foreground.secondary" },
+      "h3": { fontSize: "md", fontWeight: "600", letterSpacing: "0.025ch", color: "foreground.secondary" },
+      "h4": { fontSize: "sm", fontWeight: "600", letterSpacing: "0.025ch", color: "foreground.secondary" },
+      "h5": { fontSize: "xs", fontWeight: "600", letterSpacing: "0.025ch", color: "foreground.secondary" },
+      "h6": { fontSize: "xs", fontWeight: "600", letterSpacing: "0.025ch", color: "foreground.secondary" },
       "blockquote": {
         marginInline: "0.5em",
         marginBlock: "0.125rem",

diff --git a/src/js/components/Icons/Icons.tsx b/src/js/components/Icons/Icons.tsx
@@ -150,7 +150,7 @@ export const BulletIcon = createIcon({
   displayName: 'BulletIcon',
   viewBox: '0 0 14 14',
   path: (
-    <><path d="M7.00002 9.33334C8.28868 9.33334 9.33335 8.28867 9.33335 7.00001C9.33335 5.71134 8.28868 4.66667 7.00002 4.66667C5.71136 4.66667 4.66669 5.71134 4.66669 7.00001C4.66669 8.28867 5.71136 9.33334 7.00002 9.33334Z" fill="currentColor" /></>
+    <path d="M7 8.75C7.9665 8.75 8.75 7.9665 8.75 7C8.75 6.0335 7.9665 5.25 7 5.25C6.0335 5.25 5.25 6.0335 5.25 7C5.25 7.9665 6.0335 8.75 7 8.75Z" fill="currentColor" />
   ),
 });