docs: website margin improvements (arktypeio#821)

@malezjaa I can live with that! Merged⛵ Thank you for your help and congrats on your first ArkType PR!🎊
ahrjarrett · Jul 7, 2023 · 31964d8 · 31964d8
1 parent f8315eb
commit 31964d8
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 48 deletions.
diff --git a/dev/arktype.io/src/components/contents.tsx b/dev/arktype.io/src/components/contents.tsx
@@ -15,7 +15,6 @@ export const Contents = () => {
         <main style={{ display: "flex", justifyContent: "center" }}>
             <Stack
                 justifyContent="center"
-                alignItems="center"
                 padding="1rem 0rem 1rem"
                 spacing={1}
                 width="100%"
@@ -31,7 +30,7 @@ export const Contents = () => {
                     color={
                         colorMode === "dark" ? "primary.light" : "primary.dark"
                     }
-                    style={{ marginTop: "2rem", marginBottom: "2rem" }}
+                    className="contents"
                     fontSize="1.3rem"
                 >
                     {/* @blockFrom:README.md:intro */}

diff --git a/dev/arktype.io/src/components/features.tsx b/dev/arktype.io/src/components/features.tsx
@@ -210,7 +210,9 @@ const Feature = (props: FeatureProps) => {
             >
                 {props.description}
             </Typography>
-            <div>{props.image ?? null}</div>
+            <div style={{ padding: "6px", borderRadius: "16px" }}>
+                {props.image ?? null}
+            </div>
         </Stack>
     )
 }
diff --git a/dev/arktype.io/src/components/homeDemo.tsx b/dev/arktype.io/src/components/homeDemo.tsx
@@ -16,43 +16,46 @@ export const HomeDemo = () => {
     const [isActive, setIsActive] = useState<boolean>(pathname.includes("try"))
     const backgroundColor = isDarkMode ? "#ffffff00" : "#000000aa"
     return (
-        <Stack alignItems="start" width="100%">
-            <Button
-                variant="contained"
-                sx={{
-                    backgroundColor,
-                    backdropFilter: "blur(4px)",
-                    borderRadius: "2rem",
-                    fontSize: "1.5rem",
-                    fontFamily: cascadiaCodeFamily,
-                    textTransform: "none",
-                    color: palette.primary.main,
-                    "&:hover": {
+        <>
+            <Stack alignItems="start" width="100%">
+                <Button
+                    variant="contained"
+                    sx={{
                         backgroundColor,
-                        color: palette.secondary.main,
-                        backdropFilter: "blur(6px)"
-                    },
-                    zIndex: 1
-                }}
-                onClick={() => setIsActive(!isActive)}
-                endIcon={
-                    <div style={{ display: "flex" }}>
-                        {isActive ? <Collapse /> : <Expand />}
-                    </div>
-                }
-            >
-                {isActive ? "$ wq!" : "$ code demo.ts"}
-                <motion.div
-                    animate={{ opacity: 0 }}
-                    transition={{
-                        duration: 0.5,
-                        repeatType: "mirror",
-                        repeat: Infinity
+                        backdropFilter: "blur(4px)",
+                        borderRadius: "2rem",
+                        fontSize: "1.5rem",
+                        fontFamily: cascadiaCodeFamily,
+                        textTransform: "none",
+                        color: palette.primary.main,
+                        "&:hover": {
+                            backgroundColor,
+                            color: palette.secondary.main,
+                            backdropFilter: "blur(6px)"
+                        },
+                        zIndex: 1
                     }}
+                    onClick={() => setIsActive(!isActive)}
+                    endIcon={
+                        <div style={{ display: "flex" }}>
+                            {isActive ? <Collapse /> : <Expand />}
+                        </div>
+                    }
                 >
-                    _
-                </motion.div>
-            </Button>
+                    {isActive ? "$ wq!" : "$ code demo.ts"}
+                    <motion.div
+                        animate={{ opacity: 0 }}
+                        transition={{
+                            duration: 0.5,
+                            repeatType: "mirror",
+                            repeat: Infinity
+                        }}
+                    >
+                        _
+                    </motion.div>
+                </Button>
+            </Stack>
+
             <Stack width="100%">
                 {isActive ? (
                     <StackBlitzDemo embedId="demo" />
@@ -66,7 +69,7 @@ export const HomeDemo = () => {
                     />
                 )}
             </Stack>
-            <sub>
+            <sub style={{ marginLeft: "2.3px", marginTop: "5px" }}>
                 <code>[email protected]</code> in VS Code— no extensions or
                 plugins required (
                 <a
@@ -77,6 +80,6 @@ export const HomeDemo = () => {
                 </a>
                 )
             </sub>
-        </Stack>
+        </>
     )
 }
diff --git a/dev/arktype.io/src/components/installationBlock.tsx b/dev/arktype.io/src/components/installationBlock.tsx
@@ -15,7 +15,7 @@ export const FloatingInstallationBlock = () => {
     } as const satisfies Parameters<(typeof controls)["start"]>[0]
     scrollY.onChange((value) => {
         controls.start(
-            value ? { position: "fixed", top: "50%", width: 250 } : initial
+            value ? { position: "fixed", top: "50%", width: 340 } : initial
         )
     })
     return (

diff --git a/dev/arktype.io/src/css/custom.css b/dev/arktype.io/src/css/custom.css
@@ -20,12 +20,29 @@
     font-size: x-large;
 }
 
+.navbar__link {
+    font-size: x-large;
+    color: #ffffff;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.navbar-versions {
+    font-size: 21px !important;
+}
+
+.navbar__logo:hover {
+    scale: 1.1;
+    transition: all 0.2s ease-out;
+}
+
 .dropdown {
-    padding: 0px;
+    padding: 2px;
 }
 
 .navbar-github:hover {
     opacity: 0.6;
+    transition: all 0.2s ease;
 }
 
 .navbar-github::before {
@@ -53,7 +70,7 @@ header {
     text-align: center;
     position: relative;
     overflow: hidden;
-    background: #085b92;
+    background: #0c5c91;
 }
 
 [data-theme="dark"] .navbar {
@@ -88,17 +105,39 @@ header {
 
 .installationTabs {
     overflow: hidden;
-    height: 2.6rem;
-    margin-top: -1.5rem;
+    height: 2.1rem;
+    margin-top: -1.3rem;
     --ifm-tabs-color: #8a8a8a;
+    border-radius: 10px;
 }
 
 .subTabs {
-    height: 3rem;
-    margin-top: -1.5rem;
+    height: 2.5rem;
+    margin-top: -1.3rem;
     --ifm-tabs-color: #8a8a8a;
 }
 
+.margin-top--md {
+    margin-top: 0.8rem !important;
+}
+
+.tabs__item {
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+    margin: 0 0.5rem;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+@media only screen and (max-width: 768px) {
+    .contents {
+        margin-left: 2rem !important;
+        margin-right: 2rem !important;
+    }
+}
+
 .npmTab {
     --ifm-tabs-color-active: #ff3939;
     --ifm-tabs-color-active-border: #ff3939;
@@ -116,13 +155,13 @@ header {
 
 .theme-code-block {
     --prism-background-color: #1b1b1baa;
-    --ifm-pre-padding: 0.5rem;
+    --ifm-pre-padding: 1rem;
 }
 
 .inferable-code {
     position: relative;
-    background: #fffff0;
     border-radius: 0.5rem;
+    background: #fffff0;
 }
 
 .inferable-code .theme-code-block {