@borderguru/footer - npm Package Compare versions

Comparing version 1.0.1-alpha.31 to 1.0.1-alpha.34

package.json

 {
   "name": "@borderguru/footer",
-  "version": "1.0.1-alpha.31+788f2e3",
+  "version": "1.0.1-alpha.34+5609be3",
   "description": "Hermes footer",
@@ -30,3 +30,3 @@ "main": "src/index.js",
   },
-  "gitHead": "788f2e30da09bfbd27cbfa6802eac87042ae2e80"
+  "gitHead": "5609be379465c90e09892fc818578b643d0fff06"
 }

src/footer.js

@@ -9,10 +9,10 @@ import { html } from 'hybrids';
   .footer {
+    font-family: "Lucida Grande";
     display: grid;
     grid-template-columns: auto;
     grid-template-rows: auto auto auto;
-    align-items: center;
     grid-template-areas:
-    "icons
-    about
-    legal"
+    "icons"
+    "about"
+    "legal"
   }
@@ -23,9 +23,25 @@
   }
+
   .item--icons {
+    grid-area: icons;
     display: flex;
     align-items: baseline;
-    justify-content: space-around;
+    justify-content: center;
   }
-  .item--about,
-  .item--legal {
+
+  .about {
+    grid-area:about;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .legal {
+    grid-area: legal;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .item-texts {
     color: #909AA0;
@@ -36,23 +52,62 @@ font-style: normal;
     line-height: 17px;
-    align-self: start;
   }
 
-  .item--icons > a {
-    margin-left: 5px;
+  .item--icons > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-left: 30px;
   }
 
-  .item--about, item--legal > div:nth-of-type(2) {
+  .item--icons > div > p {
     font-size: 16px;
-    font-weight: 400px;
+    color: #0091CD;
     line-height: 22.4px;
+    font-weight: bold;
+    margin-top: 7px;
   }
 
-  .separator {
-    border-bottom: solid 1px #DCDFE2
+  .item--texts > div {
+    min-width: 222.47px;
   }
 
-  @media screen and (min-width: 769px) {
+  .item--texts > div > p {
+    font-size: 22px;
+    line-height: 30.8px;
+    color: #909AA0;
+    font-weight: bold;
+    margin-bottom: 0px;
+  }
+
+  .links {
+    display: flex;
+    flex-direction: column;
+    line-height: 22.4px;
+  }
+
+  .links > a {
+    text-decoration: none;
+    color: #909AA0;
+    font-size:16px;
+  }
+
+
+  @media screen and (min-width: 768px) {
     .footer {
       background: #FFFFFF;
       display: grid;
+      grid-template-columns: auto;
+      grid-template-rows: auto;
+      justify-items: center;
+      align-items: center;
+      grid-template-areas:
+      "icons icons"
+      "about legal"
+    }
+  }
+
+  @media screen and (min-width: 1024px) {
+    .footer {
+      background: #FFFFFF;
+      display: grid;
       grid-template-columns: auto auto auto;
@@ -72,31 +127,41 @@ grid-template-rows: 191px;
     <section class="item item--icons">
-      <a href="https://www.xing.com/companies/hermesbordergurugmbh">
-        <img class="img" src="${XingLogo}" target="_blank">
-      </a>
-      <a href="https://twitter.com/BorderGuru">
-        <img class="img" src="${LinkedinLogo}" target="_blank">
-      </a>
-      <a href="https://www.linkedin.com/company/hermesborderguru/">
-        <img class="img" src="${TwitterLogo}" target="_blank">
-      </a>
-    </section>
-    <section class="item item--about">
-      <div class="separator">
-        <p>About</p>
+      <div>
+        <a target="_blank" href="https://www.xing.com/companies/hermesbordergurugmbh">
+          <img class="img" src="${XingLogo}" target="_blank">
+        </a>
+        <p>Xing</p>
       </div>
       <div>
-        <p>Hermes International Freight</p>
-        <p>Hermes International Parcel</p>
-        <p>Careers</p>
-        <p>IT Service Health Status</p>
+        <a target="_blank" href="https://www.linkedin.com/company/hermesborderguru/">
+          <img class="img" src="${TwitterLogo}" target="_blank">
+        </a>
+        <p>Twitter</p>
       </div>
+      <div>
+        <a target="_blank" href="https://twitter.com/BorderGuru">
+          <img class="img" src="${LinkedinLogo}" target="_blank">
+        </a>
+        <p>Linkedin</p>
+      </div>
     </section>
-    <section class="item item--legal">
-      <div class="separator">
-        <p>Legal information</p>
+    <section class="item item--texts about">
+      <div>
+        <p>About</p>
+        <div class="links">
+          <a target="_blank" href="https://www.hermesworld.com/int/our-services/transport-logistics/supply-chain-solutions/tailor-made-solutions/">Hermes International Freight</a>
+          <a target="_blank" href="https://www.hermesworld.com/de/unsere-dienstleistungen/global-e-commerce/global-e-commerce/">Hermes International Parcel</a>
+          <a target="_blank" href="https://www.hermesworld.com/en/careers/">Careers</a>
+          <a target="_blank" href="https://status.hermesborderguru.io/">IT Service Health Status</a>
+        </div>
       </div>
+    </section>
+    <section class="item item--texts legal">
       <div>
-        <p>Imprint</p>
-        <p>Data Protection</p>
-        <p>Security Advice</p>
+        <p>Legal information</p>
+        <div class="links">
+          <a target="_blank" href="https://eportal-hint.hermesworld.com/en/imprint">Imprint</a>
+          <a target="_blank" href="https://eportal-hint.hermesworld.com/en/data-protection">Data protection</a>
+          <a target="_blank" href="https://eportal-hint.hermesworld.com/en/security-advice">Security Advice</a>
+          <p></p>
+        </div>
       </div>
@@ -103,0 +168,0 @@ </section>

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8800

increased by25.3%

Lines of code

155

increased by56.57%

No dependency changes