From 0af381156ae4e4a229be98b380197b818be148bd Mon Sep 17 00:00:00 2001 From: Derek Date: Tue, 24 Feb 2026 02:15:09 -0600 Subject: [PATCH] made an about page and organized which exploded the line count --- docs/about.html | 93 +++++++++++++++++++++++++++++ docs/index.html | 75 +++++++++++++++++++++--- docs/styles.css | 153 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 314 insertions(+), 7 deletions(-) create mode 100644 docs/about.html diff --git a/docs/about.html b/docs/about.html new file mode 100644 index 0000000..4c75133 --- /dev/null +++ b/docs/about.html @@ -0,0 +1,93 @@ + + + + + + About – picsmics4 + + + + + +
+
+

About This Archive

+
+
+

The Story

+

+ On Jan 2, 2008, a YouTube user named + DrazenXLive uploaded a video of themselves playing + Reptilia by The Strokes on Rock Band. It gained a few views, + but was otherwise just a gaming video in the early age of YouTube. +

+

+ Then picsmics4 started commenting. And never stopped. +

+

+ For over 15 years, picsmics4 returned to this one video, leaving + comments that evolved into an unintentional diary, from documenting + high school whimsy, adulthood, hardships, and everything in between. + The thread, the optimism of picsmics4, and the wholesome reception + from the internet community has been selected to be preserved on this + site. +

+ +

This Archive

+

+ I watched + a video by ShaiiValle + and was inspired to make this site overnight, in an era where much of + our shared digital history is quietly disappearing. The world is + currently a mess, but it is the small things like this that let us go + on with our days. +

+ +

+ This site preserves every comment from the video, and comments from + before January 1, 2026 (at 6 minutes and 7 seconds) + are frozen exactly as they were for authenticity. Newer comments are + added periodically but the original archive remains untouched. +

+ +

Links

+ +
+
+ + diff --git a/docs/index.html b/docs/index.html index 59e8bc8..8aa45c9 100644 --- a/docs/index.html +++ b/docs/index.html @@ -4,22 +4,83 @@ The picsmics4 Story - - + + - - + + - - + + +
- +
+

The Comment Thread

+

+ Every comment from + DrazenXLive's video +

+

+
+
+

Links

+ diff --git a/docs/styles.css b/docs/styles.css index eef055a..b8cecde 100644 --- a/docs/styles.css +++ b/docs/styles.css @@ -176,3 +176,156 @@ li[style*="--nested: true"] { background: #ffe7e7; color: #c41e3a; } + +/* Navbar */ +.navbar { + position: sticky; + top: 0; + z-index: 100; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.75rem 1.5rem; + background: #0d0d0d; + border-bottom: 1px solid #222; +} + +.nav-logo { + font-size: 1.1rem; + font-weight: 700; + color: #fff; + text-decoration: none; + letter-spacing: 0.5px; +} + +.nav-links { + display: flex; + gap: 1.25rem; +} + +.nav-link { + color: #888; + text-decoration: none; + font-size: 0.9rem; + transition: color 0.2s; +} + +.nav-link:hover, +.nav-link.active { + color: #fff; +} + +/* Layout */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + background: #111; + color: #ddd; + line-height: 1.6; +} + +.container { + max-width: 720px; + margin: 0 auto; + padding: 2rem 1rem; +} + +/* Hero */ +.hero { + text-align: center; + margin-bottom: 2rem; + padding-bottom: 1.5rem; + border-bottom: 1px solid #222; +} + +.hero h1 { + font-size: 1.6rem; + color: #fff; + margin-bottom: 0.4rem; +} + +.hero .subtitle { + color: #888; + font-size: 0.95rem; +} + +.hero .subtitle a { + color: #6ea8fe; + text-decoration: none; +} + +.hero .meta { + color: #555; + font-size: 0.85rem; + margin-top: 0.5rem; +} + +/* Comments */ +#comments-list { + list-style: none; +} + +#comments-list li { + padding: 1rem 0; + border-bottom: 1px solid #1a1a1a; +} + +#comments-list .comment-author { + font-weight: 600; + color: #fff; + font-size: 0.9rem; +} + +#comments-list .comment-date { + color: #555; + font-size: 0.8rem; + margin-left: 0.5rem; +} + +#comments-list .comment-text { + margin-top: 0.3rem; + color: #ccc; + font-size: 0.95rem; + white-space: pre-wrap; +} + +#comments-list .comment-likes { + color: #555; + font-size: 0.8rem; + margin-top: 0.3rem; +} + +/* About */ +.about-content { + line-height: 1.8; +} + +.about-content h2 { + color: #fff; + font-size: 1.2rem; + margin: 2rem 0 0.75rem; +} + +.about-content p { + margin-bottom: 1rem; + color: #bbb; +} + +.about-content a { + color: #6ea8fe; + text-decoration: none; +} + +.about-content ul { + list-style: none; + padding: 0; +} + +.about-content ul li { + margin-bottom: 0.5rem; +} \ No newline at end of file