DECA
/
deca.eco
2
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

Adding Logo on dark and light theme, plus favicon update

This commit is contained in:
David E. Perez Negron R. 2024-06-14 14:16:05 -06:00
parent 249cb9d012
commit 67cd96cd33
7 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_data.yml
View File

@ -1,6 +1,8 @@
lang: en lang: en
logo: deca-logo.png logo_dark: /img/deca-logo-dark.png
logo_light: /img/deca-logo-light.png
home: home:
welcome: DECA PROTOCOL welcome: DECA PROTOCOL

4
_includes/css/navbar.css
View File

@ -43,8 +43,8 @@
& img { & img {
margin-bottom: 10px; margin-bottom: 10px;
width:175px; width:100px;
height:58px; height:100px;
} }
& span { & span {

19
_includes/layouts/base.vto
View File

@ -6,10 +6,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ it.title || metas.title }} - {{ metas.site }}</title> <title>{{ it.title || metas.title }} - {{ metas.site }}</title>
<!-- Color Scheme Meta Tags -->
<meta name="supported-color-schemes" content="light dark"> <meta name="supported-color-schemes" content="light dark">
<meta name="theme-color" content="hsl(220, 20%, 100%)" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="hsl(220, 20%, 100%)" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="hsl(220, 20%, 10%)" media="(prefers-color-scheme: dark)"> <meta name="theme-color" content="hsl(220, 20%, 10%)" media="(prefers-color-scheme: dark)">
<!-- External Stylesheets and Scripts -->
<link rel="stylesheet" href="/styles.css"> <link rel="stylesheet" href="/styles.css">
<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="{{ metas.site }}"> <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="{{ metas.site }}">
<link rel="alternate" href="/feed.json" type="application/json" title="{{ metas.site }}"> <link rel="alternate" href="/feed.json" type="application/json" title="{{ metas.site }}">
@ -21,11 +23,7 @@
<body> <body>
<nav class="navbar"> <nav class="navbar">
<a href="/" class="navbar-home"> <a href="/" class="navbar-home">
{{ if it.logo }} <img id="theme-logo" alt="{{ metas.site }}">
<img src="/img/{{ it.logo }}" alt="{{ metas.site }}">
{{ else }}
<strong>{{ metas.site }}</strong>
{{ /if }}
</a> </a>
<ul class="navbar-links"> <ul class="navbar-links">
@ -45,14 +43,25 @@
{{ /for }} {{ /for }}
<li> <li>
<script> <script>
//const lightLogo = "{{ it.logo-light }}";
//const darkLogo = "{{ it.logo-dark }}";
const lightLogo = "/img/deca-logo-light.png";
const darkLogo = "/img/deca-logo-dark.png";
// Set initial theme and logo
let theme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches let theme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark" ? "dark"
: "light"); : "light");
document.documentElement.dataset.theme = theme; document.documentElement.dataset.theme = theme;
document.getElementById("theme-logo").src = theme === "dark" ? darkLogo : lightLogo;
console.log("lightLogo:", ligthLogo, "darkLogo:", darkLogo);
function changeTheme() { function changeTheme() {
theme = theme === "dark" ? "light" : "dark"; theme = theme === "dark" ? "light" : "dark";
localStorage.setItem("theme", theme); localStorage.setItem("theme", theme);
document.documentElement.dataset.theme = theme; document.documentElement.dataset.theme = theme;
document.getElementById("theme-logo").src = theme === "dark" ? darkLogo : lightLogo;
console.log("lightLogo:", ligthLogo, "darkLogo:", darkLogo);
} }
</script> </script>
<button class="button" onclick="changeTheme()"> <button class="button" onclick="changeTheme()">

BIN
img/deca-logo-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 247 KiB

BIN
img/deca-logo-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 218 KiB

BIN
img/deca-logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 30 KiB

BIN
img/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB