update

dist/distill.bundle.js

@@ -2146,7 +2146,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
   function bylineTemplate(frontMatter) {
     return "\n    <div class=\"byline grid\">\n      <div>\n          <h3>Authors</h3>\n          <div>\n              ".concat(frontMatter.authors.map(function (author, i) {
       return "\n              <span class=\"author\">\n        ".concat(author.personalURL ? "\n          <a class=\"name\" href=\"".concat(author.personalURL, "\">").concat(author.name) + (i + 1 < frontMatter.authors.length ? "," : "") + "</a>" : "\n          <span class=\"name\">".concat(author.name) + (i + 1 < frontMatter.authors.length ? "," : "") + "</span>", "\n      </span>\n              ");
-    }).join(''), "\n          </div>\n      </div>\n      <div >\n          <h3>Affiliation</h3>\n          <div><a href=\"https://huggingface.co/\">Hugging Face</a>\n          </div>\n      </div>\n      <div >\n          <h3>Published</h3>\n          <div>Feb 19, 2025</div>\n      </div>\n    </div>\n    <div class=\"side pdf-download\">\n      <a href=\"https://huggingface.co/spaces/nanotron/ultrascale-playbook/resolve/main/The_Ultra-Scale_Playbook_Training_LLMs_on_GPU_Clusters.pdf\">Download PDF\n      <br>\n      <img style=\"width: 32px;\" src=\"../assets/images/256px-PDF.png\" alt=\"PDF\"></a>\n      \n    </div>\n");
+    }).join(''), "\n          </div>\n      </div>\n      <div >\n          <h3>Affiliation</h3>\n          <div><a href=\"https://huggingface.co/\">Hugging Face</a>\n          </div>\n      </div>\n      <div >\n          <h3>Published</h3>\n          <div>Feb 19, 2025</div>\n      </div>\n    </div>\n        <div class=\"order-button-container-second\">\n            <button class=\"order-button-second\" onclick=\"window.open('https://www.lulu.com/shop/nouamane-tazi-and-ferdinand-mom-and-haojun-zhao-and-phuc-nguyen/the-ultra-scale-playbook/paperback/product-45yk9dj.html?page=1&pageSize=4', '_blank')\">\n                Order Book\n            </button>\n        </div>\n\n    <!-- <div class=\"side pdf-download\">\n  <a href=\"https://huggingface.co/spaces/nanotron/ultrascale-playbook/resolve/main/The_Ultra-Scale_Playbook_Training_LLMs_on_GPU_Clusters.pdf\">Download PDF\n  <br>\n  <img style=\"width: 32px;\" src=\"../assets/images/256px-PDF.png\" alt=\"PDF\"></a>\n      \n</div> -->\n");
   }
   var Byline = /*#__PURE__*/function (_HTMLElement4) {
     function Byline() {

dist/style.css

@@ -597,6 +597,47 @@ select[name="presets"] {
     border-radius: 8px;
 }
 
+.order-button-second {
+            background: linear-gradient(135deg, #6DB4C4, #D4A5B8);
+            color: white;
+            font-size: 18px;
+            font-weight: 600;
+            padding: 20px 20px;
+            border: none;
+            border-radius: 12px;
+            cursor: pointer;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+.order-button-second:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
+}
+
+.order-button:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.order-button-second::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
+    transition: left 0.5s ease;
+}
+
+.order-button-second:hover::before {
+    left: 100%;
+}
+
 .order-button {
             background: linear-gradient(135deg, #6DB4C4, #D4A5B8);
             color: white;
@@ -638,6 +679,12 @@ select[name="presets"] {
 .order-button:hover::before {
     left: 100%;
 }
+.order-button-container-second {
+    /* display: flex; */
+    justify-content: center;
+    margin: 0px 0;
+}
+
 .order-button-container {
     display: flex;
     justify-content: center;

src/distill.js

@@ -2105,12 +2105,18 @@ d-appendix > distill-appendix {
           <div>Feb 19, 2025</div>
       </div>
     </div>
-    <div class="side pdf-download">
-      <a href="https://huggingface.co/spaces/nanotron/ultrascale-playbook/resolve/main/The_Ultra-Scale_Playbook_Training_LLMs_on_GPU_Clusters.pdf">Download PDF
-      <br>
-      <img style="width: 32px;" src="../assets/images/256px-PDF.png" alt="PDF"></a>
+        <div class="order-button-container-second">
+            <button class="order-button-second" onclick="window.open('https://www.lulu.com/shop/nouamane-tazi-and-ferdinand-mom-and-haojun-zhao-and-phuc-nguyen/the-ultra-scale-playbook/paperback/product-45yk9dj.html?page=1&pageSize=4', '_blank')">
+                Order Book
+            </button>
+        </div>
+
+    <!-- <div class="side pdf-download">
+  <a href="https://huggingface.co/spaces/nanotron/ultrascale-playbook/resolve/main/The_Ultra-Scale_Playbook_Training_LLMs_on_GPU_Clusters.pdf">Download PDF
+  <br>
+  <img style="width: 32px;" src="../assets/images/256px-PDF.png" alt="PDF"></a>
       
-    </div>
+</div> -->
 `;
   }
 

src/style.css

@@ -597,6 +597,47 @@ select[name="presets"] {
     border-radius: 8px;
 }
 
+.order-button-second {
+            background: linear-gradient(135deg, #6DB4C4, #D4A5B8);
+            color: white;
+            font-size: 18px;
+            font-weight: 600;
+            padding: 20px 20px;
+            border: none;
+            border-radius: 12px;
+            cursor: pointer;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+.order-button-second:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
+}
+
+.order-button:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.order-button-second::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
+    transition: left 0.5s ease;
+}
+
+.order-button-second:hover::before {
+    left: 100%;
+}
+
 .order-button {
             background: linear-gradient(135deg, #6DB4C4, #D4A5B8);
             color: white;
@@ -638,6 +679,12 @@ select[name="presets"] {
 .order-button:hover::before {
     left: 100%;
 }
+.order-button-container-second {
+    /* display: flex; */
+    justify-content: center;
+    margin: 0px 0;
+}
+
 .order-button-container {
     display: flex;
     justify-content: center;