init

static/css/main.css

@@ -0,0 +1,169 @@
+:root {
+  --background-body: #f5f5f5;
+  --background: #e0e0e0;
+  --text-main: #363636;
+  --text-bright: #000;
+  --links: #0076d1;
+  --focus: rgba(0,150,191,0.67);
+  --border: #dbdbdb;
+  --code: #000;
+  --animation-duration: 0.1s;
+  --button-hover: #9b9b9b;
+  --scrollbar-thumb: #aaa;
+  --form-placeholder: #949494;
+  --form-text: #1d1d1d;
+  --table-header: #d0d0d0;
+  --table-row-odd: #e8e8e8;
+  --table-row-even: #f0f0f0;
+  --sort-arrow: #666;
+}
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.4;
+  max-width: 80%;
+  margin: 0 auto;
+  padding: 0 10%;
+  color: var(--text-main);
+  background: var(--background-body);
+}
+
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th, td {
+  padding: 8px;
+  text-align: left;
+  border-bottom: 1px solid var(--border);
+}
+
+th {
+  background-color: var(--table-header);
+  font-weight: bold;
+  cursor: pointer;
+  position: relative;
+  padding-right: 20px; /* Space for sort indicator */
+}
+
+tr:nth-child(odd) {
+  background-color: var(--table-row-odd);
+}
+
+tr:nth-child(even) {
+  background-color: var(--table-row-even);
+}
+
+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.logo {
+  width: 100px;
+  height: 100px;
+}
+
+h1 {
+  text-align: center;
+  flex-grow: 1;
+  margin: 0 20px;
+}
+
+#searchInput {
+  width: 100%;
+  font-size: 16px;
+  padding: 12px 20px;
+  margin: 8px 0;
+  box-sizing: border-box;
+}
+
+/* Sort indicators */
+th::after {
+  content: '\25B2'; /* Upward triangle */
+  position: absolute;
+  right: 5px;
+  opacity: 0.3;
+  color: var(--sort-arrow);
+}
+
+th.asc::after {
+  content: '\25B2'; /* Upward triangle */
+  opacity: 1;
+}
+
+th.desc::after {
+  content: '\25BC'; /* Downward triangle */
+  opacity: 1;
+}
+
+th:hover::after {
+  opacity: 0.6;
+}
+
+footer {
+  margin-top: 20px;
+  padding: 10px 0;
+  background-color: var(--background);
+  font-size: 8px;
+}
+
+.footer-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+a[href^="tel:"]:before {
+  content: "📞 ";
+}
+
+a[href^="mailto:"]:before {
+  content: "📧 ";
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  body {
+    max-width: 95%;
+    padding: 0 2.5%;
+  }
+
+  .header-container {
+    flex-direction: column;
+  }
+
+  .logo {
+    margin-bottom: 10px;
+  }
+
+  h1 {
+    font-size: 24px;
+  }
+
+  th, td {
+    padding: 6px;
+  }
+}
+
+/* Accessibility improvements */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}