make styles more consistent with website

This commit is contained in:
Zeke Sikelianos 2017-09-29 11:35:22 -07:00
parent f0048d54b0
commit 33394f76d4

View file

@ -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>