coolaj86/telebit-relay.js
1
1
Fork 0
Code Issues 4 Pull Requests Releases Activity

Partially implemented mobile break points.

Browse Source
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> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=900">
<title>Telebit&trade; Cloud</title> <title>Telebit&trade; Cloud</title>
<link href="static-site-assets/styles/main.css" rel="stylesheet"> <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/vertical-slide.css" rel="stylesheet">
<link href="static-site-assets/styles/1200.css" rel="stylesheet" media="(max-width:1200px)">
<link <link
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900"
rel="stylesheet" rel="stylesheet"
@ -68,7 +70,7 @@
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<div class="container"> <div class="container quickstart-container">
<h2 class="use-it">Use it <div class="sliding-vertical"> <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 <!-- to add more of or remove some of these, you will also need to update
./static-site-assets/styles/vertical-slide.css ./static-site-assets/styles/vertical-slide.css
@ -84,13 +86,17 @@
</div></h2> </div></h2>
<h2 id="download-section">Quickstart with bash</h2> <h2 id="download-section">Quickstart with bash</h2>
<div class="quickstart-step"> <div class="quickstart-step">
<div class="quickstart-step-number">1</div> <div class="quickstart-step-text">
<div class="quickstart-step-text">Install Telebit</div> <div class="quickstart-step-number">1</div>
<pre class="quickstart-terminal qickstart-terminal-prompt">curl https://get.telebit.io | bash</pre> <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>
<div class="quickstart-step"> <div class="quickstart-step">
<div class="quickstart-step-number">2</div> <div class="quickstart-step-text">
<div class="quickstart-step-text">Claim your device via Email</div> <div class="quickstart-step-number">2</div>
<div class="quickstart-step-name">Claim your device via Email</div>
</div>
<pre class="quickstart-terminal">Hello! <pre class="quickstart-terminal">Hello!
Want to use 'Jon's Macbook Pro' with Telebit? Want to use 'Jon's Macbook Pro' with Telebit?
@ -99,8 +105,10 @@ Just confirm your email address:
<u>Confirm Email Address</u></pre> <u>Confirm Email Address</u></pre>
</div> </div>
<div class="quickstart-step"> <div class="quickstart-step">
<div class="quickstart-step-number">3</div> <div class="quickstart-step-text">
<div class="quickstart-step-text">Enjoy Anytime, Anywhere Access</div> <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> <pre class="quickstart-terminal"><strong>For Local Development</strong>
<code class="quickstart-input">~/telebit http 3000</code> <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 { .container {
width: 840px; width: 788px;
margin: auto; margin: auto;
} }
@ -93,7 +93,7 @@ a.link-button.wide {
} }
.demo-container { .demo-container {
margin: 1em 9.4444em 0; margin-top: 1em;
position: relative; position: relative;
height: 236px; height: 236px;
width: 644px; width: 644px;
@ -197,7 +197,7 @@ body {}
.donate-section { .donate-section {
background-color: #f7f7f7; background-color: #f7f7f7;
padding: 1.777778em; padding: 1.777778em 0;
} }
.use-it { .use-it {
@ -215,7 +215,7 @@ body {}
height: 1.583333333em; height: 1.583333333em;
width: 1.5833333333em; width: 1.5833333333em;
font-weight: bold; font-weight: bold;
display: flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
background-color: #f8f8f8; background-color: #f8f8f8;
@ -226,24 +226,27 @@ body {}
.quickstart-step { .quickstart-step {
font-size: 1.33333em; font-size: 1.33333em;
display: flex; display: flex;
flex-wrap: wrap;
margin-bottom: 2em; margin-bottom: 2em;
overflow: hidden; justify-content: center;
} }
.quickstart-step-text { .quickstart-step-text {
width: 7.833333333em; min-width: 9.583336em;
margin-right: 1.3333333em; margin-right: 1.3333333em;
flex-shrink: 0; flex: 1 1;
display: flex;
} }
.quickstart-terminal { .quickstart-terminal {
flex: 1; flex: 0 0 36.7em;
background-color: #f7f7f7; background-color: #f7f7f7;
font-family: monospace; font-family: monospace;
font-size: 0.625em; font-size: 0.8em;
width: 36.7em;
line-height: 1.33; line-height: 1.33;
margin: 0; margin: 0;
padding: 0.8em 0 0.8em 2em; padding: 0.8em 1em 0.8em 2em;
} }
.quickstart-line:before { .quickstart-line:before {
content: " "; content: " ";
@ -263,6 +266,7 @@ h3 {
.install-badges { .install-badges {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: auto;
} }
.install-badge { .install-badge {
@ -307,7 +311,7 @@ h3 {
} }
.feature-list { .feature-list {
margin: 4em; margin: 4em 0;
} }
.donate-section h2 { .donate-section h2 {
@ -347,7 +351,7 @@ input {
.mailing-list-form { .mailing-list-form {
background-color: #d9d9d9; background-color: #d9d9d9;
padding: 1.77777778em; padding: 1.77777778em 0;
} }
.mailing-list-form li img { .mailing-list-form li img {
@ -365,7 +369,7 @@ footer .container {
footer { footer {
background-color: #b3b3b3; background-color: #b3b3b3;
color: white; color: white;
padding: 1.444444444em; padding: 1.444444444em 0;
} }
footer li { footer li {
@ -410,3 +414,18 @@ a {}
.install-badge:hover path { .install-badge:hover path {
fill: #ababab; 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;
}