Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-05-08 09:08:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Flip positioning of steps and media in narrow layouts.

Browse Source 
Closes #125246
This commit is contained in:
Jackson Kearl
2021-06-03 11:50:08 -07:00
parent 5966e9dfec
commit b2cc8487ae
1 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.css
+17 -10
View File
@@ -429,30 +429,30 @@
grid-template-columns: minmax(auto, 400px) 1fr;
grid-template-rows: minmax(40px, 20%) auto max-content 1fr;
grid-column-gap: 20px;
column-gap: 20px;
grid-template-areas:
"back img"
"title img"
"steps img"
". img"
"back media"
"title media"
"steps media"
". media"
;
}
.monaco-workbench .part.editor > .content .gettingStartedContainer.width-semi-constrained .gettingStartedSlideDetails .gettingStartedDetailsContent {
max-width: 500px;
grid-template-columns: auto;
grid-template-rows: 30px auto minmax(30%, 40%) 1fr;
grid-column-gap: 20px;
grid-template-rows: 30px max-content minmax(0, max-content) minmax(30%, 1fr);
row-gap: 4px;
grid-template-areas:
"back"
"title"
"img"
"steps"
"media"
;
}
.monaco-workbench .part.editor > .content .gettingStartedContainer.width-semi-constrained.height-constrained .gettingStartedSlideDetails .gettingStartedDetailsContent {
grid-template-rows: 0 auto minmax(40%, 50%) 1fr;
grid-template-rows: 0 max-content minmax(0, max-content) minmax(30%, 1fr);
}
.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .gettingStartedDetailsContent > .prev-button {
@@ -469,14 +469,21 @@
}
.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .gettingStartedDetailsContent > .getting-started-media {
grid-area: img;
grid-area: media;
align-self: center;
}
.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .gettingStartedDetailsContent > .getting-started-media.markdown {
height: inherit;
}
.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .gettingStartedDetailsContent > .getting-started-media.image {
grid-area: steps-start / media-start / steps-end / media-end;
align-self: unset;
}
.monaco-workbench .part.editor > .content .gettingStartedContainer.width-semi-constrained .gettingStartedSlideDetails .gettingStartedDetailsContent > .getting-started-media.image {
grid-area: media;
height: inherit;
width: inherit;
display: flex;