Adapter les statblocks de monstres au style fourni #15

New issue

Closed

opened 2026-06-30 09:52:44 +00:00 by Reliodas · 0 comments

Reliodas commented

2026-06-30 09:52:44 +00:00

Owner

Contexte

Les cartes monstres doivent evoluer vers un rendu de statblock plus proche du style fourni. Le CSS ci-dessous sert de reference d'intention visuelle: cadre, typographie, tables de caracteristiques, couleurs alternees et hierarchie des titres.

Ce CSS utilise une syntaxe imbriquee de type preprocesseur/CSS nesting. Le projet etant statique, l'implementation doit soit l'adapter en CSS navigateur compatible, soit documenter explicitement la strategie retenue.

Modifications a faire

Comparer le rendu actuel de creatures.html et shared.css avec le style cible.
Adapter les statblocks monstres au style fourni sans casser les dimensions physiques des cartes.
Definir ou remplacer les variables CSS necessaires (--MonsterBackground, --Light_Gray, --New_Dark_Red, etc.) dans la palette du projet.
Adapter les tableaux de caracteristiques et les blocs de texte pour rester lisibles a l'impression.
Verifier les formats portrait et paysage.
Coordonner ce travail avec le ticket #12 sur les debordements de texte.

CSS de reference

/* MONSTER STATBLOCKS */
/* ________________________________________________________ */
/*                                                          */
/******** Below is an iteration of u/Gambatte's code ------ */
/* ________________________________________________________ */

.monster {
font-size             : 3.58mm;

  &.frame {
    padding           : 8px 7px;
    background-image  : none;
    background-color  : var(--MonsterBackground);
    border-image      : none;
    border            : 3px double var(--Light_Gray);
    border-radius     : 10px;
    box-shadow        : 3px 3px 5px -2px rgba(136, 136, 136, 0.6);
    margin            : 0 -6px;
    width             : calc(100% + 12px);
  }
  &.wide {
    h2 + p {
      column-span : all;
      margin-bottom : 0.5mm;
    }
  }

  h2 {
    column-span         : all;
    margin-bottom       : 3px;
    font-family         : 'ScalySansSmallCapsRemake';
    font-size           : 5.4mm;
    letter-spacing      : -0.15mm;
    border-bottom       : 0.35mm solid var(--New_Dark_Red);
    line-height         : 0.9em;
    color               : var(--New_Dark_Red);
    -webkit-text-stroke : 0.1px var(--New_Dark_Red);

    + p {
      color         : var(--Gray);
      font-size     : inherit;
      line-height   : 0.8em;
      margin-bottom : 2.3mm;
    }
  }

  h3 {
    line-height   : 0.9em;
    border-bottom : 0.35mm solid var(--New_Dark_Red);

    &:first-of-type {
      margin-top  : 11px;
    }
    ~ dl {
      color       : inherit;
      line-height : 1.2em;
    }
  }

  p {
    + h3 {
      margin-top  : 2.8mm; }
    + p {
      text-indent : 0;
      padding-top : 1.8mm; }
  }

  dl {
    color       : var(--HB_Color_HeaderText);
    line-height : 1.12em;

    /* This is for the Initiative stat: */
    + dl {
      position  : absolute;
      top       : 44px;
      left      : 170px;
    }
  }

  .legend {
    margin-top      : 1mm;
    padding-bottom  : 1.8mm;
    font-style      : italic;
    line-height     : 1.1em;
    color           : var(--Gray);
  }

  /* MONSTER TABLE */
  table {
    margin      : 2px 0;
    font-size   : 3.4mm;

    tbody tr:nth-child(odd) {
      background-color  : unset;
    }
  }

  th {
    color         : var(--Gray) !important;
    font-weight   : normal;
    font-size     : 8px;
    line-height   : 0.8em;
  }

  tr td {
    padding       : 0.3mm 0.5mm;
    border        : solid white;
    border-width  : 1px 0;
    text-align    : center;
    color         : var(--HB_Color_HeaderText);

    &:nth-of-type(4n+1) {
      font-weight   : bold;
      font-variant  : small-caps;
    }
    &:nth-of-type(4n+2) {
      width       : 8%;
    }
    &:nth-of-type(4n+4) {
      width       : 10%;
    }

    &:nth-of-type(4), &:nth-of-type(8) {
      clip-path     : polygon(-1px 0, 90% 0, 90% 100%, -1px 100%);
      padding-right : 1.5mm;
      width         : 100px;
    }
    &:nth-of-type(5), &:nth-of-type(9) {
      clip-path     : polygon(10% 0, 102% 0, 102% 100%, 10% 100%);
      padding-left  : 1.5mm;
    }
  }

  tr:nth-of-type(odd) {
    td:nth-of-type(4n+1), td:nth-of-type(4n+2) {
      background-color  : var(--Monster_Table_Yellow);
    }
    td:nth-of-type(4n), td:nth-of-type(4n-1) {
      background-color  : var(--Monster_Table_Red); }
    tr:nth-of-type(even) {
      td:nth-of-type(4n+1), td:nth-of-type(4n+2) {
        background-color  : var(--Monster_Table_Green);
      }
      td:nth-of-type(4n), td:nth-of-type(4n-1) {
        background-color  : var(--Monster_Table_Purple);
      }
    }
  }
}

Criteres d'acceptation

Les statblocks monstres utilisent un style coherent avec le CSS de reference.
Le CSS final est compatible avec l'ouverture directe des fichiers HTML, sans build obligatoire.
Les variables de couleur et de police manquantes sont definies, remplacees ou documentees.
Le rendu reste lisible aux dimensions physiques de carte.
Les formats portrait et paysage sont verifies.
Le changement ne degrade pas le comportement d'impression.

## Contexte Les cartes monstres doivent evoluer vers un rendu de statblock plus proche du style fourni. Le CSS ci-dessous sert de reference d'intention visuelle: cadre, typographie, tables de caracteristiques, couleurs alternees et hierarchie des titres. Ce CSS utilise une syntaxe imbriquee de type preprocesseur/CSS nesting. Le projet etant statique, l'implementation doit soit l'adapter en CSS navigateur compatible, soit documenter explicitement la strategie retenue. ## Modifications a faire - Comparer le rendu actuel de `creatures.html` et `shared.css` avec le style cible. - Adapter les statblocks monstres au style fourni sans casser les dimensions physiques des cartes. - Definir ou remplacer les variables CSS necessaires (`--MonsterBackground`, `--Light_Gray`, `--New_Dark_Red`, etc.) dans la palette du projet. - Adapter les tableaux de caracteristiques et les blocs de texte pour rester lisibles a l'impression. - Verifier les formats portrait et paysage. - Coordonner ce travail avec le ticket #12 sur les debordements de texte. ## CSS de reference ```css /* MONSTER STATBLOCKS */ /* ________________________________________________________ */ /* */ /******** Below is an iteration of u/Gambatte's code ------ */ /* ________________________________________________________ */ .monster { font-size : 3.58mm; &.frame { padding : 8px 7px; background-image : none; background-color : var(--MonsterBackground); border-image : none; border : 3px double var(--Light_Gray); border-radius : 10px; box-shadow : 3px 3px 5px -2px rgba(136, 136, 136, 0.6); margin : 0 -6px; width : calc(100% + 12px); } &.wide { h2 + p { column-span : all; margin-bottom : 0.5mm; } } h2 { column-span : all; margin-bottom : 3px; font-family : 'ScalySansSmallCapsRemake'; font-size : 5.4mm; letter-spacing : -0.15mm; border-bottom : 0.35mm solid var(--New_Dark_Red); line-height : 0.9em; color : var(--New_Dark_Red); -webkit-text-stroke : 0.1px var(--New_Dark_Red); + p { color : var(--Gray); font-size : inherit; line-height : 0.8em; margin-bottom : 2.3mm; } } h3 { line-height : 0.9em; border-bottom : 0.35mm solid var(--New_Dark_Red); &:first-of-type { margin-top : 11px; } ~ dl { color : inherit; line-height : 1.2em; } } p { + h3 { margin-top : 2.8mm; } + p { text-indent : 0; padding-top : 1.8mm; } } dl { color : var(--HB_Color_HeaderText); line-height : 1.12em; /* This is for the Initiative stat: */ + dl { position : absolute; top : 44px; left : 170px; } } .legend { margin-top : 1mm; padding-bottom : 1.8mm; font-style : italic; line-height : 1.1em; color : var(--Gray); } /* MONSTER TABLE */ table { margin : 2px 0; font-size : 3.4mm; tbody tr:nth-child(odd) { background-color : unset; } } th { color : var(--Gray) !important; font-weight : normal; font-size : 8px; line-height : 0.8em; } tr td { padding : 0.3mm 0.5mm; border : solid white; border-width : 1px 0; text-align : center; color : var(--HB_Color_HeaderText); &:nth-of-type(4n+1) { font-weight : bold; font-variant : small-caps; } &:nth-of-type(4n+2) { width : 8%; } &:nth-of-type(4n+4) { width : 10%; } &:nth-of-type(4), &:nth-of-type(8) { clip-path : polygon(-1px 0, 90% 0, 90% 100%, -1px 100%); padding-right : 1.5mm; width : 100px; } &:nth-of-type(5), &:nth-of-type(9) { clip-path : polygon(10% 0, 102% 0, 102% 100%, 10% 100%); padding-left : 1.5mm; } } tr:nth-of-type(odd) { td:nth-of-type(4n+1), td:nth-of-type(4n+2) { background-color : var(--Monster_Table_Yellow); } td:nth-of-type(4n), td:nth-of-type(4n-1) { background-color : var(--Monster_Table_Red); } tr:nth-of-type(even) { td:nth-of-type(4n+1), td:nth-of-type(4n+2) { background-color : var(--Monster_Table_Green); } td:nth-of-type(4n), td:nth-of-type(4n-1) { background-color : var(--Monster_Table_Purple); } } } } ``` ## Criteres d'acceptation - Les statblocks monstres utilisent un style coherent avec le CSS de reference. - Le CSS final est compatible avec l'ouverture directe des fichiers HTML, sans build obligatoire. - Les variables de couleur et de police manquantes sont definies, remplacees ou documentees. - Le rendu reste lisible aux dimensions physiques de carte. - Les formats portrait et paysage sont verifies. - Le changement ne degrade pas le comportement d'impression.