Add: responsive layout

This commit is contained in:
eight 2017-11-22 14:14:47 +08:00
parent 777adf1bae
commit b1a9e231ad
2 changed files with 51 additions and 6 deletions

View File

@ -68,18 +68,21 @@
</label> </label>
</div> </div>
<p class="meta-description"></p> <p class="meta-description"></p>
<div> <div class="meta-group">
<h3 i18n-text="author"></h3> <h3 i18n-text="author"></h3>
<span class="meta-author"></span> <span class="meta-author"></span>
</div> </div>
<div> <div class="meta-group">
<h3 i18n-text="license"></h3> <h3 i18n-text="license"></h3>
<span class="meta-license"></span> <span class="meta-license"></span>
</div> </div>
<h3 i18n-text="appliesLabel"></h3> <div class="meta-group">
<ul class="applies-to"> <h3 i18n-text="appliesLabel"></h3>
</ul> <ul class="applies-to">
<div class="external-link"></div> </ul>
</div>
<div class="meta-group external-link">
</div>
</div> </div>
<div class="main"> <div class="main">
<div class="code"> <div class="code">

View File

@ -119,3 +119,45 @@ h1 small {
.main .CodeMirror { .main .CodeMirror {
height: 100%; height: 100%;
} }
@media (max-width: 800px) {
.container {
flex-direction: column;
height: auto;
}
.header {
flex: 1 1 auto;
border-right: none;
border-bottom: 1px dashed #AAA;
}
.actions {
display: flex;
align-items: center;
justify-content: flex-start;
margin: 4px 0;
}
.actions label {
margin: 0 0 0 8px;
}
h1,
h3,
.meta-group {
margin: 12px 0;
}
h3 {
margin-bottom: 8px;
}
.main {
max-height: 100vh;
}
p,
ul {
margin: 8px 0;
}
}