Espacements CSS

<article>
  <div class="titre">
    <h1>The Hill We Climb</h1>
    <p>&mdash;Amanda Gorman, 2021</p>
  </div>
  <p>
    Quand le jour se lève, nous nous demandons où trouver la lumière dans cette
    ombre sans fin ? La perte que nous portons en nous, une mer que nous devons
    affronter. Nous avons bravé les entrailles de la bête.
  </p>

  <p>
    Nous avons appris que le silence n'est pas toujours synonyme de paix et que
    les normes et les idées reçues sur ce qui est juste ne correspondent pas
    toujours à la justice. Et pourtant, l'aube se profile déjà, bien avant que
    nous ne nous en rendions compte, d'une manière ou d'une autre nous y
    parvenons, d'une manière ou d'une autre nous avons traversé les tempêtes et
    vu de nos propres yeux une nation qui n'est pas brisée, mais simplement
    inachevée.
  </p>

  <p>
    Nous, les héritiers d'un pays et d'une époque où une jeune fille noire,
    mince, issue d'une famille d'esclaves et élevée par une mère célibataire,
    peut rêver de devenir présidente, pour finalement se retrouver à réciter un
    discours pour l'un d'entre eux.
  </p>

  <p>
    Et oui, nous sommes loin d'être parfaits, loin d'être irréprochables, mais
    cela ne signifie pas que nous nous efforçons de former une union parfaite.
    Nous nous efforçons de forger notre union avec un but précis, de bâtir un
    pays engagé envers toutes les cultures, toutes les couleurs, tous les
    caractères et toutes les conditions de l'être humain. C'est pourquoi nous
    tournons notre regard non pas vers ce qui nous sépare, mais vers ce qui nous
    attend. Nous comblons le fossé parce que nous savons qu'il faut donner la
    priorité à notre avenir. Nous devons d'abord mettre nos différences de côté.
  </p>

  <p>
    Nous déposons les armes pour pouvoir tendre les bras les uns vers les
    autres. Nous ne voulons de mal à personne et aspirons à l'harmonie pour
    tous. Que le monde entier, à défaut d'autre chose, reconnaisse que c'est
    vrai, que même dans notre chagrin, nous avons grandi. Que même dans notre
    souffrance, nous avons gardé espoir.
  </p>

  <p>
    Que même si nous étions épuisés, nous avons persévéré. Que nous sommes liés
    à jamais, victorieux, non pas parce que nous ne connaîtrons plus jamais la
    défaite, mais parce que nous ne semerons plus jamais la division.
  </p>

  <p>
    Les Écritures nous invitent à imaginer que chacun s'assiéra sous sa vigne et
    son figuier, et que personne ne lui fera peur.
  </p>

  <p>
    Si nous voulons être à la hauteur de notre époque, la victoire ne réside pas
    dans le fer de l'épée, mais dans tous les ponts que nous avons construits,
    dans cette promesse de clarté, dans cette colline que nous gravissons si
    seulement nous osons le faire, car être américain, c'est bien plus qu'une
    fierté dont nous avons hérité. C'est le passé dans lequel nous nous sommes
    engagés et la manière dont nous le réparons.
  </p>

  <blockquote>
    <p>
      Nous avons vu une force qui préférerait briser notre nation plutôt que de
      la partager, qui détruirait notre pays si cela devait retarder la
      démocratie.
    </p>
  </blockquote>

  <p>
    Et cette tentative a failli aboutir. Mais si la démocratie peut être
    temporairement mise en échec, elle ne peut jamais être vaincue
    définitivement. C'est en cette vérité, en cette conviction, que nous avons
    confiance. Car tandis que nous avons les yeux tournés vers l'avenir,
    l'histoire a les yeux rivés sur nous.
  </p>

  <p>
    C'est l'ère où la rédemption est juste. Nous avons craint -- ses tromperies.
    Nous ne nous sentions pas prêts à être les héritiers d'un moment aussi
    terrifiant, mais c'est en son sein que nous avons trouvé la force d'écrire
    un nouveau chapitre, de nous offrir, à nous-mêmes, de l'espoir et des rires.
  </p>

  <p>
    Ainsi, alors qu'autrefois nous nous demandions « comment pourrions-nous bien
    triompher de la catastrophe ? », nous affirmons désormais : « comment la
    catastrophe pourrait-elle bien triompher de nous ? » Nous ne reviendrons pas
    en arrière, vers ce qui était, mais nous avançerons vers ce qui sera, un
    pays meurtri mais intact, bienveillant mais audacieux, farouche et libre.
    Nous ne nous laisserons ni faire rebrousser chemin ni freiner par
    l'intimidation.
  </p>

  <p>
    Car nous savons que notre inaction et notre inertie seront l'héritage de la
    prochaine génération. Nos erreurs deviendront leur fardeau. Mais une chose
    est certaine. Si nous allions la miséricorde à la puissance et la puissance
    au droit, alors l'amour deviendra notre héritage et le changement, le droit
    inaliénable de nos enfants.
  </p>

  <p>
    Laissons donc derrière nous un pays meilleur que celui dont nous avons
    hérité, chaque souffle de ma poitrine de bronze martelé contribuera à
    transformer ce monde meurtri en un monde merveilleux. Nous nous élèverons
    depuis les collines aux versants dorés de l'Ouest, nous nous élèverons
    depuis le Nord-Est balayé par les vents, là où nos ancêtres ont pour la
    première fois fait la révolution. Nous nous élèverons depuis les villes
    bordées de lacs des États du Midwest.
  </p>

  <p>
    Nous nous élèverons du Sud brûlé par le soleil. Nous reconstruirons, nous
    réconcilierons et nous nous relèverons, dans chaque recoin connu de notre
    nation, dans chaque coin appelé notre pays, notre peuple, divers et
    magnifique, émergera meurtri et magnifique.
  </p>

  <p>
    Quand le jour se lève, nous sortons de l'ombre, enflammés et sans crainte.
  </p>

  <p>
    La nouvelle aube s'épanouit à mesure que nous la libérons, car il y a
    toujours de la lumière, à condition d'être assez courageux pour la voir, à
    condition d'être assez courageux pour l'incarner.
  </p>
</article>
<fieldset id="options" class="open">
  <legend>
    <button aria-expanded="true" aria-controls="controls">
      Options de colonnes
    </button>
  </legend>
  <div id="controls">
    <p>
      <input type="checkbox" checked id="etendueColonne" />
      <label for="etendueColonne">
        Le paraphe s'étend sur toutes les colonnes
      </label>
    </p>
    <p>
      <input type="checkbox" id="etendueBloc" />
      <label for="etendueBloc">
        Le bloc de citation s'étend sur toutes les colonnes
      </label>
    </p>
    <section>
      <p>
        <label for="compteColonne">column-count</label>
        <input type="number" min="0" max="5" value="5" id="compteColonne" />
      </p>
      <p>
        <label for="hauteurColonne">column-height:</label>
        <input
          type="number"
          min="0"
          max="100"
          value="20"
          id="hauteurColonne"
          step="5" /><label for="hauteurColonne">vh</label>
      </p>
      <p>
        <label for="couleurColonne">rule-color:</label>
        <input type="color" id="couleurColonne" value="#FF0000" />
      </p>
      <p>
        <label for="regleStyleColonne">rule-style:</label>
        <select id="regleStyleColonne">
          <option>none</option>
          <option>hidden</option>
          <option>dotted</option>
          <option>dashed</option>
          <option>solid</option>
          <option selected>double</option>
          <option>groove</option>
          <option>ridge</option>
          <option>inset</option>
          <option>outset</option>
          <option></option>
        </select>
      </p>
      <p>
        <input
          type="range"
          min="0"
          max="4"
          value="1"
          step="0.5"
          id="tailleEspace" />
        <label for="tailleEspace">gap: </label
        ><output id="espace" class="sortie">1em</output>
      </p>
      <p>
        <input
          type="range"
          min="0"
          max="3"
          value="0.3"
          step="0.1"
          id="regleLargeurColonne" />
        <label for="regleLargeurColonne">rule-width: </label
        ><output id="regleLargeur" class="sortie">0.3em</output>
      </p>
      <p>
        <input
          type="range"
          min="-50"
          max="200"
          value="0"
          step="5"
          id="regleEncart" />
        <label for="regleEncart">rule-inset: </label
        ><output id="encart" class="sortie">0%</output>
      </p>
    </section>
  </div>
</fieldset>

const page = document.querySelector("article");
const titre = document.querySelector(".titre");
const option = document.querySelector("#options");
const legende = document.querySelector("#options > legend");
const btnLegende = document.querySelector("#options > legend > button");
const blocCitation = document.getElementsByTagName("blockquote")[0];

const compteColonne = document.getElementById("compteColonne");
const etendueColonne = document.getElementById("etendueColonne");
const etendueBloc = document.getElementById("etendueBloc");

const tailleEspace = document.getElementById("tailleEspace");
const espace = document.getElementById("espace");
const regleLargeurColonne = document.getElementById("regleLargeurColonne");
const regleLargeur = document.getElementById("regleLargeur");
const regleStyleColonne = document.getElementById("regleStyleColonne");
const regleStyle = document.getElementById("regleStyle");
const regleCouleurColonne = document.getElementById("couleurColonne");
const hauteurColonne = document.getElementById("hauteurColonne");
const regleEncart = document.getElementById("regleEncart");
const encart = document.getElementById("encart");

// Rend les options visibles si JavaScript est activé
option.style.display = "revert";

btnLegende.addEventListener("click", () => {
  showAndHideMenu();
});

compteColonne.addEventListener("change", () => {
  page.style.columnCount = compteColonne.value;
});

hauteurColonne.addEventListener("input", () => {
  page.style.columnHeight = `${hauteurColonne.value}vh`;
});

tailleEspace.addEventListener("input", () => {
  page.style.gap = `${tailleEspace.value}em`;
  espace.innerText = `${tailleEspace.value}em`;
});
regleEncart.addEventListener("input", () => {
  page.style.ruleInset = `${regleEncart.value}%`;
  encart.innerText = `${regleEncart.value}%`;
});

regleLargeurColonne.addEventListener("input", () => {
  page.style.columnRuleWidth = `${regleLargeurColonne.value}em`;
  page.style.ruleWidth = `${regleLargeurColonne.value}em`;
  regleLargeur.innerText = `${regleLargeurColonne.value}em`;
});

regleStyleColonne.addEventListener("input", () => {
  page.style.columnRuleStyle = regleStyleColonne.value;
  page.style.ruleStyle = regleStyleColonne.value;
});

etendueColonne.addEventListener("change", () => {
  definirEtendueColonne(etendueColonne, titre);
});

etendueBloc.addEventListener("change", () => {
  definirEtendueColonne(etendueBloc, blocCitation);
});

regleCouleurColonne.addEventListener("input", () => {
  page.style.columnRuleColor = regleCouleurColonne.value;
  page.style.ruleColor = regleCouleurColonne.value;
});

function showAndHideMenu() {
  if (btnLegende.getAttribute("aria-expanded") === "true") {
    // le fermer
    btnLegende.setAttribute("aria-expanded", "false");
    legende.classList.add("closed");
    legende.classList.remove("open");
  } else {
    // l'ouvrir
    btnLegende.setAttribute("aria-expanded", "true");
    legende.classList.remove("closed");
    legende.classList.add("open");
  }
}

function definirEtendueColonne(controle, element) {
  if (controle.checked) {
    element.style.columnSpan = "all";
  } else {
    element.style.columnSpan = "none";
  }
}

article {
  column-count: 5;
  gap: 1em;
  column-rule: 0.3em double red;
  rule: 0.3em double red;
  column-height: 20vh;
}
.titre {
  column-span: all;
  display: flex;
  align-items: baseline;
  gap: 1em;
  flex-wrap: wrap;
}
p {
  margin: 0 0 1em 0;
  line-height: 1.4;
}
blockquote {
  font-weight: bold;
  font-style: italic;
  margin: 0 0 0.25em 0;
}
blockquote p::before,
blockquote p::after {
  content: '"';
  vertical-align: baseline;
  color: red;
}

@layer form {
  #options {
    position: fixed;
    top: 1rem;
    right: 1rem;
    background: white;
    display: none;
    padding: 0.5em 1em;
  }
  section {
    font-family: monospace;
  }
  fieldset p {
    margin-bottom: 0.25em;
  }
  legend {
    position: relative;
    top: 0;
    transition: 200ms;
  }
  legend.closed {
    top: 0.75em;
  }
  legend.closed + #controls {
    display: none;
  }
  legend {
    background-color: #dedede;
    padding: 0.5em;
  }
  legend > button {
    all: unset;
    cursor: pointer;
  }
  legend.closed {
    margin: -1em;
    display: inline-block;
  }
  .sortie {
    display: inline-block;
    width: 2em;
  }
}