mirror of
https://github.com/braver/programmingfonts.git
synced 2024-09-28 22:31:34 +02:00
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-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
33
index.html
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user