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

custom tab focus, print view is now not terrible and styles are in layers now

Browse source
This commit is contained in:
Pagwin 2024-10-28 22:42:43 -04:00
parent ba62d472fb
commit 342474f604
No known key found for this signature in database
GPG key ID: 81137023740CA260
2 changed files with 34 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
static/css/colors.css
View file

@ -1,3 +1,4 @@
@layer baseline, print;
/* https://color.adobe.com/create/color-contrast-analyzer */ /* https://color.adobe.com/create/color-contrast-analyzer */
/*dark theme*/ /*dark theme*/
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -7,6 +8,7 @@
* #5ac * #5ac
* */ * */
--normal-text: #CCC; --normal-text: #CCC;
--focus-outline-color: #f00;
--link-clicked: #B250D8; --link-clicked: #B250D8;
--link-unclicked: #d80; --link-unclicked: #d80;
--header-bg: #333; --header-bg: #333;
@ -31,6 +33,7 @@
:root { :root {
--bg-color: #e2e3e5; --bg-color: #e2e3e5;
--normal-text: #000; --normal-text: #000;
--focus-outline-color: #f00;
--link-unclicked: #2535B4; --link-unclicked: #2535B4;
--link-clicked: #832244; --link-clicked: #832244;
/*#E6DDE6 /*#E6DDE6
@ -47,11 +50,17 @@
--blockquote-bg: #fff; --blockquote-bg: #fff;
} }
} }
@layer baseline{
body { body {
background: var(--bg-color); background: var(--bg-color);
color: var(--normal-text); color: var(--normal-text);
} }
/*iffy if this should be here but it doesn't mess with the layout so I'll allow it*/
:focus-visible {
outline: 2px solid var(--focus-outline-color);
border-radius: 0.25rem;
}
.nav-link { .nav-link {
color: var(--nav-link-color) !important; color: var(--nav-link-color) !important;
} }
@ -82,3 +91,4 @@ blockquote {
pre:has( > code) { pre:has( > code) {
background: var(--blockquote-bg); background: var(--blockquote-bg);
} }
}

26
static/css/layout.css
View file

@ -1,3 +1,6 @@
@layer pre-load, baseline, print;
@layer baseline {
body { body {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
@ -25,7 +28,6 @@ a:hover {
padding: 0.5em 1em; padding: 0.5em 1em;
position: fixed; position: fixed;
} }
#content { #content {
box-sizing: border-box; box-sizing: border-box;
display: block flex; display: block flex;
@ -38,7 +40,6 @@ a:hover {
/*https://pearsonified.com/golden-ratio-typography-intro/*/ /*https://pearsonified.com/golden-ratio-typography-intro/*/
/*https://grtcalculator.com/*/ /*https://grtcalculator.com/*/
max-width: 55em; max-width: 55em;
border: 0.5em solid white;
border-radius: 0.5em; border-radius: 0.5em;
/* needed due to being flex itself*/ /* needed due to being flex itself*/
@ -88,3 +89,24 @@ p {
/*https://pearsonified.com/golden-ratio-typography-intro/ is where this came from and tbh having a bigger line height does make things more readable although I tune it down a bit*/ /*https://pearsonified.com/golden-ratio-typography-intro/ is where this came from and tbh having a bigger line height does make things more readable although I tune it down a bit*/
line-height: 1.5; line-height: 1.5;
} }
}
/* we really want to make sure this doesn't stick around when colors load in regardless of when/how colors get loaded in*/
@layer pre-load{
#content {
border: 0.5em solid white;
}
}
/* I mean why not? */
@media print {
@layer print{
#header {
visibility: hidden;
}
#content {
border-style: none;
}
pre {
page-break-inside: avoid;
}
}
}