* Fix alignment of Editor link in Microworlds.

* Remove fixed width from most components (replace with relative width).
This commit is contained in:
morant 2016-03-14 17:20:17 -04:00
parent 2e5a0e1439
commit 99772ca41a
2 changed files with 19 additions and 16 deletions

View file

@ -83,7 +83,7 @@ var Microworld = React.createClass({
<div className="editor section">
<h1>Start Creating!</h1>
<a href={'//scratch.mit.edu/projects/'+ projectId +'/#editor'}>
<img src="/images/scratch-og.png" style={{width:'6%', position: 'absolute', left: '75%'}}></img>
<img className="scratch-link" src="/images/scratch-og.png"></img>
</a>
<iframe src={'//scratch.mit.edu/projects/embed-editor/' + projectId + '/?isMicroworld=true'}
frameBorder="0"> </iframe>

View file

@ -20,8 +20,7 @@ $base-bg: $ui-white;
h1 {
margin: 0 auto;
padding: 5px 0;
max-width: 500px;
padding: 5px 10%;
text-align: center;
color: $type-gray;
}
@ -35,8 +34,7 @@ $base-bg: $ui-white;
h1,
p {
margin: 0 auto;
padding: 5px 0;
max-width: 500px;
padding: 5px 10%;
text-align: center;
color: $type-gray;
}
@ -125,29 +123,34 @@ $base-bg: $ui-white;
padding-bottom: 15px;
}
iframe {
width: 900px;
iframe {
height: 600px;
}
.box {
width: 900px;
.editor {
position: relative;
iframe {
width: 100%;
}
.scratch-link {
position: absolute;
right: 3%;
width: 10%;
}
}
.side-by-side {
margin-right: auto;
margin-left: auto;
width: 900px;
height: 520px;
.box {
width: 400px;
}
.design-studio-projects,
.design-studio {
display: inline-block;
width: 400px;
width: 45%;
height: 500px;
}
@ -160,7 +163,7 @@ $base-bg: $ui-white;
iframe {
margin-top: 60px;
width: 960px;
width: 200%;
-webkit-transform: scale(.5);
-webkit-transform-origin: top left;
-moz-transform: scale(.5);