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

tweak colors and layout, simpler, better contrast

This commit is contained in:
Koen Lageveen 2020-10-15 20:32:33 +02:00
parent 0d3582608f
commit 4007abf616
1 changed files with 67 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
index.css
View File

@ -48,23 +48,33 @@
src: url('merriweather/Merriweather-BoldItalic.ttf'); src: url('merriweather/Merriweather-BoldItalic.ttf');
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
html { html {
--bright-white: #FFF;
--paper-white: #F5F5F5;
--ink-black: #2A2A2A;
--dark-grey: #4A4A4A;
--medium-grey: #777;
--light-grey: #E0E0E0;
--bright-grey: #ECECEC;
height: 100%; height: 100%;
min-height: 100%; min-height: 100%;
font-family: 'ui-font', sans-serif; font-family: 'ui-font', sans-serif;
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
background: #F5F0E6; background: var(--paper-white);
} }
body { body {
height: 100%; height: 100%;
min-height: 100%; min-height: 100%;
background: #F5F5F5; background: var(--paper-white);
color: #2A2A2A; color: var(--ink-black);
} }
h1 { h1 {
margin: 0; margin: 0;
@ -104,7 +114,7 @@ a:active {
float: left; float: left;
position: relative; position: relative;
z-index: 2; z-index: 2;
border-right: 1px solid #4A4A4A; border-right: 1px solid var(--medium-grey);
overflow: hidden; overflow: hidden;
} }
main { main {
@ -120,18 +130,19 @@ section {
section#filters, section#filters,
section.config { section.config {
display: grid; display: grid;
grid-column-gap: 5px; grid-column-gap: 4px;
grid-row-gap: 5px; grid-row-gap: 4px;
grid-row-gap: 5px; grid-row-gap: 4px;
grid-template-columns: auto auto auto auto; grid-template-columns: auto auto auto auto;
padding: 10px; padding: 8px;
font-size: 10px; font-size: 10px;
background: #EEE; background: var(--bright-grey);
} }
section#filters { section#filters {
align-items: stretch; align-items: stretch;
grid-template-columns: auto auto auto auto auto; grid-template-columns: auto auto auto auto auto;
border-bottom: 1px solid var(--light-grey);
} }
section#filters input, section#filters input,
section#filters select { section#filters select {
@ -142,6 +153,9 @@ section#filters > div {
display: flex; display: flex;
} }
section.config {
border-top: 1px solid var(--light-grey);
}
section.config > * { section.config > * {
text-align: center; text-align: center;
padding: 0; padding: 0;
@ -163,14 +177,16 @@ section.select-list [data-style='serif'] .name {
} }
section.select-list .entry { section.select-list .entry {
position: relative; position: relative;
padding: .5em 1em; padding: 8px 12px;
border-top: 1px solid #EEE;
} }
section.select-list .entry:last-child { section.select-list .entry:not(:first-child) {
border-bottom: 1px solid #EEE; border-top: 1px solid var(--light-grey);
} }
section.select-list .entry:hover { section.select-list .entry:hover {
background: #FFF; background: var(--bright-white);
}
section.select-list .entry.active {
background: var(--bright-white);
} }
section.select-list .entry > a { section.select-list .entry > a {
display: block; display: block;
@ -189,16 +205,16 @@ section.select-list a:hover .name,
section.select-list a:active .name { section.select-list a:active .name {
text-decoration: underline; text-decoration: underline;
} }
section.select-list .active .name { section.select-list .entry.active .name {
font-weight: bold; font-weight: bold;
} }
section.select-list a.website { section.select-list a.website {
position: absolute; position: absolute;
top: 4px; top: 6px;
right: 28px; right: 32px;
padding: 0 4px; padding: 0 4px;
font-size: 10px; font-size: 10px;
color: #F5F5F5; color: var(--paper-white);
transition: all .2s ease-in-out; transition: all .2s ease-in-out;
} }
section.select-list a.website svg { section.select-list a.website svg {
@ -211,35 +227,32 @@ section.select-list a.website span {
} }
section.select-list a.favoritelink { section.select-list a.favoritelink {
position: absolute; position: absolute;
top: 6px; top: 8px;
right: 4px; right: 8px;
color: #F5F5F5; color: var(--paper-white);
cursor: pointer; cursor: pointer;
} }
section.select-list .entry:hover a.website, section.select-list .entry:hover a.website,
section.select-list .entry:hover a.favoritelink { section.select-list .entry:hover a.favoritelink {
color: #CCC; color: var(--bright-grey);
} }
section.select-list .entry:hover a.favoritelink:hover, section.select-list .entry:hover a.favoritelink:hover,
section.select-list a.favoritelink:hover { section.select-list a.favoritelink:hover {
color: #777; color: var(--ink-black);
} }
section.select-list .entry.active a.website, section.select-list .entry.active a.website,
section.select-list .entry.active a.favoritelink {
color: var(--dark-grey);
}
section.select-list .entry a.website:hover, section.select-list .entry a.website:hover,
section.select-list .entry a.website:active { section.select-list .entry.pinned a.favoritelink {
background: #E4E4E4; color: var(--ink-black);
color: #777;
} }
section.select-list a.website:active { section.select-list a.website:active {
margin-top: 1px; margin-top: 1px;
} }
section.select-list .pinned { section.select-list .pinned {
background: #FAFAFA; background: var(--paper-white);
}
section.select-list .entry.active a.favoritelink,
section.select-list .pinned a.favoritelink,
section.select-list .pinned.entry:hover a.favoritelink {
color: #777;
} }
section.select-list .details { section.select-list .details {
display: block; display: block;
@ -247,15 +260,15 @@ section.select-list .details {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
color: #777; color: var(--ink-black);
} }
footer { footer {
padding: 5px 10px; padding: 0 8px 4px 8px;
font-size: 10px; font-size: 10px;
text-align: center; text-align: center;
line-height: 20px; line-height: 20px;
background: #E4E4E4; background: var(--bright-grey);
color: #777; color: var(--medium-grey);
} }
footer h1 + p { footer h1 + p {
font-style: italic; font-style: italic;
@ -263,7 +276,7 @@ footer h1 + p {
footer a:hover, footer a:hover,
footer a:active { footer a:active {
text-decoration: underline; text-decoration: underline;
color: #2A2A2A; color: var(--ink-black);
} }
footer p a, footer p a,
footer p a:link, footer p a:link,
@ -273,7 +286,7 @@ footer p a:visited {
label { label {
margin-right: .5ex; margin-right: .5ex;
color: #777; color: var(--medium-grey);
} }
button { button {
all: unset; all: unset;
@ -286,22 +299,19 @@ button {
position: relative; position: relative;
margin: 0 .5ex 0 0; margin: 0 .5ex 0 0;
border: 1px solid #E4E4E4; border: 1px solid var(--light-grey);
border-bottom-color: #CCC;
border-right-color: #CCC;
border-radius: 4px; border-radius: 4px;
background: linear-gradient(var(--bright-white), var(--light-grey));
background: linear-gradient(#FFF, #E4E4E4); color: var(--medium-grey);
color: #777;
cursor: pointer; cursor: pointer;
} }
button:active { button:hover {
box-shadow: none; color: var(--ink-black);
} }
button.selected { button.selected {
background: #FFF; background: var(--bright-white);
border-color: #E4E4E4; color: var(--ink-black);
color: #2A2A2A; box-shadow: none;
} }
button path, button path,
button rect { button rect {
@ -315,16 +325,17 @@ select {
all: unset; all: unset;
width: 9em; width: 9em;
padding: 0 .5ex; padding: 0 .5ex;
border: 1px solid #E4E4E4; border: 1px solid var(--light-grey);
border-radius: 4px; border-radius: 4px;
background: var(--paper-white);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
cursor: pointer; cursor: pointer;
} }
select option { select option {
background: #FFF; background: var(--light-white);
color: #000; color: var(--ink-black);
} }
input[type='text'] { input[type='text'] {
line-height: 12px; line-height: 12px;
@ -335,8 +346,9 @@ input[type='number'] {
width: 4em; width: 4em;
margin-left: .5ex; margin-left: .5ex;
padding: 0 .5ex; padding: 0 .5ex;
border: 1px solid #E4E4E4; border: 1px solid var(--light-grey);
border-radius: 4px; border-radius: 4px;
background: var(--paper-white);
text-align: left; text-align: left;
transition: all .2s ease-in-out; transition: all .2s ease-in-out;
} }
@ -346,8 +358,8 @@ input[type='number']:hover,
input[type='number']:focus, input[type='number']:focus,
select:hover, select:hover,
select:focus { select:focus {
border-color: #CCC; border-color: var(--medium-grey);
background: #F5F5F5; background: var(--paper-white);
} }
pre, pre,
textarea, textarea,