fix: unsplash links etc

src/components/modals/main/scss/index.scss

@@ -272,7 +272,7 @@ li {
   }
 }
 
-@media only screen and (max-width: 1300px) {
+@media only screen and (max-width: 1650px) {
   li.navbar-item {
     span {
       display: none;

src/components/widgets/background/Background.jsx

@@ -15,7 +15,10 @@ export default class Background extends React.PureComponent {
       url: '',
       currentAPI: '',
       photoInfo: {
-        hidden: false
+        hidden: false,
+        offline: false,
+        photographerURL: '',
+        photoURL: ''
       }
     };
     this.language = window.language.widgets.background;
@@ -55,6 +58,7 @@ export default class Background extends React.PureComponent {
     this.setState({
       url: `./offline-images/${randomImage}.webp`,
       photoInfo: {
+        offline: true,
         credit: photographer
       }
     });
@@ -158,7 +162,9 @@ export default class Background extends React.PureComponent {
             location: (data.location.replace(/[null]+/g, '') !== ' ') ? data.location : 'N/A',
             camera: data.camera,
             resolution: data.resolution,
-            url: data.file
+            url: data.file,
+            photographerURL: (backgroundAPI === 'unsplash') ? data.photographer_page : '',
+            photoURL: (backgroundAPI === 'unsplash') ? data.photo_page : ''
           }
         });
       break;

src/components/widgets/background/PhotoInformation.jsx

@@ -29,9 +29,21 @@ export default function PhotoInformation(props) {
     return null;
   }
 
+  // remove unsplash text
+  const photographer = props.info.credit.split(` ${language.unsplash}`)[0];
+
+  let credit = props.info.credit;
+  let photo = language.credit;
+
+  // unsplash
+  if (props.info.photographerURL !== '' && !props.info.offline) {
+    photo = <a href={props.info.photoURL} target='_blank' rel='noopener noreferrer'>{language.credit}</a>;
+    credit = <><a href={props.info.photographerURL} target='_blank' rel='noopener noreferrer'>{photographer}</a> <a href='https://unsplash.com?utm_source=mue' target='_blank' rel='noopener noreferrer'>{language.unsplash}</a></>;
+  }
+
   return (
     <div className='photoInformation'>
-      <h1>{language.credit} <span id='credit'>{props.info.credit}</span></h1>
+      <h1>{photo} <span id='credit'>{credit}</span></h1>
       <Info className='photoInformationHover'/>
       <div className={props.className || 'infoCard'}>
         <Info className='infoIcon'/>
@@ -44,7 +56,7 @@ export default function PhotoInformation(props) {
         <Resolution/>
         <span>{props.info.resolution || 'N/A'}</span>
         <Photographer/>
-        <span>{props.info.credit.split(` ${language.unsplash}`)[0]}</span>
+        <span>{photographer}</span>
         {(localStorage.getItem('downloadbtn') === 'true') ? 
           <>
             <Download/>

src/components/widgets/background/scss/_photoinformation.scss

@@ -23,6 +23,15 @@
   svg:hover+.infoCard {
     display: block;
   }
+
+  a {
+    color: white;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 .infoCard {

src/components/widgets/weather/Weather.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import EventBus from '../../../modules/helpers/eventbus';
 
 import WeatherIcon from './WeatherIcon';
-import WindDirectionIcon from './WindDirectionIcon';
+//import WindDirectionIcon from './WindDirectionIcon';
 import { WiHumidity, WiWindy, WiBarometer } from 'weather-icons-react';
 
 import './weather.scss';
@@ -151,7 +151,7 @@ export default class Weather extends React.PureComponent {
         <span>{this.state.weather.temp + this.state.temp_text}</span>
         <span className='minmax'>{minmax()}</span>
         {enabled('humidity') ? <span className='loc'><br/><WiHumidity/>{this.state.weather.humidity}%</span> : null}
-        {enabled('windspeed') ? <span className='loc'><br/><WiWindy/>{this.state.weather.wind_speed}<span className='minmax'> m/s</span><WindDirectionIcon degrees={this.state.weather.wind_degrees}/></span> : null}
+        {enabled('windspeed') ? <span className='loc'><br/><WiWindy/>{this.state.weather.wind_speed}<span className='minmax'> m/s</span>{/*<WindDirectionIcon degrees={this.state.weather.wind_degrees}/>*/}</span> : null}
         {enabled('atmosphericpressure') ? <span className='loc'><br/><WiBarometer/>{this.state.weather.pressure}<span className='minmax'> hPa</span></span> : null}
         <br/>
         {enabled('showlocation') ? <span className='loc'>{this.state.location}</span> : null}

src/components/widgets/weather/WindDirectionIcon.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { WiDirectionDownLeft, WiDirectionDownRight, WiDirectionDown, WiDirectionLeft, WiDirectionRight, WiDirectionUpLeft, WiDirectionUpRight, WiDirectionUp } from 'weather-icons-react';
 
-export default function WeatherIcon(props) {
+export default function WindDirectionIcon(props) {
   let icon;
 
   const getDirection = (angle) => {