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

Even better bookmarks!

Browse Source 
- Gave a little bit more styling the bookmark section
This commit is contained in:
Tressley Cahill 2022-11-03 12:20:48 -04:00
parent 4ca2733199
commit f79f5471ac
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -2,6 +2,6 @@
> **trai´chu,** _n_. A simple, semantic start page built with HTML, CSS, and a mouse-sized bit of JavaScript.
**_traichu's** markup is [valid](https://validator.w3.org/nu/?doc=https%3A%2F%2Ftressley.github.io%2F_traichu%2Findex.html) and adheres to HTML semantics. [Traditional Japanese](https://www.nipponcolors.com), [WCAG 2.0](https://www.w3.org/TR/WCAG20/) compliant colors make up the color palette. The monospace font is [Inconsolata](https://fonts.google.com/specimen/Inconsolata) loaded via [Google Fonts](https://fonts.google.com). Icons are [inline SVGs](https://css-tricks.com/pretty-good-svg-icon-system/), [DuckDuckGo's API](https://icons.duckduckgo.com/ip3/duckduckgo.com.ico) delivers the favicons, and [OpenWeather's API](https://openweathermap.org) provides the weather forecast and icons. Vanilla JavaScript and CSS handle all interactivity.
**_traichu's** markup is [valid](https://validator.w3.org/nu/?doc=https%3A%2F%2Ftressley.github.io%2F_traichu%2Findex.html) and aims to adhere to HTML semantics. [Traditional Japanese](https://www.nipponcolors.com), [WCAG 2.0](https://www.w3.org/TR/WCAG20/) compliant colors make up the color palette. The monospace font is ol' [Inconsolata](https://fonts.google.com/specimen/Inconsolata) loaded via [Google Fonts](https://fonts.google.com). Icons are [inline SVGs](https://css-tricks.com/pretty-good-svg-icon-system/), [DuckDuckGo's API](https://icons.duckduckgo.com/ip3/duckduckgo.com.ico) delivers the favicons, and [OpenWeather's API](https://openweathermap.org) provides the weather forecast and icons. Vanilla JavaScript and CSS handle all interactivity.
[DuckDuckGo](https://duckduckgo.com) is the default search engine because privacy is important.
[DuckDuckGo](https://duckduckgo.com) is the default search engine because privacy is important 'round here.

16
css/styles.css
View File

@ -150,6 +150,9 @@ aside svg { height: 4.5rem; }
background-color: hsl(var(--color-white-hsl) / 0.025);
outline-color: var(--color-orange);
}
#bookmarks a:focus,
#bookmarks a:hover { background-color: hsl(var(--color-white-hsl) / 0.025); }
}
@media (prefers-color-scheme: light) {
@ -164,6 +167,9 @@ aside svg { height: 4.5rem; }
background-color: var(--color-white);
outline-color: var(--color-orange);
}
#bookmarks a:focus,
#bookmarks a:hover { background-color: hsl(var(--color-black-hsl) / 0.075); }
}
#search input:active,
@ -190,7 +196,6 @@ aside svg { height: 4.5rem; }
display: flex;
flex-direction: row;
line-height: 1;
margin-bottom: var(--spacing-m);
}
.favicon {
@ -200,14 +205,19 @@ aside svg { height: 4.5rem; }
#bookmarks a {
align-items: center;
border-radius: 0.25rem;
display: flex;
color: var(--primary-link-color);
padding: var(--spacing-s);
text-decoration: none;
transition: color 0.25s ease-in-out;
transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
}
#bookmarks a:focus,
#bookmarks a:hover { color: var(--primary-link-hover-color); }
#bookmarks a:hover {
color: var(--primary-link-hover-color);
outline: none;
}
/*
Accessible hiding for screen readers