project-logbook 0.4.1 → 1.0.0

package/src/templates/styles.css

@@ -19,10 +19,16 @@ body {
 header {
   background: var(--card-bg);
   border-bottom: 1px solid var(--border);
-  padding: 2rem 1rem;
+  padding: 2rem 0 0 0;
   text-align: center;
 }
 
+.header-inner {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: 0 1.5rem;
+}
+
 header h1 {
   margin: 0;
   font-size: 2.25rem;
@@ -168,15 +174,15 @@ main {
   display: inline-flex;
   align-items: center;
   font-size: 0.8125rem;
-  font-weight: 500;
   color: var(--primary);
   text-decoration: none;
-  transition:
-    color 0.2s,
-    background 0.2s;
   background: var(--primary-soft);
   padding: 0.5rem 1rem;
   border-radius: 2rem;
+  font-weight: 500;
+  transition:
+    background 0.2s,
+    color 0.2s;
 }
 
 .back-link:hover {
@@ -184,23 +190,7 @@ main {
   color: white;
 }
 
-/* Action bar - Back button + tabs on same line */
-.action-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  margin-bottom: 3rem;
-  flex-wrap: wrap;
-}
-
-.action-tabs-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
+/* Jira Action Button */
 .jira-link-btn {
   display: inline-flex;
   align-items: center;
@@ -221,6 +211,48 @@ main {
   color: white;
 }
 
+/* Header Navigation - Back button, tabs, and Jira link */
+.header-nav {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  margin-top: 2rem;
+  gap: 1rem;
+}
+
+.header-nav-left {
+  text-align: left;
+  display: flex;
+  align-items: center;
+}
+
+.header-nav-right {
+  text-align: right;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.header-nav--center {
+  display: flex;
+  justify-content: center;
+}
+
+@media (max-width: 640px) {
+  .header-nav {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    padding-bottom: 1rem;
+  }
+  .header-nav-left,
+  .header-nav-right {
+    text-align: center;
+    justify-content: center;
+  }
+}
+
 /* Jira link in build-meta - inline style */
 .build-meta .jira-link-btn {
   margin-left: 0.5rem;
@@ -261,21 +293,25 @@ article h1 {
 
 .tabs {
   display: flex;
-  gap: 0.5rem;
-  background: #f4f4f4;
-  padding: 0.25rem;
-  border-radius: 0.75rem;
+  gap: 1.5rem;
+  background: none;
+  padding: 0;
+  border-radius: 0;
   width: fit-content;
+  margin-bottom: -1px;
+  position: relative;
+  z-index: 2;
 }
 
 .tab {
-  padding: 0.625rem 1.25rem;
-  font-size: 0.8125rem;
+  padding: 0.75rem 0.25rem;
+  font-size: 0.875rem;
   font-weight: 600;
   color: var(--text-muted);
   cursor: pointer;
-  border-radius: 0.5rem;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s ease;
+  border-radius: 0;
 }
 
 .tab:hover {
@@ -284,8 +320,9 @@ article h1 {
 
 .tab.active {
   color: var(--primary);
-  background: white;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  border-bottom-color: var(--primary);
+  background: none;
+  box-shadow: none;
 }
 
 /* Pagination Links */
@@ -504,6 +541,11 @@ footer .build-time a:hover {
   color: #374151;
 }
 
+.tag-superseded {
+  background: #f3f4f6;
+  color: #4b5563;
+}
+
 /* Timeline card tag styling */
 .timeline-card .tags-wrapper {
   margin-top: 0.5rem;
@@ -878,3 +920,68 @@ article img[src$='.svg'] {
   background-color: var(--primary-soft, #f0fdf4);
   color: var(--text-main, #1e293b);
 }
+
+/* ADR Details and Cards */
+.adr-detail-card {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  background: var(--card-bg);
+  padding: 2rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--border);
+}
+
+.adr-detail-meta {
+  margin-bottom: 1.5rem;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+.adr-status-badge {
+  margin-right: 0.5rem;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  padding: 0.15rem 0.4rem;
+}
+
+.adr-detail-title {
+  font-size: 2rem;
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+  letter-spacing: -0.025em;
+  font-weight: 800;
+}
+
+.adr-detail-body {
+  margin-top: 2rem;
+}
+
+.adr-detail-tags {
+  margin-top: 2rem;
+  border-top: 1px solid var(--border);
+  padding-top: 1.5rem;
+}
+
+.adr-indicator-badge {
+  background: #e0f2fe !important;
+  color: #0369a1 !important;
+  font-weight: bold;
+}
+
+.timeline-card--adr {
+  background: color-mix(in srgb, var(--primary) 4%, var(--card-bg, #ffffff)) !important;
+  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border, #e5e7eb)) !important;
+  border-radius: 0.5rem;
+}
+
+.timeline-card--adr .item-summary {
+  font-style: italic;
+  border-left: 2px solid var(--primary);
+  padding-left: 0.75rem;
+  margin-top: 0.5rem;
+  color: var(--text-muted);
+}
+
+.timeline-card--adr .tags-wrapper {
+  margin-top: 0.5rem;
+}