added higher quality thumbnails for secure tool and volttron brochure…

…. Added a cta bellow the slideshow

README.md

@@ -37,6 +37,6 @@ Adding to submenu:
 Adding new image:
 - add image to /static/images/
 - use images/image_name.png as the path in markdown
-  *Note: images being added in html '{{absURL "images/DocumentImages/overviewOverlay.png"}}' or it will not render in github pages*
+  *Note: images being added in html '{{absURL "images/DocumentImages/overviewOverlay.jpg"}}' or it will not render in github pages*
 CSS Edits:
 - do NOT use the CSS in the theme, go to /assets/sass/custom.scss to make changes.

assets/js/main.js

@@ -3,6 +3,37 @@
     html5up.net | @ajlkn
     Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 */
+console.log("hi im javascript")
+document.addEventListener('DOMContentLoaded', function () {
+    const headers = document.querySelectorAll('.main-content a[name]');
+    console.log(headers)
+
+    const observerOptions = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.1,
+    };
+
+    const observerCallback = (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const name = entry.target.getAttribute('name');
+          const correspondingFigure = document.querySelector(`.AccomplishmentsRight .AccomplishmentFig[data-correspond="${name}"]`);
+
+          if (correspondingFigure) {
+            const offsetTop = entry.target.getBoundingClientRect().top + window.scrollY;
+            correspondingFigure.style.top = `${offsetTop}px`;
+          }
+        }
+      });
+    };
+
+    const observer = new IntersectionObserver(observerCallback, observerOptions);
+
+    headers.forEach((header) => {
+      observer.observe(header);
+    });
+  });
 
 (function($) {
 

assets/sass/custom.scss

@@ -28,6 +28,7 @@ img {vertical-align: middle;}
 $breakpoints: (
   default:   1920px,
   wide:      1680px,
+  laptop:    1518px,
   normal:    1280px,
   narrow:    980px,
   narrower:  840px,
@@ -56,6 +57,10 @@ $breakpoints: (
     margin-bottom: 24.8%;
   }
 
+  @include breakpoint(laptop) {
+    margin-bottom: 100%
+  }
+
   @include breakpoint(normal) {
     margin-bottom: 25%;
   }
@@ -117,6 +122,10 @@ $breakpoints: (
   z-index: -1; /* Optional: Move the image behind any potential content */
 }
 
+// CtA on the front page
+#introducing-volttron {
+  font-weight: bold;
+}
 
 
 /* Caption text */
@@ -286,21 +295,25 @@ $breakpoints: (
 
 // Handling Accomplishments styles 
 
+// .container {
+//   display: flex;
+//   justify-content: space-between;
+// }
+
+// .main-content {
+//   flex: 0 0 70%;
+//   margin-right: 20px;
+// }
+
 .AccomplishmentsRight {
-  flex: 0 0 30%; /* Adjust width as needed */
+  flex: 0 0 30%;
   position: relative;
 }
 
 .AccomplishmentsRight .AccomplishmentFig {
-  position: absolute; /* Easier hard coding */
+  position: absolute;
 }
 
-// Accomplishments sidebar with pictures hard coded
-#giving-control-to-smbs { top: 4em; }
-#getting-intelligent-with-the-grid { top: 22em; }
-#supporting-connected-communities { top: 50em}
-#connecting-home-appliances { top: 138em; }
-#creating-a-buildings-living-laboratory { top: 90em; }
 
 .AccomplishmentFig {
   @extend .SidebarFig;

layouts/partials/homepage/blocks/highlights.html

@@ -1,25 +1,9 @@
 <section id="cta" class="wrapper style3">
     <div class="container">
-        <header>
-            <h2>{{ .item.contents | markdownify }}</h2>
-
-            {{- with .item.button }}
-                <a href="{{ .urlLeft }}"  class ="imageLink">
-                    <img src="{{ .imageLeft | relURL }}" style = "max-width: 12vw;">
-
-                </a>
-
-                <a href="{{ .urlCentral }}"  class = "imageLink" style = "right: 30vw">
-                    <img src="{{ .imageCentral | relURL }}" style = "max-width: 12vw;"> 
-
-                </a>
-
-
-                <p>
-                    Eclipse VOLTTRON is sponsored by the Department of Energy<br>
-                    and Pacific Northwest National Laboratory, 2024.
-                </p> 
-            {{- end }}
+        <p id="introducing-volttron">
+            The Eclipse VOLTTRON open-source software 
+            platform offers users multiple attributes and benefits:
+        </p> 
         </header>
     </div>
 </section>

layouts/partials/sidebar/AboutSidebar.html

@@ -6,7 +6,7 @@ <h3>Related Materials</h3>
 
         <figure class = "SidebarFig">
             <a href='{{absURL "Documents/VOLTTRON_Efficient_Grid_2017.pdf"}}'>
-                <img src='{{absURL "images/DocumentImages/overviewOverlay.png"}}'> 
+                <img src='{{absURL "images/DocumentImages/overviewOverlay.jpg"}}'> 
                 <figcaption class = "caption" >Eclipse VOLTTRON Overview</figcaption>
             </a>
         </figure>

layouts/partials/sidebar/AccomplishmentsRight.html

@@ -1,21 +1,21 @@
 <section class="AccomplishmentsRight">
-    <figure class="AccomplishmentFig" id="giving-control-to-smbs">
+    <figure class="AccomplishmentFig" data-correspond="giving-control-to-smbs">
         <img src='{{absURL "images/AccomplishmentsImages/smb.png"}}' alt="SMB Image">
     </figure>
 
-    <figure class="AccomplishmentFig" id="getting-intelligent-with-the-grid">
+    <figure class="AccomplishmentFig" data-correspond="getting-intelligent-with-the-grid">
         <img src='{{absURL "images/AccomplishmentsImages/ILC.png"}}' >
     </figure>
 
-    <figure class="AccomplishmentFig" id="supporting-connected-communities">
+    <figure class="AccomplishmentFig" data-correspond="supporting-connected-communities">
         <img src='{{absURL "images/AccomplishmentsImages/supporting_connected_communites_brandon_jacoby.jpg"}}' >
     </figure>
 
-    <figure class="AccomplishmentFig" id="connecting-home-appliances" style="max-width: 90%;">
+    <figure class="AccomplishmentFig" data-correspond="connecting-home-appliances" style="max-width: 90%;">
         <img src='{{absURL "images/AccomplishmentsImages/EED_1787_FIG_HomesGraphicRev_v7_1600x1200 (1).png"}}' alt="Homes Graphic">
     </figure>
 
-    <figure class="AccomplishmentFig" id="creating-a-buildings-living-laboratory" style="max-width: 90%;">
+    <figure class="AccomplishmentFig" data-correspond="creating-a-buildings-living-laboratory" style="max-width: 90%;">
         <img src='{{absURL "images/AccomplishmentsImages/campus_2.png"}}' >
     </figure>
 </section>

layouts/partials/sidebar/BuildingsOperationsLeft.html

@@ -6,7 +6,7 @@ <h3>Related Materials</h3>
 
         <figure class="SidebarFig">
         <a href='{{absURL "Documents/VOLTTRON_Efficient_Grid_2017.pdf"}}'  >
-            <img src='{{absURL "images/DocumentImages/overviewOverlay.png"}}'  > 
+            <img src='{{absURL "images/DocumentImages/overviewOverlay.jpg"}}'  > 
             <figcaption class = "caption">Eclipse VOLTTRON Overview</figcaption>
         </a>
     </figure>

layouts/partials/sidebar/ConnectedHome.html

@@ -9,7 +9,7 @@ <h3>Related Materials</h3>
 
     <figure  class="SidebarFig">
         <a href='{{absURL "Documents/VOLTTRON_Brochure_V11_WEB.pdf"}}'  >
-            <img src='{{absURL "images/DocumentImages/overviewOverlay.png"}}'  > 
+            <img src='{{absURL "images/DocumentImages/overviewOverlay.jpg"}}'  > 
             <figcaption class = "caption">Eclipse VOLTTRON Overview</figcaption>
         </a>
     </figure>

layouts/partials/sidebar/DERSide.html

@@ -6,14 +6,14 @@ <h3>Related Materials</h3>
 
         <figure  class="SidebarFig">
         <a href='{{absURL "Documents/VOLTTRON_security_2017.pdf"}}'  >
-            <img src='{{absURL "images/DocumentImages/SecureImage.png"}}'  > 
+            <img src='{{absURL "images/DocumentImages/SecureImage.jpg"}}'  > 
             <figcaption class = "caption">Eclipse VOLTTRON Secuirty</figcaption>
         </a>
     </figure>
 
     <figure  class="SidebarFig">
         <a href='{{absURL "Documents/VOLTTRON_Brochure_V11_WEB.pdf"}}'  >
-            <img src='{{absURL "images/DocumentImages/overviewOverlay.png"}}'> 
+            <img src='{{absURL "images/DocumentImages/overviewOverlay.jpg"}}'> 
             <figcaption class = "caption">Eclipse VOLTTRON Overview</figcaption>
         </a>
     </figure>

layouts/partials/sidebar/DMLeft.html

@@ -12,7 +12,7 @@ <h3>Related Materials</h3>
 
     <figure class="SidebarFig">
         <a href='{{absURL "Documents/VOLTTRON_Brochure_V11_WEB.pdf"}}'  style = "  color:black">
-            <img src='{{absURL "images/DocumentImages/overviewOverlay.png"}}' style = "height: 250px; width: 200px;" > 
+            <img src='{{absURL "images/DocumentImages/overviewOverlay.jpg"}}' style = "height: 250px; width: 200px;" > 
             <figcaption class = "caption">Eclipse VOLTTRON Overview</figcaption>
         </a>
     </figure>

layouts/partials/sidebar/MarketSlnLeft.html

@@ -6,7 +6,7 @@ <h3>Related Materials</h3>
 
         <figure class="SidebarFig">
         <a href='{{absURL "Documents/VOLTTRON_Efficient_Grid_2017.pdf"}}'  >
-            <img src='{{absURL "images/DocumentImages/overviewOverlay.png"}}'  > 
+            <img src='{{absURL "images/DocumentImages/overviewOverlay.jpg"}}'  > 
             <figcaption class = "caption">Eclipse VOLTTRON Overview</figcaption>
         </a>
     </figure>

layouts/partials/sidebar/OpensourceSide.html

@@ -5,7 +5,7 @@ <h3>Related Materials</h3>
 
     <figure class="SidebarFig">
         <a href='{{absURL "Documents/VOLTTRON_Brochure_V11_WEB.pdf" }}' >
-            <img src='{{absURL "images/DocumentImages/overviewOverlay.png" }}'> 
+            <img src='{{absURL "images/DocumentImages/overviewOverlay.jpg" }}'> 
             <figcaption class = "caption">Eclipse VOLTTRON Overview</figcaption>
         </a>
     </figure>

layouts/partials/sidebar/PotentialSide.html

@@ -6,7 +6,7 @@ <h3>Related Materials</h3>
 
         <figure class="SidebarFig">
             <a href='{{absURL "Documents/VOLTTRON_buildings_2017.pdf" }}'  >
-                <img src='{{absURL "images/DocumentImages/overviewOverlay.png" }}'  > 
+                <img src='{{absURL "images/DocumentImages/overviewOverlay.jpg" }}'  > 
                 <figcaption class = "caption">Eclipse VOLTTRON Overview</figcaption>
                <br>
             </a>
@@ -29,7 +29,7 @@ <h3>Related Materials</h3>
     </figure>
     <figure class="SidebarFig">
         <a href='{{absURL "Documents/VOLTTRON_security_2017.pdf"}}'  >
-            <img src='{{absURL "images/DocumentImages/SecureImage.png"}}'  > 
+            <img src='{{absURL "images/DocumentImages/SecureImage.jpg"}}'  > 
             <figcaption class = "caption">Eclipse VOLTTRON Security</figcaption>
             <br>
         </a>

layouts/partials/sidebar/ScalableSide.html

@@ -5,7 +5,7 @@ <h3>Related Materials</h3>
 
     <figure class="sidebarFig">
         <a href='{{absURL "Documents/VOLTTRON_Brochure_V11_WEB.pdf"}}'>
-            <img src='{{absURL "images/DocumentImages/overviewOverlay.png"}}' > 
+            <img src='{{absURL "images/DocumentImages/overviewOverlay.jpg"}}' > 
             <figcaption class = "caption">Eclipse VOLTTRON Overview</figcaption>
         </a>
     </figure>

layouts/partials/sidebar/SecureSide.html

@@ -6,7 +6,7 @@ <h3>Related Materials</h3>
 
         <figure class="SidebarFig">
         <a href='{{absURL "Documents/VOLTTRON_security_2017.pdf"}}' >
-            <img src='{{absURL "images/DocumentImages/SecureImage.png"}}' > 
+            <img src='{{absURL "images/DocumentImages/SecureImage.jpg"}}' > 
             <figcaption class = "caption">Eclipse VOLTTRON Security</figcaption>
         </a>
     </figure>

layouts/partials/sidebar/developerSide.html

@@ -6,7 +6,7 @@ <h3>Related Materials</h3>
 
         <figure  class="SidebarFig">
         <a href='{{absURL "Documents/VOLTTRON_Efficient_Grid_2017.pdf"}}' >
-            <img src='{{absURL "images/DocumentImages/overviewOverlay.png"}}'> 
+            <img src='{{absURL "images/DocumentImages/overviewOverlay.jpg"}}'> 
             <figcaption class = "caption">Eclipse VOLTTRON Overview</figcaption>
         </a>
     </figure>

layouts/partials/sidebar/interopSide.html

@@ -14,7 +14,7 @@ <h3>Related Materials</h3>
 
     <figure class="SidebarFig">
         <a href='{{absURL "Documents/VOLTTRON_Brochure_V11_WEB.pdf"}}' >
-            <img src='{{absURL "images/DocumentImages/overviewOverlay.png"}}'  > 
+            <img src='{{absURL "images/DocumentImages/overviewOverlay.jpg"}}'  > 
             <figcaption class = "caption">Eclipse VOLTTRON Overview</figcaption>
         </a>
     </figure>