harmonisation des styles

2026-01-29 20:57:17 +01:00 · 2026-01-29 20:57:17 +01:00 · b3f985a41b
commit b3f985a41b
parent 9ead1c51f4
30 changed files with 1601 additions and 465 deletions
--- a/assets/css/components/_card-impact-small.scss
+++ b/assets/css/components/_card-impact-small.scss
@ -0,0 +1,111 @@
+.card--impact-small {
+
+    border-bottom: var(--border-light);
+    &:first-of-type{
+        border-top: var(--border-light);
+    }
+
+
+    @include grid-content();
+    padding: var(--padding-inner) 0;
+
+    &.has-link {
+        @include hover-card-line();
+    }
+
+    @include btn--go-to();
+
+    .btn--go-to {
+        top: calc(var(--padding-inner)*1);
+        bottom: auto;
+    }
+
+    .content {
+        grid-column: 2;
+    }
+
+    .card--open-graph {
+        grid-column: 2;
+        z-index: 10;
+    }
+
+    .keywords {
+        grid-column: 2;
+        z-index: 10;
+
+        @media #{$x-small} {
+                display: block;
+                line-height: 1.1;
+                li, a{
+                    display: inline;
+                    border: none; 
+                    padding: 0px;
+                    color: var(--color-txt-light);
+                }
+        }
+
+    }
+
+        &:not([data-impact-type="media"]) .content, 
+        .keywords {
+            @media #{$x-small} {
+                grid-column: span 2;
+            }
+        }
+
+        .tag {
+            width: auto;
+            justify-self: start;
+            position: relative;
+            top: -5px;
+        }
+
+        &:not([data-impact-type="media"]) {
+            .content {
+                padding-right: calc(var(--padding-inner)*2.5);
+                @media #{$x-small} {
+                    padding-right: 0;
+                }
+            }
+
+        }
+
+
+        .open-graph__details {
+            grid-column: 2;
+            @include details-summary();
+
+            summary {
+                color: var(--color-txt-light);
+
+                .arrow-details svg {
+                    fill: var(--color-txt-light);
+                }
+            }
+
+            @media #{$x-small} {
+                summary {
+                    @include grid-content();
+                    grid-row-gap: 0;
+
+                    .summary-inner {
+                        grid-column: 2;
+                    }
+                }
+
+                grid-column: 1/3;
+            }
+        }
+
+
+        .open-graph__inner {
+            margin-top: calc(var(--spacing)*0.5);
+            .card--open-graph {
+                margin-bottom: calc(var(--spacing)*0.5);
+            }
+
+        }
+    
+}
+
+