Update np/index.qmd to include custom container styles

pipme · Sep 26, 2024 · c39a8ba · c39a8ba
1 parent 393eb87
commit c39a8ba
Showing 1 changed file with 10 additions and 24 deletions.
diff --git a/tools/np/index.qmd b/tools/np/index.qmd
@@ -3,49 +3,34 @@ title: ""
 format: html
 ---
 
+```{=html}
 <style>
-  /* body {
-    font-family: Arial, sans-serif;
-    background-color: #f4f4f9;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-  } */
-  .container {
+  .container-custom {
     max-width: 600px;
     background-color: white;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   }
-  /* h1 {
-    color: #333;
-    text-align: center;
-    font-size: 28px;
-    margin-bottom: 20px;
-  } */
-  form {
+  .container-custom form {
     background-color: white;
     padding: 20px;
     border-radius: 8px;
   }
-  label {
+  .container-custom label {
     font-weight: bold;
     display: block;
     margin-top: 10px;
   }
-  select, input {
+  .container-custom select, .container-custom input {
     width: 100%;
     padding: 10px;
     margin: 10px 0;
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
   }
-  button {
+  .container-custom button {
     background-color: #4CAF50;
     color: white;
     padding: 10px 20px;
@@ -54,10 +39,10 @@ format: html
     cursor: pointer;
     width: 100%;
   }
-  button:hover {
+  .container-custom button:hover {
     background-color: #45a049;
   }
-  .result {
+  .container-custom .result {
     background-color: #e9ffe9;
     padding: 15px;
     border-radius: 4px;
@@ -66,7 +51,7 @@ format: html
   }
 </style>
 <center>
-<div class="container">
+<div class="container-custom">
   <h1>NumPy Memory Size Calculator</h1>
   <form id="numpyForm">
     <label for="dtype">Select Data Type:</label>
@@ -121,3 +106,4 @@ format: html
       `Memory size: ${memorySize.toLocaleString()} bytes (${(memorySize / (1024 ** 2)).toFixed(2)} MB)`;
   }
 </script>
+```