foo/tilde
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

local fonts + general cleanup

Browse Source
This commit is contained in:
Cade Scroggins
2019-01-14 12:42:03 -08:00
parent da9c86c4bf
commit 264a98b986
5 changed files with 173 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fonts/lato-v14-latin-900.woff
BIN
View File
Binary file not shown.
fonts/lato-v14-latin-900.woff2
BIN
View File
Binary file not shown.
fonts/lato-v14-latin-regular.woff
BIN
View File
Binary file not shown.
fonts/lato-v14-latin-regular.woff2
BIN
View File
Binary file not shown.
index.html
+168 -93
View File
@@ -2,8 +2,11 @@
<script> <script>
const CONFIG = { const CONFIG = {
// the category, name, key, url, search path and color for your commands /**
// if none of the specified keys are matched, the '*' key is used * The category, name, key, url, search path and color for your commands.
* If none of the specified keys are matched, the '*' key is used.
* Commands without a category don't show up in the help menu.
*/
commands: [ commands: [
{ {
name: 'Google', name: 'Google',
@@ -157,23 +160,29 @@
}, },
], ],
// give suggestions as you type /**
* Get suggestions as you type.
*/
suggestions: true, suggestions: true,
// max amount of suggestions that will ever be displayed
suggestionsLimit: 4, suggestionsLimit: 4,
// the order and limit for each suggestion influencer /**
// "Default" suggestions come from CONFIG.defaultSuggestions * The order and limit for each suggestion influencer. An "influencer" is
// "DuckDuckGo" suggestions come from the duck duck go search api * just a suggestion source. The following influencers are available:
// "History" suggestions come from your previously entered queries *
* - "Default" suggestions come from CONFIG.defaultSuggestions
* - "DuckDuckGo" suggestions come from the duck duck go search api
* - "History" suggestions come from your previously entered queries
*/
influencers: [ influencers: [
{ name: 'Default', limit: 4 }, { name: 'Default', limit: 4 },
{ name: 'History', limit: 1 }, { name: 'History', limit: 1 },
{ name: 'DuckDuckGo', limit: 4 }, { name: 'DuckDuckGo', limit: 4 },
], ],
// default search suggestions for the specified queries /**
* Default search suggestions for the specified queries.
*/
defaultSuggestions: { defaultSuggestions: {
g: ['g/issues', 'g/pulls', 'gist.github.com'], g: ['g/issues', 'g/pulls', 'gist.github.com'],
l: ['l/#electronic+chill', 'l/#focus+instrumental', 'l/#piano+sleep'], l: ['l/#electronic+chill', 'l/#focus+instrumental', 'l/#piano+sleep'],
@@ -181,44 +190,92 @@
s: ['s/you/likes', 's/discover/the-upload'], s: ['s/you/likes', 's/discover/the-upload'],
}, },
// instantly redirect when a key is matched /**
// put a space before any other queries to prevent unwanted redirects * Instantly redirect when a key is matched. Put a space before any other
* queries to prevent unwanted redirects.
*/
instantRedirect: false, instantRedirect: false,
// open queries in a new tab /**
* Open triggered queries in a new tab.
*/
newTab: true, newTab: true,
// dynamic background colors when command domains are matched /**
* Dynamic overlay background colors when command domains are matched.
*/
colors: true, colors: true,
// the delimiter between the key and your search query /**
// e.g. to search GitHub for potatoes you'd type "g:potatoes" * The delimiter between a command key and your search query. For example,
* to search GitHub for potatoes, you'd type "g:potatoes".
*/
searchDelimiter: ':', searchDelimiter: ':',
// the delimiter between the key and a path /**
// e.g. type "r/r/unixporn" to go to "reddit.com/r/unixporn" * The delimiter between a command key and a path. For example, you'd type
* "r/r/unixporn" to go to "https://reddit.com/r/unixporn".
*/
pathDelimiter: '/', pathDelimiter: '/',
// the delimiter between the hours and minutes in the clock /**
* The delimiter between the hours and minutes on the clock.
*/
clockDelimiter: ' ', clockDelimiter: ' ',
// change clock to twelve hour format /**
clockTwelveHour: false, * Show a twenty-four-hour clock instead of a twelve-hour clock with AM/PM.
*/
twentyFourHourClock: true,
}; };
</script> </script>
<style type="text/css"> <style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Lato:400,900');
:root { :root {
--bg: #fff; /* colors */
--fg: #1e272e; --background: #fff;
--foreground: #1e272e;
/* fonts */
--font-family: Lato, sans-serif;
--base-font-size: 18px;
--font-weight-normal: 400;
--font-weight-bold: 700;
} }
/* to download a different font locally:
https://google-webfonts-helper.herokuapp.com/fonts */
@font-face {
font-family: Lato;
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'),
url('./fonts/lato-v14-latin-regular.woff2') format('woff2'),
url('./fonts/lato-v14-latin-regular.woff') format('woff');
}
@font-face {
font-family: Lato;
font-style: normal;
font-weight: 900;
src: local('Lato Black'), local('Lato-Black'),
url('./fonts/lato-v14-latin-900.woff2') format('woff2'),
url('./fonts/lato-v14-latin-900.woff') format('woff');
}
</style>
<style type="text/css">
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
html {
font-family: var(--font-family);
font-size: var(--base-font-size);
font-weight: var(--font-weight-normal);
}
body { body {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -228,25 +285,28 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
transition: background 0.2s; transition: background 0.2s;
background: var(--bg); background: var(--background);
font-family: Lato, sans-serif; color: var(--foreground);
color: var(--fg); }
input,
button {
display: block;
width: 100%;
margin: 0;
padding: 0;
background: transparent;
color: inherit;
font-family: var(--font-family);
font-size: 1rem;
} }
input, input,
button, button,
input:focus, input:focus,
button:focus { button:focus {
display: block;
box-sizing: border-box;
width: 100%;
margin: 0;
border: 0; border: 0;
outline: 0; outline: 0;
background: transparent;
color: inherit;
font-family: Lato, sans-serif;
text-align: center;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
} }
@@ -270,7 +330,6 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box;
} }
.overlay { .overlay {
@@ -278,7 +337,6 @@
top: 0; top: 0;
left: 0; left: 0;
overflow: auto; overflow: auto;
box-sizing: border-box;
width: 100%; width: 100%;
height: 100%; height: 100%;
visibility: hidden; visibility: hidden;
@@ -287,7 +345,8 @@
.clock { .clock {
display: block; display: block;
margin-top: -0.06rem; margin-top: -0.06rem;
font-size: 6rem; font-size: 4rem;
font-weight: var(--font-weight-normal);
text-align: center; text-align: center;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
cursor: pointer; cursor: pointer;
@@ -298,10 +357,8 @@
} }
.search-form { .search-form {
padding: 1rem; background: var(--foreground);
background: var(--fg); color: var(--background);
color: var(--bg);
box-sizing: border-box;
z-index: 2; z-index: 2;
} }
@@ -309,20 +366,22 @@
width: 100%; width: 100%;
} }
.search-input, .search-input {
.search-input:focus {
width: 100%; width: 100%;
padding: 0 1rem;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 900; font-weight: var(--font-weight-bold);
letter-spacing: 0.05rem; letter-spacing: 0.1rem;
text-transform: uppercase; text-transform: uppercase;
} }
.search-suggestions { .search-suggestions {
display: none; display: none;
flex-wrap: wrap;
justify-content: center; justify-content: center;
flex-direction: column;
flex-wrap: wrap;
overflow: hidden;
} }
body.suggestions .search-suggestions { body.suggestions .search-suggestions {
@@ -330,30 +389,30 @@
} }
.search-suggestion { .search-suggestion {
padding: 0.7rem 1rem; padding: 0.75rem 1rem;
text-align: left;
white-space: nowrap; white-space: nowrap;
font-size: 1.1em;
cursor: pointer; cursor: pointer;
} }
.search-suggestion.highlight { .search-suggestion.highlight {
background: var(--bg); background: var(--background);
color: var(--fg); color: var(--foreground);
} }
.search-suggestion b { .search-suggestion b {
position: relative; position: relative;
font-weight: 400; font-weight: var(--font-weight-normal);
} }
.search-suggestion b::after { .search-suggestion b::after {
content: ' '; content: ' ';
position: absolute; position: absolute;
right: 0; right: 0;
bottom: -0.4rem; bottom: -0.3rem;
left: 0; left: 0;
height: 3px; height: 2px;
background: var(--bg); background: var(--background);
opacity: 0.4; opacity: 0.4;
} }
@@ -364,8 +423,7 @@
.help { .help {
display: block; display: block;
padding: 8vw; padding: 8vw;
background: var(--bg); background: var(--background);
font-size: 1.2rem;
z-index: 1; z-index: 1;
} }
@@ -375,8 +433,8 @@
.category-name { .category-name {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
font-size: 0.6em; font-size: 0.75rem;
letter-spacing: 0.3em; letter-spacing: 0.15rem;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -395,14 +453,14 @@
.command-key { .command-key {
display: block; display: block;
float: left; float: left;
width: 2.5em; width: 2rem;
height: 2.5em; height: 2rem;
margin-right: 1rem; margin-right: 1rem;
border-radius: 50%; border-radius: 50%;
background: var(--fg); background: var(--foreground);
color: var(--bg); color: var(--background);
font-size: 0.8em; font-size: 0.75rem;
line-height: 2.5em; line-height: 2rem;
text-align: center; text-align: center;
} }
@@ -419,8 +477,8 @@
left: 0; left: 0;
height: 2px; height: 2px;
transition: 0.2s; transition: 0.2s;
transform: translateX(-2em); transform: translateX(-2rem);
background: var(--fg); background: var(--foreground);
opacity: 0; opacity: 0;
} }
@@ -440,20 +498,27 @@
} }
@media (min-width: 500px) { @media (min-width: 500px) {
.clock {
font-size: 6rem;
}
.search-input {
text-align: center;
}
.search-suggestions {
align-items: center;
}
.categories { .categories {
display: grid; display: grid;
grid-template-columns: 250px 185px; grid-template-columns: 250px 175px;
justify-content: space-around; justify-content: space-around;
} }
.category:nth-last-child(2) { .category:nth-last-child(2) {
margin-bottom: 0; margin-bottom: 0;
} }
.search-input,
.search-input:focus {
font-size: 3rem;
}
} }
@media (min-width: 1000px) { @media (min-width: 1000px) {
@@ -462,18 +527,26 @@
padding: 0; padding: 0;
} }
.search-input {
font-size: 2.5rem;
}
.search-suggestions {
flex-direction: row;
}
.category { .category {
margin: 2rem 0; margin: 2rem 0;
} }
.categories { .categories {
grid-template-columns: repeat(2, 300px) 185px; grid-template-columns: repeat(2, 300px) 175px;
} }
} }
@media (min-width: 1600px) { @media (min-width: 1500px) {
.categories { .categories {
grid-template-columns: repeat(5, 230px) 185px; grid-template-columns: repeat(5, 220px) 175px;
} }
} }
</style> </style>
@@ -481,7 +554,6 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" /> <meta name="robots" content="noindex" />
<title>~</title> <title>~</title>
<div class="center"><time class="clock" id="clock"></time></div> <div class="center"><time class="clock" id="clock"></time></div>
@@ -565,7 +637,7 @@
constructor(options) { constructor(options) {
this._el = $.el('#clock'); this._el = $.el('#clock');
this._delimiter = options.delimiter; this._delimiter = options.delimiter;
this._clockTwelveHour = options.clockTwelveHour; this._twentyFourHourClock = options.twentyFourHourClock;
this._setTime = this._setTime.bind(this); this._setTime = this._setTime.bind(this);
this._el.addEventListener('click', options.showForm); this._el.addEventListener('click', options.showForm);
this._start(); this._start();
@@ -576,7 +648,7 @@
let hours = $.pad(date.getHours()); let hours = $.pad(date.getHours());
let amPm = ''; let amPm = '';
if (this._clockTwelveHour) { if (!this._twentyFourHourClock) {
hours = date.getHours(); hours = date.getHours();
if (hours > 12) hours -= 12; if (hours > 12) hours -= 12;
else if (hours === 0) hours = 12; else if (hours === 0) hours = 12;
@@ -974,25 +1046,28 @@
const splitPath = trimmed.split(this._pathDelimiter); const splitPath = trimmed.split(this._pathDelimiter);
this._commands.some(({ category, key, name, search, url }) => { this._commands.some(({ category, key, name, search, url }) => {
res.isKey = query === key; if (query === key) {
res.isSearch = !res.isKey && splitSearch[0] === key;
res.isPath = !res.isKey && splitPath[0] === key;
if (res.isKey || res.isSearch || res.isPath) {
res.key = key; res.key = key;
res.isKey = true;
res.redirect = url;
return true;
}
if (res.isSearch && search) { if (splitSearch[0] === key && search) {
res.key = key;
res.isSearch = true;
res.split = this._searchDelimiter; res.split = this._searchDelimiter;
res.query = QueryParser._shiftAndTrim(splitSearch, res.split); res.query = QueryParser._shiftAndTrim(splitSearch, res.split);
res.redirect = QueryParser._prepSearch(url, search, res.query); res.redirect = QueryParser._prepSearch(url, search, res.query);
} else if (res.isPath) { return true;
}
if (splitPath[0] === key) {
res.key = key;
res.isPath = true;
res.split = this._pathDelimiter; res.split = this._pathDelimiter;
res.path = QueryParser._shiftAndTrim(splitPath, res.split); res.path = QueryParser._shiftAndTrim(splitPath, res.split);
res.redirect = QueryParser._prepPath(url, res.path); res.redirect = QueryParser._prepPath(url, res.path);
} else {
res.redirect = url;
}
return true; return true;
} }
@@ -1011,7 +1086,7 @@
return ( return (
commands commands
.filter(c => new URL(c.url).hostname === domain) .filter(c => new URL(c.url).hostname.includes(domain))
.map(c => c.color)[0] || null .map(c => c.color)[0] || null
); );
} }
@@ -1202,6 +1277,6 @@
new Clock({ new Clock({
delimiter: CONFIG.clockDelimiter, delimiter: CONFIG.clockDelimiter,
showForm: form.show, showForm: form.show,
clockTwelveHour: CONFIG.clockTwelveHour, twentyFourHourClock: CONFIG.twentyFourHourClock,
}); });
</script> </script>