fix

arktypeio · Jul 7, 2023 · 203e0df · 203e0df
1 parent 734f1ce
commit 203e0df
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 22 deletions.
diff --git a/dev/arktype.io/src/components/autoplayDemo.tsx b/dev/arktype.io/src/components/autoplayDemo.tsx
@@ -16,7 +16,6 @@ export const AutoplayDemo = (props: AutoplayDemoProps) => (
         muted
         // picture in picture doesn't work well since the page is designed around the demo
         disablePictureInPicture={true}
-        style={{ borderRadius: "15px" }}
         {...props}
     />
 )
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,12 +30,7 @@ export const Contents = () => {
                     color={
                         colorMode === "dark" ? "primary.light" : "primary.dark"
                     }
-                    style={{
-                        marginTop: "2rem",
-                        marginBottom: "2rem",
-                        marginLeft: "1rem",
-                        marginRight: "1rem"
-                    }}
+                    className="contents"
                     fontSize="1.3rem"
                 >
                     {/* @blockFrom:README.md:intro */}

diff --git a/dev/arktype.io/src/components/homeDemo.tsx b/dev/arktype.io/src/components/homeDemo.tsx
@@ -69,7 +69,7 @@ export const HomeDemo = () => {
                     />
                 )}
             </Stack>
-            <sub style={{ margin: "5px" }}>
+            <sub style={{ marginLeft: "5px", marginTop: "5px" }}>
                 <code>[email protected]</code> in VS Code— no extensions or
                 plugins required (
                 <a

diff --git a/dev/arktype.io/src/components/installationBlock.tsx b/dev/arktype.io/src/components/installationBlock.tsx
@@ -34,7 +34,7 @@ export const MobileInstallationBlock = () => (
 export const InstallationBlock = () => (
     <Card
         style={{
-            height: "9.5rem",
+            height: "9.1rem",
             margin: ".5rem",
             padding: "1rem",
             backgroundColor: "#ffffff00",

diff --git a/dev/arktype.io/src/css/custom.css b/dev/arktype.io/src/css/custom.css
@@ -105,33 +105,36 @@ header {
 
 .installationTabs {
     overflow: hidden;
-    height: 2.3rem;
-    margin-top: -0.8rem;
+    height: 2.6rem;
+    margin-top: -1.3rem;
     --ifm-tabs-color: #8a8a8a;
     border-radius: 10px;
 }
 
 .subTabs {
-    height: 2.3rem;
-    margin-top: -1.2rem;
+    height: 2.6rem;
+    margin-top: -1.5rem;
     --ifm-tabs-color: #8a8a8a;
 }
 
-.tabs {
-    display: flex;
-    align-items: center;
-}
-
 .tabs__item {
-    border-radius: 10px;
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
     margin: 0 0.5rem;
-    padding: 0.3rem 0.8rem;
+    padding: 0.5rem 1rem;
     font-size: 1rem;
     font-weight: 500;
     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;
@@ -154,7 +157,8 @@ header {
 
 .inferable-code {
     position: relative;
-    border-radius: 1rem;
+    border-radius: 0.5rem;
+    background: #fffff0;
 }
 
 .inferable-code .theme-code-block {