root
/
telebit-relay.js
mirror of https://git.coolaj86.com/coolaj86/telebit-relay.js.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Partially implemented mobile break points.

This commit is contained in:
John Shaver 2018-08-15 14:18:12 -07:00
parent 222848cdd1
commit 17d46bdcd5
3 changed files with 75 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
lib/extensions/admin/index.html
View File

@ -2,9 +2,11 @@
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=900">
<title>Telebit&trade; Cloud</title>
<link href="static-site-assets/styles/main.css" rel="stylesheet">
<link href="static-site-assets/styles/vertical-slide.css" rel="stylesheet">
<link href="static-site-assets/styles/1200.css" rel="stylesheet" media="(max-width:1200px)">
<link
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900"
rel="stylesheet"
@ -68,7 +70,7 @@
</div>
</div>
<div class="content">
<div class="container">
<div class="container quickstart-container">
<h2 class="use-it">Use it <div class="sliding-vertical">
<!-- to add more of or remove some of these, you will also need to update
./static-site-assets/styles/vertical-slide.css
@ -84,13 +86,17 @@
</div></h2>
<h2 id="download-section">Quickstart with bash</h2>
<div class="quickstart-step">
<div class="quickstart-step-number">1</div>
<div class="quickstart-step-text">Install Telebit</div>
<pre class="quickstart-terminal qickstart-terminal-prompt">curl https://get.telebit.io | bash</pre>
<div class="quickstart-step-text">
<div class="quickstart-step-number">1</div>
<div class="quickstart-step-name">Install Telebit</div>
</div>
<pre class="quickstart-terminal qickstart-terminal-prompt">curl https://get.telebit.io/ | bash</pre>
</div>
<div class="quickstart-step">
<div class="quickstart-step-number">2</div>
<div class="quickstart-step-text">Claim your device via Email</div>
<div class="quickstart-step-text">
<div class="quickstart-step-number">2</div>
<div class="quickstart-step-name">Claim your device via Email</div>
</div>
<pre class="quickstart-terminal">Hello!
Want to use 'Jon's Macbook Pro' with Telebit?
@ -99,8 +105,10 @@ Just confirm your email address:
<u>Confirm Email Address</u></pre>
</div>
<div class="quickstart-step">
<div class="quickstart-step-number">3</div>
<div class="quickstart-step-text">Enjoy Anytime, Anywhere Access</div>
<div class="quickstart-step-text">
<div class="quickstart-step-number">3</div>
<div class="quickstart-step-name">Enjoy Anytime, Anywhere Access</div>
</div>
<pre class="quickstart-terminal"><strong>For Local Development</strong>
<code class="quickstart-input">~/telebit http 3000</code>

27
lib/extensions/admin/static-site-assets/styles/1200.css Normal file
View File

@ -0,0 +1,27 @@
.quickstart-step-text {
align-items: center;
justify-content: center;
margin: 0 0 1.5em;
}
.quickstart-step {
flex-direction: column;
justify-content: center;
align-items: center;
}
.quickstart-terminal {
flex: 0 0;
}
.container.quickstart-container {
padding: 0;
}
@media (max-width: 900px) {
.donate-section p {
margin: 1.77777778em 10%;
}
}

45
lib/extensions/admin/static-site-assets/styles/main.css
View File

@ -30,7 +30,7 @@ a:hover, u:hover {
}
.container {
width: 840px;
width: 788px;
margin: auto;
}
@ -93,7 +93,7 @@ a.link-button.wide {
}
.demo-container {
margin: 1em 9.4444em 0;
margin-top: 1em;
position: relative;
height: 236px;
width: 644px;
@ -197,7 +197,7 @@ body {}
.donate-section {
background-color: #f7f7f7;
padding: 1.777778em;
padding: 1.777778em 0;
}
.use-it {
@ -215,7 +215,7 @@ body {}
height: 1.583333333em;
width: 1.5833333333em;
font-weight: bold;
display: flex;
display: inline-flex;
align-items: center;
justify-content: space-around;
background-color: #f8f8f8;
@ -226,24 +226,27 @@ body {}
.quickstart-step {
font-size: 1.33333em;
display: flex;
flex-wrap: wrap;
margin-bottom: 2em;
overflow: hidden;
justify-content: center;
}
.quickstart-step-text {
width: 7.833333333em;
min-width: 9.583336em;
margin-right: 1.3333333em;
flex-shrink: 0;
flex: 1 1;
display: flex;
}
.quickstart-terminal {
flex: 1;
flex: 0 0 36.7em;
background-color: #f7f7f7;
font-family: monospace;
font-size: 0.625em;
font-size: 0.8em;
width: 36.7em;
line-height: 1.33;
margin: 0;
padding: 0.8em 0 0.8em 2em;
padding: 0.8em 1em 0.8em 2em;
}
.quickstart-line:before {
content: " ";
@ -263,6 +266,7 @@ h3 {
.install-badges {
display: flex;
justify-content: space-between;
margin: auto;
}
.install-badge {
@ -307,7 +311,7 @@ h3 {
}
.feature-list {
margin: 4em;
margin: 4em 0;
}
.donate-section h2 {
@ -347,7 +351,7 @@ input {
.mailing-list-form {
background-color: #d9d9d9;
padding: 1.77777778em;
padding: 1.77777778em 0;
}
.mailing-list-form li img {
@ -365,7 +369,7 @@ footer .container {
footer {
background-color: #b3b3b3;
color: white;
padding: 1.444444444em;
padding: 1.444444444em 0;
}
footer li {
@ -410,3 +414,18 @@ a {}
.install-badge:hover path {
fill: #ababab;
}
input[type="submit"] {
appearance: none;
-webkit-appearance: none;
}
.quickstart-container {
max-width: 1025px;
width: auto;
padding: 0px 3.111111111em;
}
.quickstart-step-name {
display: inline-block;
}