prime8dev

experience.css (4942B)

---

 #experience {
   width: 100%;
 }
 
 .experience-layout {
   display: flex;
   flex-direction: row;
   height: 100%;
   width: 100%;
   padding: 24px 32px;
   gap: 24px;
   justify-content: center;
 }
 
 .experience-detail {
   flex: 0 1 980px;
   width: 100%;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 16px;
   padding: 4px 20px 4px 4px;
 }
 
 .exp-row {
   display: flex;
 }
 
 .exp-card {
   background: var(--bg-alt);
   border: 2px solid var(--border);
   border-radius: 4px;
   padding: 24px;
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
 }
 
 .exp-card.selected {
   border-color: var(--accent);
 }
 
 .exp-timeline {
   width: 64px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding-top: 24px;
   position: relative;
 }
 
 .timeline-dot {
   width: 12px;
   height: 12px;
   border: 2px solid var(--fg-dim);
   border-radius: 50%;
   background: transparent;
 }
 
 .timeline-dot-end {
   position: absolute;
   bottom: 8px;
 }
 
 .exp-timeline.has-end-dot .timeline-line {
   bottom: 14px;
 }
 
 .exp-timeline.active .timeline-dot-end {
   border-color: var(--accent);
   background: var(--accent);
 }
 
 .exp-timeline.active .timeline-dot {
   border-color: var(--accent);
   background: var(--accent);
 }
 
 .timeline-year {
   font-size: var(--fs-12);
   color: var(--fg-dim);
   margin-top: 4px;
 }
 
 .timeline-line {
   position: absolute;
   top: 56px;
   bottom: -16px;
   width: 2px;
   left: 50%;
   transform: translateX(-50%);
   background: repeating-linear-gradient(
     to bottom,
     var(--border) 0px,
     var(--border) 4px,
     transparent 4px,
     transparent 8px
   );
 }
 
 .exp-card-header {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: flex-start;
   gap: 12px 24px;
 }
 
 .exp-card-title {
   min-width: 0;
 }
 
 .exp-title-with-logo {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   min-width: 0;
 }
 
 .exp-logo {
   height: 44px;
   width: auto;
   max-width: 180px;
   object-fit: contain;
   flex-shrink: 0;
 }
 
 .exp-logo.logo-hark {
   height: 30px;
   max-width: 140px;
 }
 
 .exp-logo.logo-invert {
   filter: brightness(0) invert(1);
   opacity: 0.9;
 }
 
 .exp-title-text {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
   min-width: 0;
 }
 
 .exp-title-text h2 {
   font-size: var(--fs-22);
   font-weight: 500;
   color: var(--accent);
   margin: 0;
   line-height: 1.1;
 }
 
 .exp-role {
   display: inline-flex;
   align-items: center;
   color: var(--accent);
   font-size: var(--fs-15);
   font-weight: 500;
   white-space: nowrap;
   line-height: 1.2;
 }
 
 .exp-role::before {
   content: "/";
   color: var(--yellow);
   margin-right: 4px;
 }
 
 .exp-role::after {
   content: "";
 }
 
 .exp-title-with-logo .exp-role {
   font-size: var(--fs-16);
   line-height: 1.1;
   margin-top: 22px;
 }
 
 .exp-logo.logo-hark + .exp-role {
   margin-top: 15px;
 }
 
 .exp-card-meta {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 3px;
   font-size: var(--fs-14);
   text-align: right;
   white-space: nowrap;
 }
 
 .exp-duration {
   color: var(--fg-dim);
 }
 
 .exp-card-tech {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-bottom: 20px;
 }
 
 .exp-card-body {
   color: var(--fg);
   line-height: 1.7;
 }
 
 .exp-card-body p {
   margin-bottom: 12px;
 }
 
 .exp-card-images {
   display: flex;
   gap: 12px;
   margin-top: 12px;
   padding-top: 12px;
   border-top: 1px solid var(--border);
   max-height: 200px;
   overflow: hidden;
 }
 
 .exp-image-hero {
   max-width: 280px;
   height: 100%;
   border-radius: 4px;
   border: 1px solid var(--border);
   object-fit: cover;
   cursor: pointer;
 }
 
 .exp-image-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   max-width: 400px;
 }
 
 .exp-image-thumb {
   width: calc(50% - 4px);
   height: 86px;
   border-radius: 4px;
   border: 1px solid var(--border);
   object-fit: cover;
   cursor: pointer;
 }
 
 .external-link {
   color: var(--light-blue);
   font-size: var(--fs-14);
   max-width: 36ch;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 @media (max-width: 768px) {
   .experience-layout {
     padding: 16px;
     gap: 12px;
   }
 
   .exp-timeline {
     display: none;
   }
 
   .exp-card {
     padding: 16px;
   }
 
   .experience-detail {
     padding: 4px 14px 4px 0;
   }
 
   .exp-card-header {
     grid-template-columns: 1fr;
     gap: 10px;
   }
 
   .exp-title-with-logo {
     align-items: flex-start;
   }
 
   .exp-logo {
     height: 38px;
     max-width: 150px;
     margin-top: 0;
   }
 
   .exp-logo.logo-hark {
     height: 26px;
     max-width: 120px;
   }
 
   .exp-title-with-logo .exp-role {
     margin-top: 19px;
   }
 
   .exp-logo.logo-hark + .exp-role {
     margin-top: 13px;
   }
 
   .exp-card-meta {
     align-items: flex-start;
     text-align: left;
     white-space: normal;
   }
 
   .exp-card-images {
     flex-direction: column;
     max-height: none;
     overflow: visible;
   }
 
   .exp-image-hero {
     max-width: 100%;
     height: auto;
     max-height: 200px;
   }
 
   .exp-image-thumb {
     width: calc(33.33% - 6px);
     height: 80px;
   }
 }