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: 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
View File

@ -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>