Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: replace legacy Material Icons with trendy 2026 Material Symbols Rounded

Browse Source
This commit is contained in:
Johan Samudio
2026-03-04 11:33:39 -05:00
parent 5ec26970bd
commit abba5389f9
2 changed files with 32 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/index.html
View File

@ -4,12 +4,15 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" /> <meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" /> <meta http-equiv="Expires" content="0" />
<meta name="theme-color" content="#fee715" /> <meta name="theme-color" content="#fee715" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://maps.googleapis.com"> <link rel="preconnect" href="https://maps.googleapis.com">
@ -23,8 +26,8 @@
<body> <body>
<script> <script>
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistrations().then(function(registrations) { navigator.serviceWorker.getRegistrations().then(function (registrations) {
for(let registration of registrations) { registration.unregister(); } for (let registration of registrations) { registration.unregister(); }
}); });
} }
</script> </script>

25
frontend/src/style.css
View File

@ -20,3 +20,28 @@ body {
color: white; color: white;
font-family: "Space Grotesk", sans-serif; font-family: "Space Grotesk", sans-serif;
} }
/* Modernize Iconography (2026 Trends) */
.material-icons {
font-family: 'Material Symbols Rounded' !important;
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
/* Thick Rounded Outlines - Hyper-modern & Accessible */
font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}
/* Utilities for solid versions when needed */
.icon-filled {
font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}