ok

2024/new/css/mystyle.css

@@ -202,6 +202,19 @@ footer {
     color: #262626;
 }
 
+.modal-link {
+    padding: 9px;
+    background-color: #d8d8d8;
+    border-radius: 8px;
+    color: black !important;
+    font-weight: bold;
+    text-decoration: none !important;
+}
+
+.modal-link:hover {
+    color: rgba(4, 112, 162, 0.976) !important;
+}
+
 /* Add Animation */
 @-webkit-keyframes animatetop {
     from {
@@ -247,18 +260,19 @@ footer {
     background-color: #6464d6;
     color: #f7f7f7f3;
     text-align: center;
+    font-size: 1.5em;;
 }
 
 .modal-body {
     padding: 2px 16px;
 }
 
 .modal-footer {
-    padding: 2px 6px;
+    padding: 20px 20px 20px 20px;
     background-color: #6464d6;
     color: #f7f7f7f3;
-    text-align: center;
-    font-weight: bold
+    text-align: center !important;
+    font-weight: bold;
 }
 
 /* The modal setup ends here */
@@ -273,4 +287,25 @@ footer {
     text-align: left;
     visibility: visible !important;
     /* ios hack? */
-}
+}
+
+
+#toTop {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    right: 30px;
+    z-index: 99;
+    font-size: 18px;
+    border: none;
+    outline: none;
+    background-color: rgb(188, 188, 188);
+    color: white;
+    cursor: pointer;
+    padding: 15px;
+    border-radius: 20px;
+  }
+
+  #toTop:hover {
+    background-color: #555;
+  }

2024/new/css/style.css

@@ -13,87 +13,87 @@
   font-style: normal;
   font-weight: normal;
   font-display: swap;
-  src: url('../fonts/LM-regular.woff2') format('woff2'),
-    url('../fonts/LM-regular.woff') format('woff'),
-    url('../fonts/LM-regular.ttf') format('truetype');
+  src: url('./fonts/LM-regular.woff2') format('woff2'),
+    url('./fonts/LM-regular.woff') format('woff'),
+    url('./fonts/LM-regular.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Latin Modern';
   font-style: italic;
   font-weight: normal;
   font-display: swap;
-  src: url('../fonts/LM-italic.woff2') format('woff2'),
-    url('../fonts/LM-italic.woff') format('woff'),
-    url('../fonts/LM-italic.ttf') format('truetype');
+  src: url('./fonts/LM-italic.woff2') format('woff2'),
+    url('./fonts/LM-italic.woff') format('woff'),
+    url('./fonts/LM-italic.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Latin Modern';
   font-style: normal;
   font-weight: bold;
   font-display: swap;
-  src: url('../fonts/LM-bold.woff2') format('woff2'),
-    url('../fonts/LM-bold.woff') format('woff'),
-    url('../fonts/LM-bold.ttf') format('truetype');
+  src: url('./fonts/LM-bold.woff2') format('woff2'),
+    url('./fonts/LM-bold.woff') format('woff'),
+    url('./fonts/LM-bold.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Latin Modern';
   font-style: italic;
   font-weight: bold;
   font-display: swap;
-  src: url('../fonts/LM-bold-italic.woff2') format('woff2'),
-    url('../fonts/LM-bold-italic.woff') format('woff'),
-    url('../fonts/LM-bold-italic.ttf') format('truetype');
+  src: url('./fonts/LM-bold-italic.woff2') format('woff2'),
+    url('./fonts/LM-bold-italic.woff') format('woff'),
+    url('./fonts/LM-bold-italic.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Libertinus';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
-  src: url('../fonts/Libertinus-regular.woff2') format('woff2');
+  src: url('./fonts/Libertinus-regular.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'Libertinus';
   font-style: italic;
   font-weight: normal;
   font-display: swap;
-  src: url('../fonts/Libertinus-italic.woff2') format('woff2');
+  src: url('./fonts/Libertinus-italic.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'Libertinus';
   font-style: normal;
   font-weight: bold;
   font-display: swap;
-  src: url('../fonts/Libertinus-bold.woff2') format('woff2');
+  src: url('./fonts/Libertinus-bold.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'Libertinus';
   font-style: italic;
   font-weight: bold;
   font-display: swap;
-  src: url('../fonts/Libertinus-bold-italic.woff2') format('woff2');
+  src: url('./fonts/Libertinus-bold-italic.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'Libertinus';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url('../fonts/Libertinus-semibold.woff2') format('woff2');
+  src: url('./fonts/Libertinus-semibold.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'Libertinus';
   font-style: italic;
   font-weight: 600;
   font-display: swap;
-  src: url('../fonts/Libertinus-semibold-italic.woff2') format('woff2');
+  src: url('./fonts/Libertinus-semibold-italic.woff2') format('woff2');
 }
 
 /* Box sizing rules */

2024/new/js/scripts.js

@@ -86,4 +86,26 @@ function includeHTML() {
       return;
     }
   }
-};
+};
+
+
+// Button to the top
+// Get the button
+let mybutton = document.getElementById("toTop");
+
+// When the user scrolls down 20px from the top of the document, show the button
+window.onscroll = function() {scrollFunction()};
+
+function scrollFunction() {
+  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+    mybutton.style.display = "block";
+  } else {
+    mybutton.style.display = "none";
+  }
+}
+
+// When the user clicks on the button, scroll to the top of the document
+function topFunction() {
+  document.body.scrollTop = 0;
+  document.documentElement.scrollTop = 0;
+}

2024/new/sequences.html

@@ -24,7 +24,7 @@
 
     <script src="js/mathjax.js"></script>
     <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
-    
+
 </head>
 
 <body id="top">
@@ -34,7 +34,7 @@
     <p class="callout hide-large hide-medium"><strong>⚠️ Warning!</strong>
         If you can see this message is because your screen is too small.
         Hence, some applets won't be displayed correctly.
-        You can rotate your device to landscape. 
+        You can rotate your device to landscape.
         Or resize your window so it's more wide than tall.
     </p>
 
@@ -295,9 +295,9 @@ <h2>These are examples with iframes</h2>
 
             <h3>This is an example from GeoGebra:</h3>
 
-
 
-            <br/>
+
+            <br />
 
             <div class="myFrame">
                 <iframe scrolling="no" title="Slope field explorer" allowfullscreen=""
@@ -312,52 +312,53 @@ <h3>This is an example from GeoGebra:</h3>
             <h3>This is an example with MathCell:</h3>
 
             <div class="myFrame">
-                
+
             </div>
-            
+
             <div class="myFrame hide-small">
                 <iframe scrolling="no" style="border:0px;" src="https://www.dynamicmath.xyz/sketches/mathcell/eversion/"
                     width="500px" height="500px"></iframe>
             </div>
             <div class="myFrame hide-medium hide-large">
-                <p class="callout"> 
+                <p class="callout">
                     <img style="float: left;padding: 8px;" src="imgs/loadcat.gif">
-                    Sorry, this applet is not supported for small screens. <br/>
-                    Rotate your device to landscape. <br/>
+                    Sorry, this applet is not supported for small screens. <br />
+                    Rotate your device to landscape. <br />
                     Or resize your window so it's more wide than tall.
                 </p>
             </div>
-            
+
 
             <br />
             <hr>
 
             <h3>This is an example of interactive applet made with p5js:</h3>
 
-            <iframe style="border:0px;" src="https://www.dynamicmath.xyz/sketches/tesseract/" 
-            width="100%" height="450px" scrolling="no"></iframe>
+            <iframe style="border:0px;" src="https://www.dynamicmath.xyz/sketches/tesseract/" width="100%"
+                height="450px" scrolling="no"></iframe>
 
             <br />
 
 
         </article>
     </main>
 
+    <button class="hide-small" onclick="topFunction()" id="toTop" title="Go to top"><i class="fa-solid fa-arrow-up"></i></button>
+
     <!-- The Modal -->
     <div id="myModal" class="modal">
 
         <!-- Modal content -->
         <div class="modal-content">
             <div class="modal-header">
                 <span class="close">&times;</span><br />
-                <p style="text-align: center;font-size: 1.5em;"><strong>Hello! 👋</strong></p>
+                <strong>👋 Hello!</strong>
             </div>
             <div class="modal-body">
                 <div w3-include-html="support.html"></div>
             </div>
             <div class="modal-footer">
-                <p style="text-align: center;margin-bottom: 10px;">Thank you! 🙏 I highly appreciate your support! 🤗
-                </p>
+                Thank you! 🙏 I highly appreciate your support! 🤗
             </div>
         </div>
 
@@ -413,7 +414,7 @@ <h3>This is an example of interactive applet made with p5js:</h3>
 
     <!-- Ends main content -->
 
-    
+
 
     <script src="js/scripts.js"></script>
     <script> includeHTML(); // Import html info file </script>

2024/new/support.html

@@ -2,7 +2,7 @@
     If you found this interactive textbook helpful, consider becoming a member in:
 </p>
 <div style="text-align: center;">
-    <a href="https://www.patreon.com/bePatron?u=10515025"><i class="fa-brands fa-patreon"></i>
+    <a class="modal-link" href="https://www.patreon.com/bePatron?u=10515025"><i class="fa-brands fa-patreon"></i>
         <strong>Patreon</strong></a>
     <script async src="https://c6.patreon.com/becomePatronButton.bundle.js"></script>
 </div>
@@ -21,16 +21,16 @@
 
 
 <div  style="text-align: center;">
-    ❤️ 
-    <a target="_blank"
+
+    <a class="modal-link" target="_blank"
         href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=WTMTR7D8RYZ26&item_name=Your+support+will+help+me+to+improve+and+keep+up+to+date+the+applets+of+this+book.+Sincerely+appreciate+it%21&currency_code=AUD&source=url">
-        <strong><i class="fa-brands fa-paypal"></i> PayPal Me</strong>
+        <strong>❤️ <i class="fa-brands fa-paypal"></i> PayPal Me</strong>
     </a>
     &nbsp;&nbsp;&nbsp;&nbsp;
-    ❤️  
-    <a target="_blank"
+
+    <a class="modal-link" target="_blank"
         href="https://jcponcemath.secure-decoration.com/">
-        <strong>Buy a T-shirt</strong>
+        <strong>❤️ Buy a T-shirt</strong>
     </a>
 </div>
 
@@ -41,7 +41,7 @@
     You can't contribute this time, no worries! Maybe you just want to:
 </p>
 <div  style="text-align: center;">
-    <a  href="mailto:[email protected]"><strong>Send a
+    <a class="modal-link"  href="mailto:[email protected]"><strong>Send a
             comment</strong></a>
 </div>