layout and color tweaks
This commit is contained in:
parent
9cb3048d82
commit
d297e97db5
31
index.css
31
index.css
|
@ -29,7 +29,7 @@ article {
|
|||
border-radius: 1ex;
|
||||
border: 1px solid rgba(0,0,0,.2);
|
||||
min-height: calc(100% - 3em);
|
||||
min-width: 33%;
|
||||
width: 34em;
|
||||
background: rgba(255,255,255,.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -37,6 +37,19 @@ article {
|
|||
section {
|
||||
flex: 1;
|
||||
padding: 0.5em 1em;
|
||||
border-bottom: 1px solid rgba(0,0,0,.05);
|
||||
}
|
||||
section.config {
|
||||
border-top: 1px solid rgba(255,255,255,.05);
|
||||
flex: 0;
|
||||
padding: 0.5em 1em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
section.config > * {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
footer {
|
||||
flex: 0;
|
||||
|
@ -44,6 +57,7 @@ footer {
|
|||
text-align: center;
|
||||
font-size: .8em;
|
||||
border-top: 1px solid rgba(255,255,255,.05);
|
||||
opacity: .6;
|
||||
}
|
||||
#font-info p {
|
||||
display: none;
|
||||
|
@ -61,12 +75,14 @@ a:active {
|
|||
}
|
||||
label {
|
||||
margin-right: .5ex;
|
||||
font-style: italic;
|
||||
opacity: .6;
|
||||
}
|
||||
select {
|
||||
all: unset;
|
||||
width: 9em;
|
||||
padding: 0 .5ex;
|
||||
border: 1px solid rgba(100,100,100,.5);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
@ -77,16 +93,21 @@ select option {
|
|||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
#size,
|
||||
#spacing {
|
||||
input[type="number"] {
|
||||
all: unset;
|
||||
width: 4em;
|
||||
margin-left: .5ex;
|
||||
padding: 0 .5ex;
|
||||
border: 1px solid rgba(100,100,100,.5);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
text-align: left;
|
||||
}
|
||||
input[type="number"]:hover,
|
||||
input[type="number"]:focus,
|
||||
select:hover,
|
||||
select:focus {
|
||||
border-color: rgba(100,100,100,.5);
|
||||
}
|
||||
pre,
|
||||
textarea,
|
||||
.CodeMirror {
|
||||
|
|
33
index.html
33
index.html
|
@ -111,7 +111,27 @@
|
|||
<button class="nav-button" id="next">↓</button>
|
||||
</p>
|
||||
<dix id="font-info"></dix>
|
||||
</section>
|
||||
|
||||
<section class="config">
|
||||
<p>
|
||||
<label for="size">Size</label>
|
||||
<input onchange="setSize()" type="number" id="size" value="14" min="1" max="32" step="1">
|
||||
</p>
|
||||
<p>
|
||||
<label for="spacing">Spacing</label>
|
||||
<input onchange="setSpacing()" type="number" id="spacing" value="1.4" min="1" max="2" step="0.1">
|
||||
</p>
|
||||
<p>
|
||||
<label for="aliasing">AA</label>
|
||||
<input onchange="setAntialiasing()" type="checkbox" id="aliasing" checked>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="config">
|
||||
<p class="select">
|
||||
<button class="nav-button" id="theme-previous">↑</button>
|
||||
<button class="nav-button" id="theme-next">↓</button>
|
||||
<label for="select-theme">Theme</label>
|
||||
<select onchange="selectTheme()" id="select-theme">
|
||||
<option>3024-day</option>
|
||||
|
@ -163,8 +183,6 @@
|
|||
<option>yeti</option>
|
||||
<option>zenburn</option>
|
||||
</select>
|
||||
<button class="nav-button" id="theme-previous">↑</button>
|
||||
<button class="nav-button" id="theme-next">↓</button>
|
||||
</p>
|
||||
<p class="select">
|
||||
<label for="select-language">Language</label>
|
||||
|
@ -182,17 +200,6 @@
|
|||
<option>Swift</option>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<label for="size">Size</label>
|
||||
<input onchange="setSize()" type="number" id="size" value="14" min="1" max="32" step="1">
|
||||
</p>
|
||||
<p>
|
||||
<label for="spacing">Spacing</label>
|
||||
<input onchange="setSpacing()" type="number" id="spacing" value="1.4" min="1" max="2" step="0.1">
|
||||
</p>
|
||||
<p>
|
||||
<label for="aliasing">Anti-aliasing </label><input onchange="setAntialiasing()" type="checkbox" id="aliasing" checked>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
|
|
Loading…
Reference in New Issue