From 4338235b8fa73b578f5dfe8d070a896b0e0b8560 Mon Sep 17 00:00:00 2001
From: Kevin Lin <kevinl@cs.uw.edu>
Date: Mon, 13 Apr 2020 09:43:50 -0700
Subject: [PATCH] _sass: Add --aspect-ratio and --add-height custom properties
---
_sass/overrides.scss | 31 +++++++++++++++++++++++++++++++
1 file changed, 31 insertions(+)
diff --git a/_sass/overrides.scss b/_sass/overrides.scss
index 2263f4b..988d7f4 100644
--- a/_sass/overrides.scss
+++ b/_sass/overrides.scss
@@ -55,3 +55,34 @@ summary {
font-size: 1.1em;
}
}
+
+[style*="--aspect-ratio"] > :first-child {
+ width: 100%;
+}
+
+[style*="--aspect-ratio"] > img {
+ height: auto;
+}
+
+@supports (--custom:property) {
+ [style*="--aspect-ratio"] {
+ position: relative;
+ }
+
+ [style*="--aspect-ratio"]::before {
+ content: "";
+ display: block;
+ padding-bottom: calc(100% / (var(--aspect-ratio)));
+ }
+
+ [style*="--add-height"]::before {
+ padding-bottom: calc(100% / (var(--aspect-ratio)) + (var(--add-height)));
+ }
+
+ [style*="--aspect-ratio"] > :first-child {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ }
+}
--
GitLab