diff --git a/app.css b/app.css index 33c9409..64df2a6 100644 --- a/app.css +++ b/app.css @@ -1,4 +1,4 @@ -@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap'); /* V A R I A B L E S */ @@ -7,7 +7,7 @@ --fsg: 135px; /* Time and Greetings */ --fsm: 75px; /* Date */ --fss: 25px; /* Greetings and Weather widger */ - --fses: 16px; /* Links List */ + --fses: 2vh; /* Links List */ /* Light theme */ --accent: #4b8ec4; /* Hover color */ @@ -23,7 +23,7 @@ change the --imgcol value to make the filter to your own */ - /* --imgbg: url(/img/wal.jpg); */ + --imgbg: url(assets/background.png); --imgcol: linear-gradient( rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7) @@ -38,8 +38,8 @@ --fg: #d8dee9; /* Foreground color */ --sfg: #3a3a3a; /* Secondary Foreground color */ --imgcol: linear-gradient( - rgba(0, 0, 0, 0.7), - rgba(0, 0, 0, 0.7) + rgba(0, 0, 0, 0.85), + rgba(0, 0, 0, 0.85) ); /* Filter color */ } @@ -49,15 +49,19 @@ margin: 0; padding: 0; box-sizing: border-box; - font-family: "Open Sans", sans-serif; + font-family: 'Open Sans', sans-serif; transition: 0.2s ease-in-out; } +.withImageBackground { + background-image: var(--imgcol), var(--imgbg); + background-size: cover; +} + body { width: 100vw; height: 100vh; background-color: var(--bg); - background-image: var(--imgcol), var(--imgbg); display: flex; align-items: center; justify-content: center; @@ -197,8 +201,8 @@ body { } .buttonLink__icon { - width: 23px; - height: 23px; + width: 3vh; + height: 3vh; color: var(--fg); } @@ -236,6 +240,7 @@ body { .list { display: flex; align-items: center; + /* justify-content: space-evenly; */ flex-direction: column; } @@ -248,17 +253,17 @@ body { grid-row: 3 / span 2; } .list__head { - margin-top: 30px; - margin-bottom: 10px; - width: 30px; + margin-top: 3vh; + margin-bottom: 2vh; color: var(--fg); - height: 30px; + width: 3vh; + height: 3vh; } .list__link { text-decoration: none; font-size: var(--fses); color: var(--fg); - margin-top: 1px; + margin-top: 1vh; padding: 6px 12px; border-radius: 5px; font-weight: bold; @@ -301,7 +306,7 @@ body { .buttonLink { grid-column: 1 / span 4; - grid-gap: 20px; + grid-gap: 3vw; padding-left: 100px; padding-right: 100px; } diff --git a/assets/background.png b/assets/background.png new file mode 100644 index 0000000..ce0f388 Binary files /dev/null and b/assets/background.png differ diff --git a/assets/js/cards.js b/assets/js/cards.js index 2098ce6..863b224 100644 --- a/assets/js/cards.js +++ b/assets/js/cards.js @@ -7,10 +7,14 @@ const printCards = () => { let item = ` - + `; diff --git a/assets/js/lists.js b/assets/js/lists.js index 2f63748..4c99f58 100644 --- a/assets/js/lists.js +++ b/assets/js/lists.js @@ -7,7 +7,7 @@ const printFirstList = () => { for (const link of CONFIG.lists.firstList) { let item = ` ${link.name} { }; const printSecondList = () => { - let icon = ``; + let icon = ``; const position = "beforeend"; - list_2.insertAdjacentHTML(position, icon); + list_2.insertAdjacentHTML(position, icon); for (const link of CONFIG.lists.secondList) { let item = ` ${link.name} { - document.body.classList.add("darktheme"); - localStorage.setItem("darkTheme", "enabled"); + document.body.classList.add('darktheme'); + localStorage.setItem('darkTheme', 'enabled'); themeToggle.innerHTML = ``; feather.replace(); }; // Remove Dark theme const disableDark = () => { - document.body.classList.remove("darktheme"); - localStorage.setItem("darkTheme", null); + document.body.classList.remove('darktheme'); + localStorage.setItem('darkTheme', null); themeToggle.innerHTML = ``; feather.replace(); }; //Toggle theme -if (darkTheme === "enabled") { +if (darkTheme === 'enabled') { enableDark(); } else { disableDark(); } -themeToggle.addEventListener("click", () => { - darkTheme = localStorage.getItem("darkTheme"); - if (darkTheme !== "enabled") { +themeToggle.addEventListener('click', () => { + darkTheme = localStorage.getItem('darkTheme'); + if (darkTheme !== 'enabled') { enableDark(); } else { disableDark(); } }); -// Theme accordint the hour - -/* -const today = new Date(); - -if (hour >= 19 || hour < 5) { - enableDark(); -} else { - disableDark(); -} -*/ +if(CONFIG.imageBackground) { + document.body.classList.add('withImageBackground'); +} \ No newline at end of file diff --git a/config.js b/config.js index caba66f..cbf14f6 100644 --- a/config.js +++ b/config.js @@ -10,27 +10,27 @@ const CONFIG = { // ├┴┐├─┤└─┐││ └─┐ // └─┘┴ ┴└─┘┴└─┘└─┘ + // General name: 'John', - - layout: 'bento', imageBackground: false, - openInNewTab: true, - weatherKey: '12345678910111213141516', + // Weather + weatherKey: '15fe26a8e22e4783054e3273824c5e7b', weatherIcons: 'OneDark', weatherUnit: 'C', + // Greetings greetingMorning: 'Good morning!', greetingAfternoon: 'Good afternoon,', greetingEvening: 'Good evening,', greetingNight: 'Go to Sleep!', - // ┌─┐┌─┐┬─┐┌┬┐┌─┐ // │ ├─┤├┬┘ ││└─┐ // └─┘┴ ┴┴└──┴┘└─┘ + // Links cards: [ { id: '1', @@ -74,9 +74,11 @@ const CONFIG = { // │ │└─┐ │ └─┐ // ┴─┘┴└─┘ ┴ └─┘ + //Icons firstListIcon: 'music', secondListIcon: 'coffee', + // Links lists: { firstList: [ {