style revise

pkg/templates/style.css

@@ -10,26 +10,30 @@
     --hover-color: #f1f5f9;
     --text-color: #1a202c;
   
-  /* Code & Table Colors */
+    /* Code Block Colors - High Contrast */
-  --code-bg: #f1f5f9;
+    --code-bg: #1e1e1e;
-  --code-inline-bg: #e2e8f0;
+    --code-text: #d4d4d4;
-  --code-text: #1e293b;
+    --code-inline-bg: #2d2d2d;
-  --code-border: #cbd5e1;
+    --code-border: #404040;
-  --table-header-bg: #f1f5f9;
+    --code-comment: #6a9955;
-  --table-stripe-bg: #f8fafc;
+    --code-keyword: #569cd6;
-  --table-border: #e2e8f0;
+    --code-string: #ce9178;
+    --code-number: #b5cea8;
   
-  /* Semantic Colors */
+    /* Table Colors - High Contrast */
-  --link-color: #0366d6;
+    --table-header-bg: #f0f0f0;
-  --link-hover: #0255b3;
+    --table-header-text: #000000;
-  --focus-ring: #3b82f6;
+    --table-border: #d0d0d0;
-  --focus-ring-offset: #ffffff;
+    --table-row-bg: #ffffff;
+    --table-row-alt-bg: #f7f7f7;
+    --table-cell-padding: 12px 16px;
   
     /* Layout */
     --sidebar-width: 260px;
     --content-max-width: 1200px;
-  --radius-sm: 3px;
+    --radius-sm: 4px;
     --radius-md: 6px;
+    --radius-lg: 8px;
   }
   
   /* Base Styles */
@@ -50,20 +54,19 @@ body {
   
   /* Typography */
   a {
-  color: var(--link-color);
+    color: var(--primary-color);
     text-decoration: none;
     transition: color 0.2s ease;
   }
   
   a:hover {
-  color: var(--link-hover);
+    color: var(--primary-hover);
     text-decoration: underline;
   }
   
   a:focus {
-  outline: 2px solid var(--focus-ring);
+    outline: 2px solid var(--primary-color);
     outline-offset: 2px;
-  text-decoration: none;
   }
   
   h1, h2, h3, h4, h5, h6 {
@@ -71,7 +74,6 @@ h1, h2, h3, h4, h5, h6 {
     margin-bottom: 16px;
     font-weight: 600;
     line-height: 1.25;
-  color: var(--text-color);
   }
   
   h1, h2 {
@@ -82,67 +84,107 @@ h1, h2 {
   h1 { font-size: 2em; }
   h2 { font-size: 1.5em; }
   
-/* Code Elements - Enhanced Readability */
+  /* Code Elements - Enhanced */
   pre, code {
-  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
-  font-size: 90%;
+    font-size: 14px;
+    line-height: 1.6;
   }
   
   pre {
     padding: 16px;
+    margin: 16px 0;
     overflow: auto;
-  line-height: 1.6;
     background-color: var(--code-bg);
+    color: var(--code-text);
     border: 1px solid var(--code-border);
     border-radius: var(--radius-md);
-  color: var(--code-text);
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
-  margin: 16px 0;
+    max-height: 500px;
   }
   
   code {
-  padding: 0.2em 0.4em;
+    padding: 3px 6px;
-  margin: 0;
     background-color: var(--code-inline-bg);
-  border-radius: var(--radius-sm);
     color: var(--code-text);
+    border-radius: var(--radius-sm);
   }
   
   pre code {
     padding: 0;
-  background-color: transparent;
+    background: none;
     border-radius: 0;
-  border: none;
+    box-shadow: none;
   }
   
-/* Tables - Enhanced Readability */
+  /* Code Block Scroll */
+  pre::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+  }
+  
+  pre::-webkit-scrollbar-track {
+    background: var(--code-bg);
+  }
+  
+  pre::-webkit-scrollbar-thumb {
+    background-color: var(--code-border);
+    border: 3px solid var(--code-bg);
+    border-radius: 6px;
+  }
+  
+  /* Syntax Highlighting */
+  .comment { color: var(--code-comment); }
+  .keyword { color: var(--code-keyword); }
+  .string { color: var(--code-string); }
+  .number { color: var(--code-number); }
+  
+  /* Tables - Enhanced */
   table {
-  border-collapse: collapse;
     width: 100%;
-  margin: 16px 0;
+    border-collapse: separate;
+    border-spacing: 0;
+    margin: 24px 0;
     border: 1px solid var(--table-border);
-  border-radius: var(--radius-md);
+    border-radius: var(--radius-lg);
     overflow: hidden;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   }
   
-table th {
+  thead {
     background-color: var(--table-header-bg);
+  }
+  
+  th {
+    background-color: var(--table-header-bg);
+    color: var(--table-header-text);
     font-weight: 600;
     text-align: left;
+    padding: var(--table-cell-padding);
+    border-bottom: 2px solid var(--table-border);
   }
   
-table th, 
+  td {
-table td {
+    padding: var(--table-cell-padding);
-  padding: 12px 16px;
+    border-bottom: 1px solid var(--table-border);
-  border: 1px solid var(--table-border);
+    background-color: var(--table-row-bg);
   }
   
-table tr {
+  tr:last-child td {
-  background-color: var(--background-color);
+    border-bottom: none;
-  border-top: 1px solid var(--table-border);
   }
   
-table tr:nth-child(2n) {
+  tbody tr:nth-child(even) td {
-  background-color: var(--table-stripe-bg);
+    background-color: var(--table-row-alt-bg);
+  }
+  
+  th:not(:first-child),
+  td:not(:first-child) {
+    border-left: 1px solid var(--table-border);
+  }
+  
+  tbody tr:hover td {
+    background-color: #f0f7ff;
   }
   
   /* Media */
@@ -338,6 +380,16 @@ main.main-content {
     .repo-stats {
       flex-direction: column;
     }
+  
+    table {
+      display: block;
+      overflow-x: auto;
+      white-space: nowrap;
+    }
+    
+    th, td {
+      min-width: 120px;
+    }
   }
   
   /* Print Styles */
@@ -363,5 +415,14 @@ main.main-content {
   
     pre, code {
       border: 1px solid #ddd;
+      white-space: pre-wrap;
+    }
+  
+    table {
+      border-collapse: collapse;
+    }
+  
+    th, td {
+      border: 1px solid #000;
     }
   }