make styles more consistent with website
This commit is contained in:
parent
f0048d54b0
commit
33394f76d4
1 changed files with 39 additions and 30 deletions
|
@ -4,7 +4,7 @@
|
||||||
<title>Electron</title>
|
<title>Electron</title>
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
color: #9feaf9;
|
color: #86a5b1;
|
||||||
background-color: #2f3241;
|
background-color: #2f3241;
|
||||||
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif;
|
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -40,6 +40,10 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
.hero-icons {
|
.hero-icons {
|
||||||
transform-origin: 50% 50%;
|
transform-origin: 50% 50%;
|
||||||
}
|
}
|
||||||
|
@ -65,29 +69,46 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre, code {
|
pre, code, .code {
|
||||||
font-family: "Menlo", "Lucida Console", monospace;
|
font-family: "Menlo", "Lucida Console", monospace;
|
||||||
border: 1px solid #e0e5e6;
|
color: #c2f5ff;
|
||||||
background-color: #f6f8f8;
|
|
||||||
color: #466a72;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
|
background-color: #2b2e3b;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
font-size: 13px;
|
|
||||||
line-height: 19px;
|
line-height: 19px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
padding: 1px 4px 1px 4px;
|
padding: 1px 4px;
|
||||||
font-size: 13px;
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.versions {
|
.versions {
|
||||||
|
list-style: none;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
padding: 0;
|
||||||
|
float: none;
|
||||||
|
clear: both;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.versions li {
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
border-right: 1px solid rgba(194, 245, 255, 0.4);
|
||||||
|
padding: 0 15px;
|
||||||
|
font-size: 12px;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.versions li:last-child {
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.linkcol {
|
.linkcol {
|
||||||
|
@ -96,23 +117,16 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.code-big {
|
|
||||||
padding: 2px 6px 2px 6px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-octicon {
|
.hero-octicon {
|
||||||
display: block;
|
display: block;
|
||||||
width: 75px;
|
width: 75px;
|
||||||
border: 1px solid #bac5c7;
|
|
||||||
height: 62px;
|
height: 62px;
|
||||||
margin: 0 auto 12px;
|
margin: 0 auto 12px;
|
||||||
padding-top: 16.5px;
|
padding-top: 16.5px;
|
||||||
font-size: 42px !important;
|
font-size: 42px !important;
|
||||||
color: #4f6d72;
|
color: white;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: #fff;
|
background-color: rgba(194, 245, 255, 0.3);
|
||||||
border: 1px solid #828282;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -140,12 +154,12 @@
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.css">
|
||||||
<div class="versions">
|
<ul class="versions code">
|
||||||
<code class="code-big electron-version"></code>
|
<li class="electron-version"></li>
|
||||||
<code class="code-big chrome-version"></code>
|
<li class="chrome-version"></li>
|
||||||
<code class="code-big node-version"></code>
|
<li class="node-version"></li>
|
||||||
<code class="code-big v8-version"></code>
|
<li class="v8-version"></li>
|
||||||
</div>
|
</ul>
|
||||||
<svg viewBox="0 0 900 300" xmlns="http://www.w3.org/2000/svg">
|
<svg viewBox="0 0 900 300" xmlns="http://www.w3.org/2000/svg">
|
||||||
<g fill="none" fill-rule="evenodd">
|
<g fill="none" fill-rule="evenodd">
|
||||||
<g class="hero-apps">
|
<g class="hero-apps">
|
||||||
|
@ -178,14 +192,9 @@
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<h2>Running An App</h2>
|
<p>To run a local app, execute the following command on the command line:</p>
|
||||||
<p>Execute the following command on the command line:</p>
|
|
||||||
<pre class="command-example"></pre>
|
<pre class="command-example"></pre>
|
||||||
<p>
|
|
||||||
The <code>path-to-your-app</code> should be the path to your own Electron app.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2>Resources</h2>
|
|
||||||
<div>
|
<div>
|
||||||
<div class="linkcol">
|
<div class="linkcol">
|
||||||
<h4>Blog</h4>
|
<h4>Blog</h4>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue