Skip to content

prompt.md

Latest commit

 

History

History
109 lines (76 loc) · 4.7 KB

prompt.md

File metadata and controls

109 lines (76 loc) · 4.7 KB
Raw

A SELF-CONTAINED, PIXEL-FAITHFUL REPRODUCTION OF THE TAILWIND NEXT.JS STARTER BLOG TEMPLATE AS PLAIN HTML + CSS + VANILLA JS. NO BUILD STEP REQUIRED.

REFERENCE: https://tailwind-nextjs-starter-blog.vercel.app

SUMMARY

TAILWIND NEXT.JS STARTER BLOG IS AN OPEN-SOURCE, FEATURE-RICH BLOGGING TEMPLATE BUILT BY TIMOTHY LIN (TIMLRX) USING NEXT.JS AND TAILWIND CSS. IT IS A CLEAN, PROFESSIONAL BLOG STARTER WITH FULL LIGHT/DARK MODE SUPPORT, TAG-BASED NAVIGATION, AND MULTI-PAGE STRUCTURE. THE DESIGN IS MINIMAL, TYPOGRAPHICALLY FOCUSED, WITH A ROSE/PINK PRIMARY ACCENT COLOR AND SPACE GROTESK FONT. THE TEMPLATE PRESENTS A FICTIONAL AUTHOR "TAILS AZIMUTH" AND INCLUDES SAMPLE BLOG POSTS, A PROJECTS PAGE, A TAGS PAGE, AND AN ABOUT PAGE.

THE ORIGINAL IS HOSTED AT https://tailwind-nextjs-starter-blog.vercel.app AND ITS SOURCE IS OPEN-SOURCE AT https://github.com/timlrx/tailwind-nextjs-starter-blog.

STYLE

PALETTE

LIGHT MODE:

  • BACKGROUND: #FFFFFF
  • SURFACE: #F9FAFB (GRAY-50)
  • TEXT PRIMARY: #111827 (GRAY-900)
  • TEXT SECONDARY: #6B7280 (GRAY-500)
  • TEXT MUTED: #9CA3AF (GRAY-400)
  • BORDER: #E5E7EB (GRAY-200)
  • PRIMARY ACCENT (LINKS, TAGS, CTA): #E11D48 (ROSE-600, OKLCH-BASED)
  • PRIMARY-50: #FFF1F2
  • PRIMARY-100: #FFE4E6
  • PRIMARY-200: #FECDD3
  • PRIMARY-300: #FDA4AF
  • PRIMARY-400: #FB7185
  • PRIMARY-500: #F43F5E
  • PRIMARY-600: #E11D48
  • PRIMARY-700: #BE123C
  • PRIMARY-800: #9F1239
  • PRIMARY-900: #881337
  • PRIMARY-950: #4C0519

DARK MODE:

  • BACKGROUND: #0F172A (GRAY-950 / NEAR-BLACK)
  • SURFACE: #1E293B (GRAY-900)
  • TEXT PRIMARY: #F9FAFB (GRAY-100)
  • TEXT SECONDARY: #9CA3AF (GRAY-400)
  • BORDER: #374151 (GRAY-700)
  • PRIMARY ACCENT: #FB7185 (ROSE-400)

FONTS

  • HEADING & BODY: Space Grotesk (GOOGLE FONTS, LATIN SUBSET, WEIGHTS 400/500/600/700)
  • MONOSPACE (CODE): Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", monospace
  • CSS VARIABLE: --font-space-grotesk

TYPE SCALE

  • DISPLAY / H1: 3.75REM (60PX) / FONT-EXTRABOLD / TRACKING-TIGHT (RESPONSIVE: 1.875REM ON MOBILE)
  • H2: 1.875REM / FONT-EXTRABOLD / TRACKING-TIGHT
  • H3: 1.5REM / FONT-BOLD
  • BODY: 1REM / FONT-NORMAL / LINE-HEIGHT 1.75
  • SMALL / META: 0.875REM / TEXT-GRAY-500
  • TAG: 0.75REM / FONT-MEDIUM / UPPERCASE / TRACKING-WIDE

RADII

  • TAGS: 9999PX (FULLY ROUNDED PILL)
  • CARDS / SURFACES: 0.25REM (ROUNDED-SM)

SHADOWS

  • SIDEBAR: BOX-SHADOW: 0 4PX 6PX -1PX RGBA(0,0,0,0.1)

ANIMATION / EASINGS

  • HOVER TRANSITIONS: TRANSITION-COLORS DURATION-200
  • THEME TOGGLE: SMOOTH VIA LOCALSTORAGE + INSTANT CLASS TOGGLE ON <HTML> (NO FLASH)
  • SCROLL BEHAVIOR: SCROLL-SMOOTH

LAYOUT & STRUCTURE

PAGES DISCOVERED

  1. HOME (index.html) - MAIN LANDING PAGE. HERO SECTION WITH "LATEST" HEADING AND SITE DESCRIPTION. LIST OF UP TO 5 MOST RECENT BLOG POSTS. EACH POST: DATE, TITLE LINK, TAGS, SUMMARY, "READ MORE →" LINK. "ALL POSTS →" LINK AT BOTTOM.

  2. BLOG (blog.html) - BLOG LISTING WITH TAGS SIDEBAR. SIDEBAR (DESKTOP ONLY): "ALL POSTS" LINK + SORTED TAG LIST WITH POST COUNTS. MAIN AREA: FULL POST LISTING WITH SEARCH FIELD (DECORATIVE IN STATIC CLONE), PAGINATION.

  3. TAGS (tags.html) - ALL TAGS DISPLAYED AS A TWO-COLUMN GRID WITH POST COUNT BADGES. TITLE: "TAGS".

  4. PROJECTS (projects.html) - TWO PROJECT CARDS IN A GRID: "A SEARCH ENGINE" AND "THE TIME MACHINE". EACH CARD HAS IMAGE, TITLE, DESCRIPTION, EXTERNAL LINK.

  5. ABOUT (about.html) - AUTHOR BIO PAGE FOR "TAILS AZIMUTH". AVATAR, NAME, ROLE, SOCIAL LINKS, AND MARKDOWN CONTENT.

  6. BLOG POST: INTRODUCING TAILWIND NEXTJS STARTER BLOG (blog/introducing-tailwind-nextjs-starter-blog.html) - FEATURED INTRO POST. POST LAYOUT WITH LEFT SIDEBAR (AUTHOR AVATAR + NAME), MAIN CONTENT, RIGHT SIDEBAR (TAGS + PREV/NEXT NAV).

  7. BLOG POST: NEW FEATURES IN V1 (blog/new-features-in-v1.html) - FEATURE OVERVIEW POST.

  8. BLOG POST: THE TIME MACHINE (blog/the-time-machine.html) - LITERARY EXCERPT POST.

  9. BLOG POST: GITHUB MARKDOWN GUIDE (blog/github-markdown-guide.html) - MARKDOWN REFERENCE POST.

  10. BLOG POST: CODE SAMPLE (blog/code-sample.html) - CODE HIGHLIGHTING DEMO POST.

SHARED CHROME

HEADER/NAV:

  • LEFT: LOGO (SVG FLAME ICON) + "TAILWINDBLOG" TEXT LINK
  • CENTER-RIGHT (DESKTOP): HOME, BLOG, TAGS, PROJECTS, ABOUT - ALL CAPS NOT, REGULAR CASE. HIDDEN ON MOBILE.
  • FAR RIGHT: SEARCH ICON BUTTON, SUN/MOON THEME TOGGLE BUTTON, HAMBURGER MENU (MOBILE ONLY)
  • MOBILE NAV: FULL-SCREEN OVERLAY WITH CENTERED LINKS
  • BORDER-BOTTOM: 1PX SOLID GRAY-200 / GRAY-700 DARK
  • NO STICKY (STICKYНАВ: FALSE)

FOOTER:

  • CENTERED. ROW OF SOCIAL ICONS (SVG). COPYRIGHT LINE: "© {YEAR} · TAILS AZIMUTH · TAILWIND NEXTJS BLOG THEME"
  • PADDING-TOP: 2REM, PADDING-BOTTOM: 2REM