style revise

pkg/templates/style.css

@@ -10,34 +10,38 @@
     --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 */
+  /* Base Styles */
-* {
+  * {
     box-sizing: border-box;
-}
+  }
   
-body {
+  body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
     line-height: 1.6;
     color: var(--text-color);
@@ -46,114 +50,152 @@ body {
     display: flex;
     min-height: 100vh;
     background-color: var(--background-color);
-}
+  }
   
-/* Typography */
+  /* Typography */
-a {
+  a {
-  color: var(--link-color);
+    color: var(--primary-color);
     text-decoration: none;
     transition: color 0.2s ease;
-}
+  }
   
-a:hover {
+  a:hover {
-  color: var(--link-hover);
+    color: var(--primary-hover);
     text-decoration: underline;
-}
+  }
   
-a:focus {
+  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 {
+  h1, h2, h3, h4, h5, h6 {
     margin-top: 24px;
     margin-bottom: 16px;
     font-weight: 600;
     line-height: 1.25;
-  color: var(--text-color);
+  }
-}
   
-h1, h2 {
+  h1, h2 {
     padding-bottom: 0.3em;
     border-bottom: 1px solid var(--border-color);
-}
+  }
   
-h1 { font-size: 2em; }
+  h1 { font-size: 2em; }
-h2 { font-size: 1.5em; }
+  h2 { font-size: 1.5em; }
   
-/* Code Elements - Enhanced Readability */
+  /* Code Elements - Enhanced */
-pre, code {
+  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;
-}
-
-pre {
-  padding: 16px;
-  overflow: auto;
     line-height: 1.6;
+  }
+  
+  pre {
+    padding: 16px;
+    margin: 16px 0;
+    overflow: auto;
     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 {
+  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 {
+  pre code {
     padding: 0;
-  background-color: transparent;
+    background: none;
     border-radius: 0;
-  border: none;
+    box-shadow: none;
-}
+  }
   
-/* Tables - Enhanced Readability */
+  /* Code Block Scroll */
-table {
+  pre::-webkit-scrollbar {
-  border-collapse: collapse;
+    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 {
     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);
-}
+  }
   
-/* Media */
+  th:not(:first-child),
-img {
+  td:not(:first-child) {
+    border-left: 1px solid var(--table-border);
+  }
+  
+  tbody tr:hover td {
+    background-color: #f0f7ff;
+  }
+  
+  /* Media */
+  img {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius-sm);
-}
+  }
   
-/* Layout */
+  /* Layout */
-aside.nav-sidebar {
+  aside.nav-sidebar {
     width: var(--sidebar-width);
     background-color: var(--sidebar-bg);
     border-right: 1px solid var(--border-color);
@@ -162,105 +204,105 @@ aside.nav-sidebar {
     top: 0;
     height: 100vh;
     padding: 20px;
-}
+  }
   
-main.main-content {
+  main.main-content {
     flex: 1;
     padding: 40px;
     max-width: var(--content-max-width);
     margin: 0 auto;
-}
+  }
   
-/* Repository Information */
+  /* Repository Information */
-.repo-info {
+  .repo-info {
     margin-bottom: 20px;
-}
+  }
   
-.repo-info h2 {
+  .repo-info h2 {
     margin: 0;
     border: none;
     font-size: 1.25em;
     display: flex;
     align-items: center;
-}
+  }
   
-.repo-meta {
+  .repo-meta {
     font-size: 0.9em;
     color: var(--secondary-color);
-}
+  }
   
-/* Navigation */
+  /* Navigation */
-.nav-links {
+  .nav-links {
     list-style-type: none;
     padding: 0;
     margin: 0 0 20px 0;
-}
+  }
   
-.nav-links li {
+  .nav-links li {
     margin-bottom: 8px;
-}
+  }
   
-.nav-links a {
+  .nav-links a {
     display: block;
     padding: 8px 12px;
     border-radius: var(--radius-md);
     transition: background-color 0.2s ease;
-}
+  }
   
-.nav-links a:hover {
+  .nav-links a:hover {
     background-color: var(--hover-color);
     text-decoration: none;
-}
+  }
   
-.nav-links a.active {
+  .nav-links a.active {
     font-weight: 600;
     background-color: rgba(3, 102, 214, 0.1);
     color: var(--primary-color);
-}
+  }
   
-.nav-section-title {
+  .nav-section-title {
     font-weight: 600;
     margin: 16px 0 8px 0;
     color: var(--secondary-color);
-}
+  }
   
-.nav-footer {
+  .nav-footer {
     margin-top: 20px;
     font-size: 0.9em;
     color: var(--secondary-color);
-}
+  }
   
-/* Repository Components */
+  /* Repository Components */
-.repo-header {
+  .repo-header {
     margin-bottom: 30px;
-}
+  }
   
-.repo-stats {
+  .repo-stats {
     display: flex;
     flex-wrap: wrap;
     gap: 16px;
     margin-bottom: 16px;
     font-size: 0.9em;
-}
+  }
   
-.repo-stat {
+  .repo-stat {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 4px 8px;
     background-color: var(--hover-color);
     border-radius: var(--radius-sm);
-}
+  }
   
-/* Contributors Section */
+  /* Contributors Section */
-.contributors-list {
+  .contributors-list {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     margin-top: 20px;
-}
+  }
   
-.contributor-item {
+  .contributor-item {
     flex: 1 1 calc(33% - 20px);
     min-width: 200px;
     display: flex;
@@ -271,14 +313,14 @@ main.main-content {
     border-radius: var(--radius-md);
     background-color: var(--background-color);
     transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
+  }
   
-.contributor-item:hover {
+  .contributor-item:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
+  }
   
-.contributor-avatar {
+  .contributor-avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
@@ -287,33 +329,33 @@ main.main-content {
     text-align: center;
     line-height: 40px;
     font-size: 18px;
-}
+  }
   
-.contributor-info {
+  .contributor-info {
     flex: 1;
-}
+  }
   
-.contributor-name {
+  .contributor-name {
     font-weight: 600;
     color: var(--text-color);
-}
+  }
   
-.contributor-commits {
+  .contributor-commits {
     font-size: 0.9em;
     color: var(--secondary-color);
-}
+  }
   
-/* Footer */
+  /* Footer */
-.page-footer {
+  .page-footer {
     margin-top: 40px;
     padding-top: 20px;
     border-top: 1px solid var(--border-color);
     color: var(--secondary-color);
     font-size: 0.9em;
-}
+  }
   
-/* Responsive Design */
+  /* Responsive Design */
-@media (max-width: 768px) {
+  @media (max-width: 768px) {
     body {
       flex-direction: column;
     }
@@ -338,10 +380,20 @@ main.main-content {
     .repo-stats {
       flex-direction: column;
     }
-}
   
-/* Print Styles */
+    table {
-@media print {
+      display: block;
+      overflow-x: auto;
+      white-space: nowrap;
+    }
+    
+    th, td {
+      min-width: 120px;
+    }
+  }
+  
+  /* Print Styles */
+  @media print {
     body {
       color: #000;
       background: #fff;
@@ -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;
+    }
   }
-}