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

transitioned demos 1 and 2 to picocss for looks

Browse source
This commit is contained in:
Pagwin 2025-08-22 13:01:19 -04:00
parent e012cfa2f6
commit f978f92056
2 changed files with 40 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
static/demos/light-dark-demo-1/index.html
View file

@ -6,42 +6,44 @@
<title>Demo of the simplest implementation of a light/dark theme toggle</title> <title>Demo of the simplest implementation of a light/dark theme toggle</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
</head> </head>
<body> <body>
<style> <style>
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
body { :root {
color: black; --pico-color: black;
background: white; --pico-background-color: white;
--button-bg: #888;
} }
body.toggled { :root:has(body.toggled) {
color: white; --pico-color: white;
background: black; --pico-background-color: black;
--button-bg: #888;
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { :root {
color: white; --pico-color: white;
background: black; --pico-background-color: black;
--button-bg: #888;
} }
body.toggled { :root:has(body.toggled) {
color: black; --pico-color: black;
background: white; --pico-background-color: white;
--button-bg: #888;
} }
} }
button { button {
color: inherit; transition-duration: 0.05s;
background: var(--button-bg); transition-property: outline;
transition-delay: 0s;
}
button:active {
outline: turquoise 5px solid;
} }
</style> </style>
<script async> <script async>

38
static/demos/light-dark-demo-2/index.html
View file

@ -6,42 +6,44 @@
<title>Demo of the simplest implementation of a light/dark theme toggle</title> <title>Demo of the simplest implementation of a light/dark theme toggle</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
</head> </head>
<body> <body>
<style> <style>
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
body { :root {
color: black; --pico-color: black;
background: white; --pico-background-color: white;
--button-bg: #888;
} }
body.toggled { :root:has(body.toggled) {
color: white; --pico-color: white;
background: black; --pico-background-color: black;
--button-bg: #888;
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { :root {
color: white; --pico-color: white;
background: black; --pico-background-color: black;
--button-bg: #888;
} }
body.toggled { :root:has(body.toggled) {
color: black; --pico-color: black;
background: white; --pico-background-color: white;
--button-bg: #888;
} }
} }
button { button {
color: inherit; transition-duration: 0.05s;
background: var(--button-bg); transition-property: outline;
transition-delay: 0s;
}
button:active {
outline: turquoise 5px solid;
} }
</style> </style>
<script> <script>