WEBSITE - use codepoints for icons

This commit is contained in:
Alex Sim committed 2026-05-17 20:12:58 +02:00
1 parent 419be8e964
commit 3af489d8a9
10 files changed
+34 -30

No files matched your search

+1 -1
View File
@@ -5,7 +5,7 @@ description: >-
url: "https://alesimula.github.io" url: "https://alesimula.github.io"
baseurl: "" baseurl: ""
version: "1.0.1" #Website version - increase to invalidate cached resources version: "1.0.2" #Website version - increase to invalidate cached resources
github_repo: "alesimula/Murine-launcher" github_repo: "alesimula/Murine-launcher"
icon_url: "https://raw.githubusercontent.com/alesimula/Murine-launcher/refs/heads/main/image/app_icon/icon_browser_fullsize.svg" icon_url: "https://raw.githubusercontent.com/alesimula/Murine-launcher/refs/heads/main/image/app_icon/icon_browser_fullsize.svg"
screenshots_api: "https://api.github.com/repos/alesimula/Murine-launcher/contents/fastlane/metadata/android/en-US/images/phoneScreenshots" screenshots_api: "https://api.github.com/repos/alesimula/Murine-launcher/contents/fastlane/metadata/android/en-US/images/phoneScreenshots"
+2 -2
View File
@@ -3,14 +3,14 @@
<div class="contact-modal-header"> <div class="contact-modal-header">
<h2 id="contactTitle">Get in Touch</h2> <h2 id="contactTitle">Get in Touch</h2>
<button class="contact-modal-close" aria-label="Close" onclick="closeContactModal()"> <button class="contact-modal-close" aria-label="Close" onclick="closeContactModal()">
<span class="material-symbols-outlined">close</span> <span class="material-symbols-outlined">&#xE5CD;</span> <!-- close -->
</button> </button>
</div> </div>
<p class="contact-modal-desc">Have a question, suggestion, or found a bug? Reach out to me through any of the channels below.</p> <p class="contact-modal-desc">Have a question, suggestion, or found a bug? Reach out to me through any of the channels below.</p>
<div class="contact-cards"> <div class="contact-cards">
<a href="mailto:alesimula@murinelauncher.app" class="contact-card" target="_blank" rel="noopener"> <a href="mailto:alesimula@murinelauncher.app" class="contact-card" target="_blank" rel="noopener">
<div class="contact-card-icon"> <div class="contact-card-icon">
<span class="material-symbols-outlined">mail</span> <span class="material-symbols-outlined">&#xE158;</span> <!-- mail -->
</div> </div>
<div class="contact-card-info"> <div class="contact-card-info">
<h3>Email</h3> <h3>Email</h3>
+3 -3
View File
@@ -13,15 +13,15 @@
GitHub GitHub
</a> </a>
<a href="https://www.paypal.com/donate/?hosted_button_id=3HRAWU9KVYKKS" class="footer-link" target="_blank" rel="noopener"> <a href="https://www.paypal.com/donate/?hosted_button_id=3HRAWU9KVYKKS" class="footer-link" target="_blank" rel="noopener">
<span class="material-symbols-outlined" style="font-size:20px">favorite</span> <span class="material-symbols-outlined" style="font-size:20px">&#xE87D;</span> <!-- favorite -->
Donate Donate
</a> </a>
<a href="#contact" class="footer-link" onclick="openContactModal(); return false;"> <a href="#contact" class="footer-link" onclick="openContactModal(); return false;">
<span class="material-symbols-outlined" style="font-size:20px">chat</span> <span class="material-symbols-outlined" style="font-size:20px">&#xE0B7;</span> <!-- chat -->
Contact Contact
</a> </a>
<a href="{{ '/privacy' | relative_url }}" class="footer-link"> <a href="{{ '/privacy' | relative_url }}" class="footer-link">
<span class="material-symbols-outlined" style="font-size:20px">policy</span> <span class="material-symbols-outlined" style="font-size:20px">&#xEA17;</span> <!-- policy -->
Privacy Policy Privacy Policy
</a> </a>
</div> </div>
+3 -3
View File
@@ -7,15 +7,15 @@
<div class="nav-actions"> <div class="nav-actions">
<a href="{{ '/' | relative_url }}" class="nav-link {% if page.url == '/' or page.url == '/index.html' %}active{% endif %}"> <a href="{{ '/' | relative_url }}" class="nav-link {% if page.url == '/' or page.url == '/index.html' %}active{% endif %}">
<span class="material-symbols-outlined">home</span> <span class="material-symbols-outlined">&#xE88A;</span> <!-- home -->
<span class="nav-link-label">Home</span> <span class="nav-link-label">Home</span>
</a> </a>
<a href="{{ '/download' | relative_url }}" class="nav-pill {% if page.url contains 'download' %}active{% endif %}"> <a href="{{ '/download' | relative_url }}" class="nav-pill {% if page.url contains 'download' %}active{% endif %}">
<span class="material-symbols-outlined">download</span> <span class="material-symbols-outlined">&#xF090;</span> <!-- download -->
<span class="nav-link-label">Download</span> <span class="nav-link-label">Download</span>
</a> </a>
<button class="nav-icon-btn" id="themeToggle" aria-label="Toggle theme"> <button class="nav-icon-btn" id="themeToggle" aria-label="Toggle theme">
<span class="material-symbols-outlined" id="themeIcon">dark_mode</span> <span class="material-symbols-outlined" id="themeIcon">&#xE51C;</span> <!-- dark_mode -->
</button> </button>
</div> </div>
</div> </div>
+1 -1
View File
@@ -17,7 +17,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Material Symbols --> <!-- Material Symbols -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block">
<link rel="icon" type="image/svg+xml" href="{{ site.icon_url }}"> <link rel="icon" type="image/svg+xml" href="{{ site.icon_url }}">
<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}?v={{ site.version }}"> <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}?v={{ site.version }}">
+4
View File
@@ -92,6 +92,10 @@ html, body, img, svg, picture, video {
--md-shadow-xl: 0 12px 32px rgba(0,0,0,.32), 0 4px 12px rgba(0,0,0,.20); --md-shadow-xl: 0 12px 32px rgba(0,0,0,.32), 0 4px 12px rgba(0,0,0,.20);
} }
/* --- Custom SVG Icons --- */
.icon-bestfeature { --icon-url: url('../img/ic_bestfeature.svg'); }
.icon-clippy { --icon-url: url('../img/ic_clippy.svg'); }
/* --- Reset & Base --- */ /* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+7 -7
View File
@@ -78,7 +78,7 @@
console.error('Failed to load release:', err); console.error('Failed to load release:', err);
container.innerHTML = container.innerHTML =
'<div class="error-state">' + '<div class="error-state">' +
'<span class="material-symbols-outlined">cloud_off</span>' + '<span class="material-symbols-outlined">&#xE2C1;</span>' /* cloud_off */ +
'<p>Could not load release info.</p>' + '<p>Could not load release info.</p>' +
'<p style="font-size:0.8125rem">Check the <a href="https://github.com/' + REPO + '/releases" target="_blank">releases page</a> directly.</p>' + '<p style="font-size:0.8125rem">Check the <a href="https://github.com/' + REPO + '/releases" target="_blank">releases page</a> directly.</p>' +
'</div>'; '</div>';
@@ -100,7 +100,7 @@
apkAssets.forEach(function (asset) { apkAssets.forEach(function (asset) {
assetsHtml += assetsHtml +=
'<a href="' + asset.browser_download_url + '" class="asset-item">' + '<a href="' + asset.browser_download_url + '" class="asset-item">' +
'<div class="asset-info"><span class="material-symbols-outlined">android</span>' + '<div class="asset-info"><span class="material-symbols-outlined">&#xE859;</span>' /* android */ +
'<span class="asset-name">' + asset.name + '</span></div>' + '<span class="asset-name">' + asset.name + '</span></div>' +
'<span class="asset-size">' + formatBytes(asset.size) + '</span></a>'; '<span class="asset-size">' + formatBytes(asset.size) + '</span></a>';
}); });
@@ -108,7 +108,7 @@
otherAssets.forEach(function (asset) { otherAssets.forEach(function (asset) {
assetsHtml += assetsHtml +=
'<a href="' + asset.browser_download_url + '" class="asset-item">' + '<a href="' + asset.browser_download_url + '" class="asset-item">' +
'<div class="asset-info"><span class="material-symbols-outlined">description</span>' + '<div class="asset-info"><span class="material-symbols-outlined">&#xE873;</span>' /* description */ +
'<span class="asset-name">' + asset.name + '</span></div>' + '<span class="asset-name">' + asset.name + '</span></div>' +
'<span class="asset-size">' + formatBytes(asset.size) + '</span></a>'; '<span class="asset-size">' + formatBytes(asset.size) + '</span></a>';
}); });
@@ -119,16 +119,16 @@
container.innerHTML = container.innerHTML =
'<div class="release-card">' + '<div class="release-card">' +
'<div class="release-card-header">' + '<div class="release-card-header">' +
'<h2><span class="material-symbols-outlined">new_releases</span>' + (release.name || release.tag_name) + '</h2>' + '<h2><span class="material-symbols-outlined">&#xE031;</span>' /* new_releases */ + (release.name || release.tag_name) + '</h2>' +
'<div class="release-meta">' + '<div class="release-meta">' +
'<span><span class="material-symbols-outlined">calendar_today</span>' + formatDate(release.published_at) + '</span>' + '<span><span class="material-symbols-outlined">&#xE935;</span>' /* calendar_today */ + formatDate(release.published_at) + '</span>' +
'<span><span class="material-symbols-outlined">sell</span>' + release.tag_name + '</span>' + '<span><span class="material-symbols-outlined">&#xF05B;</span>' /* sell */ + release.tag_name + '</span>' +
'</div></div>' + '</div></div>' +
'<div class="release-body"><div class="release-notes">' + mdToHtml(release.body) + '</div></div>' + '<div class="release-body"><div class="release-notes">' + mdToHtml(release.body) + '</div></div>' +
assetsHtml + assetsHtml +
'<div class="release-footer">' + '<div class="release-footer">' +
'<a href="https://github.com/' + REPO + '/releases" class="btn-text" target="_blank" rel="noopener">' + '<a href="https://github.com/' + REPO + '/releases" class="btn-text" target="_blank" rel="noopener">' +
'<span class="material-symbols-outlined">history</span>View all releases</a>' + '<span class="material-symbols-outlined">&#xE889;</span>View all releases</a>' /* history */ +
'</div></div>'; '</div></div>';
// Also update download button href // Also update download button href
+1 -1
View File
@@ -14,7 +14,7 @@
function applyTheme(theme) { function applyTheme(theme) {
document.documentElement.setAttribute('data-theme', theme); document.documentElement.setAttribute('data-theme', theme);
const icon = document.getElementById('themeIcon'); const icon = document.getElementById('themeIcon');
if (icon) icon.textContent = theme === 'dark' ? 'light_mode' : 'dark_mode'; if (icon) icon.textContent = theme === 'dark' ? '\uE518' /*light_mode*/ : '\uE51C' /*dark_mode*/;
} }
applyTheme(getPreferred()); applyTheme(getPreferred());
+2 -2
View File
@@ -11,11 +11,11 @@ title: Download
<p class="download-desc" id="releaseDate">Checking for latest release…</p> <p class="download-desc" id="releaseDate">Checking for latest release…</p>
<div class="download-actions"> <div class="download-actions">
<a href="https://github.com/alesimula/Murine-launcher/releases/latest" id="downloadBtn" class="btn-filled" target="_blank" rel="noopener"> <a href="https://github.com/alesimula/Murine-launcher/releases/latest" id="downloadBtn" class="btn-filled" target="_blank" rel="noopener">
<span class="material-symbols-outlined">download</span> <span class="material-symbols-outlined">&#xF090;</span> <!-- download -->
Download APK Download APK
</a> </a>
<a href="https://github.com/alesimula/Murine-launcher/releases" class="btn-outlined" target="_blank" rel="noopener"> <a href="https://github.com/alesimula/Murine-launcher/releases" class="btn-outlined" target="_blank" rel="noopener">
<span class="material-symbols-outlined">history</span> <span class="material-symbols-outlined">&#xE889;</span> <!-- history -->
All Releases All Releases
</a> </a>
</div> </div>
+10 -10
View File
@@ -15,11 +15,11 @@ title: Home
</p> </p>
<div class="hero-actions"> <div class="hero-actions">
<a href="{{ '/download' | relative_url }}" class="btn-filled"> <a href="{{ '/download' | relative_url }}" class="btn-filled">
<span class="material-symbols-outlined">download</span> <span class="material-symbols-outlined">&#xF090;</span> <!-- download -->
Download Download
</a> </a>
<a href="https://github.com/alesimula/Murine-launcher" class="btn-outlined" target="_blank" rel="noopener"> <a href="https://github.com/alesimula/Murine-launcher" class="btn-outlined" target="_blank" rel="noopener">
<span class="material-symbols-outlined">code</span> <span class="material-symbols-outlined">&#xE86F;</span> <!-- code -->
Source Code Source Code
</a> </a>
</div> </div>
@@ -41,42 +41,42 @@ title: Home
<div class="features-grid"> <div class="features-grid">
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon"> <div class="feature-icon">
<span class="material-symbols-outlined">palette</span> <span class="material-symbols-outlined">&#xE40A;</span> <!-- palette -->
</div> </div>
<h3>Modern UI</h3> <h3>Modern UI</h3>
<p>Built on the foundations of modern Launcher3, and enhanced with AOSP Material Expressive settings ported from LineageOS</p> <p>Built on the foundations of modern Launcher3, and enhanced with AOSP Material Expressive settings ported from LineageOS</p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon"> <div class="feature-icon">
<span class="material-symbols-outlined">blur_on</span> <span class="material-symbols-outlined">&#xE3A5;</span> <!-- blur_on -->
</div> </div>
<h3>Blur Effects</h3> <h3>Blur Effects</h3>
<p>Frosted glass and MICA-style translucency effects on the app drawer and search bar. Supported on Android 12+ with compatible OEM/ROMs.</p> <p>Frosted glass and MICA-style translucency effects on the app drawer and search bar. Supported on Android 12+ with compatible OEM/ROMs.</p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon"> <div class="feature-icon">
<span class="material-symbols-outlined">search</span> <span class="material-symbols-outlined">&#xE8B6;</span> <!-- search -->
</div> </div>
<h3>Customised QuickSearchBox</h3> <h3>Customised QuickSearchBox</h3>
<p>Can look great without needing Google; disable the Lens button, choose your preferred search engine, or disable it alltogether if it's not your thing.</p> <p>Can look great without needing Google; disable the Lens button, choose your preferred search engine, or disable it alltogether if it's not your thing.</p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon"> <div class="feature-icon">
<span class="material-symbols-outlined">speed</span> <span class="material-symbols-outlined">&#xE9E4;</span> <!-- speed -->
</div> </div>
<h3>Lightweight</h3> <h3>Lightweight</h3>
<p>Very close to its AOSP source, with some enhancements but no bloat. Very tiny, very light, very demure.</p> <p>Very close to its AOSP source, with some enhancements but no bloat. Very tiny, very light, very demure.</p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon"> <div class="feature-icon">
<span class="custom-icon" style="--icon-url: url('{{ '/assets/img/ic_bestfeature.svg' | relative_url }}')"></span> <span class="custom-icon icon-bestfeature"></span>
</div> </div>
<h3>Designed by a mouse</h3> <h3>Designed by a mouse</h3>
<p>Are you tired of apps designed by humans? This one was built by a mouse, no (excessive) desire for money, will not sell out or sell you out, mice only deal in cheese and crumbs.</p> <p>Are you tired of apps designed by humans? This one was built by a mouse, no (excessive) desire for money, will not sell out or sell you out, mice only deal in cheese and crumbs.</p>
</div> </div>
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon"> <div class="feature-icon">
<span class="custom-icon" style="--icon-url: url('{{ '/assets/img/ic_clippy.svg' | relative_url }}')"></span> <span class="custom-icon icon-clippy"></span>
</div> </div>
<h3>Free &amp; Open Source</h3> <h3>Free &amp; Open Source</h3>
<p>Fully open source, licensed under the Apache 2.0 license. No tracking, no ads, no data collection, no internet access.</p> <p>Fully open source, licensed under the Apache 2.0 license. No tracking, no ads, no data collection, no internet access.</p>
@@ -92,7 +92,7 @@ title: Home
</div> </div>
<div id="screenshotGallery"> <div id="screenshotGallery">
<div class="screenshot-loading"> <div class="screenshot-loading">
<span class="material-symbols-outlined">hourglass_top</span> <span class="material-symbols-outlined">&#xEA5B;</span> <!-- hourglass_top -->
Loading screenshots&hellip; Loading screenshots&hellip;
</div> </div>
</div> </div>
@@ -102,7 +102,7 @@ title: Home
<section class="compat-section"> <section class="compat-section">
<div class="compat-card"> <div class="compat-card">
<div class="compat-icon"> <div class="compat-icon">
<span class="material-symbols-outlined">smartphone</span> <span class="material-symbols-outlined">&#xE32C;</span> <!-- smartphone -->
</div> </div>
<div class="compat-details"> <div class="compat-details">
<h3>Compatibility</h3> <h3>Compatibility</h3>