admin/site-portfolio
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mp-card): color portfolio card tags with deterministic pastel palette (constant per content)

Browse Source
This commit is contained in:
root committed 2026-09-17 22:37:22 +02:00
1 parent 5f07f925f2
commit 6d66e4cf12
10 files changed
+235 -3
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/cases/design-system/index.html
+22
View File
@@ -937,6 +937,28 @@
</a>
</div>
<p class="sg-label">.mp-card .mp-card--stack-bottom — текст сверху, обложка снизу</p>
<script>
(function () {
var PALETTE = [
'#F3D9D9', '#E5EAD9', '#DCE7F0', '#E9E1EE',
'#F1E7D7', '#DCEFE8', '#F4DFE1', '#E3E5F0'
];
function hashStr(s) {
var h = 0;
for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
return h;
}
function colorTags(root) {
var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
for (var i = 0; i < tags.length; i++) {
var t = tags[i];
var key = (t.textContent || '').trim().toLowerCase();
t.style.backgroundColor = PALETTE[hashStr(key) % PALETTE.length];
}
}
colorTags(document);
})();
</script>
<h3>Заглушка при загрузке изображений</h3>
<p class="section__prose">
public/cases/template-elements-demo/index.html
+25 -1
View File
@@ -853,7 +853,31 @@
</li>
</ol>
</div>
</section><section hidden class="section section--surface" aria-hidden="true">
</section>
<script>
(function () {
// Пастельная («постельная») палитра тегов портфолио.
// Цвет детерминирован по тексту тега — один и тот же текст всегда один цвет.
var PALETTE = [
'#F3D9D9', '#E5EAD9', '#DCE7F0', '#E9E1EE',
'#F1E7D7', '#DCEFE8', '#F4DFE1', '#E3E5F0'
];
function hashStr(s) {
var h = 0;
for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
return h;
}
function colorTags(root) {
var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
for (var i = 0; i < tags.length; i++) {
var t = tags[i];
var key = (t.textContent || '').trim().toLowerCase();
t.style.backgroundColor = PALETTE[hashStr(key) % PALETTE.length];
}
}
colorTags(document);
})();
</script><section hidden class="section section--surface" aria-hidden="true">
<div class="section__inner">
<div class="projects__heading">
<h2 class="section__title projects__title">Портфолио</h2>
public/en/cases/design-system/index.html
+22
View File
@@ -936,6 +936,28 @@
</a>
</div>
<p class="sg-label">.mp-card .mp-card--stack-bottom — text on top, cover at the bottom</p>
<script>
(function () {
var PALETTE = [
'#F3D9D9', '#E5EAD9', '#DCE7F0', '#E9E1EE',
'#F1E7D7', '#DCEFE8', '#F4DFE1', '#E3E5F0'
];
function hashStr(s) {
var h = 0;
for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
return h;
}
function colorTags(root) {
var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
for (var i = 0; i < tags.length; i++) {
var t = tags[i];
var key = (t.textContent || '').trim().toLowerCase();
t.style.backgroundColor = PALETTE[hashStr(key) % PALETTE.length];
}
}
colorTags(document);
})();
</script>
<h3>Placeholder while images are loading</h3>
<p class="section__prose">
public/en/cases/template-elements-demo/index.html
+24
View File
@@ -854,6 +854,30 @@
</ol>
</div>
</section>
<script>
(function () {
// Пастельная («постельная») палитра тегов портфолио.
// Цвет детерминирован по тексту тега — один и тот же текст всегда один цвет.
var PALETTE = [
'#F3D9D9', '#E5EAD9', '#DCE7F0', '#E9E1EE',
'#F1E7D7', '#DCEFE8', '#F4DFE1', '#E3E5F0'
];
function hashStr(s) {
var h = 0;
for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
return h;
}
function colorTags(root) {
var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
for (var i = 0; i < tags.length; i++) {
var t = tags[i];
var key = (t.textContent || '').trim().toLowerCase();
t.style.backgroundColor = PALETTE[hashStr(key) % PALETTE.length];
}
}
colorTags(document);
})();
</script>
<section hidden class="section section--surface" aria-hidden="true">
<div class="section__inner">
<div class="projects__heading">
public/en/index.html
+24
View File
@@ -465,6 +465,30 @@
</ol>
</div>
</section>
<script>
(function () {
// Пастельная («постельная») палитра тегов портфолио.
// Цвет детерминирован по тексту тега — один и тот же текст всегда один цвет.
var PALETTE = [
'#F3D9D9', '#E5EAD9', '#DCE7F0', '#E9E1EE',
'#F1E7D7', '#DCEFE8', '#F4DFE1', '#E3E5F0'
];
function hashStr(s) {
var h = 0;
for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
return h;
}
function colorTags(root) {
var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
for (var i = 0; i < tags.length; i++) {
var t = tags[i];
var key = (t.textContent || '').trim().toLowerCase();
t.style.backgroundColor = PALETTE[hashStr(key) % PALETTE.length];
}
}
colorTags(document);
})();
</script>
<section hidden class="section section--surface" aria-hidden="true">
<div class="section__inner">
<div class="projects__heading">
public/index.html
+25 -1
View File
@@ -464,7 +464,31 @@
</li>
</ol>
</div>
</section><section hidden class="section section--surface" aria-hidden="true">
</section>
<script>
(function () {
// Пастельная («постельная») палитра тегов портфолио.
// Цвет детерминирован по тексту тега — один и тот же текст всегда один цвет.
var PALETTE = [
'#F3D9D9', '#E5EAD9', '#DCE7F0', '#E9E1EE',
'#F1E7D7', '#DCEFE8', '#F4DFE1', '#E3E5F0'
];
function hashStr(s) {
var h = 0;
for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
return h;
}
function colorTags(root) {
var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
for (var i = 0; i < tags.length; i++) {
var t = tags[i];
var key = (t.textContent || '').trim().toLowerCase();
t.style.backgroundColor = PALETTE[hashStr(key) % PALETTE.length];
}
}
colorTags(document);
})();
</script><section hidden class="section section--surface" aria-hidden="true">
<div class="section__inner">
<div class="projects__heading">
<h2 class="section__title projects__title">Портфолио</h2>
src/pages/cases/design-system.en.html
+22
View File
@@ -748,6 +748,28 @@
</a>
</div>
<p class="sg-label">.mp-card .mp-card--stack-bottom — text on top, cover at the bottom</p>
<script>
(function () {
var PALETTE = [
'#F3D9D9', '#E5EAD9', '#DCE7F0', '#E9E1EE',
'#F1E7D7', '#DCEFE8', '#F4DFE1', '#E3E5F0'
];
function hashStr(s) {
var h = 0;
for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
return h;
}
function colorTags(root) {
var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
for (var i = 0; i < tags.length; i++) {
var t = tags[i];
var key = (t.textContent || '').trim().toLowerCase();
t.style.backgroundColor = PALETTE[hashStr(key) % PALETTE.length];
}
}
colorTags(document);
})();
</script>
<h3>Placeholder while images are loading</h3>
<p class="section__prose">
src/pages/cases/design-system.html
+22
View File
@@ -749,6 +749,28 @@
</a>
</div>
<p class="sg-label">.mp-card .mp-card--stack-bottom — текст сверху, обложка снизу</p>
<script>
(function () {
var PALETTE = [
'#F3D9D9', '#E5EAD9', '#DCE7F0', '#E9E1EE',
'#F1E7D7', '#DCEFE8', '#F4DFE1', '#E3E5F0'
];
function hashStr(s) {
var h = 0;
for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
return h;
}
function colorTags(root) {
var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
for (var i = 0; i < tags.length; i++) {
var t = tags[i];
var key = (t.textContent || '').trim().toLowerCase();
t.style.backgroundColor = PALETTE[hashStr(key) % PALETTE.length];
}
}
colorTags(document);
})();
</script>
<h3>Заглушка при загрузке изображений</h3>
<p class="section__prose">
src/partials/projects-section-mp.en.html
+24
View File
@@ -165,3 +165,27 @@
</ol>
</div>
</section>
<script>
(function () {
// Пастельная («постельная») палитра тегов портфолио.
// Цвет детерминирован по тексту тега — один и тот же текст всегда один цвет.
var PALETTE = [
'#F3D9D9', '#E5EAD9', '#DCE7F0', '#E9E1EE',
'#F1E7D7', '#DCEFE8', '#F4DFE1', '#E3E5F0'
];
function hashStr(s) {
var h = 0;
for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
return h;
}
function colorTags(root) {
var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
for (var i = 0; i < tags.length; i++) {
var t = tags[i];
var key = (t.textContent || '').trim().toLowerCase();
t.style.backgroundColor = PALETTE[hashStr(key) % PALETTE.length];
}
}
colorTags(document);
})();
</script>
src/partials/projects-section-mp.html
+25 -1
View File
@@ -164,4 +164,28 @@
</li>
</ol>
</div>
</section>
</section>
<script>
(function () {
// Пастельная («постельная») палитра тегов портфолио.
// Цвет детерминирован по тексту тега — один и тот же текст всегда один цвет.
var PALETTE = [
'#F3D9D9', '#E5EAD9', '#DCE7F0', '#E9E1EE',
'#F1E7D7', '#DCEFE8', '#F4DFE1', '#E3E5F0'
];
function hashStr(s) {
var h = 0;
for (var i = 0; i < s.length; i++) { h = (h * 31 + s.charCodeAt(i)) >>> 0; }
return h;
}
function colorTags(root) {
var tags = root.querySelectorAll('.mp-card--stack-bottom .mp-card__tag');
for (var i = 0; i < tags.length; i++) {
var t = tags[i];
var key = (t.textContent || '').trim().toLowerCase();
t.style.backgroundColor = PALETTE[hashStr(key) % PALETTE.length];
}
}
colorTags(document);
})();
</script>