Partially implemented mobile break points.
This commit is contained in:
parent
222848cdd1
commit
17d46bdcd5
|
@ -2,9 +2,11 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=900">
|
||||||
<title>Telebit™ Cloud</title>
|
<title>Telebit™ 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>
|
||||||
|
|
|
@ -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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue