Mirror
/
programmingfonts
mirror of https://github.com/braver/programmingfonts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

layout and color tweaks

This commit is contained in:
Koen Lageveen 2017-07-28 21:27:31 +02:00
parent 9cb3048d82
commit d297e97db5
2 changed files with 46 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
index.css
View File

@ -29,7 +29,7 @@ article {
border-radius: 1ex; border-radius: 1ex;
border: 1px solid rgba(0,0,0,.2); border: 1px solid rgba(0,0,0,.2);
min-height: calc(100% - 3em); min-height: calc(100% - 3em);
min-width: 33%; width: 34em;
background: rgba(255,255,255,.05); background: rgba(255,255,255,.05);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -37,6 +37,19 @@ article {
section { section {
flex: 1; flex: 1;
padding: 0.5em 1em; 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 { footer {
flex: 0; flex: 0;
@ -44,6 +57,7 @@ footer {
text-align: center; text-align: center;
font-size: .8em; font-size: .8em;
border-top: 1px solid rgba(255,255,255,.05); border-top: 1px solid rgba(255,255,255,.05);
opacity: .6;
} }
#font-info p { #font-info p {
display: none; display: none;
@ -61,12 +75,14 @@ a:active {
} }
label { label {
margin-right: .5ex; margin-right: .5ex;
font-style: italic;
opacity: .6;
} }
select { select {
all: unset; all: unset;
width: 9em; width: 9em;
padding: 0 .5ex; padding: 0 .5ex;
border: 1px solid rgba(100,100,100,.5); border: 1px solid transparent;
border-radius: 3px; border-radius: 3px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -77,16 +93,21 @@ select option {
background: #fff; background: #fff;
color: #000; color: #000;
} }
#size, input[type="number"] {
#spacing {
all: unset; all: unset;
width: 4em; width: 4em;
margin-left: .5ex; margin-left: .5ex;
padding: 0 .5ex; padding: 0 .5ex;
border: 1px solid rgba(100,100,100,.5); border: 1px solid transparent;
border-radius: 3px; border-radius: 3px;
text-align: left; text-align: left;
} }
input[type="number"]:hover,
input[type="number"]:focus,
select:hover,
select:focus {
border-color: rgba(100,100,100,.5);
}
pre, pre,
textarea, textarea,
.CodeMirror { .CodeMirror {

33
index.html
View File

@ -111,7 +111,27 @@
<button class="nav-button" id="next">↓</button> <button class="nav-button" id="next">↓</button>
</p> </p>
<dix id="font-info"></dix> <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"> <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> <label for="select-theme">Theme</label>
<select onchange="selectTheme()" id="select-theme"> <select onchange="selectTheme()" id="select-theme">
<option>3024-day</option> <option>3024-day</option>
@ -163,8 +183,6 @@
<option>yeti</option> <option>yeti</option>
<option>zenburn</option> <option>zenburn</option>
</select> </select>
<button class="nav-button" id="theme-previous">↑</button>
<button class="nav-button" id="theme-next">↓</button>
</p> </p>
<p class="select"> <p class="select">
<label for="select-language">Language</label> <label for="select-language">Language</label>
@ -182,17 +200,6 @@
<option>Swift</option> <option>Swift</option>
</select> </select>
</p> </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> </section>
<footer> <footer>