chore: minor cleanup (#1785)

.gitignore

@@ -17,6 +17,7 @@ yarn-error.log
 *.launch
 .settings/
 *.sublime-workspace
+.vscode
 
 # Visual Studio Code
 .vscode/*

angular.json

@@ -19,6 +19,7 @@
           "options": {
             "outputPath": "dist/fundamental",
             "index": "src/index.html",
+            "statsJson": true,
             "main": "src/main.ts",
             "polyfills": [
               "zone.js"

package.json

@@ -57,7 +57,7 @@
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-conventional": "^12.1.4",
     "@commitlint/travis-cli": "^12.1.4",
-    "@sap-theming/theming-base-content": "^11.8.0",
+    "@sap-theming/theming-base-content": "^11.12.0",
     "@types/jasmine": "~4.3.0",
     "angular-cli-ghpages": "1.0.7",
     "autoprefixer": "^10.4.16",

src/app/app.component.html

@@ -1,48 +1,48 @@
 <header class="fl-header">
-  <img class="fl-header-image" src="./assets/images/headerlogo.webp" width="220.56" height="61" alt="fundamental library logo"/>
+  <img class="fl-header-image" src="./assets/images/headerlogo.webp" width="220.56" height="61"
+    alt="fundamental library logo" loading="lazy" />
 </header>
 
 <main class="fl-components">
 
-<fl-intro/>
+  <fl-intro />
 
-<fl-purpose/>
+  <fl-purpose />
 
+  <section class="fl-libraries" id="fl-libraries">
 
-<section class="fl-libraries" id="fl-libraries">
+    <h2 class="fl-title">
+      <span>The</span>
+      <span>Libraries</span>
+    </h2>
 
-  <h2 class="fl-title">
-    <span>The</span>
-    <span>Libraries</span>
-  </h2>
+    <div class="fl-cards">
 
-  <div class="fl-cards">
+      <fl-card logoname="CSS" title="Fundamental Library Styles" imgLink="./assets/images/csstyles.webp"
+        link="https://sap.github.io/fundamental-styles">
+        Fundamental Styles simplifies building consistent SAP Fiori apps in any
+        web-based technology (Angular, Vue, React, etc.). It offers designed and
+        pre-built components for easy implementation and is open-source and
+        community-driven.
+      </fl-card>
 
-  <fl-card logoname="CSS" title="Fundamental Library Styles" imgLink="./assets/images/csstyles.webp" link="https://sap.github.io/fundamental-styles"> 
-    Fundamental Styles simplifies building consistent SAP Fiori apps in any
-    web-based technology (Angular, Vue, React, etc.). It offers designed and
-    pre-built components for easy implementation and is open-source and
-    community-driven.
-  </fl-card>
+      <fl-card logoname="Angular" title="Fundamental Library for Angular" imgLink="./assets/images/angular_black.webp"
+        link="https://sap.github.io/fundamental-ngx">
+        The Fundamental NGX library is based on the Angular framework and
+        Fundamental Styles, giving its components a modern look. It offers already
+        built and ready-to-use components which reduce drastically the overall
+        coding time and lines for the developer.
+      </fl-card>
 
-  <fl-card logoname="Angular" title="Fundamental Library for Angular" imgLink="./assets/images/angular_black.webp" link="https://sap.github.io/fundamental-ngx">
-      The Fundamental NGX library is based on the Angular framework and
-      Fundamental Styles, giving its components a modern look. It offers already
-      built and ready-to-use components which reduce drastically the overall
-      coding time and lines for the developer.
-  </fl-card>
-
-  </div>
-</section>
+    </div>
+  </section>
 
-<fl-used/>
+  <fl-used />
 
-<fl-conference/>
+  <fl-conference />
 
-<fl-design/>
+  <fl-design />
 
 </main>
 
-<fl-footer/>
-
-
+<fl-footer />

src/app/app.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { FlCardComponent } from './fl-card/fl-card.component';
 import { FlIntroComponent } from './fl-intro/fl-intro.component';
@@ -23,8 +22,7 @@ import { FlFooterComponent } from './fl-footer/fl-footer.component';
     FlFooterComponent
   ],
   imports: [
-    BrowserModule,
-    AppRoutingModule
+    BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/fl-card/fl-card.component.html

@@ -1,6 +1,6 @@
 <div class="fl-card">
 
-    <img [alt]="'Logo of '  + logoname" [src]="imgLink" width="auto" height="auto"/>
+    <img [alt]="'Logo of '  + logoname" [src]="imgLink" width="auto" height="auto" loading="lazy"/>
 
     <h2>{{ title }}</h2>
 

src/app/fl-conference/fl-conference.component.html

@@ -1,5 +1,5 @@
 <section class="fl-conference">
-    <img class="fl-conference-logo" alt="conference logo" src="./assets/images/logoicon.webp" />
+    <img class="fl-conference-logo" alt="conference logo" src="./assets/images/logoicon.webp" loading="lazy"/>
     <div class="fl-conference-nonlogo">
       <h2 class="fl-title">
         <span>Fundamental </span>

src/app/fl-design/fl-design.component.html

@@ -1,5 +1,5 @@
 <section class="fl-design">
-     <img class="fl-designimg1" src="./assets/images/up.webp" aria-hidden="true" role="presentation"/> 
+     <img class="fl-designimg1" src="./assets/images/up.webp" aria-hidden="true" role="presentation" loading="lazy"/> 
     <h2 class="fl-title">SAP Design System</h2>
     <p class="fl-text">
       Fundamental Libraries follow the SAP Design guidelines for all component
@@ -8,5 +8,5 @@ <h2 class="fl-title">SAP Design System</h2>
     </p>
 
     <a href="https://www.sap.com/canada/design/design-system.html" class="fl-button" title="explore" target="_blank" hreflang="en" rel="noopener noreferrer">explore</a>
-    <img class="fl-designimg2" src="./assets/images/down.webp" aria-hidden="true" role="presentation"/> 
+    <img class="fl-designimg2" src="./assets/images/down.webp" aria-hidden="true" role="presentation" loading="lazy"/> 
   </section>

src/app/fl-footer/fl-footer.component.html

@@ -7,13 +7,13 @@
         </p>
         <img
           class="fl-footer-img1"
-          src="./assets/images/headerlogo.webp" width="250" height="69.06" alt="fundamental library"
+          src="./assets/images/headerlogo.webp" width="250" height="69.06" alt="fundamental library" loading="lazy"
         />
       </div>
 
       <div class="fl-footer-container__rigth">
         <div class="fl-connect">
-          <img class="fl-connect-icon" alt="Connect Icon" src="./assets/images/connect_icon.webp" width="24" height="24" aria-hidden="true" role="presentation"/>
+          <img class="fl-connect-icon" alt="Connect Icon" src="./assets/images/connect_icon.webp" width="24" height="24" aria-hidden="true" role="presentation" loading="lazy"/>
           <h3 class="fl-footer-title">Connect</h3>
           <div class="fl-connect-list">
             <ul class="fl-connect-list__firstrow">
@@ -32,7 +32,7 @@ <h3 class="fl-footer-title">Connect</h3>
         <div class="fl-ourlibraries">
           <img
               class="fl-ourlibraries-icon" alt="Library Icon" aria-hidden="true" role="presentation"
-              src="./assets/images/libraryicon.webp" width="27" height="24.54"
+              src="./assets/images/libraryicon.webp" width="27" height="24.54" loading="lazy"
           />
           <h3 class="fl-footer-title">Our Libraries</h3>
           <ul class="fl-ourlibraries-list">
@@ -45,7 +45,7 @@ <h3 class="fl-footer-title">Our Libraries</h3>
         <div class="fl-resources">
           <img
               class="fl-resources-icon"
-              src="./assets/images/bannericon.webp" width="20" height="25" alt="Resources Icon" aria-hidden="true" role="presentation"
+              src="./assets/images/bannericon.webp" width="20" height="25" alt="Resources Icon" aria-hidden="true" role="presentation" loading="lazy"
           />
           <h3 class="fl-footer-title">Resources</h3>
           <ul class="fl-resources-list">
@@ -59,7 +59,7 @@ <h3 class="fl-footer-title">Resources</h3>
     <div class="fl-footer-policies">
       <div class="fl-policies-list">
         <a title="SAP page" target="_blank" hreflang="en" rel="noopener noreferrer" href="https://www.sap.com/canada/index.html"
-          ><img class="fl-footer-imgSAP" src="./assets/images/sapfootericon.webp" width="70" height="34.705" alt="SAP logo"
+          ><img class="fl-footer-imgSAP" src="./assets/images/sapfootericon.webp" width="70" height="34.705" alt="SAP logo" loading="lazy"
         /></a>
         <ul class="fl-policieslist-links">
           <li class="fl-policies"><a title="Privacy Policy" target="_blank" hreflang="en" rel="noopener noreferrer" href="https://www.sap.com/about/legal/privacy.html">Privacy Policy</a></li>

src/styles.scss

@@ -1,5 +1,11 @@
 :root {
-  --color-card-background: #cff1ff;
+  --fl-brand-color: #00677F;
+  --fl-brand-alt-color: #CFF1FF;
+  --fl-text-color: #001F28;
+  --fl-white-color: #FFFFFF;
+  --fl-black-color: #000000;
+  --fl-background-color: #FAFCFF;
+  --color-card-background: #DDF5FF;
 }
 
 html {
@@ -20,6 +26,30 @@ body {
   margin: 0;
 }
 
+@font-face {
+  font-family: "72";
+  src: url("~@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/72-Regular-full.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "72";
+  src: url("~@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/72-Bold-full.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "72";
+  src: url("~@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/72-Light-full.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
 @font-face {
   font-family: "SAP-icons";
   src: url("~@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/fonts/SAP-icons.woff")