fenpaws/homepage-build
1
0
Fork 0
Code Actions

Deploy Hugo build

Browse Source
This commit is contained in:
SoXX 2024-08-17 21:54:34 +00:00
parent c73cdfb6d8
commit d49c4be19d
2 changed files with 40 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
chars/soxx/index.html
View File

@ -100,35 +100,59 @@
<div class="w-full flex max-w-7xl mx-auto rouned mb-4">
<div class="flex-1 p-2 flex items-center justify-center"
<div class="flex-1 p-2 flex items-center justify-center cursor-pointer onhovercopy" data-clipboard="#f39a32"
style="background:#f39a32">
<b class="filter saturate-0 contrast-[9999999%] invert pointer-events-none hidden md:block p-2"
<b class="filter saturate-0 contrast-[9999999%] invert pointer-events-none hidden md:flex p-2 items-center gap-4 flex-wrap"
style="color:#f39a32">main: #f39a32</b>
</div>
<style>
.onhovercopy:hover b::after{
content: ' [click to copy]';
font-size: small;
}
</style>
<div class="flex-1 p-2 flex items-center justify-center"
<div class="flex-1 p-2 flex items-center justify-center cursor-pointer onhovercopy" data-clipboard="#ad5000"
style="background:#ad5000">
<b class="filter saturate-0 contrast-[9999999%] invert pointer-events-none hidden md:block p-2"
<b class="filter saturate-0 contrast-[9999999%] invert pointer-events-none hidden md:flex p-2 items-center gap-4 flex-wrap"
style="color:#ad5000">secondary: #ad5000</b>
</div>
<style>
.onhovercopy:hover b::after{
content: ' [click to copy]';
font-size: small;
}
</style>
<div class="flex-1 p-2 flex items-center justify-center"
<div class="flex-1 p-2 flex items-center justify-center cursor-pointer onhovercopy" data-clipboard="#2D161C"
style="background:#2D161C">
<b class="filter saturate-0 contrast-[9999999%] invert pointer-events-none hidden md:block p-2"
<b class="filter saturate-0 contrast-[9999999%] invert pointer-events-none hidden md:flex p-2 items-center gap-4 flex-wrap"
style="color:#2D161C">third: #2D161C</b>
</div>
<style>
.onhovercopy:hover b::after{
content: ' [click to copy]';
font-size: small;
}
</style>
<div class="flex-1 p-2 flex items-center justify-center"
<div class="flex-1 p-2 flex items-center justify-center cursor-pointer onhovercopy" data-clipboard="#54a6b1"
style="background:#54a6b1">
<b class="filter saturate-0 contrast-[9999999%] invert pointer-events-none hidden md:block p-2"
<b class="filter saturate-0 contrast-[9999999%] invert pointer-events-none hidden md:flex p-2 items-center gap-4 flex-wrap"
style="color:#54a6b1">eyes: #54a6b1</b>
</div>
<style>
.onhovercopy:hover b::after{
content: ' [click to copy]';
font-size: small;
}
</style>
</div>
@ -1220,6 +1244,13 @@
document.querySelectorAll('[data-galery-block]')
.forEach(e => e.removeAttribute('open'))
})
document.querySelectorAll('[data-clipboard]').forEach(el=>{
const colorValue = el.getAttribute('data-clipboard')
el.addEventListener('click',()=>{
navigator.clipboard.writeText(colorValue);
})
})
</script>
</div>
</div>

2
css/tailwind.css
View File

File diff suppressed because one or more lines are too long