Merge branch 'development'

src/components/navigation/menu-sidebar/menu-sidebar.scss

@@ -129,6 +129,8 @@
 
   &:hover {
     cursor: pointer;
+    color: var(--brand-main);
+    text-decoration: underline;
   }
 
   svg {

src/components/paragraph-text/paragraph-text.scss

@@ -55,11 +55,33 @@
     color: var(--link-blue);
     font-family: var(--main-font-family);
     font-weight: 600;
+    display: inline-flex;
 
     @include breakpoint($narrow) {
       @include font-size(16px, 24px);
       letter-spacing: -0.1px;
     }
+
+    &:hover {
+      color: var(--brand-main);
+    }
+  }
+
+  a[target='_blank']:after {
+    display: block;
+    content: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
+    margin-left: 3px;
+    transform: rotate(315deg);
+
+    &:hover {
+      content: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
+    }
+  }
+
+  a[target='_blank']:hover {
+    &:after {
+      content: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
+    }
   }
 
   p {

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss

@@ -184,6 +184,16 @@
           &__title {
             padding-right: 5px;
           }
+
+          &:hover {
+            cursor: pointer;
+            span {
+              color: var(--brand-main);
+            }
+            svg {
+              fill: var(--brand-main);
+            }
+          }
         }
       }
 

src/components/site-header/site-header.scss

@@ -48,6 +48,7 @@
   }
 
   &__logo-container {
+    color: var(--brand-main-nearly-black);
     margin: 16px 8px;
 
     @include breakpoint($narrow) {
@@ -61,6 +62,17 @@
     @include breakpoint($extrawide) {
       margin: 16px;
     }
+
+    &:hover {
+      color: var(--brand-main);
+      a,
+      span {
+        color: var(--brand-main) !important;
+      }
+      svg {
+        fill: var(--brand-main);
+      }
+    }
   }
 
   &__menu-container {
@@ -202,6 +214,16 @@
       margin: 0 8px;
       padding: 10px 0;
     }
+
+    &:hover {
+      color: var(--brand-main);
+      span {
+        color: var(--brand-main);
+      }
+      svg {
+        fill: var(--brand-main);
+      }
+    }
   }
 }
 

src/components/site-header/site-header.tsx

@@ -221,7 +221,7 @@ export class SiteHeader {
               {this.donateLink.map((i) => {
                 return (
                   <a class={'menu--secondary__item hy-link__donate'} href={i.url}>
-                    <hy-icon icon={'hy-icon-euro'} size={14} fill={ColorVariant.black} />
+                    <hy-icon icon={'hy-icon-heart-support'} size={14} fill={ColorVariant.black} />
                     <span class={'hy-link__donate__label'}>{i.label}</span>
                   </a>
                 );
@@ -255,7 +255,7 @@ export class SiteHeader {
               {this.donateLink.map((i) => {
                 return (
                   <a class={'menu--secondary__item hy-link__donate'} href={i.url}>
-                    <hy-icon icon={'hy-icon-euro'} size={14} fill={ColorVariant.black} />
+                    <hy-icon icon={'hy-icon-heart-support'} size={14} fill={ColorVariant.black} />
                     <span class={'hy-link__donate__label'}>{i.label}</span>
                   </a>
                 );

src/components/site-header/site-logo/readme.md

@@ -4,12 +4,13 @@
 
 ## Properties
 
-| Property | Attribute | Description | Type                                                           | Default              |
-| -------- | --------- | ----------- | -------------------------------------------------------------- | -------------------- |
-| `color`  | `color`   |             | `ColorVariant.black \| ColorVariant.white`                     | `ColorVariant.black` |
-| `label`  | `label`   |             | `string`                                                       | `undefined`          |
-| `size`   | `size`    |             | `SiteLogoSize.big \| SiteLogoSize.large \| SiteLogoSize.small` | `SiteLogoSize.big`   |
-| `url`    | `url`     |             | `string`                                                       | `undefined`          |
+| Property | Attribute | Description | Type                                                           | Default                |
+| -------- | --------- | ----------- | -------------------------------------------------------------- | ---------------------- |
+| `color`  | `color`   |             | `ColorVariant.black \| ColorVariant.white`                     | `ColorVariant.black`   |
+| `label`  | `label`   |             | `string`                                                       | `undefined`            |
+| `size`   | `size`    |             | `SiteLogoSize.big \| SiteLogoSize.large \| SiteLogoSize.small` | `SiteLogoSize.big`     |
+| `type`   | `type`    |             | `FooterVariant.footer \| FooterVariant.header`                 | `FooterVariant.header` |
+| `url`    | `url`     |             | `string`                                                       | `undefined`            |
 
 ## Dependencies
 

src/components/site-header/site-logo/site-logo.scss

@@ -68,4 +68,27 @@
       width: 64px;
     }
   }
+
+  &__header {
+    &:hover {
+      color: var(--brand-main);
+      a,
+      span {
+        color: var(--brand-main) !important;
+      }
+      svg {
+        fill: var(--brand-main);
+      }
+    }
+  }
+  &__footer {
+    &:hover {
+      span {
+        color: var(--grayscale-medium) !important;
+      }
+      svg {
+        fill: var(--grayscale-medium) !important;
+      }
+    }
+  }
 }

src/components/site-header/site-logo/site-logo.tsx

 import {Component, h, Host, Prop} from '@stencil/core';
-import {ColorVariant, SiteLogoSize} from '../../../utils/utils';
+import {ColorVariant, FooterVariant, SiteLogoSize} from '../../../utils/utils';
 
 @Component({
   tag: 'hy-site-logo',
@@ -7,14 +7,16 @@ import {ColorVariant, SiteLogoSize} from '../../../utils/utils';
   shadow: false,
 })
 export class SiteLogo {
+  @Prop() type: FooterVariant = FooterVariant.header;
   @Prop() color: ColorVariant = ColorVariant.black;
   @Prop() label?: string;
   @Prop() size: SiteLogoSize = SiteLogoSize.big;
   @Prop() url?: string;
 
   render() {
+    const classAttributes = ['hy-site-logo', `hy-site-logo__${this.type}`].join(' ');
     return this.url ? (
-      <Host class={'hy-site-logo'}>
+      <Host class={classAttributes}>
         <a href={this.url}>
           <hy-icon class={'hy-site-logo__icon'} icon={'hy-icon-hy-logo'} size={this.size} fill={this.color} />
           <span class={'hy-site-logo__label'} style={{color: this.color}}>
@@ -23,7 +25,7 @@ export class SiteLogo {
         </a>
       </Host>
     ) : this.label ? (
-      <Host class={'hy-site-logo'}>
+      <Host class={classAttributes}>
         <hy-icon class={'hy-site-logo__icon'} icon={'hy-icon-hy-logo'} size={this.size} fill={this.color} />
         <span class={'hy-site-logo__label'} style={{color: this.color}}>
           {this.label}

src/components/site-header/site-search/site-search.scss

@@ -12,7 +12,6 @@
 
   @include breakpoint($wide) {
     flex-direction: row-reverse;
-    //padding: 4px 0;
     padding: 0;
 
     &:focus {
@@ -82,6 +81,18 @@
       width: 16px;
     }
   }
+
+  &:hover {
+    color: var(--brand-main);
+    cursor: pointer;
+
+    span {
+      color: var(--brand-main);
+    }
+    svg {
+      fill: var(--brand-main);
+    }
+  }
 }
 
 .site-search {

src/utils/utils.ts

@@ -171,6 +171,11 @@ export enum SiteLogoSize {
   large = 80,
 }
 
+export enum FooterVariant {
+  header = 'header',
+  footer = 'footer',
+}
+
 export enum ColorVariant {
   black = 'var(--brand-main-nearly-black)',
   white = 'var(--grayscale-white)',