hc/startpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Swap to DuckDuckGo's favico API

Browse Source 
- Now using DuckDuckGo's favico API
- Added README.md
This commit is contained in:
Tressley Cahill 2022-10-25 21:15:19 -04:00
parent 00da158791
commit 2e10eae92c
3 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md Normal file
View File

@ -0,0 +1,9 @@
... ![_traichu](img/traichu-run.png) ...
## _traichu
A simple, semantic start page built with HTML 5, CSS 3, and JavaScript.
This start page utilizes [DuckDuckGo](https://duckduckgo.com)'s privacy-focused search, DuckDuckGo's Favico API and inline SVGs to handle the images (with the exception of the traichu sprite), flexbox, and an 8-point grid system to handle the layout, with all interactions being handled via JavaScript and CSS animation.
The font, [Inconsolata](https://fonts.google.com/specimen/Inconsolata), by Raph Levien, is loaded via Google Fonts. The color palette is composed of contrast accessibile, [WCAG 2.0](https://www.w3.org/TR/WCAG20/) compliant colors listed in [Japanese Industrial Standards](https://ja.wikipedia.org/wiki/JIS%E6%85%A3%E7%94%A8%E8%89%B2%E5%90%8D).

2
css/styles.css
View File

@ -155,7 +155,7 @@ header img {
.favicon {
margin-right: var(--space-s);
min-width: 1rem;
width: 1rem;
}
#bookmarks a {

26
index.html
View File

@ -48,15 +48,15 @@
<nav id="bookmarks">
<ul>
<li>
<img src="https://www.google.com/s2/favicons?domain_url=news.ycombinator.com" class="favicon" alt="HackerNews favicon">
<img src="https://icons.duckduckgo.com/ip3/news.ycombinator.com.ico" class="favicon" alt="HackerNews favicon">
<a href="https://news.ycombinator.com">HackerNews</a>
</li>
<li>
<img src="https://www.google.com/s2/favicons?domain_url=reddit.com" class="favicon" alt="Reddit favicon">
<img src="https://icons.duckduckgo.com/ip3/reddit.com.ico" class="favicon" alt="Reddit favicon">
<a href="https://www.reddit.com">Reddit</a>
</li>
<li>
<img src="https://www.google.com/s2/favicons?domain_url=twitter.com" class="favicon" alt="Twitter favicon">
<img src="https://icons.duckduckgo.com/ip3/twitter.com.ico" class="favicon" alt="Twitter favicon">
<a href="https://twitter.com">Twitter</a>
</li>
<li>
@ -66,47 +66,47 @@
</ul>
<ul>
<li>
<img src="https://www.google.com/s2/favicons?domain_url=apnews.com" class="favicon" alt="Associated Press favicon">
<img src="https://icons.duckduckgo.com/ip3/apnews.com.ico" class="favicon" alt="Associated Press favicon">
<a href="https://apnews.com">Associated Press</a>
</li>
<li>
<img src="https://www.google.com/s2/favicons?domain_url=reuters.com" class="favicon" alt="Reuters favicon">
<img src="https://icons.duckduckgo.com/ip3/reuters.com.ico" class="favicon" alt="Reuters favicon">
<a href="https://www.reuters.com">Reuters</a>
</li>
<li>
<img src="https://www.google.com/s2/favicons?domain_url=supercluster.com" class="favicon" alt="Supercluster favicon">
<img src="https://icons.duckduckgo.com/ip3/supercluster.com.ico" class="favicon" alt="Supercluster favicon">
<a href="https://www.supercluster.com">Supercluster</a>
</li>
</ul>
<ul>
<li>
<img src="https://www.google.com/s2/favicons?domain_url=plex.tv" class="favicon" alt="Plex favicon">
<img src="https://icons.duckduckgo.com/ip3/plex.tv.ico" class="favicon" alt="Plex favicon">
<a href="https://app.plex.tv">Plex</a>
</li>
<li>
<img src="https://www.google.com/s2/favicons?domain_url=youtube.com" class="favicon" alt="YouTube favicon">
<img src="https://icons.duckduckgo.com/ip3/youtube.com.ico" class="favicon" alt="YouTube favicon">
<a href="https://www.youtube.com">YouTube</a>
</li>
<li>
<img src="https://www.google.com/s2/favicons?domain_url=spotify.com" class="favicon" alt="Spotify favicon">
<img src="https://icons.duckduckgo.com/ip3/spotify.com.ico" class="favicon" alt="Spotify favicon">
<a href="https://open.spotify.com">Spotify</a>
</li>
</ul>
<ul>
<li>
<img src="https://www.google.com/s2/favicons?domain_url=cardsphere.com" class="favicon" alt="Cardsphere favicon">
<img src="https://icons.duckduckgo.com/ip3/cardsphere.com.ico" class="favicon" alt="Cardsphere favicon">
<a href="https://www.cardsphere.com">Cardsphere</a>
</li>
<li>
<img src="https://www.google.com/s2/favicons?domain_url=cubecobra.com" class="favicon" alt="CubeCobra favicon">
<img src="https://icons.duckduckgo.com/ip3/cubecobra.com.ico" class="favicon" alt="CubeCobra favicon">
<a href="https://cubecobra.com">Cube Cobra</a>
</li>
<li>
<img src="https://www.google.com/s2/favicons?domain_url=deckbox.org" class="favicon" alt="Deckbox favicon">
<img src="https://icons.duckduckgo.com/ip3/deckbox.org.ico" class="favicon" alt="Deckbox favicon">
<a href="https://deckbox.org">Deckbox</a>
</li>
<li>
<img src="https://www.google.com/s2/favicons?domain_url=moxfield.com" class="favicon" alt="Moxfield favicon">
<img src="https://icons.duckduckgo.com/ip3/moxfield.com.ico" class="favicon" alt="Moxfield favicon">
<a href="https://www.moxfield.com">Moxfield</a>
</li>
</ul>