FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update button style + add feedback on click

Browse source 
Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
hossainemruz 2024-09-07 03:02:49 +06:00
parent a024839adf
commit 562c783a27
4 changed files with 52 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

4
assets/scripts/features/copyCode/copyCode.js
View file

@ -2,9 +2,9 @@ addCopyButtons(navigator.clipboard)
function addCopyButtons(clipboard) {
document.querySelectorAll('pre > code').forEach(function (codeBlock) {
const button = document.createElement('a')
const button = document.createElement('button')
button.title = "Copy"
button.className = 'copy-code-button'
button.className = 'copy-code-button btn btn-sm'
button.innerHTML = "<i class='fa-regular fa-copy'></i>"
button.addEventListener('click', function () {

45
assets/styles/components/buttons.scss
View file

@ -102,6 +102,40 @@
}
}
.copy-code-button {
float: right;
margin-top: 0.5em;
margin-left: -2.6em;
margin-right: 3em;
background-color: get-light-color('text-color') !important;
color: get-light-color('inverse-text-color') !important;
padding: 0.25rem 0.5rem;
line-height: 1.5;
border-radius: 0.2rem;
border: none;
&:hover,
&:focus {
background-color: get-light-color('accent-color') !important;
color: get-light-color('text-over-accent-color') !important;
@include transition();
}
&:focus {
&::before {
content: 'Copied!';
position: absolute;
padding: 0.3em;
border-radius: 0.2em;
margin-left: -5em;
margin-top: -0.2em;
background-color: get-light-color('accent-color') !important;
color: get-light-color('text-over-accent-color') !important;
@include transition();
}
}
}
html[data-theme='dark'] {
.btn-dark {
background-color: get-dark-color('accent-color') !important;
@ -169,4 +203,15 @@ html[data-theme='dark'] {
background-color: get-dark-color('hover-over-accent-color') !important;
}
}
.copy-code-button {
background-color: get-dark-color('bg-primary') !important;
color: get-dark-color('muted-text-color') !important;
&:hover,
&:focus,
&::before {
background-color: get-dark-color('accent-color') !important;
color: get-dark-color('text-over-accent-color') !important;
}
}
}

8
assets/styles/components/misc.scss
View file

@ -50,14 +50,6 @@ pre {
}
}
.copy-code-button {
display: flex;
justify-content: right;
margin-right: 0.75em;
margin-bottom: -1.75em;
font-size: 1.25em;
}
html[data-theme='dark'] {
.paginator {
.page-item {

10
package.json
View file

@ -38,8 +38,8 @@
"description": "A [Hugo](https://gohugo.io/) theme for a personal portfolio with minimalist design and responsiveness.",
"devDependencies": {
"@fontsource/mulish": "4.5.13",
"@fortawesome/fontawesome-free": "^6.2.0",
"autoprefixer": "^10.4.13",
"@fortawesome/fontawesome-free": "^6.6.0",
"autoprefixer": "^10.4.20",
"bootstrap": "^5.3.3",
"eslint": "^8.31.0",
"eslint-config-prettier": "^8.6.0",
@ -56,13 +56,13 @@
"imagesloaded": "^5.0.0",
"include-media": "^1.4.10",
"ityped": "^1.0.3",
"katex": "^0.16.10",
"katex": "^0.16.11",
"mark.js": "^8.11.1",
"mermaid": "^9.2.1",
"plyr": "^3.7.2",
"popper.js": "^1.16.1",
"postcss": "^8.4.31",
"postcss-cli": "^8.3.1"
"postcss": "^8.4.41",
"postcss-cli": "^11.0.0"
},
"homepage": "https://github.com/hugo-toha/toha#readme",
"license": "MIT",