Update blog layout

2025-05-16 20:16:21 -05:00 · 2025-05-16 20:16:21 -05:00 · 9ba658a3ae
parent 8ea657d55c
commit 9ba658a3ae
15 changed files with 64 additions and 48 deletions
--- a/.eleventy.js
+++ b/.eleventy.js
@ -25,7 +25,10 @@ export default function (eleventyConfig) {

  // Filters
  eleventyConfig.addFilter("formatDate", (dateObj) => {
-    return DateTime.fromJSDate(dateObj).toFormat("dd LLL yyyy, HH:mm ZZZZ");
+    return DateTime.fromJSDate(dateObj).toFormat("yyyy-MM-dd");
+  });
+  eleventyConfig.addFilter("formatDateRel", (dateObj) => {
+    return DateTime.fromJSDate(dateObj).toRelative();
  });
  eleventyConfig.addFilter("mdinline", (content) => {
    return md.renderInline(content);
--- a/scss/pages/_about.scss
+++ b/scss/pages/_about.scss
@ -52,17 +52,6 @@
    ".  bio" auto
    / auto 1fr;

-  .idcard__picture {
-    padding: 50px;
-    background: url("../img/about-profile.png");
-    background-size: cover;
-    background-position: center;
-
-    @include media.breakpoint(small) {
-      padding: 75px;
-    }
-  }
-
  .idcard__bio {
    grid-area: bio;
    display: grid;
--- a/src/_layouts/about.njk
+++ b/src/_layouts/about.njk
@ -6,7 +6,9 @@ layout: base.njk
  <main class="main-content">{{ content | safe }}</main>
  <aside class="idcard">
    <header class="idcard__header">Identification card</header>
-    <div class="idcard__picture"></div>
+    <div class="idcard__picture">
+      <img src="/assets/img/about-profile.png"/>
+    </div>
    <main class="idcard__bio">
      <p class="idcard__line--wide monospace">GI0755592238</p>
      <p class="idcard__line--wide">Gil</p>
@ -42,7 +44,7 @@ layout: base.njk
  </section>
  <aside class="social">
    <header>
-      <h2>Social links</h2>
+      <h2>Elsewhere</h2>
    </header>
    {% include 'snippets/socials.njk' %}
  </aside>
--- a/src/_layouts/entry.njk
+++ b/src/_layouts/entry.njk
@ -0,0 +1,44 @@
+---
+layout: base.njk
+---
+
+<main class="box page page-journal">
+  <header>
+    <h1>{{ title }}</h1>
+    <p>
+      {% if author %}
+        {{ author }} |
+      {% elseif meta.author %}
+        {{ meta.author }} |
+      {% endif %}
+      <time datetime="{{ page.date }}" title="{{ page.date }}">{{ page.date | formatDateRel }}</time>
+    </p>
+  </header>
+  {{ content | safe }}
+  <aside>
+    {% if lastmod %}
+      <p>
+        <strong>Last modified</strong>
+        <time datetime="{{ lastmod | formatDate }}">{{ lastmod | formatDate }}</time>
+      </p>
+    {% endif %}
+    {% if tags %}
+      <p>
+        <strong>Tags</strong>
+        <ul>
+          {% for tag in tags %}
+            <li>{{ tag }}</li>
+          {% endfor %}
+        </ul>
+      </p>
+    {% endif %}
+  </aside>
+</main>
+<!-- <footer> <p>
+    <strong>Created</strong>
+    <time datetime="{{ page.date | formatDate }}">{{ page.date | formatDate }}</time>
+    {% if lastmod %}•
+      <strong>Last modified</strong>
+      <time datetime="{{ lastmod | formatDate }}">{{ lastmod | formatDate }}</time>
+    {% endif %}
+</p> </footer> -->
--- a/src/_layouts/home.njk
+++ b/src/_layouts/home.njk
@ -15,7 +15,7 @@ layout: base.njk
    {% include 'snippets/badges.njk' %}
  </aside>
 </div>
-<footer>
+<!-- <footer>
  <p>
    <strong>Created</strong>
    <time datetime="{{ page.date | formatDate }}">{{ page.date | formatDate }}</time>
@ -24,4 +24,4 @@ layout: base.njk
      <time datetime="{{ lastmod | formatDate }}">{{ lastmod | formatDate }}</time>
    {% endif %}
  </p>
-</footer>
+</footer> -->
--- a/src/_layouts/single.njk
+++ b/src/_layouts/single.njk
@ -3,7 +3,7 @@ layout: base.njk
 ---

 <main class="box page page-single">{{ content | safe }}</main>
-<footer class="box page-footer">
+<!-- <footer>
  <p>
    <strong>Created</strong>
    <time datetime="{{ page.date | formatDate }}">{{ page.date | formatDate }}</time>
@ -12,4 +12,4 @@ layout: base.njk
      <time datetime="{{ lastmod | formatDate }}">{{ lastmod | formatDate }}</time>
    {% endif %}
  </p>
-</footer>
+</footer> -->
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@ -216,17 +216,6 @@ hr {
  grid-area: idcard;
  grid: "header header" auto ". bio" auto "photo bio" auto ".  bio" auto/auto 1fr;
 }
-.idcard .idcard__picture {
-  padding: 50px;
-  background: url("../img/about-profile.png");
-  background-size: cover;
-  background-position: center;
-}
-@media only screen and (min-width: 600px) {
-  .idcard .idcard__picture {
-    padding: 75px;
-  }
-}
 .idcard .idcard__bio {
  grid-area: bio;
  display: grid;
--- a/src/assets/css/main.css.map
+++ b/src/assets/css/main.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../scss/_theme.scss","../../../scss/_font.scss","../../../scss/pages/_about.scss","../../../scss/mixins/_media.scss","../../../scss/pages/_home.scss","../../../scss/main.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAGA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;ACtFF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;ACvGF;EACE;EACA;;ACFE;EDAJ;IAKI;IACA,MACE;;;ACHF;EDJJ;IAgBI,MACE;;;AAOJ;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA,MACE;;AAMF;EACE;EACA;EACA;EACA;;ACxDA;EDoDF;IAOI;;;AAIJ;EACE;EACA;EACA;;AAGE;EAEE;;AAKN;EACE;;AAGF;EACE;;;AEjFJ;EACE;;ADDE;ECAJ;IAII,MACE;;EAOF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;;;ACjBN;EACE,aALU;;;AAQZ;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,aAbU;;;AAgBZ;EACE;;;AAGF;EACE,aApBU;;;AAuBZ;EACE;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EAEA;EAEA","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["../../../scss/_theme.scss","../../../scss/_font.scss","../../../scss/pages/_about.scss","../../../scss/mixins/_media.scss","../../../scss/pages/_home.scss","../../../scss/main.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAGA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;ACtFF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;ACvGF;EACE;EACA;;ACFE;EDAJ;IAKI;IACA,MACE;;;ACHF;EDJJ;IAgBI,MACE;;;AAOJ;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA,MACE;;AAMF;EACE;EACA;EACA;;AAGE;EAEE;;AAKN;EACE;;AAGF;EACE;;;AEtEJ;EACE;;ADDE;ECAJ;IAII,MACE;;EAOF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;;;ACjBN;EACE,aALU;;;AAQZ;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,aAbU;;;AAgBZ;EACE;;;AAGF;EACE,aApBU;;;AAuBZ;EACE;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EAEA;EAEA","file":"main.css"}
--- a/src/changelog.md
+++ b/src/changelog.md
@ -17,11 +17,11 @@ This is a list of changes to my website, organized by date.
 - Added CSS reset, see _Piccalilli_'s [A (more) Modern CSS Reset](https://piccalil.li/blog/a-more-modern-css-reset/)
 - First slashpages, see [/slashes](/slashes) and [slashpages.net](https://slashpages.net/)

-## 0.0.2 (pub. 2025-05-01)
+## 0.0.2 (pub. 2025-05-16)

 - Used fonts [Kurale](https://github.com/etunni/kurale) (display, headers), [Inclusive Sans](https://www.oliviaking.com/inclusivesans) (sans serif, body)
 - Overhauled entire style
- Gave unique layouts to home and about pages, moved layout Sass to its own directory
+- Gave unique layouts to home, about, and entry pages, moved layout Sass to its own directory
 - Rearranged navbar and renamed some top-level pages
 - Created 404 page
 - Added badges to frontpage
--- a/src/journal/2025/free-flow-1.md
+++ b/src/journal/2025/free-flow-1.md
@ -1,6 +1,5 @@
 ---
 title: "Free flow #1: A heart-to-art conversation"
-layout: single.njk
 date: 2025-05-01T16:30:00.00-05:00
 lastmod: 2025-05-12T00:31:00.00-05:00
 tags:
@ -8,8 +7,6 @@ tags:
  - freeflow
 ---

-# Free flow #1: A heart-to-art conversation
-
 This is my first public attempt at stream of consciousness. Now I don’t _feel_ as creative of a mind as I might’ve been as a kid. Somewhere between now and adolescence I suppose I’ve become caught up in life and the world. Perhaps I still have a creative spirit, but I’ve been experiencing so much blockage with the creative process lately that I feel completely disconnected from it. It’s like when you look at an empty canvas or a blank page, and your mind goes just as blank. I get a bit paralyzed at the thought of actually creating something, unless I come prepared with an already well-formed idea. It could be just that my inner critic is taking over before I even begin.

 That’s precisely why I want to start writing more stream of consciousness, so that I can silence my inner critic, unlearn that sense of “cringe” that inhibits me from creating, and develop my creative process more — which itself is part of the art and art in its own right. To me and many others, art is a means of touching truth, a way to convey the soul of something, someone, or the world around us. I feel that learning to express myself authentically and with less restraint is essential to creating, since I am not as capable of revealing other people’s truths as I can my own.
--- a/src/journal/2025/free-flow-2.md
+++ b/src/journal/2025/free-flow-2.md
@ -1,6 +1,5 @@
 ---
 title: "Free flow #2: For the human condition"
-layout: single.njk
 date: 2025-05-05T23:35:00.00-05:00
 lastmod: 2025-05-12T00:34:00.00-05:00
 tags:
@ -8,8 +7,6 @@ tags:
  - freeflow
 ---

-# Free flow #2: For the human condition
-
 As the wheel of american politics turns, the more inclined I am to view the u.s. as a plastic country, a plastic culture, one that has been hollowed out. Along with our identities and our abilities to create meaning from our experiences, they've been metabolized into social control, to feed systems that funnel wealth and power back to the already wealthy and powerful. Everything we have has been becoming more and more empty, more removed from substance and truth, concealing our society's most pain-inducing contradictions. As I listen to Justin Scott (@cypher.j on TikTok) discussing the kind of moment we're living in, I feel the current state of the world highlights important conflicts in the human condition that we've been grappling with for ages, especially how we survive as humans, whose survival do we strive for, and who gets to decide.

 This time is yet another where we are confronted with the darker aspects of the human condition, where we are faced with the consequences of apathy, distrust, (false) individualism, unreality, deception, domination, obedience, exploitation, etc., and the violence that emerges from them. When these appear, they are readily exploited to satiate ruling class appetites for power, to line their pockets while our people suffer and our planet is scorched. The ruling class designs crisis, manufacturing consent for the expansion of their control. They feign dissent and engineer distractions to conceal the project of continuing and expanding enslavement, so that they can pursue endless material gain without accountability and in plain sight. Against this inhumanity, we have to reach for truth, seek understanding, and become conscious with the world. We have to tell our stories, create our own meaning beyond the systems they have set up for us, and reclaim our collective soul. We have to give new substance to love, to healing, to emotion, to power, to labor, to freedom and liberation, rather than accepting the hollow facsimiles that we have to rent from the moneyed few.
--- a/src/journal/2025/free-flow-3.md
+++ b/src/journal/2025/free-flow-3.md
@ -1,6 +1,5 @@
 ---
 title: "Free flow #3: Discover purpose"
-layout: single.njk
 date: 2025-05-09T02:27:00.00-05:00
 lastmod: 2025-05-12T00:40:00.00-05:00
 tags:
@ -8,8 +7,6 @@ tags:
  - freeflow
 ---

-# Free flow #3: Discover purpose
-
 Life sometimes feels like it’s simply tugging me along, towards some unknown and incomprehensible destiny. I get the sense that I’m just along for the ride. It’s bound to get wilder and rougher, harder to recognize for what it was. So many surprises, things I couldn’t predict. Anxiety that comes with that, but so does beauty — little things to appreciate along the way, like looking out the window on a road trip or stopping on a hike to gaze at the sky or admire plants and rocks and animals. You get small, private joys that you don’t have to share with anyone else but yourself. Secret euphoria. As crazy as life is at times, I wouldn’t trade mine for any other; I will never get to be anyone but myself, and that’s the best part. It doesn’t always make sense, and it doesn’t have to. I really felt this strongly when I was sitting in the parking lot outside my dad’s appointment with the doctor, a mundane event that feels heavy not just in light of what’s happening in the world, but also because when you’re young you don’t always picture yourself doing these things.

 As I sat in my truck listening to “Ventura Highway,” I thought about ikigai, a Japanese concept of life purpose that literally means ‘reason for being.’ Recently, I had seen a video discussing how ikigai had been erroneously conflated with a Venn diagram depicting aspects of life purpose, conceived by Spanish astrologer Andrés Zuzunaga. This misconception erased the cultural nuance surrounding ikigai and tied it closely to work which, though part of ikigai, is only one possible component. (Ikigai could also involve volunteering, spiritual pursuits, art, etc.; it doesn’t have to be just compensated labor.) In any case, the food for thought I found in the discussion was that, ikigai conveys a little bit different of an idea of life purpose from how western minds might view it. It’s not like our western idea of purpose, something that we chase or pursue or extract, but something we notice through our day-to-day lived experiences and discover for ourselves.
--- a/src/journal/2025/free-flow-4.md
+++ b/src/journal/2025/free-flow-4.md
@ -1,14 +1,11 @@
 ---
 title: "Free flow #4: The web, social media, and the way beyond"
-layout: single.njk
 lastmod: 2025-05-16T15:05:00.00-05:00
 tags:
  - post
  - freeflow
 ---

-# Free flow #4: The web, social media, and the way beyond
-
 Recently I’ve been sinking more time into developing my own website. I really like having a home on the web that is a bit more personal and unique. People talk about the web before social media, but is that dichotomy really real? The web has always been social, the internet an inherently social medium. Is all media social? The whole premise of the internet, at least in my view, is mass communication after all. Maybe the difference is like that between media generally and mass media, or more specifically mass _corporate_ media — lots of things are categorically media, but _mass_ media emphasizes size and reach. So, the internet is social media, but mass social _corporate_ media would be Facebook, Instagram, Twitter, Bluesky, TikTok, Discord, and so on.

 I used to call these platforms “traditional social media,” but that doesn’t feel so appropriate in hindsight. There’s nothing really traditional about them — they simply superseded the internet’s true traditional social media in the form of blogs, websites, forums, and chat rooms. These make up the 90’s and 2000’s internet everyone claims to miss. (Even more traditional than the internet’s social media would be physical spaces — the literal public square, the farmer’s market, the community bulletin board, the bars and cafes, etc.) Though, it’s interesting to note how corporations have done much to expand internet and social media access (at least to their part), like that common joke about your grandma or great-grandma getting on Facebook to upload her boomer selfies. Web hosting is more accessible today than it was when I was a kid; you don’t need your own server, and you don’t even need to know how to code.
--- a/src/journal/index.md
+++ b/src/journal/index.md
@ -15,16 +15,16 @@ All my journal entries.

 <ol>
 {% for entry in collections.post reversed %}
-  <li>{{ entry.date | date: "%Y-%m-%d" }}: <a href="{{ entry.url }}">{{ entry.data.title }}</a></li>
+  <li>{{ entry.date | formatDate }} / <a href="{{ entry.url }}">{{ entry.data.title }}</a></li>
 {% endfor %}
 </ol>

-## Categories (WIP)
+## Explore

 **By year**

 - 2025

-**By topic**
+**By category**

- Stream of consciousness
+- Free flow
--- a/src/journal/journal.json
+++ b/src/journal/journal.json
@ -0,0 +1 @@
+{ "layout": "entry.njk" }