Updating nav and svaing stakeholder images locally

_data/pagelist.yml

@@ -6,11 +6,12 @@ pages:
     url: /about
   - page: LERs Explained
     url: /lers-explained
-  - page: Action Areas
-    url: /action-areas
-  - page: Resources
-    url: /resources
-  - page: Guidance
-    url: /ler-guidance
-  - page: Glossary
-    url: /glossary
+    subpages:
+      - page: Action Areas
+        url: /action-areas
+      - page: Resources
+        url: /resources
+      - page: Guidance
+        url: /ler-guidance
+      - page: Glossary
+        url: /glossary

_data/stakeholders-list.yml

@@ -3,7 +3,7 @@
 
 stakeholders:
   - name: Career Navigators
-    icon: https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/64e3ac967b3bf90d2587fa43_Frame%2012.svg
+    icon: career-navigators.svg
     icon-alt: An icon of a navigation path
     url: career-navigators
     action-areas: 
@@ -29,7 +29,7 @@ stakeholders:
           - Provide information and support to learners and earners on how to take advantage of skills-based career paths.
           - Offer wraparound career support and mentorship.
   - name: Credentialing Organizations
-    icon: https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/64e3ac967b3bf90d2587fa4f_Frame%205.svg
+    icon: credentialing-organizations.svg
     icon-alt: An icon of a certificate
     url: credentialing-organizations
     action-areas:
@@ -85,14 +85,14 @@ stakeholders:
           - Track data on effectiveness for institutions and learners — including competencies, skills and their associated rubrics within the curriculum.
           - Develop 'evidence' supporting skill/competency acquisition that has predictive validity.
   - name: Data Standards Bodies
-    icon: https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/64e3ac967b3bf90d2587fa56_Frame%207.svg
+    icon: data-standards-bodies.svg
     icon-alt: An icon of a globe with connections and tech symbols
     url: data-standards-bodies
     action-areas: 
     definition: Technical communities and organizations that develop and put forth specifications and standards to protect learner data and promote interoperability
     examples: W3C, 1EdTech, DIF, HR Open, Credential Engine
   - name: Employers
-    icon: https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/64e3ac967b3bf90d2587fa52_Frame%204.svg
+    icon: employers.svg
     icon-alt: An icon of a person in front of a business
     url: employers
     action-areas: 
@@ -102,14 +102,14 @@ stakeholders:
     definition: An individual, company or organization that pays for work. 
     examples: Large, medium and small enterprise businesses or companies, government or other agencies, non-profits or individuals.
   - name: Funders
-    icon: https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/64e3ac967b3bf90d2587fa4b_Frame%2010.svg
+    icon: funders.svg
     icon-alt: An icon of a coin 
     url: funders
     action-area:   
     definition: Those who aim to financially support activities and initiatives pertaining to LERs   
     examples: Foundations, corporate sponsors, and philanthropic individuals and organizations 
   - name: Governance
-    icon: https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/64e3ac967b3bf90d2587fa4a_Frame%2011.svg
+    icon: governance.svg
     icon-alt: An icon of two people in front of a government building
     url: governance 
     action-areas: 
@@ -120,7 +120,7 @@ stakeholders:
     definition: entities who define and implement policies and frameworks around education and workforce across institutions to support credentialing and workforce alignment that promote advancement and promote economic and academic advancement for their constituencies; non-governmental entities overseeing accreditation; communities, consortia and networks that work to align LER workstreams  
     examples: Boards, ministries, and departments of education and labor; legislators and champions, accreditation bodies, issuer registries, regulatingaccreditation organizations. 
   - name: HR Systems
-    icon: https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/64e3ac967b3bf90d2587fa58_Frame%209.svg
+    icon: hr-systems.svg
     icon-alt: An icon of two people and a gear
     url: hr-systems
     action-areas: 
@@ -131,7 +131,7 @@ stakeholders:
     definition: Applications and tools designed and sold to organizations whose Human Resource professionals manage and track employee recruitment, onboarding and performance. 
     examples: Human Resources Information Systems (HRIS), Applicant Tracking Systemsoftware (ATS)
   - name: Learners & Earners
-    icon: https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/64e3ac967b3bf90d2587fa5d_Frame%203.svg
+    icon: learners-earners.svg
     icon-alt: An icon of two people using a laptop
     url: learners-earners
     action-areas: 
@@ -141,15 +141,15 @@ stakeholders:
     definition: Individuals of any age engaging in learning and work through traditional or non-traditional means
     examples: College or university students, professionals learning on the job or through training programs, individuals pursuing skills-building life experiences
   - name: LER Solution Providers
-    icon: https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/64e3ac967b3bf90d2587fa53_Frame%206.svg
+    icon: solution-providers.svg
     icon-alt: An icon of a lightbulb
     url: solution-providers
     action-areas:
       - defining
     definition: Businesses and organizations, vendors and non-profit organizations which develop technology solutions, tools, and infrastructure for issuing, storing, sharing, or verifying LERs. 
     examples: Web-hosted badging platforms, verifiable credential infrastructure, microservices, and issuer tool providers, digital wallet providers, software developers, identity solution providers 
   - name: Supporting Systems
-    icon: https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/64e3ac967b3bf90d2587fa48_Frame%208.svg
+    icon: supporting-systems.svg
     icon-alt: An icon of a heart
     url: supporting-systems
     action-areas: 

_includes/footer.html

@@ -2,7 +2,7 @@
 <div class="footer">
   <div class="container">
 
-    <div class="footer-images"><div class="text-block">In collaboration with</div><img src="https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/64e3ac967b3bf90d2587fa61_NS-Logo-Main-Black%201.svg" loading="lazy" alt=""/><img src="https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/6504ceae19ad47b83f26b98a_LEFLarge.png" loading="lazy" width="300" sizes="(max-width: 991px) 100vw, 300px" alt="" srcset="https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/6504ceae19ad47b83f26b98a_LEFLarge-p-500.png 500w, https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/6504ceae19ad47b83f26b98a_LEFLarge-p-800.png 800w, https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/6504ceae19ad47b83f26b98a_LEFLarge-p-1080.png 1080w, https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/6504ceae19ad47b83f26b98a_LEFLarge.png 1868w"/><img src="https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/64e3ac967b3bf90d2587fa59_by%201.svg" loading="lazy" alt=""/><div class="cta-links"><a href="https://assets.website-files.com/64e3ac967b3bf90d2587fa3c/652d4e0021f31549304aaf0f_LER%20Ecosytem%20Map.pdf" class="nav-link w-inline-block"><h3 class="nav-heading">DOWNLOAD THE PDF</h3></a><a href="https://forms.gle/j4mMrFCtnFksqgDg8" target="_blank" class="nav-link w-inline-block"><h3 class="nav-heading">CONTACT US</h3></a></div>
+    <div class="footer-images"><div class="text-block">In collaboration with</div><img src="https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/64e3ac967b3bf90d2587fa61_NS-Logo-Main-Black%201.svg" loading="lazy" alt=""/><img src="https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/6504ceae19ad47b83f26b98a_LEFLarge.png" loading="lazy" width="300" sizes="(max-width: 991px) 100vw, 300px" alt="" srcset="https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/6504ceae19ad47b83f26b98a_LEFLarge-p-500.png 500w, https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/6504ceae19ad47b83f26b98a_LEFLarge-p-800.png 800w, https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/6504ceae19ad47b83f26b98a_LEFLarge-p-1080.png 1080w, https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/6504ceae19ad47b83f26b98a_LEFLarge.png 1868w"/><img src="https://assets-global.website-files.com/64e3ac967b3bf90d2587fa3c/64e3ac967b3bf90d2587fa59_by%201.svg" loading="lazy" alt=""/><div class="cta-links"><a href="https://assets.website-files.com/64e3ac967b3bf90d2587fa3c/652d4e0021f31549304aaf0f_LER%20Ecosytem%20Map.pdf" class="nav-link w-inline-block"><h3 class="nav-heading">DOWNLOAD THE PDF</h3></a><a href="https://forms.gle/j4mMrFCtnFksqgDg8" target="_blank" class="nav-link w-inline-block"><h3 class="nav-heading">CONTACT US</h3></a></div>v
 
 </div> <!-- end of container -->
 </div> <!-- end of footer -->  

_includes/navigation.html

@@ -5,32 +5,44 @@
     <a id="navbar-logo" class="navbar-brand logo-image" href="{{ site.baseurl }}/">LER Ecosystem Map<!--<img src="images/DCC_navbar-logo.png" alt="Digital Credentials Consortium">--></a>
 
     <!-- Toggle button when page list is collapsed -->
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
     </button>
 
     <div class="collapse navbar-collapse" id="navbarToggler">
-      <ul class="navbar-nav ml-auto">
+      <ul class="navbar-nav ml-auto mb-2 mb-lg-0">
         <!-- The list of pages is pulled from /_data/pagelist.yml. Currently it allows for two levels of page hierarchy. -->
         {% for item in site.data.pagelist.pages %}
           {% if item.page == "Stakeholders" %}
             <li class="nav-item dropdown">
               <a class="nav-link  dropdown-toggle" href="{{ site.baseurl }}{{ item.url }}" data-bs-toggle="dropdown">{{ item.page }}</a>
               <ul class="dropdown-menu">
-              <!--  {% for entry in item.subpages %}
-                  <li><a class="dropdown-item" href="{{ site.baseurl }}{{ entry.url }}"><img src="{{ entry.icon }}" loading="lazy" alt="{{ entry.icon-alt }}" class="w-25"/>{{ entry.page }}</a></li>
-                {% endfor %}-->
                 {% for entry in site.data.stakeholders-list.stakeholders %}
-
-                  <li><a class="dropdown-item" href="{{ site.baseurl }}/stakeholder/{{ entry.url }}"><img src="{{ entry.icon }}" loading="lazy" alt="{{ entry.icon-alt }}" class="w-25"/>{{ entry.name}}</a></li>
+                  <li><a class="dropdown-item" href="{{ site.baseurl }}/stakeholder/{{ entry.url }}"><img src="{{ base }}/images/{{ entry.icon }}" loading="lazy" alt="{{ entry.icon-alt }}" class="w-25"/>{{ entry.name}}</a></li>
                 {% endfor %}
               </ul>
             </li>
+
+          {% elsif item.page == "LERs Explained" %}
+
+            <li class="nav-item dropdown">
+              <a class="nav-link  dropdown-toggle" href="{{ site.baseurl }}{{ item.url }}" data-bs-toggle="dropdown">{{ item.page }}</a>
+                <ul class="dropdown-menu lers-explained">
+                  {% for entry in item.subpages %}
+                  <!--  <li><a class="dropdown-item" href="{{ site.baseurl }}{{ entry.url }}">{{ entry.page }}</a></li>-->
+                 <!-- <li><a class="dropdown-item" href="{{ site.baseurl }}{{ entry.url }}"><img src="{{ base }}/images/yellow-bullet.png" loading="lazy" alt="list-item-bullet"/> {{ entry.page}}</a></li> -->
+                  <li><a class="dropdown-item" href="{{ site.baseurl }}{{ entry.url }}">{{ entry.page}}</a></li>
+
+                  {% endfor %}
+                </ul>
+            </li> 
+
           {% else %}
+
             <li class="nav-item">
                 <a class="nav-link page-scroll" href="{{ site.baseurl }}{{ item.url }}" data-target="#navbarToggler">{{ item.page }}</a>
             </li>
-          {% endif %}
+          {% endif %} 
         {% endfor %}
       </ul>
     </div>

_stakeholders/career-navigators.md

@@ -6,7 +6,7 @@ title: LER Ecosystem Map - Career Navigators
 {% if item.name == "Career Navigators" %}
 <div class="row">
 <div class="col-sm-2">
-<img class="w-100" src="{{ item.icon }}" loading="lazy" alt="{{ item.icon-alt }}"/>
+<img class="w-100" src="../images/{{ item.icon }}" loading="lazy" alt="{{ item.icon-alt }}"/>
 </div>
 <div class="col-sm-8">
 <h1>{{ item.name }}</h1>

_stakeholders/credentialing-organizations.md

@@ -6,7 +6,7 @@ title: LER Ecosystem Map - Credentialing Organizations
 {% if item.name == "Credentialing Organizations" %}
 <div class="row">
 <div class="col-sm-2">
-<img class="w-100" src="{{ item.icon }}" loading="lazy" alt="{{ item.icon-alt }}"/>
+<img class="w-100" src="../images/{{ item.icon }}" loading="lazy" alt="{{ item.icon-alt }}"/>
 </div>
 <div class="col-sm-8">
 <h1>{{ item.name }}</h1>

_stakeholders/data-standards-bodies.md

@@ -6,7 +6,7 @@ title: LER Ecosystem Map - Data Standards Bodies
 {% if item.name == "Data Standards Bodies" %}
 <div class="row">
 <div class="col-sm-2">
-<img class="w-100" src="{{ item.icon }}" loading="lazy" alt="{{ item.icon-alt }}"/>
+<img class="w-100" src="../images/{{ item.icon }}" loading="lazy" alt="{{ item.icon-alt }}"/>
 </div>
 <div class="col-sm-8">
 <h1>{{ item.name }}</h1>

_stakeholders/employers.md

@@ -6,7 +6,7 @@ title: LER Ecosystem Map - Employers
 {% if item.name == "Employers" %}
 <div class="row">
 <div class="col-sm-2">
-<img class="w-100" src="{{ item.icon }}" loading="lazy" alt="{{ item.icon-alt }}"/>
+<img class="w-100" src="../images/{{ item.icon }}" loading="lazy" alt="{{ item.icon-alt }}"/>
 </div>
 <div class="col-sm-10">
 <h1>{{ item.name }}</h1>

_stakeholders/funders.md

@@ -6,7 +6,7 @@ title: LER Ecosystem Map - Funders
 {% if item.name == "Funders" %}
 <div class="row">
 <div class="col-sm-2">
-<img class="w-100" src="{{ item.icon }}" loading="lazy" alt="{{ item.icon-alt }}"/>
+<img class="w-100" src="../images/{{ item.icon }}" loading="lazy" alt="{{ item.icon-alt }}"/>
 </div>
 <div class="col-sm-10">
 <h1>{{ item.name }}</h1>

_stakeholders/governance.md

@@ -6,7 +6,7 @@ title: LER Ecosystem Map - Governance
 {% if item.name == "Governance" %}
 <div class="row">
 <div class="col-sm-2">
-<img class="w-100" src="{{ item.icon }}" loading="lazy" alt="{{ item.icon-alt }}"/>
+<img class="w-100" src="../images/{{ item.icon }}" loading="lazy" alt="{{ item.icon-alt }}"/>
 </div>
 <div class="col-sm-10">
 <h1>{{ item.name }}</h1>

_stakeholders/hr-systems.md

@@ -6,7 +6,7 @@ title: LER Ecosystem Map - HR Systems
 {% if item.name == "HR Systems" %}
 <div class="row">
 <div class="col-sm-2">
-<img class="w-100" src="{{ item.icon }}" loading="lazy" alt="{{ item.icon-alt }}"/>
+<img class="w-100" src="../images/{{ item.icon }}" loading="lazy" alt="{{ item.icon-alt }}"/>
 </div>
 <div class="col-sm-10">
 <h1>{{ item.name }}</h1>

_stakeholders/learners-earners.md

@@ -6,7 +6,7 @@ title: LER Ecosystem Map - Learners & Earners
 {% if item.name == "Learners & Earners" %}
 <div class="row">
 <div class="col-sm-2">
-<img class="w-100" src="{{ item.icon }}" loading="lazy" alt="{{ item.icon-alt }}"/>
+<img class="w-100" src="../images/{{ item.icon }}" loading="lazy" alt="{{ item.icon-alt }}"/>
 </div>
 <div class="col-sm-10">
 <h1>{{ item.name }}</h1>

_stakeholders/solution-providers.md

@@ -6,7 +6,7 @@ title: LER Ecosystem Map - LER Solution Providers
 {% if item.name == "LER Solution Providers" %}
 <div class="row">
 <div class="col-sm-2">
-<img class="w-100" src="{{ item.icon }}" loading="lazy" alt="{{ item.icon-alt }}"/>
+<img class="w-100" src="../images/{{ item.icon }}" loading="lazy" alt="{{ item.icon-alt }}"/>
 </div>
 <div class="col-sm-10">
 <h1>{{ item.name }}</h1>

_stakeholders/supporting-systems.md

@@ -6,7 +6,7 @@ title: LER Ecosystem Map - Supporting Systems
 {% if item.name == "Supporting Systems" %}
 <div class="row">
 <div class="col-sm-2">
-<img class="w-100" src="{{ item.icon }}" loading="lazy" alt="{{ item.icon-alt }}"/>
+<img class="w-100" src="../images/{{ item.icon }}" loading="lazy" alt="{{ item.icon-alt }}"/>
 </div>
 <div class="col-sm-10">
 <h1>{{ item.name }}</h1>

css/styles.css

@@ -439,7 +439,7 @@ li.nav-item, .dropdown-menu li {
 .navbar .nav-item.dropdown.show .nav-link,
 .navbar .nav-item .nav-link:hover,
 a.dropdown-item:hover {
-  color: var(--maroon);
+  color: var(--orange);
 }
 
 .navbar .dropdown-menu {
@@ -453,6 +453,34 @@ a.dropdown-item:hover {
 	min-width:19rem;
 }
 
+.dropdown-menu.show.lers-explained {
+  min-width:13rem;
+}
+
+.dropdown-menu.show.lers-explained li {
+  padding: .5rem;
+}
+
+
+.link-block {
+  width: 22vw;
+  height: 20vh;
+  background-color: var(--orange);
+  border: 1px solid #000;
+  border-radius: 1.25rem;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  display: flex;
+}
+
+
+
+
+
+
+
+
 .dropdown-item:hover{
   background-color: var(--white);
 }