Deployed 1af9ed1 with MkDocs version: 1.5.3

project-lighter · Nov 21, 2023 · e2fd64b · e2fd64b
1 parent cd83f37
commit e2fd64b
Show file tree

Hide file tree

Showing 7 changed files with 192 additions and 76 deletions.
diff --git a/index.css b/index.css
@@ -260,8 +260,8 @@
   justify-content: center;
 }
 .home-details1 {
-  width: 100%;
-  height: 989px;
+  width: 40%;
+  height: 1200px;
   display: flex;
   max-width: var(--dl-size-size-maxwidth);
   align-items: center;
@@ -273,7 +273,7 @@
 }
 .home-container03 {
   flex: 1;
-  width: 870px;
+  width: 40%;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
@@ -450,7 +450,7 @@
   flex: 0 0 auto;
   width: auto;
   height: auto;
-  display: flex;
+  display: none;
   align-items: flex-start;
   justify-content: center;
 }
@@ -525,16 +525,16 @@
     line-height: 1.6;
   }
   .home-details1 {
-    width: 100%;
-    height: 839px;
+    width: 40%;
+    height: 1200px;
     max-width: 100%;
     padding-top: var(--dl-space-space-sixunits);
     padding-left: var(--dl-space-space-sixunits);
     padding-right: var(--dl-space-space-sixunits);
     padding-bottom: var(--dl-space-space-sixunits);
   }
   .home-container03 {
-    width: 100%;
+    width: 40%;
   }
   .home-details-heading {
     width: 100%;
@@ -622,7 +622,18 @@
   .home-container12 {
     flex-direction: column;
   }
+  .home-container03{
+    width: 100%;
+  }
+
+  .home-details1{
+    width: 100%;
+  }
+  .code-comp{
+    position: inherit;
+  }
 }
+
 @media(max-width: 767px) {
   .home-header {
     padding-left: var(--dl-space-space-twounits);
@@ -683,6 +694,16 @@
   .home-container12 {
     flex-direction: column;
   }
+  .home-container03{
+    width: 100%;
+  }
+
+  .home-details1{
+    width: 100%;
+  }
+  .code-comp{
+    position:relative;
+  }
 }
 @media(max-width: 479px) {
   .home-header {
@@ -707,9 +728,16 @@
     margin-top: var(--dl-space-space-unit);
     margin-left: 0px;
   }
-  .home-container03 {
+  .home-container03{
     width: 100%;
   }
+
+  .home-details1{
+    width: 100%;
+  }
+  .code-comp{
+    position:relative;
+  }
   .home-features {
     padding-top: var(--dl-space-space-twounits);
     padding-left: var(--dl-space-space-unit);

diff --git a/index.html b/index.html
@@ -143,17 +143,17 @@ <h1 class="home-hero-heading heading1">Lighter</h1>
                 <button class="home-hero-button2 button" onclick="location.href='https://github.com/project-lighter/lighter'" style="font-size:24px">
                  <i class="fa fa-github"></i>
 
-                  Github&nbsp;→
+                  Github
                 </button>
               </div>
             </div>
           </div>
         </div>
         <div class="home-details">
-          <div class="home-details1" style="width: 39%;">
+          <div class="home-details1">
             <div class="home-container03">
               <h2 class="home-details-heading heading2">
-                <span>Say goodbye to messy scripts and notebooks.</span>
+                <span>Say goodbye to messy scripts and forgetting parameters.</span>
                 <br />
                 <br />
               </h2>
@@ -162,18 +162,23 @@ <h2 class="home-details-heading heading2">
                 Lighter is here to help you organize your experiments and make
                 sense of what you ran (even years ago). 
                 <br/><br/>
-                Join the community of reproducibility and
-                transparency!!
+                Join us in our reproducibility and
+                transparency journey!!
               </span>
+              <button id="toggleButton">See how we compare&nbsp;→</button>
+
             </div>
           </div>
-          <div class="code-comp" style="width: 60%;">
-                <img id="before-code" src="assets/images/PL_demo.png" class="code">
-               </img>
-               <img id="after-code" src="assets/images/Lighter_demo.png" class="code">
-              </img>
+          <div class="code-comp">
+            <img id="before-code" src="assets/images/PL_demo.png" class="code visible">
+           </img>
+           <img id="after-code" src="assets/images/Lighter_demo.png" class="code hidden">
+          </img>
           </div>
-        </div>
+
+      </div>
+
+
         <div class="home-features">
           <h1 class="home-text07">
             <span>Features</span>
@@ -328,5 +333,32 @@ <h2 class="feature-card4-text"><span>Lorem ipsum</span></h2>
       data-section-id="navbar"
       src="https://unpkg.com/@teleporthq/teleport-custom-scripts"
     ></script>
+    <script>
+      document.getElementById('toggleButton').addEventListener('click', function() {
+        var beforeCode = document.getElementById('before-code');
+        var afterCode = document.getElementById('after-code');
+        var button = document.getElementById('toggleButton');
+
+        if (beforeCode.classList.contains('visible')) {
+          beforeCode.classList.remove('visible');
+          beforeCode.classList.add('hidden');
+          afterCode.classList.remove('hidden');
+          afterCode.classList.add('visible');
+          button.style.backgroundColor = "#792EE5";
+          button.textContent = "Compare PL→";
+        } else {
+          beforeCode.classList.add('visible');
+          beforeCode.classList.remove('hidden');
+          afterCode.classList.add('hidden');
+          afterCode.classList.remove('visible');
+          button.style.backgroundColor = "#469AA3";
+          button.textContent = "Compare Lighter →";
+
+
+
+        }
+      });
+
+    </script>
   </body>
 </html>
diff --git a/overrides/index.css b/overrides/index.css
@@ -260,8 +260,8 @@
   justify-content: center;
 }
 .home-details1 {
-  width: 100%;
-  height: 989px;
+  width: 40%;
+  height: 1200px;
   display: flex;
   max-width: var(--dl-size-size-maxwidth);
   align-items: center;
@@ -273,7 +273,7 @@
 }
 .home-container03 {
   flex: 1;
-  width: 870px;
+  width: 40%;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
@@ -450,7 +450,7 @@
   flex: 0 0 auto;
   width: auto;
   height: auto;
-  display: flex;
+  display: none;
   align-items: flex-start;
   justify-content: center;
 }
@@ -525,16 +525,16 @@
     line-height: 1.6;
   }
   .home-details1 {
-    width: 100%;
-    height: 839px;
+    width: 40%;
+    height: 1200px;
     max-width: 100%;
     padding-top: var(--dl-space-space-sixunits);
     padding-left: var(--dl-space-space-sixunits);
     padding-right: var(--dl-space-space-sixunits);
     padding-bottom: var(--dl-space-space-sixunits);
   }
   .home-container03 {
-    width: 100%;
+    width: 40%;
   }
   .home-details-heading {
     width: 100%;
@@ -622,7 +622,18 @@
   .home-container12 {
     flex-direction: column;
   }
+  .home-container03{
+    width: 100%;
+  }
+
+  .home-details1{
+    width: 100%;
+  }
+  .code-comp{
+    position: inherit;
+  }
 }
+
 @media(max-width: 767px) {
   .home-header {
     padding-left: var(--dl-space-space-twounits);
@@ -683,6 +694,16 @@
   .home-container12 {
     flex-direction: column;
   }
+  .home-container03{
+    width: 100%;
+  }
+
+  .home-details1{
+    width: 100%;
+  }
+  .code-comp{
+    position:relative;
+  }
 }
 @media(max-width: 479px) {
   .home-header {
@@ -707,9 +728,16 @@
     margin-top: var(--dl-space-space-unit);
     margin-left: 0px;
   }
-  .home-container03 {
+  .home-container03{
     width: 100%;
   }
+
+  .home-details1{
+    width: 100%;
+  }
+  .code-comp{
+    position:relative;
+  }
   .home-features {
     padding-top: var(--dl-space-space-twounits);
     padding-left: var(--dl-space-space-unit);

diff --git a/overrides/index.html b/overrides/index.html
@@ -143,17 +143,17 @@ <h1 class="home-hero-heading heading1">Lighter</h1>
                 <button class="home-hero-button2 button" onclick="location.href='https://github.com/project-lighter/lighter'" style="font-size:24px">
                  <i class="fa fa-github"></i>
 
-                  Github&nbsp;→
+                  Github
                 </button>
               </div>
             </div>
           </div>
         </div>
         <div class="home-details">
-          <div class="home-details1" style="width: 39%;">
+          <div class="home-details1">
             <div class="home-container03">
               <h2 class="home-details-heading heading2">
-                <span>Say goodbye to messy scripts and notebooks.</span>
+                <span>Say goodbye to messy scripts and forgetting parameters.</span>
                 <br />
                 <br />
               </h2>
@@ -162,18 +162,23 @@ <h2 class="home-details-heading heading2">
                 Lighter is here to help you organize your experiments and make
                 sense of what you ran (even years ago). 
                 <br/><br/>
-                Join the community of reproducibility and
-                transparency!!
+                Join us in our reproducibility and
+                transparency journey!!
               </span>
+              <button id="toggleButton">See how we compare&nbsp;→</button>
+
             </div>
           </div>
-          <div class="code-comp" style="width: 60%;">
-                <img id="before-code" src="assets/images/PL_demo.png" class="code">
-               </img>
-               <img id="after-code" src="assets/images/Lighter_demo.png" class="code">
-              </img>
+          <div class="code-comp">
+            <img id="before-code" src="assets/images/PL_demo.png" class="code visible">
+           </img>
+           <img id="after-code" src="assets/images/Lighter_demo.png" class="code hidden">
+          </img>
           </div>
-        </div>
+
+      </div>
+
+
         <div class="home-features">
           <h1 class="home-text07">
             <span>Features</span>
@@ -328,5 +333,32 @@ <h2 class="feature-card4-text"><span>Lorem ipsum</span></h2>
       data-section-id="navbar"
       src="https://unpkg.com/@teleporthq/teleport-custom-scripts"
     ></script>
+    <script>
+      document.getElementById('toggleButton').addEventListener('click', function() {
+        var beforeCode = document.getElementById('before-code');
+        var afterCode = document.getElementById('after-code');
+        var button = document.getElementById('toggleButton');
+
+        if (beforeCode.classList.contains('visible')) {
+          beforeCode.classList.remove('visible');
+          beforeCode.classList.add('hidden');
+          afterCode.classList.remove('hidden');
+          afterCode.classList.add('visible');
+          button.style.backgroundColor = "#792EE5";
+          button.textContent = "Compare PL→";
+        } else {
+          beforeCode.classList.add('visible');
+          beforeCode.classList.remove('hidden');
+          afterCode.classList.add('hidden');
+          afterCode.classList.remove('visible');
+          button.style.backgroundColor = "#469AA3";
+          button.textContent = "Compare Lighter →";
+
+
+
+        }
+      });
+
+    </script>
   </body>
 </html>