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 { #bookmarks a {
align-items: center;
display: flex;
color: var(--primary-link-color); color: var(--primary-link-color);
text-decoration: none; text-decoration: none;
transition: color 0.25s ease-in-out; transition: color 0.25s ease-in-out;

56
index.html
View File

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