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

Improved bookmarks

Browse Source 
- Wraps the favicon in the `<a>` for better accessibility.
This commit is contained in:
Tressley Cahill 2022-11-03 10:54:09 -04:00
parent 0a654eee62
commit 429bc30eef
2 changed files with 22 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/styles.css
View File

@ -201,6 +201,8 @@ aside svg { height: 4.5rem; }
}
#bookmarks a {
align-items: center;
display: flex;
color: var(--primary-link-color);
text-decoration: none;
transition: color 0.25s ease-in-out;

56
index.html
View File

@ -56,84 +56,68 @@
</form>
<script src="js/main.js"></script>
</section>
<nav id="bookmarks">
<section id="bookmarks">
<h2 class="sr-only">Bookmarks</h2>
<ul>
<li>
<img src="https://icons.duckduckgo.com/ip3/news.ycombinator.com.ico" class="favicon" alt="HackerNews favicon">
<a href="https://news.ycombinator.com">HackerNews</a>
<a href="https://news.ycombinator.com"><img src="https://icons.duckduckgo.com/ip3/news.ycombinator.com.ico" class="favicon" alt="HackerNews favicon">HackerNews</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/reddit.com.ico" class="favicon" alt="Reddit favicon">
<a href="https://www.reddit.com">Reddit</a>
<a href="https://www.reddit.com"><img src="https://icons.duckduckgo.com/ip3/reddit.com.ico" class="favicon" alt="Reddit favicon">Reddit</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/twitter.com.ico" class="favicon" alt="Twitter favicon">
<a href="https://twitter.com">Twitter</a>
<a href="https://twitter.com"><img src="https://icons.duckduckgo.com/ip3/twitter.com.ico" class="favicon" alt="Twitter favicon">Twitter</a>
</li>
<li>
<img src="https://b.cafeinado.com/themes/vanilla/styles/default/favicon.ico" class="favicon" alt="b.dot favicon">
<a href="http://b.cafeinado.com">b.dot</a>
<a href="http://b.cafeinado.com"><img src="https://b.cafeinado.com/themes/vanilla/styles/default/favicon.ico" class="favicon" alt="b.dot favicon">b.dot</a>
</li>
</ul>
<ul>
<li>
<img src="https://icons.duckduckgo.com/ip3/apnews.com.ico" class="favicon" alt="Associated Press favicon">
<a href="https://apnews.com">Associated Press</a>
<a href="https://apnews.com"><img src="https://icons.duckduckgo.com/ip3/apnews.com.ico" class="favicon" alt="Associated Press favicon">Associated Press</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/reuters.com.ico" class="favicon" alt="Reuters favicon">
<a href="https://www.reuters.com">Reuters</a>
<a href="https://www.reuters.com"><img src="https://icons.duckduckgo.com/ip3/reuters.com.ico" class="favicon" alt="Reuters favicon">Reuters</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/supercluster.com.ico" class="favicon" alt="Supercluster favicon">
<a href="https://www.supercluster.com">Supercluster</a>
<a href="https://www.supercluster.com"><img src="https://icons.duckduckgo.com/ip3/supercluster.com.ico" class="favicon" alt="Supercluster favicon">Supercluster</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/smithsonianmag.org.ico" class="favicon" alt="Smithsonian Magazine favicon">
<a href="https://www.smithsonianmag.com">Smithsonian Magazine</a>
<a href="https://www.smithsonianmag.com"><img src="https://icons.duckduckgo.com/ip3/smithsonianmag.org.ico" class="favicon" alt="Smithsonian Magazine favicon">Smithsonian Magazine</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/publicdomainreview.org.ico" class="favicon" alt="The Public Domain Review favicon">
<a href="https://publicdomainreview.org">Public Domain Review</a>
<a href="https://publicdomainreview.org"><img src="https://icons.duckduckgo.com/ip3/publicdomainreview.org.ico" class="favicon" alt="The Public Domain Review favicon">Public Domain Review</a>
</li>
</ul>
<ul>
<li>
<img src="https://icons.duckduckgo.com/ip3/plex.tv.ico" class="favicon" alt="Plex favicon">
<a href="https://app.plex.tv">Plex</a>
<a href="https://app.plex.tv"><img src="https://icons.duckduckgo.com/ip3/plex.tv.ico" class="favicon" alt="Plex favicon">Plex</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/youtube.com.ico" class="favicon" alt="YouTube favicon">
<a href="https://www.youtube.com">YouTube</a>
<a href="https://www.youtube.com"><img src="https://icons.duckduckgo.com/ip3/youtube.com.ico" class="favicon" alt="YouTube favicon">YouTube</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/twitch.tv.ico" class="favicon" alt="Twitch favicon">
<a href="https://www.twitch.tv">Twitch</a>
<a href="https://www.twitch.tv"><img src="https://icons.duckduckgo.com/ip3/twitch.tv.ico" class="favicon" alt="Twitch favicon">Twitch</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/spotify.com.ico" class="favicon" alt="Spotify favicon">
<a href="https://open.spotify.com">Spotify</a>
<a href="https://open.spotify.com"><img src="https://icons.duckduckgo.com/ip3/spotify.com.ico" class="favicon" alt="Spotify favicon">Spotify</a>
</li>
</ul>
<ul>
<li>
<img src="https://icons.duckduckgo.com/ip3/cardsphere.com.ico" class="favicon" alt="Cardsphere favicon">
<a href="https://www.cardsphere.com">Cardsphere</a>
<a href="https://www.cardsphere.com"><img src="https://icons.duckduckgo.com/ip3/cardsphere.com.ico" class="favicon" alt="Cardsphere favicon">Cardsphere</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/cubecobra.com.ico" class="favicon" alt="CubeCobra favicon">
<a href="https://cubecobra.com">Cube Cobra</a>
<a href="https://cubecobra.com"><img src="https://icons.duckduckgo.com/ip3/cubecobra.com.ico" class="favicon" alt="CubeCobra favicon">Cube Cobra</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/deckbox.org.ico" class="favicon" alt="Deckbox favicon">
<a href="https://deckbox.org">Deckbox</a>
<a href="https://deckbox.org"><img src="https://icons.duckduckgo.com/ip3/deckbox.org.ico" class="favicon" alt="Deckbox favicon">Deckbox</a>
</li>
<li>
<img src="https://icons.duckduckgo.com/ip3/moxfield.com.ico" class="favicon" alt="Moxfield favicon">
<a href="https://www.moxfield.com">Moxfield</a>
<a href="https://www.moxfield.com"><img src="https://icons.duckduckgo.com/ip3/moxfield.com.ico" class="favicon" alt="Moxfield favicon">Moxfield</a>
</li>
</ul>
</nav>
</section>
</section>
</main>
</body>