diff --git a/src/assets/example.svg b/src/assets/example.svg
new file mode 100644
index 0000000000000000000000000000000000000000..24d66224fda7585b21f20e6e8ebff88ba55f722b
--- /dev/null
+++ b/src/assets/example.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ viewBox="0 -256 1792 1792"
+ id="svg3013"
+ version="1.1"
+ inkscape:version="0.48.3.1 r9886"
+ width="100%"
+ height="100%"
+ sodipodi:docname="download_font_awesome.svg">
+ <metadata
+ id="metadata3023">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs3021" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="640"
+ inkscape:window-height="480"
+ id="namedview3019"
+ showgrid="false"
+ inkscape:zoom="0.13169643"
+ inkscape:cx="896"
+ inkscape:cy="896"
+ inkscape:window-x="0"
+ inkscape:window-y="25"
+ inkscape:window-maximized="0"
+ inkscape:current-layer="svg3013" />
+ <g
+ transform="matrix(1,0,0,-1,113.89831,1293.0169)"
+ id="g3015">
+ <path
+ d="m 1120,608 q 0,-12 -10,-24 L 791,265 q -9,-9 -23,-9 -14,0 -23,9 L 425,585 q -9,9 -9,23 0,13 9.5,22.5 9.5,9.5 22.5,9.5 h 192 v 352 q 0,13 9.5,22.5 9.5,9.5 22.5,9.5 h 192 q 13,0 22.5,-9.5 Q 896,1005 896,992 V 640 h 192 q 14,0 23,-9 9,-9 9,-23 z m 160,32 q 0,104 -40.5,198.5 Q 1199,933 1130,1002 1061,1071 966.5,1111.5 872,1152 768,1152 664,1152 569.5,1111.5 475,1071 406,1002 337,933 296.5,838.5 256,744 256,640 256,536 296.5,441.5 337,347 406,278 475,209 569.5,168.5 664,128 768,128 872,128 966.5,168.5 1061,209 1130,278 1199,347 1239.5,441.5 1280,536 1280,640 z m 256,0 Q 1536,431 1433,254.5 1330,78 1153.5,-25 977,-128 768,-128 559,-128 382.5,-25 206,78 103,254.5 0,431 0,640 0,849 103,1025.5 206,1202 382.5,1305 559,1408 768,1408 977,1408 1153.5,1305 1330,1202 1433,1025.5 1536,849 1536,640 z"
+ id="path3017"
+ inkscape:connector-curvature="0"
+ style="fill:currentColor" />
+ </g>
+</svg>
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
index adb3f88cb66859db1e18a2260ee5a2ee34df991e..d1ed898b2e3c17fd8497bba7c2c6d09f0baf72f1 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
@@ -1,5 +1,10 @@
:host {
- display: block;
+ align-items: center;
+ display: flex;
+ flex-flow: row;
+ justify-content: center;
+ margin: 0 32px;
+ padding: 0;
}
.hy-site-header {
@@ -9,6 +14,8 @@
display: flex;
flex-flow: row;
list-style: none;
+ margin: 0;
+ padding: 0;
width: 100%;
// First level menu items
@@ -20,54 +27,75 @@
font-family: var(--main-font-family);
@include breakpoint($extrawide) {
- @include font-size(15px, 16px);
+ @include font-size(14px, 14px);
@include font-weight($bold);
+ align-items: center;
border-top: 0 none;
- padding: 10px 8px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ letter-spacing: -0.6px;
+ //padding: 10px 8px;
+ padding: 0 7px;
text-transform: uppercase;
}
- @include breakpoint($fullhd) {
- @include font-size(18px, 16px);
- letter-spacing: -0.5px;
- padding: 10px;
+ @include breakpoint($xlarge) {
+ @include font-size(16px, 16px);
+ letter-spacing: -0.7px;
+ //padding: 10px;
+ padding: 0 9px;
}
// Underline if link is in active trail.
&--is-active-trail {
@include breakpoint($extrawide) {
- border-bottom: 4px solid var(--brand-main-nearly-black);
- padding-bottom: 8px;
+ //border-bottom: 4px solid var(--brand-main-nearly-black);
+ //padding-bottom: 8px;
}
@include breakpoint($xlarge) {
- padding-bottom: 12px;
+ //padding-bottom: 12px;
+ }
+ }
+
+ hy-icon {
+ //justify-content: center;
+ svg {
+ height: 5.63px;
+ width: 8px;
+ //height: 7.03px;
+ // width: 10px;
}
}
&__heading__icon {
- display: none;
+ display: inline-block;
+ padding-left: 3px;
+ @include breakpoint($xlarge) {
+ padding-left: 4px;
+ }
}
// On hover: change background and show heading icon.
&--is-active {
- background-color: var(--grayscale-background-box);
- padding: 35px 10px;
+ //background-color: var(--grayscale-background-box);
+ //padding: 35px 10px;
position: relative;
.desktop-menu-link__heading__icon {
- bottom: 0;
- display: block;
- left: 0;
- position: absolute;
- width: 100%;
+ //bottom: 0;
+ //display: block;
+ //left: 0;
+ //position: absolute;
+ //width: 100%;
hy-icon {
- justify-content: center;
+ //justify-content: center;
transform: rotateX(180deg);
svg {
- padding: 8px 0;
+ //padding: 8px 0;
}
}
}
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
index f58e62e1eeb89bc764f207d3fa68ddd05edb7e92..2851fc66950041d56d1c4df650f7a83ba83d8ae6 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
@@ -225,9 +225,7 @@ export class HyDesktopMenuLinks {
aria-expanded="false"
>
{label}
- <span class="desktop-menu-link__heading__icon">
- <hy-icon icon={'hy-icon-caret-down'} size={32} />
- </span>
+ <hy-icon icon={'hy-icon-caret-down'} size={32} />
</button>
<div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()} aria-hidden="true">
<div class="hy-desktop-menu-panel__desktop-menu">
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index c9744756d89676fe02fc0f07075da6d09c19b5d3..54a7d91d8534644d525d95ac35d7f9455eef4657 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -145,6 +145,7 @@
align-items: center;
display: flex;
flex-flow: row;
+ margin-right: 0;
&__item {
align-items: center;
@@ -156,6 +157,7 @@
}
@include breakpoint($extrawide) {
+ margin-right: 32px;
&__item {
margin: 0 6px;
padding: 10px 0;
@@ -172,8 +174,8 @@
.hy-link__donate {
@include breakpoint($wide) {
- margin-left: 10px;
- margin-right: 10px;
+ //margin-left: 10px;
+ //margin-right: 10px;
padding: 0;
text-decoration: none;
@@ -184,13 +186,14 @@
}
@include breakpoint($extrawide) {
- margin-left: 8px;
- margin-right: 32px;
+ //margin-left: 8px;
+ //margin-right: 32px;
+ margin-right: 0;
}
@include breakpoint($xlarge) {
- margin-left: 10px;
- margin-right: 32px;
+ //margin-left: 10px;
+ //margin-right: 32px;
}
&__label {