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: [
{