hc/startpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix weather icon

Browse Source 
- Adds a drop-shadow filter to the OpenWeather icon so it can be seen in light mode
- Queries OpenWeather for the standard size icon instead of @2x
This commit is contained in:
Tressley Cahill 2022-11-04 20:55:39 -04:00
parent d6b5a034b2
commit 1b79b97c98
2 changed files with 5 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
css/styles.css
View File

@ -156,6 +156,8 @@ aside svg { height: 4.5rem; }
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
#weather img { filter: drop-shadow(0 0 0 hsl(var(--color-black-hsl) / 0.75)); }
#search input { #search input {
background-image: var(--svg-search-light-gray); background-image: var(--svg-search-light-gray);
border: 0.125rem solid hsl(var(--color-black-hsl) / 0.25); border: 0.125rem solid hsl(var(--color-black-hsl) / 0.25);
@ -163,13 +165,10 @@ aside svg { height: 4.5rem; }
#search input:hover { border-color: hsl(var(--color-black-hsl) / 0.5); } #search input:hover { border-color: hsl(var(--color-black-hsl) / 0.5); }
#search input:focus { #search input:focus { outline-color: var(--color-orange); }
background-color: var(--color-white);
outline-color: var(--color-orange);
}
#bookmarks a:focus, #bookmarks a:focus,
#bookmarks a:hover { background-color: hsl(var(--color-black-hsl) / 0.075); } #bookmarks a:hover { background-color: hsl(var(--color-orange-hsl) / 0.125); }
} }
#search input:active, #search input:active,

2
js/main.js
View File

@ -17,7 +17,7 @@ function weatherBalloon(cityID) {
let tempK = parseFloat(data.main.temp); let tempK = parseFloat(data.main.temp);
let tempC = Math.round(tempK - 273.15); let tempC = Math.round(tempK - 273.15);
let tempF = Math.round((tempK - 273.15) * 1.8) + 32; let tempF = Math.round((tempK - 273.15) * 1.8) + 32;
document.getElementById('weather').innerHTML = '<p id="location">' + data.name + '</p><p id="details" ' + 'title="' + tempF + '&deg;F">' + '<img src="http://openweathermap.org/img/wn/' + weatherIcon + '@2x.png">' + data.weather[0].description + '<span class="separator">|</span>' + tempC + '&deg;C</p>'; document.getElementById('weather').innerHTML = '<p id="location">' + data.name + '</p><p id="details" ' + 'title="' + tempF + '&deg;F">' + '<img src="http://openweathermap.org/img/wn/' + weatherIcon + '.png">' + data.weather[0].description + '<span class="separator">|</span>' + tempC + '&deg;C</p>';
}); });
} }