Initial commit

themes/default/assets/css/article.css

@@ -0,0 +1,74 @@
+article {
+    .article-hero {
+        width: 100vw;
+        height: 100vh;
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        z-index: 1;
+        position: fixed;
+        top: 0;
+
+        &.blurred-cover {
+            filter: blur(4px);
+            /* ou ce que vous souhaitez */
+        }
+
+        .image-attribution {
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            transform-origin: bottom right;
+            transform: rotate(-90deg) translateX(100%);
+
+            font-size: 0.75rem;
+            color: #bbb;
+            background: rgba(0, 0, 0, 0.75);
+            padding: 0.4rem 0.6rem;
+            border-radius: 6px 6px 0 0;
+            pointer-events: none;
+            z-index: 7;
+            white-space: nowrap;
+        }
+    }
+
+    .article-content,
+    aside {
+        position: relative;
+        z-index: 2;
+        max-width: 80ch;
+        margin: 2rem auto;
+        padding: 2rem;
+        background: rgba(30, 30, 30, 1);
+        border-radius: 12px;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
+            inset 0 1px 2px rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.05);
+    }
+
+}
+
+#article-backdrop {
+    position: absolute;
+    top: 0;
+    overflow: hidden;
+    left: 0;
+    width: 100vw;
+    height: auto;
+    bottom: 0;
+    /* suffisamment grand pour dépasser l’article */
+    pointer-events: none;
+    z-index: 1;
+
+    background: linear-gradient(to bottom,
+            rgba(0, 0, 0, 0) 0%,
+            rgba(0, 0, 0, 0) 100vh,
+            rgba(0, 0, 0, 0.4) 113vh,
+            rgba(0, 0, 0, 0.8) 125vh);
+}
+
+@media (max-width: 768px) {
+    article .article-content {
+        padding: 2rem 0;
+    }
+}