AtaraxiaDev/Bento
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

✨ Replace feather icons for lucide

Browse Source
This commit is contained in:
Miguel Avila 2021-11-24 07:21:18 -06:00
parent f1d204f8b5
commit bd97a8a137
5 changed files with 13 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app.css
View File

@ -26,12 +26,6 @@
--sfg: #3a3a3a; /* Sceondary Foreground color */ --sfg: #3a3a3a; /* Sceondary Foreground color */
/* Image background */ /* Image background */
/* Uncoment this section to get the
image wallpaper. You can also
change the --imgcol value
to make the filter to your own */
--imgbg: url(assets/background.jpg); --imgbg: url(assets/background.jpg);
--imgcol: linear-gradient( --imgcol: linear-gradient(
rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7),
@ -315,8 +309,11 @@ body {
display: none; display: none;
} }
.buttonLink { .buttons {
grid-column: 1 / span 4; grid-column: 1 / span 4;
}
.buttonLink {
grid-gap: 3vw; grid-gap: 3vw;
padding-left: 100px; padding-left: 100px;
padding-right: 100px; padding-right: 100px;

4
assets/js/cards.js
View File

@ -11,9 +11,9 @@ const printCards = () => {
<a <a
href="${card.link}" href="${card.link}"
target="${CONFIG.openInNewTab ? '_blank' : ''}" target="${CONFIG.openInNewTab ? '_blank' : ''}"
class="buttonLink__link card buttonLink__link-${card.id}" class="buttons__link card buttonLink__link-${card.id}"
> >
<i class="buttonLink__icon" data-feather="${card.icon}"></i> <i class="buttonLink__icon" icon-name="${card.icon}"></i>
</a> </a>
`; `;

4
assets/js/lists.js
View File

@ -4,7 +4,7 @@
// Print the first List // Print the first List
const printFirstList = () => { const printFirstList = () => {
let icon = `<i class="list__head" data-feather="${CONFIG.firstListIcon}"></i>`; let icon = `<i class="list__head" icon-name="${CONFIG.firstListIcon}"></i>`;
const position = 'beforeend'; const position = 'beforeend';
list_1.insertAdjacentHTML(position, icon); list_1.insertAdjacentHTML(position, icon);
for (const link of CONFIG.lists.firstList) { for (const link of CONFIG.lists.firstList) {
@ -24,7 +24,7 @@ const printFirstList = () => {
// Print the second List // Print the second List
const printSecondList = () => { const printSecondList = () => {
let icon = `<i class="list__head" data-feather="${CONFIG.secondListIcon}"></i>`; let icon = `<i class="list__head" icon-name="${CONFIG.secondListIcon}"></i>`;
const position = 'beforeend'; const position = 'beforeend';
list_2.insertAdjacentHTML(position, icon); list_2.insertAdjacentHTML(position, icon);
for (const link of CONFIG.lists.secondList) { for (const link of CONFIG.lists.secondList) {

8
assets/js/theme.js
View File

@ -11,16 +11,16 @@ const bodyBackground = document.getElementById('#body');
const enableDark = () => { const enableDark = () => {
document.body.classList.add('darktheme'); document.body.classList.add('darktheme');
localStorage.setItem('darkTheme', 'enabled'); localStorage.setItem('darkTheme', 'enabled');
themeToggle.innerHTML = `<i id="themeButton__icon" data-feather="sun"></i>`; themeToggle.innerHTML = `<i id="themeButton__icon" icon-name="sun"></i>`;
feather.replace(); lucide.createIcons();
}; };
// Remove Dark theme // Remove Dark theme
const disableDark = () => { const disableDark = () => {
document.body.classList.remove('darktheme'); document.body.classList.remove('darktheme');
localStorage.setItem('darkTheme', null); localStorage.setItem('darkTheme', null);
themeToggle.innerHTML = `<i id="themeButton__icon" data-feather="moon"></i>`; themeToggle.innerHTML = `<i id="themeButton__icon" icon-name="moon"></i>`;
feather.replace(); lucide.createIcons();
}; };
//Toggle theme //Toggle theme

2
index.html
View File

@ -20,7 +20,7 @@
<body class=""> <body class="">
<button id="themeButton"> <button id="themeButton">
<i id="themeIcon" data-feather="moon"></i> <i id="themeIcon" icon-name="moon"></i>
</button> </button>
<div class="container"> <div class="container">
<!-- Clock and Greetings --> <!-- Clock and Greetings -->