Partially implemented mobile break points.
This commit is contained in:
John Shaver
parent
222848cdd1
commit
17d46bdcd5
|
|
@ -2,9 +2,11 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=900">
|
||||
<title>Telebit™ 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-text">
|
||||
<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-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-text">
|
||||
<div class="quickstart-step-number">2</div>
|
||||
<div class="quickstart-step-text">Claim your device via Email</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-text">
|
||||
<div class="quickstart-step-number">3</div>
|
||||
<div class="quickstart-step-text">Enjoy Anytime, Anywhere Access</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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue