font size update 2

szubair22 · Sep 30, 2024 · 555d523 · 555d523
1 parent 9df9709
commit 555d523
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -11,24 +11,24 @@
     <div class="container">
         <div class="bg-white shadow-md rounded-lg p-6">
             <div class="text-center mb-8">
-                <h1>CSV Mapping Tool for Sage Intacct</h1>
-                <p class="subtitle">Save time and reduce errors by automating the mapping process.</p>
+                <h1 class="text-3xl font-bold">CSV Mapping Tool for Sage Intacct</h1>
+                <p class="subtitle text-lg">Save time and reduce errors by automating the mapping process.</p>
             </div>
 
             <div class="mb-8">
-                <h2>How It Works</h2>
-                <ol>
+                <h2 class="text-2xl font-bold mb-4">How It Works</h2>
+                <ol class="space-y-4">
                     <li>
                         <span class="number-circle">1</span>
-                        <strong>Upload Your Files:</strong>
+                        <strong class="text-lg">Upload Your Files:</strong>
                         <ul class="list-disc list-inside ml-6 mt-2">
                             <li>First, upload your data CSV.</li>
                             <li>Then, upload your Intacct Template CSV.</li>
                         </ul>
                     </li>
                     <li>
                         <span class="number-circle">2</span>
-                        <strong>Preview and Map:</strong>
+                        <strong class="text-lg">Preview and Map:</strong>
                         <ul class="list-disc list-inside ml-6 mt-2">
                             <li>Match the data fields from your file to the Intacct format.</li>
                             <li>Review the mappings before finalizing.</li>
@@ -38,10 +38,10 @@ <h2>How It Works</h2>
             </div>
 
             <div class="mb-8">
-                <h2>Upload CSV Files</h2>
+                <h2 class="text-2xl font-bold mb-4">Upload CSV Files</h2>
                 <form id="uploadForm" class="space-y-4">
                     <div class="file-input">
-                        <label for="dataFile">Data CSV:</label>
+                        <label for="dataFile" class="block font-bold mb-2">Data CSV:</label>
                         <div class="flex items-center">
                             <input type="file" id="dataFile" name="dataFile" accept=".csv" required class="hidden">
                             <label for="dataFile" class="file-input-label">
@@ -51,7 +51,7 @@ <h2>Upload CSV Files</h2>
                         </div>
                     </div>
                     <div class="file-input">
-                        <label for="templateFile">Intacct Template CSV:</label>
+                        <label for="templateFile" class="block font-bold mb-2">Intacct Template CSV:</label>
                         <div class="flex items-center">
                             <input type="file" id="templateFile" name="templateFile" accept=".csv" required class="hidden">
                             <label for="templateFile" class="file-input-label">

diff --git a/styles.css b/styles.css
@@ -20,39 +20,39 @@ body {
 }
 
 .shadow-md {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
 .rounded-lg {
     border-radius: 0.5rem;
 }
 
 h1 {
-    font-size: 2.25rem; /* Increased from 1.875rem */
-    font-weight: 600;
+    font-size: 2rem; /* Increased from 1.875rem */
+    font-weight: 700;
     margin-bottom: 0.5rem;
 }
 
 h2 {
     font-size: 1.5rem; /* Increased from 1.25rem */
-    font-weight: 600;
+    font-weight: 700;
     margin-bottom: 1rem;
 }
 
 .subtitle {
     color: #6b7280;
     margin-bottom: 2rem;
-    font-size: 1.125rem; /* Added font size for subtitle */
+    font-size: 1rem; /* Added font size for subtitle */
 }
 
 .file-input-label {
     display: inline-block;
-    padding: 0.625rem 1.25rem; /* Increased padding */
+    padding: 0.5rem 1rem; /* Increased padding */
     background-color: #f3f4f6;
     color: #111827;
     border-radius: 0.25rem;
     font-weight: 600;
-    font-size: 1rem; /* Added font size */
+    font-size: 0.875rem; /* Added font size */
     cursor: pointer;
     transition: background-color 0.2s;
 }
@@ -62,9 +62,9 @@ h2 {
 }
 
 .btn {
-    padding: 0.875rem 1.25rem; /* Increased padding */
+    padding: 0.75rem 1rem; /* Increased padding */
     font-weight: 600;
-    font-size: 1.125rem; /* Increased font size */
+    font-size: 0.875rem; /* Increased font size */
     border-radius: 0.25rem;
     transition: background-color 0.2s;
     width: 100%;
@@ -79,7 +79,7 @@ h2 {
 }
 
 .btn-black:hover {
-    background-color: #374151;
+    background-color: #1f2937;
 }
 
 ol {
@@ -88,21 +88,22 @@ ol {
 }
 
 ol li {
-    margin-bottom: 1.5rem; /* Increased from 1rem */
+    margin-bottom: 1rem; /* Increased from 1.5rem */
     font-size: 1.125rem; /* Added font size for list items */
 }
 
 .number-circle {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 1.75rem; /* Increased from 1.5rem */
-    height: 1.75rem; /* Increased from 1.5rem */
+    width: 1.5rem; /* Increased from 1.75rem */
+    height: 1.5rem; /* Increased from 1.75rem */
     background-color: #111827;
     color: white;
     border-radius: 50%;
-    margin-right: 0.75rem; /* Increased from 0.5rem */
-    font-size: 1rem; /* Increased from 0.875rem */
+    margin-right: 0.5rem; /* Increased from 0.75rem */
+    font-size: 0.875rem; /* Increased from 1rem */
+    font-weight: 600;
 }
 
 .file-input {
@@ -120,3 +121,12 @@ ol li {
     margin-left: 0.5rem;
     color: #6b7280;
 }
+
+ul {
+    list-style-type: disc;
+    padding-left: 1.5rem;
+}
+
+ul li {
+    margin-bottom: 0.5rem;
+}