Remove some custom css and replace with bootstrap classes

Thu Apr 10 2025

tucker.mcknight@gmail.com

Also, make the before/after code part of patch.njk take up
the full screen width. This is done by adding an optional
width: full variable to a page's front matter, which will
then wrap that page's content in a `div.container-fluid`
element, instead of `div.container-lg`.

89956578e1022b5d2e2bd36863b8566f5104a4a3

darcs pull https://repos.tuckerm.us/repos/eleventy-darcs/branches/main -h 89956578e1022b5d2e2bd36863b8566f5104a4a3
_includes/main.njk:39
Before
After
    </div>
    <div class="container-{% if width == "full"%}fluid{% else %}lg{% endif %}">
main.css:6
Before
.filename {
  display: block;
  font-family: monospace;
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 14px;
}
.beforeafter {
  font-family: monospace;
  margin-top: 5px;
  color: #666;
}
After
main.css:12
Before
.code {
  font-size: 14px;
}
After
main.css:35
Before
  border-left: 1px solid black;
After
patch.njk:7
Before
After
width: full
patch.njk:10
Before
<div class="row">
    <div class="col-auto">
      <h1>{{patchInfo.patch.name}}</h2>
      <p>{{patchInfo.patch.date | date }}</p>
      <p>{{patchInfo.patch.author }}</p>
      <pre class=&quot;patch-description"&gt;{{patchInfo.patch.description}}</pre>
    
After
<div class="container-lg">
  <div class="row">
    <div class="col-auto">
      <h1>{{patchInfo.patch.name}}</h2>
      <p>{{patchInfo.patch.date | date }}</p>
      <p>{{patchInfo.patch.author }}</p>
      <pre>{{patchInfo.patch.description}}</pre>
    </div>
patch.njk:19
Before
  </div>
<div class="row border-bottom">
    <div class="col-auto">
      <p >{{patchInfo.patch.hash}}</p>
      <div class="input-group mb-3">
        <span id="clone-command" class="clone input-group-text">
          {% set url = [darcsConfig.baseUrl, "/repos/", patchInfo.repoName | slugify] | join | url %}
          darcs pull {{ url }} -h {{patchInfo.patch.hash}}
        </span>
        <button class="btn btn-primary" id="clone-button" onclick="copyCommand()">Copy</button>
      
After
  <div class="row">
    <div class="col-auto">
      <p class=&quot;font-monospace fw-bold text-secondary"&gt;{{patchInfo.patch.hash}}</p>
      <div class="input-group mb-3">
        <span id="clone-command" class="clone input-group-text">
          {% set url = [darcsConfig.baseUrl, "/repos/", patchInfo.repoName | slugify] | join | url %}
          darcs pull {{ url }} -h {{patchInfo.patch.hash}}
        </span>
        <button class="btn btn-primary" id="clone-button" onclick="copyCommand()">Copy</button>
      </div>
patch.njk:32
Before
{% set patchHunks = patchInfo.patch.diffs %}
  {% for hunk in patchHunks %}
    <div class=hunk>
      <span class="filename"><a href="/repos/{{patchInfo.repoName}}/files/{{ hunk.file }}.html">{{ hunk.file }}:{{ hunk.lineNumber }}</a></span>
      <div class="diff">
        <div class=diff-left>
          <span class='beforeafter'>Before</span>
          <pre class='code line-numbers' data-start="{{hunk.lineNumber}}"><code data-type="before" class="language-{{hunk.file | languageExtension(patchInfo.repoName)}}">{{hunk.previousText | safe}}</code></pre>
        
After
<div class="container-fluid border-top">
  <div class="row">
  {% set patchHunks = patchInfo.patch.diffs %}
  {% for hunk in patchHunks %}
    <div class=hunk>
      <span class="font-monospace fw-bold"><a href="/repos/{{patchInfo.repoName}}/files/{{ hunk.file }}.html">{{ hunk.file }}:{{ hunk.lineNumber }}</a></span>
      <div class="diff">
        <div class=diff-left>
          <span class='font-monospace text-secondary'>Before</span>
          <pre class='line-numbers' data-start="{{hunk.lineNumber}}"><code data-type="before" class="language-{{hunk.file | languageExtension(patchInfo.repoName)}}">{{hunk.previousText | safe}}</code></pre>
        </div>
        <div class="diff-right border-start">
          <span class='font-monospace text-secondary'>After</span>
          <pre class='line-numbers' data-start="{{hunk.lineNumber}}"><code data-type="after" class="language-{{hunk.file | languageExtension(patchInfo.repoName)}}">{{ hunk.afterText | safe}}</code></pre>
        </div>
patch.njk:48
Before
      <div class=diff-right>
        <span class='beforeafter'>After</span>
        <pre class='code line-numbers' data-start="{{hunk.lineNumber}}"><code data-type="after" class="language-{{hunk.file | languageExtension(patchInfo.repoName)}}">{{ hunk.afterText | safe}}</code></pre>
      </div>
After
patch.njk:49
Before
After
  {% endfor %}
patch.njk:51
Before
{% endfor %}
After
</div>