Start filling out the About page (#24)

Closes #21 - port over some text from 1.0 help page as appropriate, and make design tweaks and some wording tweaks --------- Co-authored-by: Vincent Rubinetti <[email protected]>
JRaviLab · Oct 8, 2024 · 6e14ca7 · 6e14ca7
1 parent 185f1e8
commit 6e14ca7
Show file tree

Hide file tree

Showing 8 changed files with 484 additions and 119 deletions.
diff --git a/frontend/bun.lockb b/frontend/bun.lockb
diff --git a/frontend/src/components/Flex.tsx b/frontend/src/components/Flex.tsx
@@ -18,7 +18,7 @@ type Props<TagName extends TagNames = "div"> = {
   /** amount of space between items */
   gap?: "md" | "none" | "xs" | "sm" | "lg" | "xl";
   /** vertical gap fraction of horizontal gap */
-  gapRatio?: 1 | 0.5;
+  gapRatio?: 1 | 0.5 | 0.25 | 0;
   /** whether to wrap items */
   wrap?: true | false;
   /** whether to make full width */

diff --git a/frontend/src/components/Heading.module.css b/frontend/src/components/Heading.module.css
@@ -14,10 +14,13 @@ h2.heading {
 h3.heading,
 h4.heading {
   justify-content: flex-start;
-  margin-bottom: -1em;
   text-align: left;
 }
 
+:is(h3.heading, h4.heading) + :not(h3.heading, h4.heading) {
+  margin-top: -1em;
+}
+
 .icon {
   color: var(--deep);
 }

diff --git a/frontend/src/components/Link.module.css b/frontend/src/components/Link.module.css
@@ -1,6 +1,5 @@
-.icon {
-  position: relative;
-  top: -0.1em;
-  padding-left: 0.5em;
-  vertical-align: middle;
+.link {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
 }
diff --git a/frontend/src/components/Link.tsx b/frontend/src/components/Link.tsx
@@ -51,7 +51,7 @@ const Link = forwardRef(
         {...props}
       >
         {children}
-        {_showArrow && <FaArrowUpRightFromSquare className={classes.icon} />}
+        {_showArrow && <FaArrowUpRightFromSquare />}
       </a>
     ) : (
       <RouterLink
@@ -64,7 +64,7 @@ const Link = forwardRef(
         {...props}
       >
         {children}
-        {_showArrow && <FaArrowUpRightFromSquare className={classes.icon} />}
+        {_showArrow && <FaArrowUpRightFromSquare />}
       </RouterLink>
     );
 

diff --git a/frontend/src/components/TableOfContents.module.css b/frontend/src/components/TableOfContents.module.css
@@ -41,6 +41,7 @@
 }
 
 .link {
+  display: inline-block;
   flex-shrink: 0;
   padding: 5px 10px;
   overflow: hidden;