From 0c273fa9ed93e219e57e3a6b0e434a40d307a3c5 Mon Sep 17 00:00:00 2001 From: "Cristian D. Moreno (Kyonax)" Date: Fri, 17 Apr 2026 00:54:46 -0500 Subject: [PATCH 1/4] fix: overlay card fixes, modal abstraction, cam-log rename, Tier 1 file headers Refinement pass on the v0.3 overlay card system and project documentation. Four areas of work. 1. Overlay card fixes. Removed overflow: hidden that was clipping corner-bracket SVGs. Replaced the px-based auto-fill grid with mobile-first 1fr columns (1 col default, 2 at sm/48em, 3 at lg/82.667em). Added truncation for consistent card height: 3-line CSS clamp on descriptions, max 3 use_case tags and requires items with +N overflow indicators. Always-visible DETAILS button opens a full-content detail modal. 2. Modal abstraction. Extracted base-modal.vue (reusable shell with backdrop, ESC, teleport, fade, named slots). Refactored preview-modal.vue to use it. Created detail-modal.vue as a second consumer for overlay info. Extracted parseEmphasis into shared utils. 3. cam-person renamed to cam-log across 7 files (Vue component, router, overlays.js id + path, CHANGELOG, ci.yml comment, local buffers) for consistency with the display name CAM-LOG. 4. Tier 1 file headers. Established a standardized header pattern for all root config/setup/org files using figlet smslant ASCII art with cyberpunk place names. Applied to 11 files: .gitignore (the void), vite.config.js (the forge), eslint.config.mjs (the precinct), index.html (the gate), .gitattributes (the lab), .env.example (the vault), ci.yml (the watchtower), release.yml (the checkpoint), CHANGELOG.org (the logs), README.org (the bridge), LICENSING.org (the pact). Each header follows: license, figlet art, filename + date, description, TOC, optional guidelines/requirements, author/contact. Modified-by: Cristian D. Moreno (Kyonax) --- .env.example | 23 ++ .gitattributes | 22 ++ .github/workflows/ci.yml | 46 ++- .github/workflows/release.yml | 27 +- .gitignore | 38 ++- CHANGELOG.org | 34 ++- CLAUDE.md | 26 ++ LICENSING.org | 24 ++ README.org | 34 ++- eslint.config.mjs | 68 +++-- index.html | 18 ++ .../{cam-person.vue => cam-log.vue} | 6 +- src/router.js | 6 +- src/shared/components/base-modal.vue | 161 ++++++++++ src/shared/components/detail-modal.vue | 277 ++++++++++++++++++ src/shared/components/overlay-card.vue | 158 ++++++++-- src/shared/components/preview-modal.vue | 207 ++++--------- src/shared/data/overlays.js | 4 +- src/shared/utils/parse-emphasis.js | 37 +++ src/views/home.vue | 15 +- vite.config.js | 36 ++- 21 files changed, 1009 insertions(+), 258 deletions(-) create mode 100644 CLAUDE.md rename src/brands/kyonax-on-tech/{cam-person.vue => cam-log.vue} (97%) create mode 100644 src/shared/components/base-modal.vue create mode 100644 src/shared/components/detail-modal.vue create mode 100644 src/shared/utils/parse-emphasis.js diff --git a/.env.example b/.env.example index 5f41b08..4d785d1 100644 --- a/.env.example +++ b/.env.example @@ -1,3 +1,26 @@ +# Copyright (c) 2026 Cristian D. Moreno — @Kyonax +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/ + +# __ __ ____ +# / /_/ / ___ _ _____ ___ __/ / /_ +# / __/ _ \/ -_) | |/ / _ `/ // / / __/ +# \__/_//_/\__/ |___/\_,_/\_,_/_/\__/ +# +# .env.example — Environment variable template +# 2026-04-17 +# +# Template for the runtime env vars consumed by the Vue app. +# Copy to .env and fill in your values, VITE_ prefix is required. +# +# VITE_OBS_WS_HOST WebSocket host +# VITE_OBS_WS_PORT WebSocket port +# VITE_OBS_WS_PASS WebSocket password +# VITE_OBS_WS_LAN LAN address +# +# Cristian D. Moreno (Kyonax) +# kyonax.corp@gmail.com + VITE_OBS_WS_HOST=127.0.0.1 VITE_OBS_WS_PORT=4455 VITE_OBS_WS_PASS= diff --git a/.gitattributes b/.gitattributes index e00d8c6..910769d 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,3 +1,25 @@ +# Copyright (c) 2026 Cristian D. Moreno — @Kyonax +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/ + +# __ __ __ __ +# / /_/ / ___ / /__ _/ / +# / __/ _ \/ -_) / / _ `/ _ \ +# \__/_//_/\__/ /_/\_,_/_.__/ +# +# .gitattributes — Git file handling rules +# 2026-04-17 +# +# Controls how Git handles specific files on checkout and commit. +# The logo.txt rule prevents Windows CRLF from corrupting the +# Unicode box-drawing glyphs in the ASCII logo. +# +# logo.txt: UTF-8 + LF enforcement +# Default: auto-normalize text to LF +# +# Cristian D. Moreno (Kyonax) +# kyonax.corp@gmail.com + # Preserve box-drawing characters and line endings in the brand logo. # Windows clones would otherwise apply CRLF conversion and potentially # corrupt the Unicode frame glyphs. diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index f16ef02..d9d7bb1 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -1,18 +1,34 @@ -# --------------------------------------------------------------- -# RECKIT CI -- Lint, Security Scan, License & Protected-File Gates -# --------------------------------------------------------------- -# Triggers: -# - pull_request: ANY target branch. A PR from `sub-feature` -# to `feat-cam-person` runs the same gates as a PR to -# `dev` or `master`. This is intentional — every merge in -# the chain must meet the pre-check bar before reaching -# dev / master. -# - push: feature branches only (`feat-*`, `feat/*`, -# `feature/*`, `fix-*`, `fix/*`). Gives developers -# feedback before they open a PR. master / dev are skipped -# here because they're protected and only receive commits -# via PRs (which fire the pull_request trigger above). -# --------------------------------------------------------------- +# Copyright (c) 2026 Cristian D. Moreno — @Kyonax +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/ + +# __ __ __ __ __ +# / /_/ / ___ _ _____ _/ /_____/ / / /____ _ _____ ____ +# / __/ _ \/ -_) | |/|/ / _ `/ __/ __/ _ \/ __/ _ \ |/|/ / -_) __/ +# \__/_//_/\__/ |__,__/\_,_/\__/\__/_//_/\__/\___/__,__/\__/_/ +# +# ci.yml — CI gate suite +# 2026-04-17 +# +# Runs every gate on all pull_request targets and feat/fix push +# branches. Concurrency group dedups push-vs-PR double runs. +# Pre-Check Label aggregates all results into one label. +# +# ESLint +# Security Scan +# License Headers +# Protected Files +# Unit Tests +# Pre-Check Label (aggregator) +# +# Guidelines: +# New jobs must be added to Pre-Check Label needs list +# Security Scan excludes eslint.config.mjs (rule strings match patterns) +# License Headers checks first 5 lines for Cristian D. Moreno +# Protected Files is advisory only, never blocks +# +# Cristian D. Moreno (Kyonax) +# kyonax.corp@gmail.com name: CI diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 8b345bb..e9ebe96 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -1,9 +1,24 @@ -# --------------------------------------------------------------- -# RECKIT Release Gate -- Enforced on dev -> master PRs -# --------------------------------------------------------------- -# Ensures CHANGELOG.org and README.org version are updated before -# any code lands on master. -# --------------------------------------------------------------- +# Copyright (c) 2026 Cristian D. Moreno — @Kyonax +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/ + +# __ __ __ __ _ __ +# / /_/ / ___ ____/ / ___ ____/ /__ ___ ___ (_)__ / /_ +# / __/ _ \/ -_) / __/ _ \/ -_) __/ '_// _ \/ _ \/ / _ \/ __/ +# \__/_//_/\__/ \__/_//_/\__/\__/_/\_\/ .__/\___/_/_//_/\__/ +# /_/ +# +# release.yml — Release gate for dev to master PRs +# 2026-04-17 +# +# Blocks merges to master unless the CHANGELOG and README +# version have been updated. Only runs on PRs from dev. +# +# CHANGELOG.org updated +# README.org version bumped +# +# Cristian D. Moreno (Kyonax) +# kyonax.corp@gmail.com name: Release Gate diff --git a/.gitignore b/.gitignore index 083a7bd..c70a16c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,10 +1,34 @@ -# ───────────────────────────────────────────────────────────── -# RECKIT — .gitignore -# ───────────────────────────────────────────────────────────── -# Organized by concern. Keep this file the single source of -# truth for what gets ignored. When in doubt, prefer ignoring. -# Cross-reference: .github/SECURITY.org -# ───────────────────────────────────────────────────────────── +# Copyright (c) 2026 Cristian D. Moreno — @Kyonax +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/ + +# __ __ _ __ +# / /_/ / ___ _ _____ (_)__/ / +# / __/ _ \/ -_) | |/ / _ \/ / _ / +# \__/_//_/\__/ |___/\___/_/\_,_/ +# +# .gitignore — Ignored files and directories +# 2026-04-17 +# +# Single source of truth for everything Git should never track. +# Organized by concern so new patterns land in the right section. +# +# Node / Vue / Vite +# Build / cache +# Logs +# Test / coverage +# Environment / secrets +# Editors / IDEs +# OS junk +# Temp / backup +# Local-only contributor files +# +# Requirements: +# package-lock.json is tracked on purpose (npm ci needs it) +# .env.example is the only tracked env file +# +# Cristian D. Moreno (Kyonax) +# kyonax.corp@gmail.com # ── Node / Vue / Vite ──────────────────────────────────────── node_modules/ diff --git a/CHANGELOG.org b/CHANGELOG.org index 83d248d..0213f68 100644 --- a/CHANGELOG.org +++ b/CHANGELOG.org @@ -1,9 +1,39 @@ +# Copyright (c) 2026 Cristian D. Moreno — @Kyonax +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/ + +# __ __ __ +# / /_/ / ___ / /__ ___ ____ +# / __/ _ \/ -_) / / _ \/ _ `(_-< +# \__/_//_/\__/ /_/\___/\_, /___/ +# /___/ +# +# CHANGELOG.org — Release history and pending work +# 2026-04-17 +# +# Tracks every version, decisions made, and the TODO backlog. +# Each release follows: * [vX.Y] — YYYY-MM-DD :: Short Title +# +# [TODO] — Bugs, features, infrastructure +# [Unreleased] +# [v0.3] — Vue App + CAM-LOG Overlay + Landing Index +# [v0.1] — Brand Bootstrap +# +# Guidelines: +# Entries: *Summary:* hook, *** sub-grouped Added/Changed/Removed/Decided +# Decided items: bolded title with rationale +# No arrows, no emojis, no private-file references +# Bare facts only, decisions carry rationale +# +# Cristian D. Moreno (Kyonax) +# kyonax.corp@gmail.com + #+TITLE: RECKIT Changelog #+AUTHOR: [[https://orcid.org/0009-0006-4459-5538][Cristian D. Moreno - Kyonax]] #+EMAIL: kyonax.corp@gmail.com #+DATE: Apr 13, 2026 #+FILETAGS: :KYO:RECKIT:CHANGELOG: -#+LAST_UPDATE: Apr 15, 2026 +#+LAST_UPDATE: Apr 17, 2026 #+OPTIONS: toc:nil num:nil H:4 * [TODO] @@ -60,7 +90,7 @@ *** Overlays - =src/shared/data/overlays.js= — overlay registry schema (=id=, =brand=, =name=, =description=, =use_cases[]=, =path=, dimensions, =requires[]=, =triggers[]=, =status=) -- =src/brands/kyonax-on-tech/cam-person.vue= — CAM-LOG HUD at =/@kyonax_on_tech/cam-person= +- =src/brands/kyonax-on-tech/cam-log.vue= — CAM-LOG HUD at =/@kyonax_on_tech/cam-log= - Dynamic =SES::::T= label driven by scene + take counter - Recording timer (REC text + dot red while recording; MODE + time stay white) - == bound to =Mic/Aux= diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..9f36551 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,26 @@ +# CLAUDE.md — RECKIT Project Instructions + +## ABSOLUTE PROHIBITION: Git Write Operations + +**NEVER run ANY of these commands under ANY circumstance unless the user EXPLICITLY and DIRECTLY tells you to:** + +- `git commit` (any form, any flags) +- `git push` (any form, any flags) +- `git tag` +- `git merge` +- `git rebase` +- `git reset --hard` +- `git checkout -- .` +- `git restore .` +- `git clean` +- `git stash drop` +- `git branch -D` +- `gh pr merge` +- `gh release create` + +**"Create the commit text" means write to COMMIT.org. It does NOT mean run git commit.** +**"Do the PR" means write to PR.org or generate PR text. It does NOT mean run gh pr create.** + +The user manages all git operations manually. Your job is to generate text, write code, and prepare files. The user commits, pushes, and manages the repository themselves. + +There are ZERO exceptions to this rule. diff --git a/LICENSING.org b/LICENSING.org index e68c0e6..04803ff 100644 --- a/LICENSING.org +++ b/LICENSING.org @@ -1,3 +1,27 @@ +# Copyright (c) 2026 Cristian D. Moreno — @Kyonax +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/ + +# __ __ __ +# / /_/ / ___ ___ ___ _____/ /_ +# / __/ _ \/ -_) / _ \/ _ `/ __/ __/ +# \__/_//_/\__/ / .__/\_,_/\__/\__/ +# /_/ +# +# LICENSING.org — Dual license guide for contributors +# 2026-04-17 +# +# Explains the MPL-2.0 / Apache-2.0 dual license, when to +# use which, and the exact header text for each. +# +# How it works +# When to use which +# File headers (MPL-2.0 / Apache-2.0) +# No header? +# +# Cristian D. Moreno (Kyonax) +# kyonax.corp@gmail.com + #+TITLE: RECKIT Licensing Guide #+AUTHOR: [[https://orcid.org/0009-0006-4459-5538][Cristian D. Moreno - Kyonax]] diff --git a/README.org b/README.org index cdece6a..f61937e 100644 --- a/README.org +++ b/README.org @@ -1,9 +1,41 @@ +# Copyright (c) 2026 Cristian D. Moreno — @Kyonax +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/ + +# __ __ __ _ __ +# / /_/ / ___ / / ____(_)__/ /__ ____ +# / __/ _ \/ -_) / _ \/ __/ / _ / _ `/ -_) +# \__/_//_/\__/ /_.__/_/ /_/\_,_/\_, /\__/ +# /___/ +# +# README.org — Project landing page on GitHub +# 2026-04-17 +# +# First thing visitors and contributors see. Rendered by +# GitHub as the repo homepage. Contains the ASCII logo, +# badges, project description, and contributing info. +# +# ASCII logo (centered table) +# Badges (shields.io) +# What is RECKIT? +# Contributing +# +# Guidelines: +# ASCII centering: inside
+# Badges: extension-less SVG URLs only, flat-square style +# Custom logos: hardcode fill color in SVG before base64 +# Version: #+VERSION:, logo footer, badge must all match +# Minimal README style, no verbose docs here +# +# Cristian D. Moreno (Kyonax) +# kyonax.corp@gmail.com + #+AUTHOR: [[https://orcid.org/0009-0006-4459-5538][Cristian D. Moreno - Kyonax]] #+EMAIL: kyonax.corp@gmail.com #+DATE: Apr 13, 2026 #+FILETAGS: :KYO:RECKIT:OBS:AUTOMATION:CONTENT: #+VERSION: v0.3 -#+LAST_UPDATE: Apr 13, 2026 +#+LAST_UPDATE: Apr 17, 2026 #+BEGIN_HTML
diff --git a/eslint.config.mjs b/eslint.config.mjs index 2d5bcbc..6a0942c 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -2,39 +2,53 @@ * Copyright (c) 2026 Cristian D. Moreno — @Kyonax * This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/ + */ + +/** + * __ __ _ __ + * / /_/ / ___ ___ _______ ____(_)__ ____/ /_ + * / __/ _ \/ -_) / _ \/ __/ -_) __/ / _ \/ __/ __/ + * \__/_//_/\__/ / .__/_/ \__/\__/_/_//_/\__/\__/ + * /_/ + * + * eslint.config.mjs — CCS code standards for browser JS + * 2026-04-17 * - * ================================================================ - * RECKIT -- ESLint Flat-Config - * ================================================================ + * ESLint flat-config enforcing Cyber Code Syndicate conventions + * for browser JS. No TypeScript, no Node globals. The naming + * table below is enforced via code review since ESLint core + * cannot distinguish variable/function/class naming natively. * - * Repository : kyo-recording-automation (RECKIT) - * Author : Cristian D. Moreno -- Kyonax - * License : MPL-2.0 + * | Scope | Style | Example | + * |-------------|---------------|----------------------| + * | functions | camelCase | startOverlay() | + * | variables | snake_case | overlay_timer | + * | constants | UPPER_CASE | MAX_RETRY | + * | classes | PascalCase | HudController | + * | filenames | kebab-case | scene-switcher.js | * - * Based on CCS code standards for **browser JS** - * (no TypeScript, no Node globals). + * Global ignores + * Import ordering (simple-import-sort) + * Code quality rules + * Formatting rules + * Security bans (eval, innerHTML, document.write) + * Security plugin rules + * Unicorn extras + * JSDoc + * Test file overrides (Vitest globals) * - * Enforced conventions - * -------------------- - * | Scope | Style | Example | - * |-------------|---------------|----------------------| - * | functions | camelCase | startOverlay() | - * | variables | snake_case | overlay_timer | - * | constants | UPPER_CASE | MAX_RETRY | - * | classes | PascalCase | HudController | - * | filenames | kebab-case | scene-switcher.js | + * Guidelines: + * 2-space indent, single quotes, semicolons, trailing commas + * prefer-const, no-var, eqeqeq always + * prefer-template over string concatenation + * No magic numbers (ignore -1, 0, 1, 2) + * Composables clean up listeners in onUnmounted * - * Plugins - * ------- - * - @eslint/js -- ESLint recommended baseline - * - eslint-plugin-import -- import analysis (via simple-import-sort) - * - eslint-plugin-jsdoc -- JSDoc quality - * - eslint-plugin-simple-import-sort -- deterministic import order - * - eslint-plugin-unicorn -- opinionated best-practices - * - eslint-plugin-security -- static security analysis + * Requirements: + * detect-object-injection on loop indexes are false positives * - * Last sync with CCS standards : 2026-04-13 - * ================================================================ + * Cristian D. Moreno (Kyonax) + * kyonax.corp@gmail.com */ import js from '@eslint/js'; diff --git a/index.html b/index.html index cf87466..c382524 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,24 @@ This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/ --> + + diff --git a/src/brands/kyonax-on-tech/cam-person.vue b/src/brands/kyonax-on-tech/cam-log.vue similarity index 97% rename from src/brands/kyonax-on-tech/cam-person.vue rename to src/brands/kyonax-on-tech/cam-log.vue index dde1e04..d161ea1 100644 --- a/src/brands/kyonax-on-tech/cam-person.vue +++ b/src/brands/kyonax-on-tech/cam-log.vue @@ -3,13 +3,13 @@ This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/ - cam-person — Cyberpunk HUD overlay for webcam (camera to person). + cam-log — Cyberpunk HUD overlay for webcam (camera to person). Renders on top of a Video Capture source in OBS. Transparent background — webcam shows through. --> @@ -166,10 +193,13 @@ import { computed, ref } from 'vue'; import CornerBracket from './corner-bracket.vue'; +import DetailModal from './detail-modal.vue'; import PreviewModal from './preview-modal.vue'; +import { parseEmphasis } from '../utils/parse-emphasis.js'; const COPIED_RESET_MS = 1500; -const EMPHASIS_PATTERN = /\*\*(.+?)\*\*/g; +const MAX_VISIBLE_USE_CASES = 3; +const MAX_VISIBLE_REQUIRES = 3; const props = defineProps({ overlay: { @@ -178,35 +208,9 @@ const props = defineProps({ }, }); -function parseEmphasis(text) { - if (!text) { - return []; - } - - const segments = []; - let last_index = 0; - - for (const match of text.matchAll(EMPHASIS_PATTERN)) { - if (match.index > last_index) { - segments.push({ - text: text.slice(last_index, match.index), - bold: false, - }); - } - - segments.push({ text: match[1], bold: true }); - last_index = match.index + match[0].length; - } - - if (last_index < text.length) { - segments.push({ text: text.slice(last_index), bold: false }); - } - - return segments; -} - const is_copied = ref(false); const is_modal_open = ref(false); +const is_detail_open = ref(false); const pending_trigger = ref(null); const is_planned = computed(() => { @@ -223,6 +227,34 @@ const has_actions = computed(() => { && props.overlay.triggers.length > 0); }); +const visible_use_cases = computed(() => { + if (!props.overlay.use_cases) { + return []; + } + return props.overlay.use_cases.slice(0, MAX_VISIBLE_USE_CASES); +}); + +const extra_use_cases_count = computed(() => { + if (!props.overlay.use_cases) { + return 0; + } + return Math.max( + 0, + props.overlay.use_cases.length - MAX_VISIBLE_USE_CASES, + ); +}); + +const visible_requires = computed(() => { + return props.overlay.requires.slice(0, MAX_VISIBLE_REQUIRES); +}); + +const extra_requires_count = computed(() => { + return Math.max( + 0, + props.overlay.requires.length - MAX_VISIBLE_REQUIRES, + ); +}); + function openModal(trigger_payload = null) { pending_trigger.value = trigger_payload; is_modal_open.value = true; @@ -233,6 +265,14 @@ function closeModal() { pending_trigger.value = null; } +function openDetail() { + is_detail_open.value = true; +} + +function closeDetail() { + is_detail_open.value = false; +} + const full_url = computed(() => { return `${window.location.origin}${props.overlay.path}`; }); @@ -263,9 +303,8 @@ async function copyUrl() { background: rgba(255, 215, 0, 0.02); border: 1px solid var(--clr-border-100); display: grid; - grid-auto-rows: min-content; + grid-auto-rows: auto; gap: 1em; - overflow: hidden; min-width: 0; word-break: break-word; overflow-wrap: anywhere; @@ -362,6 +401,10 @@ async function copyUrl() { .card-description p { opacity: 0.8; margin: 0; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; } .card-description .emphasis { @@ -407,6 +450,11 @@ async function copyUrl() { white-space: nowrap; } +.use-case-overflow { + opacity: 0.5; + border-style: dashed; +} + .card-spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); @@ -529,6 +577,21 @@ async function copyUrl() { color: var(--clr-primary-100); } +.requires-overflow { + font-family: var(--font-mono); + font-size: var(--fs-250); + color: var(--clr-neutral-200); + opacity: 0.5; + position: relative; +} + +.requires-overflow::before { + content: "›"; + position: absolute; + left: -1em; + color: var(--clr-primary-100); +} + .card-actions { display: flex; flex-direction: column; @@ -582,4 +645,35 @@ async function copyUrl() { line-height: 1; } +.detail-button { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5em; + width: 100%; + padding: 0.65em 1em; + font-family: var(--font-mono); + font-size: var(--fs-200); + color: var(--clr-neutral-50); + background: transparent; + border: 1px solid var(--clr-border-100); + letter-spacing: 0.15em; + text-transform: uppercase; + cursor: pointer; + transition: color 0.15s ease, border-color 0.15s ease, + background 0.15s ease; +} + +.detail-button:hover { + color: var(--clr-primary-100); + border-color: var(--clr-primary-100); + background: rgba(255, 215, 0, 0.04); +} + +.detail-icon { + color: var(--clr-primary-100); + font-size: 0.9em; + line-height: 1; +} + diff --git a/src/shared/components/preview-modal.vue b/src/shared/components/preview-modal.vue index 02c1728..df5e527 100644 --- a/src/shared/components/preview-modal.vue +++ b/src/shared/components/preview-modal.vue @@ -10,80 +10,65 @@ -->