-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1 lines (1 loc) · 18 KB
/
index.html
File metadata and controls
1 lines (1 loc) · 18 KB
1
<!DOCTYPE html><html class="dark" lang="en"><head><meta charset="utf-8"><link href="/favicon.ico" rel="icon"><link href="/favicon.svg" rel="icon" type="image/svg+xml"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="#000000" name="theme-color"><link href="/rss.xml" rel="alternate" type="application/rss+xml" title="Fezcodex RSS Feed"><meta content="codex by fezcode..." name="description"><meta content="website" property="og:type"><meta content="https://fezcode.com/" property="og:url"><meta content="Fezcodex - Personal Blog and Projects" property="og:title"><meta content="Discover logs, posts, projects, and stories from Fezcode." property="og:description"><meta content="/images/asset/ogtitle.png" property="og:image"><meta content="summary_large_image" name="twitter:card"><meta content="https://fezcode.com/" name="twitter:url"><meta content="Fezcodex - Personal Blog and Projects" name="twitter:title"><meta content="Discover logs, posts, projects, and stories from Fezcode." name="twitter:description"><meta content="/images/asset/ogtitle.png" name="twitter:image"><link href="/logo192.png" rel="apple-touch-icon"><link href="/manifest.json" rel="manifest"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin=""><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Arvo&family=Inter&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet"><title>The Vague | Fezcodex</title><title>fezcodex</title><script defer src="/static/js/main.87f8d95f.js"></script><link href="/static/css/main.c666da2c.css" rel="stylesheet"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="/static/css/9206.1267b85d.chunk.css" rel="stylesheet" type="text/css"><link href="https://fonts.gstatic.com" rel="preconnect"><link href="https://github.com" rel="preconnect"><link href="https://release-assets.githubusercontent.com" rel="preconnect"><meta content="Issues of The Vague. A collection of thoughts and whispers." name="description"><meta content="Fezcodex, The Vague, PDF, zine, editorial" name="keywords"><meta content="The Vague | Fezcodex" property="og:title"><meta content="Issues of The Vague. A collection of thoughts and whispers." property="og:description"><meta content="https://fezcode.com/images/asset/the-vague-page.webp" property="og:image"><meta content="https://fezcode.com/the-vague" property="og:url"><meta content="website" property="og:type"><meta content="Fezcodex" property="og:site_name"><meta content="https://fezcode.com/images/asset/the-vague-page.webp" property="og:image:secure_url"><meta content="summary_large_image" name="twitter:card"><meta content="The Vague | Fezcodex" name="twitter:title"><meta content="Issues of The Vague. A collection of thoughts and whispers." name="twitter:description"><meta content="https://fezcode.com/images/asset/the-vague-page.webp" name="twitter:image"><meta content="https://fezcode.com/the-vague" name="twitter:url"><link href="https://fezcode.com/the-vague" rel="canonical"></head><body class="bg-slate-950"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div class="bg-emerald-600 text-white relative z-[100] border-b-2 border-black selection:bg-white selection:text-black" style="height:auto;opacity:1"><div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-4"><div class="flex items-center gap-3 flex-1"><span class="shrink-0"><svg fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M108,84a16,16,0,1,1,16,16A16,16,0,0,1,108,84Zm128,44A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Zm-72,36.68V132a20,20,0,0,0-20-20,12,12,0,0,0-4,23.32V168a20,20,0,0,0,20,20,12,12,0,0,0,4-23.32Z"></path></svg></span><p class="font-mono text-xs md:text-sm font-black uppercase tracking-widest leading-tight">CLIMB THE TALL BUILDING 0 IS ONLINE: BUILD YOUR DECK AND CLIMB. ACCESS AT /CLIMB-THE-TALL-BUILDING-0.</p><a class="shrink-0 inline-flex items-center gap-1 bg-black/20 hover:bg-black/40 px-3 py-1 rounded-sm border border-white/20 transition-all font-bold text-[10px] uppercase" href="https://fezcode.com/climb-the-tall-building-0/">Play Climb the Tall Building 0<svg fill="currentColor" height="12" viewBox="0 0 256 256" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></a></div><button class="p-1 hover:bg-black/20 rounded-sm transition-colors shrink-0" aria-label="Dismiss"><svg fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"></path></svg></button></div><div class="h-0.5 w-full bg-black/10"></div></div><div class="bg-[#050505] min-h-screen font-sans flex"><div class="flex-1 flex flex-col transition-all duration-300 md:ml-0"><main class="flex-grow"><div style="opacity:1"><div class="vague-editorial is-invert bg-[#1a1a1a] text-[#f4f4f4] is-loaded font-instr-serif transition-colors duration-500 min-h-screen"><div class="fixed top-0 left-0 bottom-0 w-[4rem] z-[700] border-r border-[#f4f4f4]/25 hidden md:block bg-inherit"></div><div class="c-loader"><div class="c-loader_spinner font-instr-serif"><span>The Vague</span></div></div><header class="c-header md:!left-[4rem]"><div class="c-header_inner md:!left-[4rem]"><p class="c-header_heading font-instr-sans"><a class="c-header_link" href="/" data-discover="true">Fezcodex</a> + <span class="c-header_link">The Vague</span></p><h1 class="c-header_name font-instr-serif"><a class="c-header_link" href="#introduction">Editorial Collection</a></h1></div><div class="c-header_buttons font-instr-sans"><button class="c-header_invert" type="button"><span class="c-header_link">Invert Colors</span><span class="c-header_invert_dot"></span></button><button class="c-button -whiteInvert"><span class="c-button_label uppercase tracking-widest text-[10px] font-black">Terminal View</span></button></div></header><div><div class="c-nav-bg"></div><nav class="c-nav border-r border-[#f4f4f4]/25 bg-inherit"><div class="c-nav_panel"><div class="c-nav_panel_main font-instr-serif italic">Collection Index<ol class="c-nav_panel_list font-instr-serif not-italic"><li class="c-nav_panel_item group"><button class="c-nav_panel_link text-left flex items-center gap-4"><span class="opacity-30 text-sm font-instr-sans mr-2">05</span><span class="c-nav_panel_label">Issue #005: The Philosophical Game</span></button></li><li class="c-nav_panel_item group"><button class="c-nav_panel_link text-left flex items-center gap-4"><span class="opacity-30 text-sm font-instr-sans mr-2">04</span><span class="c-nav_panel_label">Issue #004: The Graphical User Interface</span></button></li><li class="c-nav_panel_item group"><button class="c-nav_panel_link text-left flex items-center gap-4"><span class="opacity-30 text-sm font-instr-sans mr-2">03</span><span class="c-nav_panel_label">Issue #003: The Rushed One</span></button></li><li class="c-nav_panel_item group"><button class="c-nav_panel_link text-left flex items-center gap-4"><span class="opacity-30 text-sm font-instr-sans mr-2">02</span><span class="c-nav_panel_label">Issue #002: The Line</span></button></li><li class="c-nav_panel_item group"><button class="c-nav_panel_link text-left flex items-center gap-4"><span class="opacity-30 text-sm font-instr-sans mr-2">01</span><span class="c-nav_panel_label">Issue #001: The Beginning</span></button></li></ol></div><div class="c-nav_panel_footer font-instr-sans"><div class="c-nav_panel_links -bold"><a class="c-nav_panel_link" href="/" data-discover="true">←<span class="c-nav_panel_label -under">Back to Fezcodex</span></a></div></div></div></nav><button class="c-navButton" aria-label="Menu" type="button"><span class="c-navButton_wrap"><span class="c-navButton_lines"></span><span class="c-nav_label font-instr-sans uppercase tracking-widest text-[10px] font-black">Table of contents</span></span></button></div><div class="o-scroll h-screen overflow-y-auto overflow-x-hidden md:pl-[4rem]"><main><div class="c-newspaper"><div class="c-newspaper_container !pb-0"><div class="border-b border-[#f4f4f4]/25" id="introduction"><div class="o-container pt-24 md:pt-32 pb-20"><a class="c-nav_panel_link inline-flex items-center gap-2 mb-12" href="/" data-discover="true"><div class="c-nav_panel_footer font-instr-sans text-xs"><a class="c-nav_panel_link" href="/" data-discover="true">←<span class="c-nav_panel_label -under">Back to Fezcodex</span></a></div></a><header class="c-newspaper_header"><p class="c-newspaper_header_subtitle font-instr-sans uppercase tracking-[0.2em] text-[11px] opacity-50">Issue No. 5 // 2026-01-28</p><h1 class="c-newspaper_header_title font-instr-serif italic">Issue #005: The Philosophical Game</h1><div class="c-newspaper_header_info font-instr-sans uppercase tracking-widest text-[10px] font-bold"><p>Volumes</p><p>Latest Publication</p></div></header><div class="c-newspaper_intro font-instr-serif italic"><p>The fifth issue of The Vague. In this issue, we talk about chronicle of philosophy in the Nier Universe.</p></div><div class="mt-[-4rem] font-instr-sans text-center"><button class="c-button -whiteInvert group"><span class="c-button_label uppercase tracking-widest text-xs font-black">View Publication</span></button></div></div></div><section class="border-b border-[#f4f4f4]/25"><div class="o-container py-20"><div class="c-newspaper_columns font-instr-serif text-lg md:text-xl"><p class="mb-6">The Vague is not merely a collection of documents; it is an ongoing exploration into the intersections of digital permanence and ephemeral thought. Each issue represents a localized state of consciousness, captured and formatted for the void. We navigate the silence between the bits, seeking meaning in the static.</p><p class="mb-6 italic">"In the garden of forking paths, every decision is a digital signature."</p><p class="mb-6">As we progress through the various volumes, the objective remains constant: to document the evolution of the Fezcodex ecosystem. This editorial space serves as a bridge between technical implementation and philosophical inquiry, providing a platform for long-form reflections that transcend the limitations of traditional commits.</p><p>Through these pages, we invite you to look closer at the architecture of the unknown. The vague is where clarity begins—a threshold of potential where every whisper carries the weight of a world yet to be built.</p></div></div></section><section class="relative z-10 w-full pb-px !mb-0"><div class="w-full pt-16 pb-16 px-8 md:px-16 border-b border-[#f4f4f4]/25"><h2 class="font-instr-sans uppercase tracking-[0.3em] text-[11px] opacity-70 font-black">Issue Collection</h2></div><div class="grid grid-cols-1 md:grid-cols-3 w-full border-l border-[#f4f4f4]/25"><button class="p-8 md:p-16 flex flex-col justify-between group !border-r !border-b border-[#f4f4f4]/25 transition-all duration-500 text-left min-h-[550px] w-full hover:bg-[#f4f4f4] hover:text-[#1a1a1a]"><div class="w-full"><span class="font-instr-sans text-[10px] opacity-50 block mb-8 uppercase tracking-widest font-black">No. 05</span><h3 class="font-instr-serif italic text-5xl md:text-8xl leading-[0.9] mb-12 group-hover:translate-x-4 transition-transform duration-700 w-full">Issue #005: The Philosophical Game</h3></div><div class="flex flex-col w-full"><div class="w-16 h-px mb-10 transition-colors bg-[#f4f4f4]/25 group-hover:bg-[#1a1a1a]/25"></div><span class="font-instr-sans text-[12px] uppercase tracking-[0.3em] font-black opacity-90">2026-01-28</span><span class="font-instr-sans text-[10px] uppercase tracking-widest opacity-40 mt-6 flex items-center gap-3 group-hover:opacity-100 transition-all font-black">Read Publication <span class="text-xl">→</span></span></div></button><button class="p-8 md:p-16 flex flex-col justify-between group !border-r !border-b border-[#f4f4f4]/25 transition-all duration-500 text-left min-h-[550px] w-full hover:bg-[#f4f4f4] hover:text-[#1a1a1a]"><div class="w-full"><span class="font-instr-sans text-[10px] opacity-50 block mb-8 uppercase tracking-widest font-black">No. 04</span><h3 class="font-instr-serif italic text-5xl md:text-8xl leading-[0.9] mb-12 group-hover:translate-x-4 transition-transform duration-700 w-full">Issue #004: The Graphical User Interface</h3></div><div class="flex flex-col w-full"><div class="w-16 h-px mb-10 transition-colors bg-[#f4f4f4]/25 group-hover:bg-[#1a1a1a]/25"></div><span class="font-instr-sans text-[12px] uppercase tracking-[0.3em] font-black opacity-90">2026-01-17</span><span class="font-instr-sans text-[10px] uppercase tracking-widest opacity-40 mt-6 flex items-center gap-3 group-hover:opacity-100 transition-all font-black">Read Publication <span class="text-xl">→</span></span></div></button><button class="p-8 md:p-16 flex flex-col justify-between group !border-r !border-b border-[#f4f4f4]/25 transition-all duration-500 text-left min-h-[550px] w-full hover:bg-[#f4f4f4] hover:text-[#1a1a1a]"><div class="w-full"><span class="font-instr-sans text-[10px] opacity-50 block mb-8 uppercase tracking-widest font-black">No. 03</span><h3 class="font-instr-serif italic text-5xl md:text-8xl leading-[0.9] mb-12 group-hover:translate-x-4 transition-transform duration-700 w-full">Issue #003: The Rushed One</h3></div><div class="flex flex-col w-full"><div class="w-16 h-px mb-10 transition-colors bg-[#f4f4f4]/25 group-hover:bg-[#1a1a1a]/25"></div><span class="font-instr-sans text-[12px] uppercase tracking-[0.3em] font-black opacity-90">2026-01-05</span><span class="font-instr-sans text-[10px] uppercase tracking-widest opacity-40 mt-6 flex items-center gap-3 group-hover:opacity-100 transition-all font-black">Read Publication <span class="text-xl">→</span></span></div></button><button class="p-8 md:p-16 flex flex-col justify-between group !border-r !border-b border-[#f4f4f4]/25 transition-all duration-500 text-left min-h-[550px] w-full hover:bg-[#f4f4f4] hover:text-[#1a1a1a]"><div class="w-full"><span class="font-instr-sans text-[10px] opacity-50 block mb-8 uppercase tracking-widest font-black">No. 02</span><h3 class="font-instr-serif italic text-5xl md:text-8xl leading-[0.9] mb-12 group-hover:translate-x-4 transition-transform duration-700 w-full">Issue #002: The Line</h3></div><div class="flex flex-col w-full"><div class="w-16 h-px mb-10 transition-colors bg-[#f4f4f4]/25 group-hover:bg-[#1a1a1a]/25"></div><span class="font-instr-sans text-[12px] uppercase tracking-[0.3em] font-black opacity-90">2026-01-03</span><span class="font-instr-sans text-[10px] uppercase tracking-widest opacity-40 mt-6 flex items-center gap-3 group-hover:opacity-100 transition-all font-black">Read Publication <span class="text-xl">→</span></span></div></button><button class="p-8 md:p-16 flex flex-col justify-between group !border-r !border-b border-[#f4f4f4]/25 transition-all duration-500 text-left min-h-[550px] w-full hover:bg-[#f4f4f4] hover:text-[#1a1a1a]"><div class="w-full"><span class="font-instr-sans text-[10px] opacity-50 block mb-8 uppercase tracking-widest font-black">No. 01</span><h3 class="font-instr-serif italic text-5xl md:text-8xl leading-[0.9] mb-12 group-hover:translate-x-4 transition-transform duration-700 w-full">Issue #001: The Beginning</h3></div><div class="flex flex-col w-full"><div class="w-16 h-px mb-10 transition-colors bg-[#f4f4f4]/25 group-hover:bg-[#1a1a1a]/25"></div><span class="font-instr-sans text-[12px] uppercase tracking-[0.3em] font-black opacity-90">2025-12-26</span><span class="font-instr-sans text-[10px] uppercase tracking-widest opacity-40 mt-6 flex items-center gap-3 group-hover:opacity-100 transition-all font-black">Read Publication <span class="text-xl">→</span></span></div></button></div></section></div></div></main></div></div></div></main></div></div><div class="fixed bottom-0 left-0 w-full h-32 pointer-events-none z-[9999]"><div class="absolute bottom-2 flex flex-col items-center pointer-events-auto cursor-help" style="width:60px;transform:translateX(91.6685vw)"><div class="relative" style="transform:scaleX(-1)"><div class="w-10 h-10 flex items-center justify-center rounded-lg border-2 bg-[#050505] border-[#10B981]/40 text-[#10B981] shadow-lg" style="transform:translateY(-3.43432px) scale(1.0016) rotate(4.54269deg)"><svg fill="currentColor" height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M216,80V192H40V64H200A16,16,0,0,1,216,80Z" opacity="0.2"></path><path d="M117.31,134l-72,64a8,8,0,1,1-10.63-12L100,128,34.69,70A8,8,0,1,1,45.32,58l72,64a8,8,0,0,1,0,12ZM216,184H120a8,8,0,0,0,0,16h96a8,8,0,0,0,0-16Z"></path></svg><div class="absolute top-2 left-2 flex gap-3"><div class="w-1.5 h-1.5 rounded-full bg-current animate-pulse"></div><div class="w-1.5 h-1.5 rounded-full bg-current animate-pulse"></div></div></div><div class="flex justify-around mt-[-4px]"><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color:#10b981;transform:translateY(-.931932px)"></div><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color:#10b981;transform:translateY(-1.06807px)"></div></div></div></div></div><div class="fixed top-24 right-6 md:right-12 z-[100] pointer-events-none flex flex-col items-end gap-2"><div class="pointer-events-auto flex flex-col-reverse gap-3"></div></div></div></body></html>