# Own

> Markdown version of https://brajeshwar.com/own/

{%- comment -%}
  /own/ — an inventory, not an article.

  WHY layout: album, THE SAME ONE /film/ AND /devices/ USE.

  It was `page` until 2026-08-07. Brajeshwar: "The Own page should be full
  width of the body width, unlike the need for footnote. Like film, books."

  The <main> was already the full 1024 band under either layout — measured, so
  the container was never the problem. What page.html adds is
  `<article class="page">`, and page.css clamps EVERY direct child of that to
  the 665px measure: `.page > h1`, `> p`, `> blockquote`. So the heading and
  the prose sat in a narrow column while the rows spanned the band, and the
  page read as two different widths stitched together.

  `album` is that wrapper's absence — `<main class="album {{ page.style }}">`
  and nothing else. Its own CSS only ever touches `.item__cards`, `figure` and
  `figcaption`, none of which this page uses, so it is inert here.

  ⚠️ AND NOTHING HERE OPTS INTO THE MEASURE. That is the second half of the
  same request, and it took two passes to land. The first version copied
  /film/ — structure at the band, prose at `container-ideal` — which measured
  as "full width" but did not READ as it: everything above the fold on this
  page is prose, so a reader sees the 665px column and nothing else until they
  scroll to the first row. Brajeshwar, twice, and the second time after the
  layout swap had already shipped: "What happened to making /own/ a full page
  width design?"

  So the whole page is the band now. The cost is real and worth writing down:
  1024px of text is ~150 characters a line against the ~66 design.md asks for.
  It is a fair trade for the lede and the section intros, which are two or
  three lines each. It is worst for "Notes to self" at the foot, four
  paragraphs of running prose — put `container-ideal` back on that ONE element
  if it reads badly, and the rest of the page stays wide.

  ⚠️ page.html's `{{ page_edited }}` stamp does not exist on this layout. This
  page carries no `edited:` key, so nothing is lost — but adding one would
  silently render nothing.

  ⚠️ THE ROWS REUSE .strip__viewport / .strip FROM home.css ON PURPOSE.
  That is the site's horizontal scroller: a native `overflow-x: auto` rail
  with arrow buttons that strip-nav.js reveals only after measuring a real
  overflow. Writing a second one here would mean a second thing to keep
  accessible, and default.html gates the script on the literal string
  `class="strip__viewport"` — so that attribute must stay EXACTLY that, with
  no extra classes in it, or the arrows silently stop shipping. Page-specific
  overrides are therefore written as `.page-own .strip…` in own.css.

  Brajeshwar, 2026-08-07: "WEAR will have a line by line items of, say, pants,
  shirts, bags, etc. And the brands I wear. Some lines may be long and hence
  should also be scrollable sideways. We will have pictures, logos, etc."
{%- endcomment -%}

{%- comment -%}
  The h1 is emitted here rather than left to a `# Own` in the content, because
  this file has no Markdown body for jekyll-titles-from-headings to strip one
  out of. Change `title:` and both the tab and the heading follow.
{%- endcomment -%}
<h1>{{ page.title }}</h1>

{%- comment -%}
  Verbatim from the COMMITTED wear.md, which carried it under `# Own` — the
  title this page has now come back to. His working copy had dropped the line
  along with the h1; it is kept because it is still true and says so in his own
  words.
{%- endcomment -%}
<blockquote class="own__wip">
  <p>A thinking-out-loud, work-in-progress thing.</p>
</blockquote>

{%- comment -%}
  ⚠️ THE LEDE HAS TO CARRY THE TENSION IN THE TITLE, or the page reads as the
  opposite of what it is. "Own" is the only honest superset — everything here
  is owned, and unlike "Wear" it does not break the first time a laptop or a
  bicycle joins the list. But a page called Own, on a site about minimizing,
  has to say out loud that the goal is for the list to get SHORTER. Named and
  unexplained, it would read as a brag sheet.
{%- endcomment -%}
<p class="own__lede">
  Everything I own that matters enough to write down: a layered modular capsule
  kept monochrome and unbranded, the bag it travels in, and the handful of
  things that stay put. The aim is for this list to get shorter every year, not
  longer. Each line is a category; a long one scrolls sideways rather than
  wrapping.
</p>

{%- for section in site.data.own %}
<section class="own__section">
  <h2 class="own__section-title">{{ section.section }}</h2>
  {%- if section.intro %}
  <p class="own__section-intro">{{ section.intro }}</p>
  {%- endif %}

  {%- for row in section.rows %}
  <div class="own__row">
    {%- comment -%}
      ⚠️ THE LABEL IS WRAPPED, even though it is usually the only thing in
      there. The row is a two-column grid, and an optional third child
      (the cross-link) was auto-placed into the RAIL's cell and pushed the rail
      onto a second grid row. Pinning all three with grid-column/grid-row fixed
      that and introduced a subtler one: the link sat at the bottom of the tall
      spanned row, level with the last item rather than under its own label.

      A wrapper is the honest fix. The grid keeps exactly two children whatever
      the row carries, the label and its link stack normally inside it, and
      there is no explicit placement to keep in sync with the narrow layout.

      An optional cross-link, built for one case and general anyway: Devices
      points at /devices/, which is the SAME OBJECTS IN A DIFFERENT TENSE —
      that page is the lineage since 1999, dead hardware included; this row is
      what is in the house today. Merging them would mean either losing the
      history or putting retired phones on an inventory.
    {%- endcomment -%}
    <div class="own__labelbox">
      <h3 class="own__label">{{ row.label }}</h3>
      {%- if row.link %}
      <p class="own__label-link"><a href="{{ row.link | relative_url }}">{{ row.link_text | default: "More" }}</a></p>
      {%- endif %}
    </div>

    <div class="strip__viewport">
      <button class="strip__nav strip__nav--prev" type="button"
              aria-label="Scroll {{ row.label | downcase }} left" hidden>
        <span aria-hidden="true">&lsaquo;</span>
      </button>

      <ul class="strip own__rail">
        {%- for item in row.items %}
        <li class="strip__item own__item">
          {%- comment -%}
            NO url YET → a <span>, not <a href="">. An empty href is not an
            inert link: it points at the current page, takes tab focus and
            announces as a link. Same reasoning as home-strip.html, and the
            normal state here — an inventory line exists long before it has
            anywhere to point.
          {%- endcomment -%}
          {%- if item.url -%}
          {%- assign proto = item.url | slice: 0, 4 -%}
          <a class="own__link" href="{% if proto == 'http' %}{{ item.url }}{% else %}{{ item.url | relative_url }}{% endif %}"{% if proto == 'http' %} rel="noopener"{% endif %}>
          {%- else -%}
          <span class="own__link">
          {%- endif -%}

            {%- comment -%}
              ⚠️ THE MARK IS ALWAYS RENDERED, with or without a picture, and
              the box is the same size either way. So the row never reflows
              when a logo arrives, and a line without one reads as designed
              rather than as a missing image — the /books/ bookplate idea
              applied to a logo slot. Both are `aria-hidden`: the brand is
              spelled out immediately below, so the mark is decoration.

              LOGOS KEEP THEIR OWN COLOURS (2026-08-07: "it is OK to keep
              their original branding color and logo. Just like how we have
              colorful photos"). A monochrome-mask version of this existed for
              a few hours and is gone; the plate behind the picture is what
              makes a brand's own colours legible on both themes, rather than
              repainting the mark in ours. See `--logo-plate` in themes.scss.
            {%- endcomment -%}
            {%- if item.img -%}
            {%- assign first = item.img | slice: 0 -%}
            {%- if first == "/" -%}{%- assign src = item.img -%}
            {%- else -%}{%- assign src = "/static/own/" | append: item.img -%}{%- endif -%}
            <img class="own__mark own__mark--img" src="{{ src | relative_url }}"
                 alt="" loading="lazy" width="120" height="120">
            {%- else -%}
            <span class="own__mark" aria-hidden="true">{{ item.brand | slice: 0 }}</span>
            {%- endif -%}

            <span class="own__brand">{{ item.brand }}</span>
            {%- if item.name %}<span class="own__name">{{ item.name }}</span>{% endif %}
            {%- if item.note %}<span class="own__note">{{ item.note }}</span>{% endif %}

          {%- if item.url %}</a>{% else %}</span>{% endif -%}
        </li>
        {%- endfor %}
      </ul>

      <button class="strip__nav strip__nav--next" type="button"
              aria-label="Scroll {{ row.label | downcase }} right" hidden>
        <span aria-hidden="true">&rsaquo;</span>
      </button>
    </div>
  </div>
  {%- endfor %}
</section>
{%- endfor %}

{%- comment -%}
  CARRIED OVER VERBATIM FROM _pages/wear.md, which this file replaces.
  Brajeshwar, 2026-08-07: "Carry over the prose from there, I will read and
  decide what to do with it." It renders rather than sitting in a comment,
  because deciding what to do with prose is easier when you can see it on the
  page — but it is marked as notes so it does not read as published copy.
  Nothing else on the page depends on this block; delete it whole if it goes.
{%- endcomment -%}
<section class="own__notes">
  <h2>Notes to self</h2>

  <p>My life’s item should be in a single printable A4 size Paper at a readable
  font-size and perhaps even blocks of boxes to not try to cramp in too much
  item. Create a layered modular capsule wardrobe, and stay within a monochrome
  color, without or as minimal/discrete branding, display of logos, and
  no-frills.</p>

  <p>Stay darker; the highest color would be like dark navy blue and cream on
  the lightest end of the palette.</p>

  <p>A <a href="https://en.wikipedia.org/wiki/Capsule_wardrobe">capsule
  wardrobe</a> is a minimalist collection of clothes that can be put together in
  different ways to cover a variety of outfits and occasions. The aim is to have
  an outfit suitable for any occasion without owning excessive items of
  clothing. This is usually achieved by buying what are considered to be “key”
  or “staple” items in coordinating colours.</p>

  <p>Do for other items such as electronics that are part of my life. Plan an
  renewal or replacement timeline. Make this part of the yearly review to plan
  the disposal, renewal, replacement, etc.</p>
</section>
