prime8dev

about.css (7114B)

---

 /*
  * The about page is a terminal: one font-size, one line-height, every row
  * exactly one line (1.5em) tall, no gaps between a prompt and its output, and
  * exactly one blank row between sections. Nothing below may add vertical padding,
  * margins or a different line-height, or rows fall off the grid.
  */
 .about-layout {
   --row: 1.5em;
   width: 100%;
   height: 100%;
   /* same gap on every side: one text row */
   padding: var(--row);
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: var(--row);
   font-size: var(--fs-14);
   line-height: 1.5;
 }
 
 .shell-prompt {
   color: var(--fg-dim);
   font-size: inherit;
   line-height: inherit;
   margin: 0;
 }
 
 .shell-user {
   color: var(--green);
 }
 
 .shell-dollar {
   color: var(--green);
 }
 
 .shell-host {
   color: var(--accent);
 }
 
 .shell-path {
   color: var(--cyan);
 }
 
 .shell-cmd {
   color: var(--fg);
 }
 
 .section {
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   gap: 0;
 }
 
 .section .bio {
   color: var(--fg);
   font-size: inherit;
   line-height: inherit;
   margin: 0;
 }
 
 /* chips: one cell of horizontal padding, zero vertical, so each is one row */
 .tags {
   display: flex;
   flex-wrap: wrap;
   gap: 0 1ch;
 }
 
 .about-layout .tag {
   display: inline-block;
   font-size: inherit;
   line-height: inherit;
   height: var(--row);
   padding: 0 1ch;
 }
 
 /* fastfetch: logo width and gap in ch so the text column starts on a cell */
 /* the logo is 24ch x 10 rows so whatever follows stays on the row grid */
 .fetch {
   display: flex;
   align-items: flex-start;
   gap: 3ch;
   margin: 0;
   font-size: var(--fs-14);
   line-height: 1.5;
 }
 
 .fetch-logo {
   display: block;
   width: 24ch;
   height: 15em; /* 10 rows of 1.5em */
   object-fit: cover;
   flex-shrink: 0;
   border: 1px solid var(--border);
   filter: saturate(0.85);
 }
 
 /* the portrait draws in one text row (1.5em) at a time, like a terminal
    printing it, instead of the browser's pixel-row jpeg decode */
 .fetch-logo.rows-pending {
   visibility: hidden;
 }
 
 .fetch-logo.rows-in {
   animation: logoRows 320ms steps(10, start) both;
 }
 
 @keyframes logoRows {
   from { clip-path: inset(0 0 100% 0); }
   to { clip-path: inset(0 0 0 0); }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .fetch-logo.rows-pending { visibility: visible; }
   .fetch-logo.rows-in { animation: none; }
 }
 
 .fetch-info {
   min-width: 0;
 }
 
 .fetch-rule {
   color: var(--fg-dim);
 }
 
 .fetch-row {
   overflow-wrap: anywhere;
 }
 
 .fetch-key {
   color: var(--accent);
 }
 
 /* i5 firing order: 1-2-4-5-3. hover swaps the label for the engine block */
 .i5-host {
   position: relative;
   outline: none;
   cursor: default;
 }
 
 .i5-host:focus-visible {
   outline: 1px solid var(--accent);
   outline-offset: 2px;
 }
 
 .i5 {
   position: absolute;
   inset: 0;
   display: none;
   align-items: center;
   justify-content: center;
   gap: 5px;
 }
 
 .i5 i {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   border: 1.5px solid currentColor;
   box-sizing: border-box;
 }
 
 .i5-host:hover .i5-label,
 .i5-host:focus-visible .i5-label,
 .i5-host:active .i5-label {
   visibility: hidden;
 }
 
 .i5-host:hover .i5,
 .i5-host:focus-visible .i5,
 .i5-host:active .i5 {
   display: flex;
 }
 
 .i5-host:hover .i5 i,
 .i5-host:focus-visible .i5 i,
 .i5-host:active .i5 i {
   animation: fire 750ms steps(1) infinite;
   animation-delay: calc(var(--fire) * 150ms);
 }
 
 @keyframes fire {
   0% { background: currentColor; }
   20% { background: transparent; }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .i5-host .i5 i {
     animation: none !important;
   }
 }
 
 @media (max-width: 700px) {
   .about-layout {
     padding: var(--row);
   }
 
   .fetch {
     flex-direction: column;
     gap: 1.5em;
   }
 
   .fetch-logo {
     width: 14ch;
     height: 9em; /* 6 rows */
   }
 
   .fetch-logo.rows-in {
     animation-timing-function: steps(6, start);
   }
 }
 
 /* interactive prompt (modules/shell.js)
  * Everything in the shell (prompt, typed text, cursor, output) shares one
  * font-size and line-height so it all sits on the same character grid. */
 .shell {
   cursor: text;
   font-size: var(--fs-14);
   line-height: 1.5;
   font-weight: 400;
   letter-spacing: 0;
   word-spacing: 0;
   tab-size: 8;
   font-kerning: none;
   font-variant-ligatures: none;
   font-feature-settings: "liga" 0, "calt" 0;
   font-synthesis: none;
 }
 
 .shell .shell-prompt,
 .shell .shell-out,
 .shell .shell-line,
 .shell .shell-cmd,
 .shell .shell-cursor {
   font: inherit;
   line-height: inherit;
 }
 
 .shell-live {
   position: relative;
   display: block;
   cursor: text;
 }
 
 .shell-live[hidden] {
   display: none;
 }
 
 /* the real input stays invisible; the spans around .shell-cursor draw it */
 .shell-input {
   position: absolute;
   left: 0;
   top: 0;
   width: 1px;
   height: 100%;
   padding: 0;
   border: 0;
   opacity: 0;
   font-size: 16px; /* keeps iOS from zooming in on focus */
   caret-color: transparent;
   pointer-events: none;
 }
 
 .shell-line {
   white-space: pre-wrap;
   word-break: break-all;
 }
 
 .shell-history {
   display: flex;
   flex-direction: column;
 }
 
 .shell-history:empty {
   display: none;
 }
 
 .shell-out {
   color: var(--fg);
   font-size: var(--fs-14);
   line-height: 1.5;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
 
 /* inside the shell, lines stack with no extra gaps: a strict row grid */
 .shell .shell-prompt,
 .shell .shell-out {
   margin: 0;
 }
 
 /* echoed command lines keep their exact spacing, like the live line */
 .shell .shell-prompt {
   white-space: pre-wrap;
   word-break: break-all;
 }
 
 /* streamed output: one div per line, no gap between them */
 .shell-stream {
   margin-bottom: 0;
 }
 
 /* while a command runs the prompt goes away; typeahead still shows */
 .shell-live.busy .shell-ps1 {
   display: none;
 }
 
 .shell-match {
   color: var(--red);
   font-weight: 700;
 }
 
 .shell-grep-file {
   color: var(--magenta);
 }
 
 .shell-err {
   color: var(--red);
 }
 
 .shell-dim {
   color: var(--fg-dim);
 }
 
 .shell-dir {
   color: var(--blue);
   font-weight: 700;
 }
 
 .shell-reconnect {
   font: inherit;
   color: var(--accent);
   background: none;
   border: 0;
   padding: 0;
   cursor: pointer;
 }
 
 .shell-reconnect:hover,
 .shell-reconnect:focus-visible {
   color: var(--fg);
   outline: none;
   text-decoration: underline;
 }
 
 /* clear / ctrl+l hides the intro, like the TUI */
 .about-layout.shell-cleared > .section:not(.shell) {
   display: none;
 }
 
 /* trailing prompt */
 .shell-cursor {
   /* inline nbsp with a background = exactly one monospace cell, sits on the text baseline */
   display: inline;
   background: var(--fg);
   color: var(--bg);
   animation: cursorBlink 1.1s steps(1) infinite;
 }
 @keyframes cursorBlink { 50% { background: transparent; color: inherit; } }
 /* solid while typing (blink restarts after a pause, like xterm/Ghostty) */
 .shell-cursor.solid { animation: none; }
 /* unfocused terminal: hollow block, no blink */
 .shell:not(:focus-within) .shell-cursor {
   animation: none;
   background: transparent;
   color: inherit;
   box-shadow: inset 0 0 0 1px var(--fg);
 }
 
 @media (prefers-reduced-motion: reduce) {
   .shell-cursor { animation: none !important; }
 }
 
 /* fetch output inside the shell */
 .shell-fetch {
   margin: 0;
   padding: 0 0 1.5em;
   white-space: normal;
 }