wip

.gitignore

@@ -0,0 +1,3 @@
+assets/icons/arcticons/black
+assets/icons/arcticons/white
+assets/icons/arcticons/png/*.svg

app.css

@@ -1,13 +1,13 @@
-/* 
+/*
 // ╔╗ ╔═╗╔╗╔╔╦╗╔═╗
 // ╠╩╗║╣ ║║║ ║ ║ ║
-// ╚═╝╚═╝╝╚╝ ╩ ╚═╝ 
+// ╚═╝╚═╝╝╚╝ ╩ ╚═╝
 */
 
-/* 
+/*
 //  ┬  ┬┌─┐┬─┐┬┌─┐┌┐ ┬  ┌─┐┌─┐
 //  ┐┌┘├─┤├┬┘│├─┤├┴┐│  ├┤ └─┐
-//  ┘ ┴ ┴┴└─┴┴ ┴└─┘┴─┘└─┘└─┘ 
+//  ┘ ┴ ┴┴└─┴┴ ┴└─┘┴─┘└─┘└─┘
  */
 
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap'); /* Font Import */
@@ -18,7 +18,7 @@
   --fg-secondary: 3vh; /* Greetings and Weather widger */
   --fg-date: 8vh; /* Date */
   --fg-list: 2vh; /* Links List */
-  --icon: 3vh; /* Icon Size */
+  --icon: 6vh; /* Icon Size */
 
   /* Fonts Color */
   --fg: #3a3a3a; /* Foreground color */
@@ -54,10 +54,10 @@
   ); /* Filter color */
 }
 
-/* 
+/*
 //  ┌─┐┌┬┐┬ ┬┬  ┌─┐┌─┐
 //  └─┐ │ └┬┘│  ├┤ └─┐
-//  └─┘ ┴  ┴ ┴─┘└─┘└─┘ 
+//  └─┘ ┴  ┴ ┴─┘└─┘└─┘
 */
 
 * {
@@ -89,6 +89,10 @@ body {
   background-size: cover;
 }
 
+svg {
+  shape-rendering: geometricPrecision;
+}
+
 #themeButton {
   position: absolute;
   margin: 2em 2em 0 0;

assets/js/buttons.js

@@ -11,7 +11,7 @@ const generateFirstButtonsContainer = () => {
           target="${CONFIG.openInNewTab ? '_blank' : ''}"
           class="card button button__${button.id}"
         >
-          <i class="buttonIcon" icon-name="${button.icon}"></i>
+          <img class="buttonIcon" src="assets/icons/arcticons/png/${button.icon}.png" />
         </a>
     `;
 
@@ -29,7 +29,7 @@ const generateSecondButtonsContainer = () => {
           target="${CONFIG.openInNewTab ? '_blank' : ''}"
           class="card button button__${button.id}"
         >
-          <i class="buttonIcon" icon-name="${button.icon}"></i>
+          <img class="buttonIcon" src="assets/icons/arcticons/png/${button.icon}.png" />
         </a>
     `;
 

assets/js/lists.js

@@ -7,7 +7,7 @@ const generateFirstListsContainer = () => {
   for (const list of CONFIG.firstlistsContainer) {
     let item = `
         <div class="card list list__${list.id}" id="list_${list.id}">
-          <i class="listIcon" icon-name="${list.icon}"></i>
+          <img class="listIcon" src="assets/icons/arcticons/png/${list.icon}.png" />
           <a
           target="${CONFIG.openInNewTab ? '_blank' : ''}"
           href="${list.links[0].link}"
@@ -39,7 +39,7 @@ const generateSecondListsContainer = () => {
   for (const list of CONFIG.secondListsContainer) {
     let item = `
         <div class="card list list__${list.id}" id="list_${list.id}">
-        <i class="listIcon" icon-name="${list.icon}"></i>
+        <img class="listIcon" src="assets/icons/arcticons/png/${list.icon}.png" />
         <a
         target="${CONFIG.openInNewTab ? '_blank' : ''}"
         href="${list.links[0].link}"

assets/js/theme.js

@@ -10,15 +10,13 @@ const bodyBackground = document.getElementById('#body');
 const enableDark = () => {
   document.body.classList.add('darktheme');
   localStorage.setItem('darkTheme', 'enabled');
-  themeToggle.innerHTML = `<i id="themeButton__icon" icon-name="sun"></i>`;
-  lucide.createIcons();
+  themeToggle.innerHTML = `<img class="buttonIcon" id="themeButton__icon" src="assets/icons/arcticons/png/arcticonslight.png" />`;
 };
 
 const disableDark = () => {
   document.body.classList.remove('darktheme');
   localStorage.setItem('darkTheme', null);
-  themeToggle.innerHTML = `<i id="themeButton__icon" icon-name="moon"></i>`;
-  lucide.createIcons();
+  themeToggle.innerHTML = `<img class="buttonIcon" id="themeButton__icon" src="assets/icons/arcticons/png/arcticonsdark.png" />`;
 };
 
 if (darkTheme === 'enabled') {

config.js

@@ -60,31 +60,31 @@ const CONFIG = {
     {
       id: '2',
       name: 'Mail',
-      icon: 'mail',
+      icon: 'googlemail',
       link: 'https://mail.google.com/',
     },
     {
       id: '3',
       name: 'Weather',
-      icon: 'thermometer',
+      icon: 'yaweather',
       link: 'https://www.gismeteo.ru/weather-volzhsky-11934/2-weeks/',
     },
     {
       id: '4',
       name: 'Proxmox',
-      icon: 'server',
+      icon: 'serveit',
       link: 'https://192.168.0.10:8006',
     },
     {
       id: '5',
       name: 'Ctemplar',
-      icon: 'mail',
+      icon: 'ctemplar',
       link: 'https://ctemplar.com',
     },
     {
       id: '6',
       name: 'Sbermarket',
-      icon: 'shop',
+      icon: 'shoppinglist',
       link: 'https://sbermarket.ru',
     },
   ],
@@ -135,7 +135,7 @@ const CONFIG = {
   // First Links Container
   firstlistsContainer: [
     {
-      icon: 'files',
+      icon: 'simplefilemanager',
       id: '1',
       links: [
         {
@@ -157,7 +157,7 @@ const CONFIG = {
       ],
     },
     {
-      icon: 'coffee',
+      icon: 'youtubevanced',
       id: '2',
       links: [
         {

index.html

@@ -9,10 +9,9 @@
       href="assets/icons/favicon.png"
     />
     <link rel="stylesheet" href="app.css" />
-    <script src="https://unpkg.com/lucide@latest"></script>
   </head>
 
-  <!-- 
+  <!--
       ╔╗ ╔═╗╔╗╔╔╦╗╔═╗
       ╠╩╗║╣ ║║║ ║ ║ ║
       ╚═╝╚═╝╝╚╝ ╩ ╚═╝
@@ -73,11 +72,6 @@
     <!-- Generators  -->
     <script src="assets/js/buttons.js"></script>
     <script src="assets/js/lists.js"></script>
-
-    <!-- Icons -->
-    <script>
-      lucide.createIcons();
-    </script>
   </body>
 
   <!-- Developed and designed by Miguel Ávila: -->