From edf4a419ea1b6e705398c51fbcc0396fb3ffe6b9 Mon Sep 17 00:00:00 2001
From: Philippa Markovics <philippa@markovics.com>
Date: Tue, 10 Oct 2023 12:14:31 +0200
Subject: [PATCH] Use container queries to size content
---
resources/stylesheets/viewer.css | 10 +++++++---
1 file changed, 7 insertions(+), 3 deletions(-)
diff --git a/resources/stylesheets/viewer.css b/resources/stylesheets/viewer.css
index 8c8046f27..602fa846b 100644
--- a/resources/stylesheets/viewer.css
+++ b/resources/stylesheets/viewer.css
@@ -109,6 +109,10 @@
.max-w-prose { @apply max-w-[46rem] !important; }
.max-w-wide { @apply max-w-3xl !important; }
+.notebook-viewer {
+ container-type: inline-size;
+}
+
/* List Styles */
/* --------------------------------------------------------------- */
@@ -135,7 +139,7 @@
.code-viewer .cm-content {
@apply py-4 px-8;
}
-@media (min-width: 960px){
+@container (width > 959px) {
.notebook-viewer .code-viewer .cm-content {
@apply pl-12;
}
@@ -320,7 +324,7 @@
.sidenote-container {
@apply mb-4;
}
-@media (min-width: 860px) {
+@container (width > 859px) {
.sidenote sup { @apply inline; }
.sidenote-column {
@apply w-[165px] absolute right-0 top-0 -mr-[205px];
@@ -358,7 +362,7 @@
.result-viewer figure {
@apply mt-0 !important;
}
-@media (min-width: 768px) {
+@container (width > 767px) {
.devcard-desc > div {
@apply max-w-full m-0;
}