heyiam 0.2.28 → 0.3.0

package/dist/render/templates/minimal/styles.css

@@ -0,0 +1,525 @@
+/* ═══════════════════════════════════════════════════════════
+   MINIMAL (Typography) — Ultra-clean light mode
+   Serif headings (Newsreader), Inter body. Near-black accent.
+   Maximum whitespace, no cards, thin rules as dividers.
+   ═══════════════════════════════════════════════════════════ */
+
+@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Inter:wght@400;500&display=swap');
+
+/* ── Variables ─────────────────────────────────────────── */
+
+.minimal {
+  --mn-fg: #1c1917;
+  --mn-fg-2: #57534e;
+  --mn-fg-3: #a8a29e;
+  --mn-bg: #ffffff;
+  --mn-rule: #e7e5e4;
+  --mn-link: #1c1917;
+  --mn-link-hover: #57534e;
+  --mn-tag-bg: #f5f5f4;
+  --mn-tag-fg: #44403c;
+  --mn-font-serif: 'Newsreader', 'Georgia', serif;
+  --mn-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --mn-font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
+  --mn-max-width: 640px;
+  --mn-space-xs: 0.25rem;
+  --mn-space-sm: 0.5rem;
+  --mn-space-md: 1rem;
+  --mn-space-lg: 2rem;
+  --mn-space-xl: 3rem;
+  --mn-space-2xl: 4.5rem;
+
+  font-family: var(--mn-font-sans);
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--mn-fg);
+  background: var(--mn-bg);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ── Layout wrappers ──────────────────────────────────── */
+
+.mn-portfolio,
+.mn-project,
+.mn-session {
+  max-width: var(--mn-max-width);
+  margin: 0 auto;
+  padding: var(--mn-space-2xl) var(--mn-space-lg);
+}
+
+/* ── Headings ─────────────────────────────────────────── */
+
+.mn-heading {
+  font-family: var(--mn-font-serif);
+  font-weight: 500;
+  font-size: 2.25rem;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  color: var(--mn-fg);
+  margin: 0 0 var(--mn-space-md) 0;
+}
+
+.mn-section-heading {
+  font-family: var(--mn-font-sans);
+  font-weight: 500;
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--mn-fg-3);
+  margin: 0 0 var(--mn-space-md) 0;
+}
+
+/* ── Rule ─────────────────────────────────────────────── */
+
+.mn-rule {
+  border: none;
+  border-top: 1px solid var(--mn-rule);
+  margin: var(--mn-space-xl) 0;
+}
+
+/* ── Bio ──────────────────────────────────────────────── */
+
+.mn-bio {
+  font-family: var(--mn-font-serif);
+  font-size: 1.125rem;
+  line-height: 1.75;
+  color: var(--mn-fg-2);
+  margin: 0 0 var(--mn-space-lg) 0;
+  max-width: 55ch;
+}
+
+/* ── Photo ────────────────────────────────────────────── */
+
+.mn-photo-wrap {
+  margin-bottom: var(--mn-space-lg);
+}
+
+.mn-photo {
+  width: 96px;
+  height: 96px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 1px solid var(--mn-rule);
+}
+
+/* ── Contact / stats inline ───────────────────────────── */
+
+.mn-contact,
+.mn-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mn-space-xs);
+  font-size: 0.8125rem;
+  color: var(--mn-fg-2);
+  margin-bottom: var(--mn-space-md);
+}
+
+.mn-contact span + span::before,
+.mn-stats span + span::before {
+  content: '\00b7';
+  margin-right: var(--mn-space-xs);
+  color: var(--mn-fg-3);
+}
+
+.mn-contact a,
+.mn-stats a {
+  color: var(--mn-link);
+  text-decoration: none;
+  border-bottom: 1px solid var(--mn-rule);
+}
+
+.mn-contact a:hover,
+.mn-stats a:hover {
+  color: var(--mn-link-hover);
+  border-bottom-color: var(--mn-fg-3);
+}
+
+/* ── Links (project page) ─────────────────────────────── */
+
+.mn-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mn-space-md);
+  font-size: 0.8125rem;
+  margin-bottom: var(--mn-space-md);
+}
+
+.mn-links a {
+  color: var(--mn-fg-2);
+  text-decoration: none;
+  border-bottom: 1px solid var(--mn-rule);
+}
+
+.mn-links a:hover {
+  color: var(--mn-fg);
+  border-bottom-color: var(--mn-fg-3);
+}
+
+/* ── Sections ─────────────────────────────────────────── */
+
+.mn-section {
+  margin-bottom: 0;
+}
+
+/* ── Narrative ────────────────────────────────────────── */
+
+.mn-narrative p,
+.mn-narrative-text {
+  font-family: var(--mn-font-serif);
+  font-size: 1.0625rem;
+  line-height: 1.8;
+  color: var(--mn-fg);
+  margin: 0;
+}
+
+/* ── Context ──────────────────────────────────────────── */
+
+.mn-context {
+  font-size: 0.875rem;
+  color: var(--mn-fg-2);
+  line-height: 1.7;
+  margin: var(--mn-space-md) 0;
+}
+
+/* ── Blockquote (dev take) ────────────────────────────── */
+
+.mn-blockquote {
+  margin: var(--mn-space-lg) 0;
+  padding-left: var(--mn-space-lg);
+  border-left: 2px solid var(--mn-rule);
+}
+
+.mn-blockquote p {
+  font-family: var(--mn-font-serif);
+  font-style: italic;
+  font-size: 1.0625rem;
+  line-height: 1.75;
+  color: var(--mn-fg-2);
+  margin: 0;
+}
+
+/* ── Breadcrumb ───────────────────────────────────────── */
+
+.mn-breadcrumb {
+  font-size: 0.8125rem;
+  color: var(--mn-fg-3);
+  margin-bottom: var(--mn-space-lg);
+}
+
+.mn-breadcrumb a {
+  color: var(--mn-fg-2);
+  text-decoration: none;
+}
+
+.mn-breadcrumb a:hover {
+  color: var(--mn-fg);
+}
+
+.mn-breadcrumb-sep {
+  margin: 0 var(--mn-space-xs);
+  color: var(--mn-fg-3);
+}
+
+/* ── Project list (portfolio) ─────────────────────────── */
+
+.mn-project-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.mn-project-item {
+  padding: var(--mn-space-md) 0;
+  border-bottom: 1px solid var(--mn-rule);
+  display: flex;
+  flex-direction: column;
+  gap: var(--mn-space-xs);
+}
+
+.mn-project-item:last-child {
+  border-bottom: none;
+}
+
+.mn-project-link {
+  font-family: var(--mn-font-serif);
+  font-size: 1.125rem;
+  font-weight: 500;
+  color: var(--mn-fg);
+  text-decoration: none;
+}
+
+.mn-project-link:hover {
+  color: var(--mn-fg-2);
+}
+
+/* ── Meta text ────────────────────────────────────────── */
+
+.mn-meta {
+  font-size: 0.8125rem;
+  color: var(--mn-fg-2);
+  line-height: 1.5;
+}
+
+.mn-skill-line {
+  color: var(--mn-fg-3);
+}
+
+/* ── Session list ─────────────────────────────────────── */
+
+.mn-session-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.mn-session-item {
+  padding: var(--mn-space-sm) 0;
+  border-bottom: 1px solid var(--mn-rule);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.mn-session-item:last-child {
+  border-bottom: none;
+}
+
+.mn-session-link {
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.mn-session-title {
+  font-family: var(--mn-font-serif);
+  font-size: 1rem;
+  color: var(--mn-fg);
+}
+
+.mn-session-link:hover .mn-session-title {
+  color: var(--mn-fg-2);
+}
+
+/* ── Screenshot ───────────────────────────────────────── */
+
+.mn-screenshot {
+  margin: var(--mn-space-lg) 0;
+}
+
+.mn-screenshot img {
+  width: 100%;
+  border: 1px solid var(--mn-rule);
+  border-radius: 2px;
+}
+
+.mn-screenshot-placeholder {
+  display: none;
+}
+
+/* ── Tags ─────────────────────────────────────────────── */
+
+.mn-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mn-space-sm);
+}
+
+.mn-tag {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--mn-tag-fg);
+  background: var(--mn-tag-bg);
+  padding: 0.2rem 0.6rem;
+  border-radius: 2px;
+}
+
+/* ── Inline list (tools, sources) ─────────────────────── */
+
+.mn-inline-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mn-space-xs);
+  font-size: 0.8125rem;
+  color: var(--mn-fg-2);
+}
+
+.mn-inline-item + .mn-inline-item::before {
+  content: '\00b7';
+  margin-right: var(--mn-space-xs);
+  color: var(--mn-fg-3);
+}
+
+.mn-source-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mn-space-xs);
+  font-size: 0.8125rem;
+  color: var(--mn-fg-2);
+}
+
+.mn-source-item + .mn-source-item::before {
+  content: '\00b7';
+  margin-right: var(--mn-space-xs);
+  color: var(--mn-fg-3);
+}
+
+/* ── Decision list ────────────────────────────────────── */
+
+.mn-decision-list {
+  padding-left: 1.25rem;
+  margin: 0;
+}
+
+.mn-decision-item {
+  font-size: 0.875rem;
+  line-height: 1.7;
+  color: var(--mn-fg);
+  margin-bottom: var(--mn-space-sm);
+}
+
+/* ── Phase list ───────────────────────────────────────── */
+
+.mn-phase-list {
+  padding-left: 1.25rem;
+  margin: 0;
+}
+
+.mn-phase-item {
+  margin-bottom: var(--mn-space-md);
+}
+
+.mn-phase-item strong {
+  font-family: var(--mn-font-serif);
+  font-size: 0.9375rem;
+  font-weight: 500;
+  display: block;
+  margin-bottom: 2px;
+}
+
+.mn-phase-item .mn-meta {
+  display: block;
+}
+
+/* ── Beats ────────────────────────────────────────────── */
+
+.mn-beats-list {
+  padding-left: 1.25rem;
+  margin: 0;
+}
+
+.mn-beat-item {
+  margin-bottom: var(--mn-space-md);
+}
+
+.mn-beat-item strong {
+  font-family: var(--mn-font-serif);
+  font-size: 0.9375rem;
+  font-weight: 500;
+  display: block;
+  margin-bottom: 2px;
+}
+
+.mn-beat-item p {
+  font-size: 0.875rem;
+  line-height: 1.7;
+  color: var(--mn-fg-2);
+  margin: 0;
+}
+
+/* ── Q&A ──────────────────────────────────────────────── */
+
+.mn-qa-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mn-space-lg);
+}
+
+.mn-qa-question {
+  font-family: var(--mn-font-serif);
+  font-weight: 500;
+  font-size: 0.9375rem;
+  color: var(--mn-fg);
+  margin: 0 0 var(--mn-space-xs) 0;
+}
+
+.mn-qa-answer {
+  font-size: 0.875rem;
+  line-height: 1.7;
+  color: var(--mn-fg-2);
+  margin: 0;
+}
+
+/* ── File list ────────────────────────────────────────── */
+
+.mn-file-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.mn-file-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: var(--mn-space-xs) 0;
+  font-size: 0.8125rem;
+  border-bottom: 1px solid var(--mn-rule);
+}
+
+.mn-file-item:last-child {
+  border-bottom: none;
+}
+
+.mn-file-path {
+  font-family: var(--mn-font-mono);
+  font-size: 0.75rem;
+  color: var(--mn-fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+
+.mn-file-diff {
+  font-family: var(--mn-font-mono);
+  font-size: 0.75rem;
+  color: var(--mn-fg-3);
+  margin-left: var(--mn-space-md);
+  white-space: nowrap;
+}
+
+/* ── Simple list (highlights) ─────────────────────────── */
+
+.mn-list {
+  padding-left: 1.25rem;
+  margin: 0;
+}
+
+.mn-list li {
+  font-size: 0.875rem;
+  line-height: 1.7;
+  color: var(--mn-fg);
+  margin-bottom: var(--mn-space-xs);
+}
+
+/* ── Footer ───────────────────────────────────────────── */
+
+.mn-footer {
+  margin-top: var(--mn-space-2xl);
+  padding-top: var(--mn-space-lg);
+  border-top: 1px solid var(--mn-rule);
+  font-size: 0.75rem;
+  color: var(--mn-fg-3);
+}
+
+.mn-footer a {
+  color: var(--mn-fg-3);
+  text-decoration: none;
+  border-bottom: 1px solid var(--mn-rule);
+}
+
+.mn-footer a:hover {
+  color: var(--mn-fg-2);
+}