Pagwin/new_blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

css highlight change and some todo stuff

Browse source
This commit is contained in:
Pagwin 2024-11-11 00:44:53 -05:00
parent 1af561b3e9
commit d00608f2ba
No known key found for this signature in database
GPG key ID: 81137023740CA260
2 changed files with 16 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
TODO
View file

@ -1,19 +1,14 @@
get RSS feed up and running (add utm stuff) get RSS feed up and running (add utm stuff)
get preferred font setup https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face (see also notes) set font-display to "swap"
emphasize category viewer is in via different header color emphasize category viewer is in via different header color
specify ul styling to be specific to posts list post jump points and table of contents
experiment with ul margin vs padding in posts list for accessibility without focus border looking ridiculous
Fix typography on mobile (mostly just anchors at this point)
https://stackoverflow.com/questions/16387400/getting-the-right-font-size-on-every-mobile-device#35155083
https://css-tricks.com/viewport-sized-typography/
make tapping and holding or hovering changes header nav-link bg make tapping and holding or hovering changes header nav-link bg
Fix forced colors as needed
https://beeps.website/blog/2024-10-02-the-changelog-eleventy-3-forced-colours-new-art/#forced-colour-fixes!
maybe make it so #content or a parent class which has everything but header scrolls intead of the normal page, needs and overflow css attr and height 100% for body/html and maybe flex-box and/or grid (this is to make scroll not appear on header) maybe make it so #content or a parent class which has everything but header scrolls intead of the normal page, needs and overflow css attr and height 100% for body/html and maybe flex-box and/or grid (this is to make scroll not appear on header)
Fix articles with inline html in them and/or links Fix articles with inline html in them and/or links
@ -43,3 +38,9 @@ Webmention linked sites where possible https://www.w3.org/TR/webmention/#sending
~~handle dark/light theming correctly (https://www.joshwcomeau.com/react/dark-mode/) seems useful for that~~ ~~handle dark/light theming correctly (https://www.joshwcomeau.com/react/dark-mode/) seems useful for that~~
~~Figure out why the header width is fucked on mobile as well as why the box is all the way to the left~~ ~~Figure out why the header width is fucked on mobile as well as why the box is all the way to the left~~
~~get preferred font setup https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face (see also notes) set font-display to "swap"~~
~~Fix typography on mobile (mostly just anchors at this point)~~
https://stackoverflow.com/questions/16387400/getting-the-right-font-size-on-every-mobile-device#35155083
https://css-tricks.com/viewport-sized-typography/

10
static/css/colors.css
View file

@ -18,6 +18,8 @@
--content-border-color: #5ac; --content-border-color: #5ac;
/*stolen from code theme*/ /*stolen from code theme*/
--blockquote-bg: rgb(29, 31, 33); --blockquote-bg: rgb(29, 31, 33);
--highlight-bg: #fff;
--highlight-fg: #000;
} }
} }
/* /*
@ -51,6 +53,8 @@
--nav-link-bg-color: #bbb; --nav-link-bg-color: #bbb;
--content-border-color: #026; --content-border-color: #026;
--blockquote-bg: #fff; --blockquote-bg: #fff;
--highlight-bg: #000;
--highlight-fg: #fff;
} }
} }
} }
@ -97,12 +101,10 @@ pre:has( > code) {
background: var(--blockquote-bg); background: var(--blockquote-bg);
} }
/*fancy user selection for funsies*/ /*fancy user selection for funsies*/
/*
::selection { ::selection {
background-color: indigo; background-color: var(--highlight-bg);
color: white; color: var(--highlight-fg);
} }
*/
} }
@media print { @media print {
@layer print{ @layer print{