[style] update width to show full examples

This commit is contained in:
AJ ONeal 2018-08-13 16:22:08 +00:00
parent acf8522195
commit aad7c51834
2 changed files with 57 additions and 22 deletions

View File

@ -54,14 +54,13 @@
</div>
<div class="demo-terminal">
<div class="demo-terminal-line">
Serving localhost:3000 as https://test-app.telebit.cloud
<div class="demo-terminal-input">
~/telebit http 3000
</div>
<div class="demo-terminal-line">
Go forth and share!
<div class="demo-terminal-line">&nbsp;
</div>
<div class="demo-terminal-line">
ex: curl https://test-app.telebit.cloud
<div class="demo-terminal-output">
Forwarding https://jondoe.telebit.io => localhost:3000
</div>
</div>
</div>
@ -92,26 +91,42 @@
<div class="quickstart-step">
<div class="quickstart-step-number">2</div>
<div class="quickstart-step-text">Claim your device via Email</div>
<pre class="quickstart-terminal">You've installed Telebit on 'Jon's Macbook Pro'.
<pre class="quickstart-terminal">You're running Telebit on 'Jon's Macbook Pro'.
Authenticate your account and claim your device:
https://www.telebit.cloud/login/?magic=xxxxxxxxxxxxxx</pre>
Click <u>Trust Device</u> to pair with Telebit</u></pre>
</div>
<div class="quickstart-step">
<div class="quickstart-step-number">3</div>
<div class="quickstart-step-text">Enjoy Anytime, Anywhere Access</div>
<pre class="quickstart-terminal">HTTPS
<pre class="quickstart-terminal"><strong>For Local Development</strong>
https://lucky-duck-42.telebit.cloud
<code class="quickstart-input">~/telebit http 3000</code>
<code class="quickstart-output">Forwarding https://jondoe.telebit.io =&gt; localhost:3000</code>
SSH
<code class="quickstart-input">curl -fsSL https://jondoe.telebit.io/</code>
ssh ssh.telebit.cloud -p 22222
<strong>For Sharing Files</strong>
TCP
<code class="quickstart-input">~/telebit http ./project.zip</code>
<code class="quickstart-output">Serving ./project.zip as https://jondoe.telebit.io</code>
netcat tcp.telebit.cloud 22222<Paste></pre>
<code class="quickstart-input">curl -fsSL https://jondoe.telebit.io/</code>
<strong>For Access with SSH</strong>
<code class="quickstart-input">~/telebit ssh auto</code>
<code class="quickstart-output">Forwarding jondoe.telebit.io -p 5050 =&gt; localhost:22</code>
<code class="quickstart-output">Forwarding ssh+https (openssl proxy) =&gt; localhost:22</code>
<code class="quickstart-input">ssh -p 5050 jondoe.telebit.io</code>
<code class="quickstart-input">ssh -o ProxyCommand="sclient %h:443" jondoe.telebit.io</code>
<strong>For Debugging with TCP</strong>
<code class="quickstart-input">~/telebit tcp 9000</code>
<code class="quickstart-output">Forwarding jondoe.telebit.io -p 5050 =&gt; localhost:9000</code>
<code class="quickstart-input">netcat jondoe.telebit.io 5050</code></pre>
</div>
</div>
</div>

View File

@ -5,7 +5,7 @@ body{
margin: 0;
}
a, u {
a {
text-decoration: none;
color: inherit;
}
@ -30,7 +30,7 @@ a:hover, u:hover {
}
.container {
width: 788px;
width: 840px;
margin: auto;
}
@ -96,7 +96,7 @@ a.link-button.wide {
margin: 1em 9.4444em 0;
position: relative;
height: 236px;
width: 560px;
width: 644px;
overflow: hidden;
}
@ -104,7 +104,7 @@ a.link-button.wide {
position: absolute;
bottom: 0;
right: 0;
width: 488px;
width: 544px;
height: 236px;
background-color: #ffffff;
border-radius: 4px 4px 0 0;
@ -161,7 +161,8 @@ a.link-button.wide {
}
.demo-terminal {
width: 418px;
/*width: 418px;*/
width: 512px;
position: absolute;
font-size: 15px;
background-color: #f7f7f7;
@ -177,6 +178,16 @@ a.link-button.wide {
}
.demo-terminal-line:before {
content: " ";
}
.demo-terminal-input:before {
content: "$";
}
.demo-terminal-output {
padding-left: 1em;
text-indent: -1em;
}
.demo-terminal-output:before {
content: ">";
}
@ -234,6 +245,15 @@ body {}
margin: 0;
padding: 0.8em 0 0.8em 2em;
}
.quickstart-line:before {
content: " ";
}
.quickstart-input:before {
content: "$ ";
}
.quickstart-output:before {
content: "> ";
}
h3 {
text-align: center;
@ -389,4 +409,4 @@ a {}
.install-badge:hover path {
fill: #ababab;
}
}