chore: docs updates (#57)

* chore: use dvw/dvh for frame

* chore: animate only colors

* chore: pass --hos to vite for debugging

* chore: fix frame height && adjust animation

* chore: fix image margins

Author: fand

Diff for: packages/docs/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },

Diff for: packages/docs/src/dom/ExamplesSection.css

@@ -11,6 +11,7 @@
 
 .ImgContainer img {
     height: 320px;
+    max-width: calc(100% - 40px);
     margin: 0 20px;
 }
 

Diff for: packages/docs/src/dom/Frame.css

@@ -1,13 +1,34 @@
 .Frame {
     position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
     box-sizing: border-box;
-    border: 1px solid #00FFEE;
     z-index: 999999;
     pointer-events: none;
-    box-shadow: inset 0px 0px 10px #00FFEE;
-    transition: all 1s;
+}
+.Frame.top {
+    width: 100%;
+    height: 2px;
+    top: 0px;
+    left: 0px;
+    transition: all 0.5s 0s;
+}
+.Frame.bottom {
+    width: 100%;
+    height: 2px;
+    bottom: 0px;
+    left: 0px;
+    transition: all 0.5s 0.4s;
+}
+.Frame.left {
+    width: 2px;
+    height: 200%;
+    top: 0px;
+    left: 0px;
+    transition: all 0.5s 0.2s;
+}
+.Frame.right {
+    width: 2px;
+    height: 200%;
+    top: 0px;
+    right: 0px;
+    transition: all 0.5s 0.2s;
 }

Diff for: packages/docs/src/dom/Frame.tsx

@@ -8,9 +8,9 @@ type Props = {
 };
 
 const Frame: React.FC<Props> = (props: Props) => {
-    const [borderColor, setBorderColor] = useState("#00FFEE");
+    const [backgroundColor, setBorderColor] = useState("#00FFEE");
     const [boxShadow, setBoxShadow] = useState("inset 0 0 10px #00FFEE");
-    const interval = props.interval || 5000;
+    const interval = props.interval || 4000;
 
     useEffect(() => {
         let count = 0;
@@ -25,7 +25,26 @@ const Frame: React.FC<Props> = (props: Props) => {
         };
     }, [interval]);
 
-    return <div className="Frame" style={{ borderColor, boxShadow }}></div>;
+    return (
+        <>
+            <div
+                className="Frame top"
+                style={{ backgroundColor, boxShadow }}
+            ></div>
+            <div
+                className="Frame bottom"
+                style={{ backgroundColor, boxShadow }}
+            ></div>
+            <div
+                className="Frame left"
+                style={{ backgroundColor, boxShadow }}
+            ></div>
+            <div
+                className="Frame right"
+                style={{ backgroundColor, boxShadow }}
+            ></div>
+        </>
+    );
 };
 
 export default Frame;

Diff for: packages/docs/src/dom/LogoSection.css

@@ -14,9 +14,3 @@
     width: 1280px;
     max-width: 100%;
 }
-
-@media (max-width: 768px) {
-    .LogoSection .logo {
-        max-width: 110%;
-    }
-}