Code cleanup & improvements

This commit is contained in:
Daniel 2023-10-14 02:17:58 +02:00
parent 3f3a209ed0
commit 413699ff56
9 changed files with 31 additions and 19 deletions

View File

@ -6,6 +6,6 @@ body.dark {
--hover: #FFF1; --hover: #FFF1;
} }
body.dark #theme-switcher .icon::after { body.dark #theme-switcher i::after {
content: "dark_mode" content: "dark_mode"
} }

View File

@ -41,7 +41,7 @@
transition: background .2s; transition: background .2s;
} }
.back .icon { .back i {
margin: 4px; margin: 4px;
width: 56px; width: 56px;
height: 56px; height: 56px;
@ -50,11 +50,11 @@
transition: background .2s; transition: background .2s;
} }
.back .icon:hover { .back i:hover {
background: var(--hover); background: var(--hover);
} }
.back .icon:after { .back i:after {
content: "chevron_left"; content: "chevron_left";
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -68,7 +68,7 @@
margin: 20px 20px 16px; margin: 20px 20px 16px;
} }
.header .icon { .header i {
margin-top: 1px; margin-top: 1px;
margin-right: 10px; margin-right: 10px;
} }

View File

@ -12,7 +12,7 @@
object-fit: cover; object-fit: cover;
} }
#theme-switcher .icon::after { #theme-switcher i::after {
content: "light_mode" content: "light_mode"
} }

View File

@ -22,7 +22,7 @@
background: var(--hover); background: var(--hover);
} }
.box .icon { .box i {
font-size: 24px; font-size: 24px;
padding: 20px; padding: 20px;
background: hsl(var(--color), 100%, 89%); background: hsl(var(--color), 100%, 89%);

View File

@ -15,7 +15,7 @@
transition: background .4s; transition: background .4s;
} }
.setting .icon { .setting i {
margin-right: 14px; margin-right: 14px;
font-size: 28px; font-size: 28px;
} }

View File

@ -5,7 +5,7 @@
src: url(MaterialSymbolsRounded.woff2) format('woff2'); src: url(MaterialSymbolsRounded.woff2) format('woff2');
} }
.icon { i {
font-family: 'Material Symbols Rounded'; font-family: 'Material Symbols Rounded';
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@ -17,6 +17,7 @@
white-space: nowrap; white-space: nowrap;
word-wrap: normal; word-wrap: normal;
direction: ltr; direction: ltr;
display: inline-block;
-webkit-font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }

View File

@ -10,6 +10,8 @@
<body class="init"> <body class="init">
<div id="background"></div> <div id="background"></div>
<div class="main"> <div class="main">
<!-- Home page -->
<div class="page home" p="home"> <div class="page home" p="home">
<div class="wrapper"> <div class="wrapper">
<div class="home"> <div class="home">
@ -19,33 +21,41 @@
</div> </div>
<div class="buttons"> <div class="buttons">
<div id="theme-switcher"> <div id="theme-switcher">
<div class="icon"></div> <i></i>
<div class="text">Theme</div> <div class="text">Theme</div>
</div> </div>
<div t="services"> <div t="services">
<div class="icon">apps</div> <i>apps</i>
<div class="text">Services</div> <div class="text">Services</div>
</div> </div>
<div t="more"> <div t="settings">
<div class="icon">more</div> <i>settings</i>
<div class="text">More</div> <div class="text">Settings</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- App list -->
<div class="page" p="services"> <div class="page" p="services">
<div class="back"><div class="icon"></div></div> <div class="back"><i></i></div>
<div class="wrapper"> <div class="wrapper">
<div class="header"> <div class="header">
<div class="icon">apps</div> <i>apps</i>
<div class="text">Services</div> <div class="text">Services</div>
</div> </div>
<div class="boxes" id="app-list"></div> <div class="boxes" id="app-list"></div>
</div> </div>
</div> </div>
<div class="page" p="more">
<div class="back"><div class="icon"></div></div> <!-- Settings -->
<div class="page" p="settings">
<div class="back"><i></i></div>
<div class="wrapper"> <div class="wrapper">
<div class="header">
<i>settings</i>
<div class="text">Settings</div>
</div>
<div class="warn none" id="no-cookies">WARNING: due to blocked cookies, all settings will be lost after page reload</div> <div class="warn none" id="no-cookies">WARNING: due to blocked cookies, all settings will be lost after page reload</div>
<div class="settings" id="settings"></div> <div class="settings" id="settings"></div>
</div> </div>

View File

@ -9,6 +9,7 @@ export default class Main {
init() { init() {
document.title = this.config.get("name") document.title = this.config.get("name")
document.getElementById("favicon").href = this.config.get("icon")
this.initBackgrounds() this.initBackgrounds()
} }

View File

@ -43,7 +43,7 @@ export default class Settings {
let item = document.createElement("div") let item = document.createElement("div")
item.classList.add("setting") item.classList.add("setting")
item.innerHTML = ` item.innerHTML = `
<div class="icon">${icon}</div> <i>${icon}</i>
<div class="text"> <div class="text">
<div class="name">${name}</div> <div class="name">${name}</div>
<div class="desc">${desc}</div> <div class="desc">${desc}</div>