initial commit

assets/scss/assets_test.scss

@@ -0,0 +1,74 @@
+/*
+*  ASSETS TESTS
+*  Styles for dev.assets_test* pages
+*/
+
+div.mgrid,
+div.lgrid,
+div.cgrid {
+
+   display: grid;
+   column-gap: 1em;
+   row-gap: 1em;
+
+   &.debug {
+      border: 1px solid black;
+      padding: 1em;
+
+      .area1, .area3 {
+         background-color: yellow;
+      }
+      .area2, .area4 {
+         background-color: transparentize(cyan, 0.4);
+         padding-top: 1em;
+         padding-left: 1em;
+      }
+      .item {
+         background-color: orange;
+      }
+      ul {
+         list-style-type: none;
+         padding: 0;
+         margin: 0;
+         display: flex;
+      }
+   }
+}
+
+div.mgrid {
+   div.area1 {
+      grid-column: 1 / 3;
+      grid-row: 1 / 3;
+   }
+   div.area2 {
+      grid-column: 2 / 3;
+      grid-row: 2 / 3;
+   }
+}
+
+div.lgrid {
+   div.area3 {
+      grid-area: ah;
+   }
+   div.area4 {
+      grid-area: bl;
+   }
+   grid-template-areas:
+        "ah ah"
+        "ah bl";  // invalid
+   /*
+   *   La zone qu'on crée avec les noms doit être rectangulaires.
+   *   Actuellement, il n'existe pas de méthode pour créer une zone avec une forme de L
+   *   (bien que la spécification indique qu'une prochaine version pourrait couvrir cette fonctionnalité).
+   *   [...] Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide.
+   *   src: https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas
+   */
+   grid-template-areas:
+        "ah ah"
+        ". bl";
+}
+
+div.cgrid {
+   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+   grid-template-rows: masonry;
+}

assets/scss/test/twig_test.scss

@@ -0,0 +1,45 @@
+@mixin tagElement($color) {
+   position: relative;
+   & > div.dbg {
+      position: absolute;
+      top: -18px; right: 10px;
+      margin: 0; border: 0;
+      padding: 0 0.5em;
+      background-color: transparentize($color, 0.5);
+      font-size: 75%;
+      font-weight: normal;
+      color: white;
+   }
+}
+
+button#debug-toggle {
+   position: fixed;
+   top: 0;
+   right: 0;
+   width: auto;
+   z-index: 10;
+}
+
+div#test {
+   div, span {
+      margin: 1em;
+      border: 1px solid transparent;
+      padding: 1em;
+   }
+   &.debug {
+      div {
+         border-color: dimgray;
+         @include tagElement(dimgray);
+      }
+      span {
+         border-color: deeppink;
+         @include tagElement(deeppink);
+      }
+   }
+   div.blue {
+      font-weight: bold;
+      color: blue;
+      border: 2px solid blue;
+   }
+}
+