user css: fit github repo page content to window width; show absolute dates alongside relative dates

deshit-github.css

/* ==UserStyle==
@name           Wide GitHub with absolute dates
@namespace      github.com/openstyles/stylus
@version        1.1.8
@description    Fit GitHub to window width and show absolute dates alongside relative dates
@author         Mark Laws
==/UserStyle== */
@-moz-document domain("github.com") {
  /* stylelint-disable comment-empty-line-before */
  /* stylelint-disable comment-whitespace-inside */
  /* stylelint-disable selector-class-pattern */

  /* TODO: Fix absolute dates in blame view */

  :is(.repository-content, main > *[id|="repo-content"]) relative-time.no-wrap,
  :is(.repository-content, main > *[id|="repo-content"]) time-ago[datetime].no-wrap {
    /*overflow-wrap: break-word !important;*/
    white-space: normal; /* !important; */
  }

  .gisthead :is(time-ago, relative-time)[datetime]::before,
  :is(.repository-content, main > *[id|="repo-content"]) relative-time::before,
  :is(.repository-content, main > *[id|="repo-content"]) time-ago[datetime]::before {
    content: attr(title) " (";
  }

  .gisthead :is(time-ago, relative-time)[datetime]::after,
  :is(.repository-content, main > *[id|="repo-content"]) relative-time::after,
  :is(.repository-content, main > *[id|="repo-content"]) time-ago[datetime]::after {
    content: ")";
  }

  /* filename "column" */
  :is(.repository-content, main > *[id|="repo-content"]) .Details div[role~="rowheader"] {
    flex: initial /* !important; */
  }

  /* timestamp "column" */
  :is(.repository-content, main > *[id|="repo-content"]) .Details .d-none + div {
    width: unset; /* !important; */
  }

  /* make content fit to window width */
  .container-lg, .container-xl {
    margin-right: auto;
    margin-left: auto;
    max-width: unset;
  }

  /* time label with hard-coded max-width in parent element */
  .css-truncate:has(relative-time) {
    max-width: unset; /* !important; */
  }

  /* Fix commit date column width in new-style file browser */
  table[aria-labelledby~="folders-and-files"] > thead > tr > th:last-of-type {
    width: unset;
  }

  /* TODO target this properly */
  .jAVTmU {
    max-width: unset;
  }

  /* TODO target this properly */
  .jgEDtJ {
    max-width: unset;
  }

  .react-repos-overview-margin {
    margin-right: unset;
  }
}

/*
 * initial:
 *   Sets to the initial value (the default as specified by the CSS spec).  For
 *   inherited properties, the initial value is used on the root element only,
 *   as long as no specified value is given.  For non-inherited properties, the
 *   initial value is used on all elements, as long as no specified value is
 *   given.
 *
 * inherit:
 *   Sets to the computed value of the property from its parent element.  For
 *   inherited properties, this reinforces the default behavior, and is only
 *   needed to override another rule.  For non-inherited properties, this
 *   generally does not make sense, as inheritance always comes from the parent
 *   element in the document tree, even when the parent is not the containing
 *   block.
 *
 * unset:
 *   Resets the property to its inherited value if the property inherits from
 *   its parent, and to its initial value if not.  It behaves like inherit in
 *   the first case, and like initial in the second case.
 *
 * revert:
 *   Reverts the cascaded value of the property from its current value to the
 *   value the property would have had if no changes had been made by the
 *   current style origin of the current element.  This is fairly complicated:
 *
 *   https://developer.mozilla.org/en-US/docs/Web/CSS/revert
 */