Skip to content

Commit

Permalink
Initial layout and typography fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@bgashler1 @chrmarti
bgashler1 authored and chrmarti committed Jan 20, 2017
1 parent 14b97ed commit 6c8b850
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 47 deletions.
74 changes: 46 additions & 28 deletions src/vs/workbench/parts/welcomePage/electron-browser/welcomePage.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,22 @@
*--------------------------------------------------------------------------------------------*/

.monaco-workbench > .part.editor > .content .welcomePage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
display: flex;
flex-flow: row wrap;

font-family: 'Segoe UI'; /*TEMP*/
font-size: 10px;
}

.monaco-workbench > .part.editor > .content .welcomePage p {
font-size: 1.3em;
}

.monaco-workbench > .part.editor > .content .welcomePage .keyboard {
font-family: "Lucida Grande", sans-serif;/* Keyboard shortcuts */
}
Expand All @@ -16,14 +29,7 @@
text-decoration: none;
}

.monaco-workbench > .part.editor > .content .welcomePage .splash {
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%, -50%);
width: 35%;
}
.monaco-workbench > .part.editor > .content .welcomePage .splash h1 {
.monaco-workbench > .part.editor > .content .welcomePage h1 {
padding: 0;
margin: 0;
border: none;
Expand All @@ -32,7 +38,8 @@
font-size: 3.6em;
}
.monaco-workbench > .part.editor > .content .welcomePage .title {
margin-bottom: 2em;
margin-bottom: 1em;
flex: 1 100%;
}
.monaco-workbench > .part.editor > .content .welcomePage .subtitle {
margin-top: .8em;
Expand All @@ -41,12 +48,22 @@
display: block;
}

.monaco-workbench > .part.editor > .content .welcomePage .splash h3 {
.monaco-workbench > .part.editor > .content .welcomePage .splash,
.monaco-workbench > .part.editor > .content .welcomePage .commands {
flex: 1 1 0;
}

.monaco-workbench > .part.editor > .content .welcomePage h2 {
font-weight: 200;
margin-top: 17px;
margin-bottom: 5px;
font-size: 1.9em;
}

.monaco-workbench > .part.editor > .content .welcomePage .splash .section {
margin-bottom: 5em;
}

.monaco-workbench > .part.editor > .content .welcomePage .splash ul {
margin: 0;
font-size: 1.3em;
Expand All @@ -71,45 +88,46 @@
white-space: nowrap;
}

.monaco-workbench > .part.editor > .content .welcomePage .commands {
position: absolute;
top: 50%;
left: 75%;
transform: translate(-50%, -50%);
width: 35%;
}

.monaco-workbench > .part.editor > .content .welcomePage .commands ul {
list-style: none;
padding: 0;
}
.monaco-workbench > .part.editor > .content .welcomePage .commands li {
margin: 15px 0px;
margin: 7px 0px;
}
.monaco-workbench > .part.editor > .content .welcomePage .commands li button {
margin: 0;
padding: 10px 20px;
border: 2px solid;
border-radius: 10px;
height: 46px;
padding: 12px 10px;
width: 100%;
font-size: 15px;
font-size: 1.3em;
text-align: left;
outline: none;
cursor: pointer;
white-space: nowrap;
}

.monaco-workbench > .part.editor > .content .welcomePage .commands li button h3 {
font-size: 1em;
margin: 0;
margin-bottom: .25em;
}
.monaco-workbench > .part.editor > .content .welcomePage .commands li button {
color: #6c6c6c;
background: #eee;
border-color: #ccc;
border: none;
}

.vs-dark .monaco-workbench > .part.editor > .content .welcomePage .commands li button {
.vs-dark .monaco-workbench > .part.editor > .content .welcomePage .commands li button > h3 {
color: #ccc;
background: #333;
border-color: black;
}

.vs-dark .monaco-workbench > .part.editor > .content .welcomePage .commands li button {
color: #828282;
background: #191919;
}

.vs-dark .monaco-workbench > .part.editor > .content .welcomePage .commands li button:hover {
background: #2a2d2e;
}

.hc-black .monaco-workbench > .part.editor > .content .welcomePage .commands li button {
Expand Down
38 changes: 19 additions & 19 deletions src/vs/workbench/parts/welcomePage/electron-browser/welcomePage.html
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
<div class="welcomePage">
<div class="title">
<h1>Visual Studio Code</h1>
<p class="subtitle">Editing evolved</p>
</div>
<div class="splash">
<div class="title">
<h1>Visual Studio Code</h1>
<p class="subtitle">Editing evolved</p>
</div>
<div class="start">
<h3>Start</h3>
<div class="section start">
<h2>Start</h2>
<ul>
<li><a href="command:workbench.action.files.openFileFolder">Open folder...</a></li>
<li><a href="command:workbench.action.git.clone">Open from Git repository...</a></li>
<li><a href="command:workbench.action.git.clone">Clone Git repository...</a></li>
</ul>
</div>
<div class="recent">
<h3>Recent</h3>
<div class="section recent">
<h2>Recent</h2>
<ul>
<!-- Filled programmatically -->
</ul>
</div>
<div class="help">
<h3>Help</h3>
<div class="section help">
<h2>Help</h2>
<ul>
<li><a href="command:workbench.action.openDocumentationUrl">Product documentation</a></li>
<li><a href="command:workbench.action.openVideoUrl">Introductory videos</a></li>
Expand All @@ -30,15 +30,15 @@ <h3>Help</h3>
<p class="showOnStartup"><input type="checkbox" id="showOnStartup"> <label for="showOnStartup">Show welcome page on startup</label></p>
</div>
<div class="commands">
<h3>Welcome to Visual Studio Code!</h3>
<h2>Quick links</h2>
<ul>
<li><button data-href="command:workbench.action.weclomeOverlay">Interface overview - get a quick overview of the major UI components.</button></li>
<li><button data-href="command:workbench.action.selectTheme">Editor theme - change the syntax theme.</button></li>
<li><button data-href="command:workbench.action.keybindingsReference">Keyboard shortcuts - get a referecne guide for the most common keybinsings.</button></li>
<li><button data-href="command:workbench.action.showCommands">Show all commands - enter the command pallette to see a full list of commands.</button></li>
<li><button data-href="command:workbench.action.openGlobalSettings">Change settings - change settings to match your preferences.</button></li>
<li><button data-href="command:workbench.extensions.action.showRecommendedKeymapExtensions">Change Default Keyboard Shortcuts - map the default keyboard shortcuts to your favorate flavor.</button></li>
<li><button data-href="command:workbench.action.editorWalkThrough">Interactive playgropund - try some fo the most common editor features out in a short walk-thru.</button></li>
<li><button data-href="command:workbench.action.weclomeOverlay"><h3>Interface overview</h3> Quick overview of the major UI components.</button></li>
<li><button data-href="command:workbench.action.selectTheme"><h3>Editor theme</h3> Change the syntax theme.</button></li>
<li><button data-href="command:workbench.action.keybindingsReference"><h3>Keyboard shortcuts</h3> Reference guide for the most common keboard shortcuts.</button></li>
<li><button data-href="command:workbench.action.showCommands"><h3>Show all commands</h3> Open the command pallette to see a full list of commands.</button></li>
<li><button data-href="command:workbench.action.openGlobalSettings"><h3>Change settings</h3> Change settings to match your preferences.</button></li>
<li><button data-href="command:workbench.extensions.action.showRecommendedKeymapExtensions"><h3>Change Default Keyboard Shortcuts</h3> Map the default keyboard shortcuts to another editor's style.</button></li>
<li><button data-href="command:workbench.action.editorWalkThrough"><h3>Interactive playgropund</h3> Try out essential editor features out in a short walk-thru.</button></li>
</ul>
</div>
</div>

0 comments on commit 6c8b850

Please sign in to comment.