Updates to all the archive pages.

I can't look away, apparently.

precipice/archives/404page.html

@@ -19,7 +19,7 @@
 	<summary>click for navigation</summary>
 	<nav>
 	<p><small>Click the links below to explore the different histories of each page & this website.</small></p>
-	 <a href="/precipice/map/">prelude</a>
+	 <a href="/precipice/archives/">prelude</a>
 	 <a href="mainpage.html">main page</a>
 	 <a href="404page.html">404 page</a>
 	 <a href="archives.html">archives</a>
@@ -37,16 +37,23 @@
 	<h1><span class="sketch-highlight">404 page</span></h1>
 	<h2>aka <mark>the fever dream pages</mark></h2>
 
-	<p>Typically, the 404 page on most websites are rather boring: they tend to display the error code, tell you the page is not found and link back to the main website. Occassionally, they might include a cute image of their mascot holding up some kind of 404 sign. However, in January 2023 I chanced upon <a href="https://5amgirlfriend.neocities.org/notfound/house404">5amgirlfriend's 404 page</a> which chronicles the day of "maid-chan", the purported housemaid of 5amgirlfriend. I adored it, its warmth and how it turned the 404 page from something purely perfunctory to something <i>more</i>. So tickled by this idea, I wanted something <i>more</i> for my 404 page as well.</p>
+	<p>Typically, the 404 page on most websites are rather boring: they tend to display the error code, tell you the page is not found and link back to the main website. Occassionally, they might include a cute image of their mascot holding up some kind of 404 sign. However, in January 2023 I chanced upon <a href="https://5amgirlfriend.neocities.org/notfound/house404">5amgirlfriend's 404 page</a> which outlines the day of "maid-chan", the purported housemaid of 5amgirlfriend. I adored it, its warmth, and how it morphed the 404 page from something purely perfunctory to something <i>more</i>. It gave the 404 page personality, and its something I still think about from time to time. So tickled by this idea, I wanted something <i>more</i> for my 404 page as well.</p>
 
 	<h3>version 1.0 › may 2023 — ???</h3>
-	<p>In some ways, the 404 page is a liminal space — a transitory place between the "wrong" or non-existent page, and the "right" page. I wanted to lean heavily into that and underscore its liminality; rather than being a page one typically quickly navigates away from, I wanted to draw out the duration of time one spent in this space. I settled on a (very short) text-based adventure, as those websites I also often associated with liminal spaces with how barebones they often looked. It was also a good opportunity to write a short "story" — something I enjoyed doing.</p>
+	<p>In some ways, the 404 page is a liminal space — a transitory place between the "wrong" or non-existent page you've found yourself on, and the "right" page its trying to steer you towards. I wanted to lean heavily into that and underscore its liminality; rather than being a page one typically quickly navigates away from, I wanted to draw out the duration of time one spent in this space, should one choose to do so. I settled on a (very short) text-based adventure, in part, because the bareboned nature of text-based websites often reminded me of liminal spaces as well. I also enjoyed writing, weaving words in a way that hopefully elicits emotions and draws out visceral, physiological sensations.</p>
 
-	<p>The short adventure itself involves the concepts of warped time; a space in which time doesn't move and instead is still for as long as you wanted to remain in it. In some ways, I was drawn to the idea of respite, of pausing time as a way to get a breather from everything else. Perhaps it's a reflection of my psyche at the time of writing: a yearning to have a space just like that to settle for a little while, a refuge from the stressors of life. It's called the fever dream pages because of this — reading and writing it makes me feel like I'm in one.</p>
+	<p>The short adventure itself involves the concepts of warped time; a space in which time doesn't move and instead is still for as long as you wanted to remain in it. Like sitting in a park without a clock, listening to the ducks and watching the stillness of the trees. In some ways, I was drawn to the idea of respite, of pausing time as a way to get a breather from everything else. Perhaps it's a reflection of my psyche at the time of writing: a yearning to have a space just like that to settle for a little while, a refuge from the stressors of life. It's called the fever dream pages because of this — writing and reading it made and makes me feel like I'm in one, free from the tethers of reality.</p>
+
+	<figure>
+	<img src="images/404-v1.jpg">
+	<figcaption><span>The main 404 page</span>, a short text-based adventure, motivated by the liminality of 404 pages. Screenshot taken 25 December 2023.</figcaption>
+	</figure>
+
+	<p>As it stands, the 404 page, or rather pages, consists of four separate HTML files. Originally I intended for the short adventure to be something longer, with more winding paths and branches to follow, but I was coding and writing it at a point in time where I didn't feel like I had too much time to spare. I thus settled on the current length, though I am not opposed to extending it in the future.</p>
+
+	<p>The layout itself is simple to not draw attention away from the contents of the writing, and I made use of <a href="https://1linelayouts.glitch.me/">1-Line Layouts</a>' <i>Clamping My Style</i> template.  I also made use of the <code>details</code> element to allow visitors to decide what to do by clicking on the <code>summary</code>, and have the adventure respond to their choices by displaying the details on-click. At any point in time, the reader can choose to leave by clicking on the "Turn back and head home" link.</p>
 
-	<p>Originally I intended for the short adventure to be something longer, with more winding paths and branches to follow, but I was coding and writing it at a point in time where I didn't feel like I had too much time to spare. I thus settled on the current length, though I am not opposed to extending it in the future.</p>
 
-	<p>The layout itself is simple, and I made use of <a href="https://1linelayouts.glitch.me/">1-Line Layouts</a>' <i>Clamping My Style</i> template.  I also made use of the <code>details</code> element to allow visitors to decide what to do by clicking on the <code>summary</code>, and have the adventure respond to their choices by displaying the details on-click.</p>
 	</main>
 </div>
 

precipice/archives/archives.css

@@ -93,7 +93,7 @@ nav {
 	height: 100vh;
 	width: 180px;
 	border-right: 1px solid #000;
-	overflow-y: scroll;
+	overflow-y: auto;
 }
 
 nav > a:link, nav > a:visited {
@@ -122,13 +122,13 @@ main {
 	margin-left: 240px;
 }
 
-main > p { line-height: 200%; }
+main > p, main > ol, main > ul { line-height: 200%; }
 
 mark { background-color: Chartreuse; }
 
 figure { max-width: 100%; height: auto; margin-top: 30px; margin-bottom: 30px; text-align: center; }
 
-figure > img { max-width: 100%; height: auto; padding: 3px; box-shadow: 2px 2px 20px Chartreuse;}
+figure > img { max-width: 100%; height: auto; box-shadow: 1px 1px 20px Chartreuse; }
 
 figcaption { font-style: italic; font-size: small; line-height: 100%; margin-top: 20px; text-align: center; }
 

precipice/archives/archives.html

@@ -0,0 +1,62 @@
+<html>
+  <head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+	<meta name="robots" content="noai, noimageai">
+	<title>archives › archives (!)</title>
+
+	<link rel="stylesheet" href="archives.css" type="text/css" media="all">
+	<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="favicon_io/favicon-16x16.png">
+	<link rel="manifest" href="/site.webmanifest">
+  </head>
+  <body>
+
+	<div class="container">
+	<div class="left">
+	<details>
+	<summary>click for navigation</summary>
+	<nav>
+	<p><small>Click the links below to explore the different histories of each page & this website.</small></p>
+	 <a href="/precipice/archives/">prelude</a>
+	 <a href="mainpage.html">main page</a>
+	 <a href="404page.html">404 page</a>
+	 <a href="archives.html">archives</a>
+	 <a href="bookshelf.html">bookshelf</a>
+	 <a href="map.html">map of the internet</a>
+	 <a href="pen.html">pen collection</a>
+	 <a href="precipice.html">precipice</a>
+	 <a href="toybox.html">toybox</a>
+	 <a href="tsp.html">the slow press portfolio</a>
+	</nav>
+	 </details>
+	</div>
+
+	<main>
+	<h1><span class="sketch-highlight">archives</span></h1>
+	<h2>aka <mark>this page!!!!</mark></h2>
+
+	<p>Yes, hi, hello. As I mentioned in my prelude, this page is for me to not only document how this website changes across time, but also keep a record of the things I was inspired by and how I achieved certain aspects of my layouts on this webpage. I am not an expert coder, so much of it typically involves a lot of stackoverflow, web searching and reading guides.</p>
+
+	<h3>version 1.0 › december 2023 — ???</h3>
+	<p>I took heavy inspiration from <a href="https://handmade-web.net/resources.html">Handmade Web's menu</a> on mobile (the rotated menu text, and clicking to open), as well as <a href="https://100r.co/site/home.html">100r.co</a>'s use of the <code>details</code> tag to implement their navigation. I wanted to combine this two, and see how I could implement a sideways navigation using the <code>details</code> tag. It took some fiddling, learning how the <code>rotate</code> and <code>transform-origin</code> properties work so I could rotate the navigation button (that's actually the <code>summary</code> tag) how I wanted.</p>
+	<figure>
+	<img src="images/archives-v1.jpg">
+	<figcaption><span>Version 1.0 of my archives page</span>, screenshot taken 25 December 2023.</figcaption>
+	</figure>
+
+	<p>Overall, I took my main page code as a base code to building this page. The responsive design of this page was a little more involved, as it required me to reset the rotation of the <code>summary</code> tag. I also didn't want the navigation pane to pop up by the side anymore, since it would take up valuable space on the screen for mobile devices, so I coded it to appear above the main text using the <code>z-index</code> property.</p>
+
+	<figure>
+	<img src="images/archives-v1-responsive.jpg">
+	<figcaption><span>Responsive version of the layout</span>, screenshot taken 25 December 2023. Achieving this required a bit more coding that my other layouts thus far.</figcaption>
+	</figure>
+
+	<p>The choice of <code>Chartreuse</code> as a colour was frankly arbitrary; I'd initially wanted yellow but didn't quite like how it looked with the highlighting I used for the headers, so I went to look at the default list of CSS defined colours and picked this one! Though I almost went with a blue or pink instead. On the note of highlighted text, I took the sketch highlight code I used for the main header from <a href="https://alvarotrigo.com/blog/css-highlight-text/">a blog post on alvarotrigo</a> on how to highlight text with CSS (see example 7).</p>
+	</main>
+</div>
+
+  </body>
+</html>
+

precipice/archives/bookshelf.html

@@ -19,7 +19,7 @@
 	<summary>click for navigation</summary>
 	<nav>
 	<p><small>Click the links below to explore the different histories of each page & this website.</small></p>
-	 <a href="/precipice/map/">prelude</a>
+	 <a href="/precipice/archives/">prelude</a>
 	 <a href="mainpage.html">main page</a>
 	 <a href="404page.html">404 page</a>
 	 <a href="archives.html">archives</a>
@@ -37,15 +37,27 @@
 	<h1><span class="sketch-highlight">bookshelf</span></h1>
 	<h2>aka <mark>... the bookshelf lol</mark></h2>
 
-	<p>The bookshelf, as its name might lead one to deduce, is a place for me to keep a list of books I want to read, am reading, and have read.</p>
+	<p>The bookshelf, as its name might lead one to deduce, is a place for me to keep track of books I want to read, am reading, and have read. Recently though, these lists have become somewhat outdated and obsolete, as I have a list written on a physical whiteboard by my bed.</p>
 
 	<h3>version 1.0 › 2022 — 2023</h3>
-	<p>The layout was heavily inspired by Nico Chilla's are.na channel, <a href="https://www.are.na/nico-chilla/website-as-a-collection-of-boxes"><i>website as a collection of boxes</i></a> which houses links to different websites whose layout consists of boxes, often arranged in some ordered, grid-like fashion. Moreover, I'd chosen to write the contents of the webpage in Malay, a language I'd spent half my life studying in school but still struggling to understand and use. This choice to use a non-English language was inspired by <a href="http://tiana.land/">Tiana Dueck's page</a> written in Dutch and her motivation behind it. I hope to someday become better at Malay, and I have every intention of writing more of my pages in Malay.</p>
+	<p>The layout was heavily inspired by Nico Chilla's are.na channel, <a href="https://www.are.na/nico-chilla/website-as-a-collection-of-boxes"><i>website as a collection of boxes</i></a> which houses links to different websites whose layout consists of rectangles, often arranged in some ordered, grid-like fashion. Moreover, I'd chosen to write the contents of the webpage in Malay, a language I'd spent half my life studying in school but still struggling to understand and use. This choice to use a non-English language was inspired by <a href="http://tiana.land/">Tiana Dueck's page</a> written in Dutch and her motivation behind it. I hope to someday become better at Malay, and I have every intention of writing more of my pages in Malay.</p>
 
-	<p>My own rendition was simply four square boxes stacked to form another square in two rows and two columns, achieved using the <code>flex-wrap: wrap;</code> property on the outer container <code>div</code>. In the event where the screen size got too small, the square boxes would reorganize themselves into a single column. I had a lot of help from <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">css-trick's guide to flexbox</a>.</p>
+	<p>My own rendition was simply four square boxes stacked in two rows and two columns to form another, larger square. I'd achieved this using the <code>flex-wrap: wrap;</code> property on the outer container <code>div</code>. In the event where the screen size got too small, the square boxes would reorganize themselves into a single column. I had a lot of help from <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">css-tricks' guide to flexbox</a> while figuring out flexboxes.</p>
+
+	<figure>
+	<img src="images/bookshelf-v1.jpg">
+	<figcaption><mark>Version 1.0 of my bookshelf</mark>, a series of boxes stacked.</figcaption>
+	</figure>
+
+	<p>Within my to-read list, I'd tried to make the list look like stacked books with a few <code>inline div</code> elements. Although it works, I think I could find a way to execute this better.</p>
+
+	<figure>
+	<img src="images/bookshelf-v1-responsive.jpg">
+	<figcaption><mark>The responsive version of the layout</mark>, which rearranges the boxes into a single column.</figcaption>
+	</figure>
 
 	<h3>version 1.5 › 2023 — ???</h3>
-	<p>When 2023 came around, I didn't know how to include both my 2022 and 2023 lists of books I've read without it being overwhelming, long and hard to scroll through in such a tiny box. I ended up simply removing the books I've read section. A part of me really wants to re-do this page; I rarely update my webpages and so the part of what books I'm currently reading feel like a chore to update, and somewhat redundant in the face of my lack of consistency in updating it.</p>
+	<p>When 2023 came around, I didn't know how to include both my 2022 and 2023 lists of books I've read without it being overwhelming, long and hard to scroll through in such a tiny box. I ended up simply removing the books I've read section. A part of me really wants to re-do this entire page; I rarely update my webpages and so the part of what books I'm currently reading feel like a chore to update, and somewhat redundant given my lack of consistency in updating it.</p>
 
 	</main>
 </div>