edit generate index

Author: khuyentran1401

public/index.html

@@ -27,7 +27,7 @@
         .notebook-item {
             margin-bottom: 2rem;
             padding: 1rem;
-            border: 1px solid white;
+            border: 2px solid white;
             border-radius: 8px;
             transition: transform 0.2s;
         }
@@ -51,12 +51,14 @@
             color: #2F2D2E;
             text-decoration: none;
             border-radius: 4px;
-            transition: background-color 0.2s;
-            border: 1px solid white;
+            transition: all 0.2s;
+            border: 2px solid white;
+            font-weight: 600;
         }
         .notebook-link:hover {
             background-color: #5AA8E8;
-            border: 1px solid white;
+            border: 2px solid white;
+            transform: translateY(-2px);
         }
     </style>
 </head>
@@ -65,27 +67,27 @@ <h1>CodeCut Blog Examples</h1>
     <ul class="notebook-list">
         <li class="notebook-item">
             <h2 class="notebook-title">narwhals</h2>
-            <a href="data_science_tools/narwhals.html" class="notebook-link">View Notebooks</a>
+            <a href="data_science_tools/narwhals.html" class="notebook-link">View the notebook</a>
         </li>
         <li class="notebook-item">
             <h2 class="notebook-title">narwhals row ordering</h2>
-            <a href="data_science_tools/narwhals_row_ordering.html" class="notebook-link">View Notebooks</a>
+            <a href="data_science_tools/narwhals_row_ordering.html" class="notebook-link">View the notebook</a>
         </li>
         <li class="notebook-item">
             <h2 class="notebook-title">pandas api on spark</h2>
-            <a href="data_science_tools/pandas_api_on_spark.html" class="notebook-link">View Notebooks</a>
+            <a href="data_science_tools/pandas_api_on_spark.html" class="notebook-link">View the notebook</a>
         </li>
         <li class="notebook-item">
             <h2 class="notebook-title">polars vs pandas</h2>
-            <a href="data_science_tools/polars_vs_pandas.html" class="notebook-link">View Notebooks</a>
+            <a href="data_science_tools/polars_vs_pandas.html" class="notebook-link">View the notebook</a>
         </li>
         <li class="notebook-item">
             <h2 class="notebook-title">pyspark parametrize</h2>
-            <a href="data_science_tools/pyspark_parametrize.html" class="notebook-link">View Notebooks</a>
+            <a href="data_science_tools/pyspark_parametrize.html" class="notebook-link">View the notebook</a>
         </li>
         <li class="notebook-item">
             <h2 class="notebook-title">pydantic ai examples</h2>
-            <a href="llm/pydantic_ai_examples.html" class="notebook-link">View Notebooks</a>
+            <a href="llm/pydantic_ai_examples.html" class="notebook-link">View the notebook</a>
         </li>
     </ul>
 </body>

scripts/generate_index.py

@@ -53,7 +53,7 @@ def generate_index():
         .notebook-item {{
             margin-bottom: 2rem;
             padding: 1rem;
-            border: 1px solid white;
+            border: 2px solid white;
             border-radius: 8px;
             transition: transform 0.2s;
         }}
@@ -77,12 +77,14 @@ def generate_index():
             color: #2F2D2E;
             text-decoration: none;
             border-radius: 4px;
-            transition: background-color 0.2s;
-            border: 1px solid white;
+            transition: all 0.2s;
+            border: 2px solid white;
+            font-weight: 600;
         }}
         .notebook-link:hover {{
             background-color: #5AA8E8;
-            border: 1px solid white;
+            border: 2px solid white;
+            transform: translateY(-2px);
         }}
     </style>
 </head>
@@ -103,7 +105,7 @@ def generate_index():
         relative_path = html_file.relative_to(public_dir)
         notebook_items.append(f"""        <li class="notebook-item">
             <h2 class="notebook-title">{title}</h2>
-            <a href="{relative_path}" class="notebook-link">View Notebooks</a>
+            <a href="{relative_path}" class="notebook-link">View the notebook</a>
         </li>""")
 
     # Generate final HTML