Merge pull request #103 from torusresearch/mobile-support

Add mobile support

docs/key-infrastructure/node-operators.mdx

@@ -7,7 +7,7 @@ title: List of Node Operators
 Members of the Torus Network are validator nodes that operate the Distributed Key Generation, Proactive Secret Sharing and Key Assignment protocol, and consist of geographically distributed and diverse businesses institutions. The Torus Network exists to make their collective mission a reality: to create a simple key management store that empowers billions of people to leverage on the benefits of blockchain technology. Each Torus Node is represented on the Torus Network and governs its future.
 
 
-<img  height="500" style={{display:"block","margin-bottom":"20px", "margin-top":"20px", "margin-left": "auto", "margin-right": "auto"}} src="/images/torus-network.png"/>
+<img style={{display:"block", maxHeight: "500px", margin:"20px auto"}} src="/images/torus-network.png"/>
 
 In no particular order, current node operators are:
 1. Binance

docs/key-infrastructure/overview.mdx

@@ -16,7 +16,7 @@ In this documentation we further describe the architecture of TKI and detail sev
 
 The user starts by generating a 2 out of 3 (2/3) Shamir Secret Sharing. This gives the user three shares: ShareA, ShareB, and ShareC.
 
-<img  height="500" style={{display:"block","margin-bottom":"20px", "margin-top":"20px", "margin-left": "auto", "margin-right": "auto"}} src="/contents/tki-overview-architecture.png"/>
+<img style={{display:"block", maxHeight: "500px", margin:"20px auto"}} src="/contents/tki-overview-architecture.png"/>
 
 1. **ShareA is stored on the user's device**: Implementation is device and system specific. For example, on mobile devices, the share could be stored in device storage secured via biometrics.
 2. **ShareB is managed by a login service via node operators**: This share is further split amongst a network of nodes and retrieved via conventional authentication flows.

docs/key-infrastructure/role-of-torus-nodes/overview.mdx

@@ -6,7 +6,7 @@ Torus nodes run a Distributed Key Generation protocol amongst themselves to assi
 and return secrets/keys to users. In general within Torus Key Infrastructure, nodes manage
 a share retrieved via conventional OAuth flows.
 
-<img  height="500" style={{display:"block","margin-bottom":"20px", "margin-top":"20px", "margin-left": "auto", "margin-right": "auto"}} src="/contents/tki-overview-architecture.png"/>
+<img style={{display:"block", maxHeight: "500px", margin:"20px auto"}} src="/contents/tki-overview-architecture.png"/>
 
 The architecture consists of four parts:‌
 

docs/key-infrastructure/technical-architecture.mdx

@@ -9,7 +9,7 @@ specification. It may become outdated. For the latest and greatest, check out
 our_ [_open-source code_](https://github.com/tkey/tkey).
 
 
-<img  height="500" style={{display:"block","margin-bottom":"20px", "margin-top":"20px", "margin-left": "auto", "margin-right": "auto"}} src="/contents/tki-technical-architecture.png"/>
+<img style={{display:"block", maxHeight: "500px", margin:"20px auto"}} src="/contents/tki-technical-architecture.png"/>
 
 
 ### Components

docs/open-login/what-is-openlogin.mdx

@@ -12,9 +12,9 @@ For dapps, that means a key (many key types supported) pluggable into **any Web3
 more security guarantees, GDPR, CPRA, or CCPA compliance, and creates a better way to give users the features they love
 without sacrificing security. To experience it for yourself checkout [app.openlogin.com](https://app.openlogin.com).
 
-<div style={{display:"block", overflow: "auto"}}>
 
-<img  width="300" style={{display:"block", float: "right", "margin-left": "20px"}} src="/contents/modal.png"/>
+<div style={{display: "flex", flexWrap: "wrap", gap: "10px"}}>
+<div style={{flexBasis: "50%", flexGrow: "10"}}>
 
 With OpenLogin, applications get:
 - **Device native biometrics**:  Familiar Face/TouchID logins to your application
@@ -26,8 +26,10 @@ With OpenLogin, applications get:
 - **Integrable in 5 minutes**: That’s it!
 
 </div>
-
-<br />
+<div style={{flexBasis:"300px", flexGrow: "1", textAlign: "center" }} >
+    <img src="/contents/modal.png"/>
+</div>
+</div>
 
 :::info