hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More active states

Browse Source
This commit is contained in:
daudix
2024-08-31 06:52:08 +03:00
parent a69352c8b5
commit 65770c2d93
6 changed files with 135 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -11,6 +11,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Add `external` class to comment timestamp.
- Add active state to footer's "Powered by" links.
- Add active state to footnotes' go back button.
- Add active state to slider thumb.
- Add hover state to slider thumb.
- Add loading animation to "Load Comments" button.
- Add zoom-on-hover to custom comment emojis.

144
content/demo/index.md
View File

@ -548,10 +548,24 @@ Blah blah <q>Inline Quote</q> hmm.
<!-- For the demo purposes only -->
<div id="color-picker-container">
<label for="color-picker">Primary color:</label>
<input id="color-picker" type="color" />
<small>Primary color:</small>
<br />
<input id="color-picker-light" type="color" value="#ff7800" />
<label for="color-picker-light">&nbsp;Light theme</label>
<br />
<input id="color-picker-dark" type="color" value="#ffa348" />
<label for="color-picker-dark">&nbsp;Dark theme</label>
<br />
<small>Fix contrast for:</small>
<br />
<input id="contrast-color-light" type="checkbox" />
<label for="contrast-color-light">&nbsp;Light theme</label>
<br />
<input id="contrast-color-dark" type="checkbox" checked />
<label for="contrast-color-dark">&nbsp;Dark theme</label>
</div>
<style>
#color-picker-container {
-webkit-backdrop-filter: var(--blur);
@ -564,7 +578,6 @@ Blah blah <q>Inline Quote</q> hmm.
transition: var(--transition);
box-shadow: var(--edge-highlight);
border-start-end-radius: var(--rounded-corner);
border-end-end-radius: var(--rounded-corner);
background-color: var(--nav-bg);
padding: 0.5rem;
}
@ -591,36 +604,113 @@ Blah blah <q>Inline Quote</q> hmm.
</style>
<script type="text/javascript">
let colorPicker;
const defaultColor = window.getComputedStyle(document.documentElement).getPropertyValue("--primary-color");
console.log("Default Color: " + defaultColor);
const colorPickerLight = document.querySelector("#color-picker-light");
const colorPickerDark = document.querySelector("#color-picker-dark");
const contrastCheckboxLight = document.querySelector("#contrast-color-light");
const contrastCheckboxDark = document.querySelector("#contrast-color-dark");
window.addEventListener("load", startup, false);
colorPickerLight.value = "#ff7800";
colorPickerDark.value = "#ffa348";
function hexToRGB(hex, alpha) {
var r = parseInt(hex.slice(1, 3), 16),
g = parseInt(hex.slice(3, 5), 16),
b = parseInt(hex.slice(5, 7), 16);
colorPickerLight.addEventListener("input", function () {
updateStyles(colorPickerLight.value, colorPickerDark.value, contrastCheckboxLight.checked, contrastCheckboxDark.checked);
});
if (alpha) {
return "rgb(" + r + " " + g + " " + b + " / " + alpha + ")";
} else {
return "rgb(" + r + " " + g + " " + b + ")";
colorPickerDark.addEventListener("input", function () {
updateStyles(colorPickerLight.value, colorPickerDark.value, contrastCheckboxLight.checked, contrastCheckboxDark.checked);
});
contrastCheckboxLight.addEventListener("change", function () {
updateStyles(colorPickerLight.value, colorPickerDark.value, contrastCheckboxLight.checked, contrastCheckboxDark.checked);
});
contrastCheckboxDark.addEventListener("change", function () {
updateStyles(colorPickerLight.value, colorPickerDark.value, contrastCheckboxLight.checked, contrastCheckboxDark.checked);
});
function hexToRGBA(hex, alpha) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
function updateStyles(primaryColorLight, primaryColorDark, contrastColorLight, contrastColorDark) {
let styleElement = document.getElementById("dynamic-styles");
if (!styleElement) {
styleElement = document.createElement("style");
styleElement.id = "dynamic-styles";
document.head.appendChild(styleElement);
}
}
function startup() {
colorPicker = document.querySelector("#color-picker");
colorPicker.value = defaultColor;
colorPicker.addEventListener("input", update, false);
colorPicker.select();
}
const primaryColorLightAlpha = hexToRGBA(primaryColorLight, 0.2);
const primaryColorDarkAlpha = hexToRGBA(primaryColorDark, 0.2);
function update(event) {
console.log("Primary Color: " + event.target.value);
console.log("Primary Color Alpha: " + hexToRGB(event.target.value, 0.2));
document.documentElement.style.setProperty('--primary-color', event.target.value);
document.documentElement.style.setProperty('--primary-color-alpha', hexToRGB(event.target.value, 0.2));
let styles = "";
styles += `
:root {
--primary-color: ${primaryColorLight};
--primary-color-alpha: ${primaryColorLightAlpha};
}
`;
styles += `
[data-theme="dark"] {
--primary-color: ${primaryColorDark};
--primary-color-alpha: ${primaryColorDarkAlpha};
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--primary-color: ${primaryColorDark};
--primary-color-alpha: ${primaryColorDarkAlpha};
}
}
`;
if (contrastColorLight) {
styles += `
:root {
--contrast-color: rgb(0 0 0 / 0.8);
}
`;
} else {
styles += `
:root {
--contrast-color: #fff;
}
`;
}
if (contrastColorDark) {
styles += `
[data-theme="dark"] {
--contrast-color: rgb(0 0 0 / 0.8);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--contrast-color: rgb(0 0 0 / 0.8);
}
}
`;
} else {
styles += `
[data-theme="dark"] {
--contrast-color: #fff;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--contrast-color: #fff;
}
}
`;
}
styleElement.textContent = styles;
}
</script>
<!-- End -->

4
sass/_footnotes-list.scss
View File

@ -33,6 +33,10 @@
&:hover {
opacity: 1;
}
&:active {
transform: scale(var(--active));
}
}
li:target a[href*="#fr-"] {

9
sass/_input.scss
View File

@ -130,20 +130,23 @@ input[type="range"] {
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
filter: brightness(0.9);
transition: var(--transition);
cursor: grab;
box-shadow: var(--shadow);
border-radius: 999px;
background-color: white;
background-color: hsl(0, 0%, 90%);
width: 1.5rem;
height: 1.5rem;
&:hover {
transform: scale(1.1);
box-shadow: var(--shadow-raised);
background-color: white;
}
&:active {
transform: scale(var(--active));
cursor: grabbing;
}
}
@ -155,16 +158,18 @@ input[type="range"] {
box-shadow: var(--shadow);
border: none;
border-radius: 999px;
background-color: white;
background-color: hsl(0, 0%, 90%);
width: 1.5rem;
height: 1.5rem;
&:hover {
transform: scale(1.1);
box-shadow: var(--shadow-raised);
background-color: white;
}
&:active {
transform: scale(var(--active));
cursor: grabbing;
}
}

1
sass/_pre-container.scss
View File

@ -34,7 +34,6 @@
background-color: transparent;
padding: 0.5rem;
line-height: 0;
cursor: copy;
&:hover {
box-shadow: var(--edge-highlight);

5
sass/_zola-anchor.scss
View File

@ -10,6 +10,7 @@ h6 {
}
.zola-anchor {
display: inline-block;
opacity: 0;
transition: var(--transition);
margin: 0 0.25em;
@ -18,6 +19,10 @@ h6 {
background-color: var(--primary-color);
}
&:active {
transform: scale(var(--active));
}
&:focus-visible {
opacity: 1;
}