mirror of
https://github.com/oSoWoSo/DistroHopper.git
synced 2026-06-14 17:36:40 +00:00
297 lines
10 KiB
HTML
297 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="generator" content="pandoc" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
|
<title>stars</title>
|
|
<style>
|
|
code{white-space: pre-wrap;}
|
|
span.smallcaps{font-variant: small-caps;}
|
|
div.columns{display: flex; gap: min(4vw, 1.5em);}
|
|
div.column{flex: auto; overflow-x: auto;}
|
|
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
|
/* The extra [class] is a hack that increases specificity enough to
|
|
override a similar rule in reveal.js */
|
|
ul.task-list[class]{list-style: none;}
|
|
ul.task-list li input[type="checkbox"] {
|
|
font-size: inherit;
|
|
width: 0.8em;
|
|
margin: 0 0.8em 0.2em -1.6em;
|
|
vertical-align: middle;
|
|
}
|
|
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
|
</style>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<button class="theme-toggle" onclick="toggleTheme()">🌓</button>
|
|
<script>
|
|
function toggleTheme(){
|
|
const html=document.documentElement;
|
|
const current=html.getAttribute("data-theme")||"dark";
|
|
const next=current==="dark"?"light":"dark";
|
|
html.setAttribute("data-theme",next);
|
|
localStorage.setItem("theme",next)
|
|
}
|
|
(function(){
|
|
const saved=localStorage.getItem("theme")||"dark";
|
|
document.documentElement.setAttribute("data-theme",saved)
|
|
})();
|
|
</script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const toc = document.getElementById("TOC");
|
|
if (!toc) return;
|
|
|
|
// Add toc-title with toggle button
|
|
const titleEl = document.createElement("div");
|
|
titleEl.id = "toc-title";
|
|
titleEl.innerHTML = '<span>Contents</span><span id="toc-toggle-icon">◀</span>';
|
|
toc.insertBefore(titleEl, toc.firstChild);
|
|
|
|
// Wrap TOC + the rest of the content in .page-wrapper
|
|
const body = document.body;
|
|
const wrapper = document.createElement("div");
|
|
wrapper.className = "page-wrapper";
|
|
|
|
// Find all elements after <nav> (main nav menu)
|
|
const topNav = document.querySelector("body > nav");
|
|
const siblings = [];
|
|
let el = topNav ? topNav.nextElementSibling : body.firstElementChild;
|
|
while (el) {
|
|
siblings.push(el);
|
|
el = el.nextElementSibling;
|
|
}
|
|
|
|
siblings.forEach((s) => wrapper.appendChild(s));
|
|
body.appendChild(wrapper);
|
|
|
|
// Wrap main content (everything except TOC) in .main-content
|
|
const mainContent = document.createElement("div");
|
|
mainContent.className = "main-content";
|
|
Array.from(wrapper.children).forEach((child) => {
|
|
if (child.id !== "TOC") mainContent.appendChild(child);
|
|
});
|
|
wrapper.appendChild(mainContent);
|
|
|
|
// Collapsible toggle
|
|
const icon = document.getElementById("toc-toggle-icon");
|
|
const saved = localStorage.getItem("toc-collapsed");
|
|
if (saved === "true") {
|
|
toc.classList.add("collapsed");
|
|
icon.textContent = "▶";
|
|
}
|
|
|
|
titleEl.addEventListener("click", function () {
|
|
toc.classList.toggle("collapsed");
|
|
const isCollapsed = toc.classList.contains("collapsed");
|
|
icon.textContent = isCollapsed ? "▶" : "◀";
|
|
localStorage.setItem("toc-collapsed", isCollapsed);
|
|
});
|
|
});
|
|
</script>
|
|
<nav><ul>
|
|
<li><a href="https://osowoso.org">oSoWoSo</a></li>
|
|
<li>⏮️</li>
|
|
<li><a href="index.html">Home</a></li>
|
|
<li><a href="https://github.com/oSoWoSo/DistroHopper/releases/latest">⏬ release</a></li>
|
|
<li><a href="https://github.com/oSoWoSo/DistroHopper/archive/refs/heads/main.zip">📦repo zip</a></li>
|
|
<li><a href="https://github.com/oSoWoSo/DistroHopper">🔗git</a></li>
|
|
<li>⏭️</li>
|
|
<li><a href="README-web.html">README-web</a></li>
|
|
<li><a href="stars.html" class="active">stars</a></li>
|
|
</ul></nav>
|
|
<header id="title-block-header">
|
|
<h1 class="title">stars</h1>
|
|
</header>
|
|
<p>We got a <span class="emoji" data-emoji="star">⭐</span> from <a
|
|
href="https://github.com/tomesparon">@tomesparon</a></p>
|
|
<p>We got a <span class="emoji" data-emoji="star">⭐</span> from <a
|
|
href="https://github.com/AOTREVAI">@AOTREVAI</a></p>
|
|
<p>We got a <span class="emoji" data-emoji="star">⭐</span> from <a
|
|
href="https://github.com/Garry04">@Garry04</a></p>
|
|
<p>We got a <span class="emoji" data-emoji="star">⭐</span> from <a
|
|
href="https://github.com/ephmo">@ephmo</a></p>
|
|
<p>We got a <span class="emoji" data-emoji="star">⭐</span> from <a
|
|
href="https://github.com/dverbeeck">@dverbeeck</a></p>
|
|
<script>
|
|
(function () {
|
|
function hexToRgb(hex) {
|
|
hex = hex.trim().replace(/^#/, '');
|
|
if (hex.length === 3) hex = hex.split('').map(c => c + c).join('');
|
|
const n = parseInt(hex, 16);
|
|
return [n >> 16 & 255, n >> 8 & 255, n & 255];
|
|
}
|
|
|
|
function clamp(v, min, max) {
|
|
return Math.min(Math.max(v, min), max);
|
|
}
|
|
|
|
function Color(r, g, b) {
|
|
this.r = r / 255;
|
|
this.g = g / 255;
|
|
this.b = b / 255;
|
|
}
|
|
|
|
Color.prototype.applyFilter = function (funcs) {
|
|
let [r, g, b] = [this.r * 255, this.g * 255, this.b * 255];
|
|
|
|
function multiply(matrix) {
|
|
const nr = clamp(r * matrix[0] + g * matrix[1] + b * matrix[2], 0, 255);
|
|
const ng = clamp(r * matrix[3] + g * matrix[4] + b * matrix[5], 0, 255);
|
|
const nb = clamp(r * matrix[6] + g * matrix[7] + b * matrix[8], 0, 255);
|
|
r = nr; g = ng; b = nb;
|
|
}
|
|
|
|
function hueRotate(angle) {
|
|
const a = angle / 180 * Math.PI;
|
|
const sin = Math.sin(a), cos = Math.cos(a);
|
|
multiply([
|
|
0.213 + cos*0.787 - sin*0.213, 0.715 - cos*0.715 - sin*0.715, 0.072 - cos*0.072 + sin*0.928,
|
|
0.213 - cos*0.213 + sin*0.143, 0.715 + cos*0.285 + sin*0.140, 0.072 - cos*0.072 - sin*0.283,
|
|
0.213 - cos*0.213 - sin*0.787, 0.715 - cos*0.715 + sin*0.715, 0.072 + cos*0.928 + sin*0.072,
|
|
]);
|
|
}
|
|
|
|
function sepia(v) {
|
|
multiply([
|
|
0.393 + 0.607*(1-v), 0.769 - 0.769*(1-v), 0.189 - 0.189*(1-v),
|
|
0.349 - 0.349*(1-v), 0.686 + 0.314*(1-v), 0.168 - 0.168*(1-v),
|
|
0.272 - 0.272*(1-v), 0.534 - 0.534*(1-v), 0.131 + 0.869*(1-v),
|
|
]);
|
|
}
|
|
|
|
function saturate(v) {
|
|
multiply([
|
|
0.213 + 0.787*v, 0.715 - 0.715*v, 0.072 - 0.072*v,
|
|
0.213 - 0.213*v, 0.715 + 0.285*v, 0.072 - 0.072*v,
|
|
0.213 - 0.213*v, 0.715 - 0.715*v, 0.072 + 0.928*v,
|
|
]);
|
|
}
|
|
|
|
for (const [fn, val] of funcs) {
|
|
if (fn === 'invert') { r = clamp((1-r/255)*255*val + r/255*255*(1-val),0,255); g = clamp((1-g/255)*255*val + g/255*255*(1-val),0,255); b = clamp((1-b/255)*255*val + b/255*255*(1-val),0,255); }
|
|
if (fn === 'sepia') sepia(val);
|
|
if (fn === 'saturate') saturate(val);
|
|
if (fn === 'hueRotate') hueRotate(val);
|
|
if (fn === 'brightness'){ r = clamp(r*val,0,255); g = clamp(g*val,0,255); b = clamp(b*val,0,255); }
|
|
}
|
|
|
|
return new Color(r, g, b);
|
|
};
|
|
|
|
function loss(result, target) {
|
|
return (
|
|
Math.pow(result.r*255 - target.r*255, 2) +
|
|
Math.pow(result.g*255 - target.g*255, 2) +
|
|
Math.pow(result.b*255 - target.b*255, 2)
|
|
);
|
|
}
|
|
|
|
function solve(target) {
|
|
function css(v) {
|
|
return [
|
|
['invert', clamp(v[0], 0, 1)],
|
|
['sepia', clamp(v[1], 0, 1)],
|
|
['saturate', clamp(v[2], 0, 20)],
|
|
['hueRotate', clamp(v[3], 0, 360)],
|
|
['brightness',clamp(v[4], 0, 10)],
|
|
['brightness',clamp(v[5], 0, 10)],
|
|
];
|
|
}
|
|
|
|
function score(v) {
|
|
return loss(new Color(0,0,0).applyFilter(css(v)), target);
|
|
}
|
|
|
|
let best = null, bestScore = Infinity;
|
|
for (let i = 0; i < 30; i++) {
|
|
let v = [Math.random(), Math.random(), Math.random()*10, Math.random()*360, Math.random()*2, Math.random()*2];
|
|
for (let step = 1; step > 0.0001; step *= 0.9) {
|
|
for (let j = 0; j < v.length; j++) {
|
|
const orig = v[j];
|
|
v[j] += step * (Math.random() > 0.5 ? 1 : -1);
|
|
const s = score(v);
|
|
if (s < bestScore) { bestScore = s; best = [...v]; }
|
|
else v[j] = orig;
|
|
}
|
|
}
|
|
}
|
|
|
|
const f = css(best);
|
|
return [
|
|
`invert(${(clamp(f[0][1],0,1)*100).toFixed(0)}%)`,
|
|
`sepia(${(clamp(f[1][1],0,1)*100).toFixed(0)}%)`,
|
|
`saturate(${(clamp(f[2][1],0,20)*100).toFixed(0)}%)`,
|
|
`hue-rotate(${clamp(f[3][1],0,360).toFixed(0)}deg)`,
|
|
`brightness(${(clamp(f[4][1],0,10)*100).toFixed(0)}%)`,
|
|
`brightness(${(clamp(f[5][1],0,10)*100).toFixed(0)}%)`,
|
|
].join(' ');
|
|
}
|
|
|
|
// Cache solved filters per color so theme switching is instant
|
|
const cache = {};
|
|
|
|
function applyIconColor() {
|
|
const raw = getComputedStyle(document.documentElement)
|
|
.getPropertyValue('--color-icon').trim();
|
|
if (!raw) return false;
|
|
|
|
let rgb;
|
|
if (raw.startsWith('#')) {
|
|
rgb = hexToRgb(raw);
|
|
} else if (raw.startsWith('rgb')) {
|
|
rgb = raw.match(/\d+/g).map(Number).slice(0, 3);
|
|
} else {
|
|
return false;
|
|
}
|
|
|
|
const key = rgb.join(',');
|
|
if (!cache[key]) {
|
|
cache[key] = solve(new Color(...rgb));
|
|
}
|
|
|
|
document.documentElement.style.setProperty('--filter-icon', cache[key]);
|
|
return true;
|
|
}
|
|
|
|
function init() {
|
|
if (!applyIconColor()) return;
|
|
|
|
// Watch for data-theme attribute changes on <html> — re-apply immediately
|
|
new MutationObserver(function(mutations) {
|
|
for (const m of mutations) {
|
|
if (m.attributeName === 'data-theme') {
|
|
applyIconColor();
|
|
break;
|
|
}
|
|
}
|
|
}).observe(document.documentElement, { attributes: true });
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
} else {
|
|
init();
|
|
}
|
|
})();
|
|
</script>
|
|
<script data-goatcounter="https://distrohopper.gocounter.com/count"
|
|
async src="//gc.zgo.at/count.js"></script>
|
|
<script src="https://giscus.app/client.js"
|
|
data-repo="osowoso/Distrohopper"
|
|
data-repo-id="R_kgDOJHu9MQ"
|
|
data-category="General"
|
|
data-category-id="DIC_kwDOJHu9Mc4CVBGm"
|
|
data-mapping="pathname"
|
|
data-strict="0"
|
|
data-reactions-enabled="1"
|
|
data-emit-metadata="0"
|
|
data-input-position="bottom"
|
|
data-theme="preferred_color_scheme"
|
|
data-lang="cs"
|
|
crossorigin="anonymous"
|
|
async></script>
|
|
</body>
|
|
</html>
|