Add: responsive layout
This commit is contained in:
parent
777adf1bae
commit
b1a9e231ad
|
@ -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">
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user