Merge pull request #4524 from atom/update-default-app-styles
Match default app styles to website styles
This commit is contained in:
commit
d5f4a32435
1 changed files with 61 additions and 41 deletions
|
@ -3,31 +3,39 @@
|
||||||
<title>Electron</title>
|
<title>Electron</title>
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
color: #555;
|
color: #45828E;
|
||||||
font-family: 'Open Sans',Helvetica,Arial,sans-serif;
|
background-color: #A5ECFA;
|
||||||
padding: 30px;
|
font-family: 'Helvetica Neue', 'Open Sans', Helvetica, Arial, sans-serif;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 15px 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
color: #2b6cc2;
|
background-color: #76C7D7;
|
||||||
font-family: "Crimson Text",Georgia,serif;
|
color: #FAF7F3;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1.1;
|
padding: 15px 30px;
|
||||||
letter-spacing: -0.015em;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #2b6cc2;
|
color: #39AEC6;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre, code {
|
pre, code {
|
||||||
font-family: "Menlo","Lucida Console",monospace;
|
font-family: "Menlo","Lucida Console",monospace;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #076274;
|
||||||
background-color: #f8f8f8;
|
background-color: #076274;
|
||||||
|
color: #C5F3FC;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -39,19 +47,24 @@
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
padding: 1px 4px 1px 4px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
#holder {
|
#holder {
|
||||||
border: 4px dashed #ccc;
|
border: 2px dashed #448691;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
height: 300px;
|
height: 300px;
|
||||||
color: #ccc;
|
color: #45828E;
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
line-height: 300px;
|
line-height: 300px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#holder.hover {
|
#holder.hover {
|
||||||
border: 4px dashed #999;
|
background-color: #7BDCEF;
|
||||||
color: #eee;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
@ -78,40 +91,47 @@
|
||||||
|
|
||||||
<h2>
|
<h2>
|
||||||
<script>
|
<script>
|
||||||
document.write(`Welcome to Electron (v${process.versions.electron})`)
|
document.write(`Welcome to Electron ${process.versions.electron}`)
|
||||||
</script>
|
</script>
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<p>
|
<div class="container">
|
||||||
To run your app with Electron, execute the following command under your
|
|
||||||
Console (or Terminal):
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<script>document.write('<pre>' + command + '</pre>')</script>
|
<p>
|
||||||
|
To run your app with Electron, execute the following command in your
|
||||||
|
Console (or Terminal):
|
||||||
|
</p>
|
||||||
|
|
||||||
<p>
|
<script>document.write('<pre>' + command + '</pre>')</script>
|
||||||
The <code>path-to-your-app</code> should be the path to your own Electron
|
|
||||||
app, you can read the
|
|
||||||
<script>
|
|
||||||
document.write(
|
|
||||||
`<a href='https://github.com/atom/electron/blob/v${process.versions.electron}/docs/tutorial/quick-start.md'>quick start</a>`
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
guide in Electron's
|
|
||||||
<script>
|
|
||||||
document.write(
|
|
||||||
`<a href='https://github.com/atom/electron/tree/v${process.versions.electron}/docs#readme'>docs</a>`
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
on how to write one.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Or you can just drag your app here to run it:
|
The <code>path-to-your-app</code> should be the path to your own Electron
|
||||||
</p>
|
app.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>You can read the
|
||||||
|
<script>
|
||||||
|
document.write(
|
||||||
|
`<a href='https://github.com/atom/electron/blob/v${process.versions.electron}/docs/tutorial/quick-start.md'>quick start</a>`
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
guide in Electron's
|
||||||
|
<script>
|
||||||
|
document.write(
|
||||||
|
`<a href='https://github.com/atom/electron/tree/v${process.versions.electron}/docs#readme'>docs</a>`
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
to learn how to write one.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Or you can just drag your app here to run it:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div id="holder">
|
||||||
|
Drag your app here to run it
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="holder">
|
|
||||||
Drag your app here to run it
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
Loading…
Reference in a new issue