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

The fixins

Browse Source
This commit is contained in:
Tressley Cahill 2022-11-05 19:06:29 -04:00
parent e508df35e4
commit 83ab7491d6
4 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
src/_traichu.svg

11
css/styles.css
View File

@ -65,7 +65,7 @@ header {
justify-content: flex-end; justify-content: flex-end;
} }
.separator { margin: 0 0.25rem; } .separator { margin: 0 var(--spacing-xs); }
aside { aside {
display: flex; display: flex;
@ -89,7 +89,7 @@ aside svg { height: 4.5rem; }
#dock a { #dock a {
display: block; display: block;
fill: var(--primary-link-color); fill: var(--primary-link-color);
transition: fill 0.25s ease-in-out; transition: fill 0.125s ease-in-out;
} }
#dock a:focus, #dock a:focus,
@ -152,7 +152,7 @@ aside svg { height: 4.5rem; }
} }
#bookmarks a:focus, #bookmarks a:focus,
#bookmarks a:hover { background-color: hsl(var(--color-white-hsl) / 0.025); } #bookmarks a:hover { background-color: hsl(var(--color-white-hsl) / 0.05); }
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
@ -168,7 +168,7 @@ aside svg { height: 4.5rem; }
#search input:focus { outline-color: var(--color-orange); } #search input:focus { outline-color: var(--color-orange); }
#bookmarks a:focus, #bookmarks a:focus,
#bookmarks a:hover { background-color: hsl(var(--color-orange-hsl) / 0.125); } #bookmarks a:hover { background-color: hsl(var(--color-black-hsl) / 0.05); }
} }
#search input:active, #search input:active,
@ -195,6 +195,7 @@ aside svg { height: 4.5rem; }
display: flex; display: flex;
flex-direction: row; flex-direction: row;
line-height: 1; line-height: 1;
margin-bottom: var(--spacing-xs);
} }
.favicon { .favicon {
@ -209,7 +210,7 @@ aside svg { height: 4.5rem; }
color: var(--primary-link-color); color: var(--primary-link-color);
padding: var(--spacing-s); padding: var(--spacing-s);
text-decoration: none; text-decoration: none;
transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out; transition: background-color 0.125s ease-in-out, color 0.125s ease-in-out;
} }
#bookmarks a:focus, #bookmarks a:focus,

4
css/vars.css
View File

@ -6,7 +6,7 @@
https://css-tricks.com/hsl-hsla-is-great-for-programmatic-color-control/ https://css-tricks.com/hsl-hsla-is-great-for-programmatic-color-control/
https://css-tricks.com/color-alpha-anywhere/ https://css-tricks.com/color-alpha-anywhere/
*/ */
--color-black-hsl: 0 0% 5%; /* #0C0C0C */ --color-black-hsl: 0 0% 11%; /* #1C1C1C */
--color-black: hsl(var(--color-black-hsl)); --color-black: hsl(var(--color-black-hsl));
--color-orange-hsl: 19 88% 53%; /* #F05E1C */ --color-orange-hsl: 19 88% 53%; /* #F05E1C */
--color-orange: hsl(var(--color-orange-hsl)); --color-orange: hsl(var(--color-orange-hsl));
@ -38,7 +38,7 @@
--primary-background-color: var(--color-black); --primary-background-color: var(--color-black);
--primary-font-color: var(--color-white); --primary-font-color: var(--color-white);
--primary-link-color: hsl(var(--color-white-hsl) / 0.5); --primary-link-color: hsl(var(--color-white-hsl) / 0.5);
--primary-link-hover-color: var(--color-orange); --primary-link-hover-color: var(--color-white);
} }
} }

2
index.html
View File

@ -52,7 +52,7 @@
<h2 class="sr-only">Search</h2> <h2 class="sr-only">Search</h2>
<form action="https://duckduckgo.com/" method="get"> <form action="https://duckduckgo.com/" method="get">
<input type="text" id="q" name="q" autofocus> <input type="text" id="q" name="q" autofocus>
<button class="sr-only">Search</button> <button class="sr-only" tabindex="-1">Search</button>
</form> </form>
</section> </section>
<section id="bookmarks"> <section id="bookmarks">