div {
}
}
}
+
+.sp-layout {
+ min-height: 216px;
+}
+.sp-layout > .sp-stack:nth-child(1) {
+ /* Force vertical if there isn't enough space. */
+ min-width: 431px;
+ /* No min height on mobile because we know code in advance. */
+ /* Max height is needed to avoid too long files. */
+ max-height: 40vh;
+}
+.sp-layout > .sp-stack:nth-child(2) {
+ /* Force vertical if there isn't enough space. */
+ min-width: 431px;
+ /* Keep preview a fixed size on mobile to avoid jumps. */
+ /* This is because we don't know its content in advance. */
+ min-height: 40vh;
+ max-height: 40vh;
+}
+.sp-layout.sp-layout-expanded > .sp-stack:nth-child(1) {
+ /* Clicking "show more" lets mobile editor go full height. */
+ max-height: unset;
+ height: auto;
+}
+.sp-layout.sp-layout-expanded > .sp-stack:nth-child(2) {
+ /* Clicking "show more" lets mobile preview go full height. */
+ max-height: unset;
+ height: auto;
+}
+@media (min-width: 1280px) {
+ .sp-layout > .sp-stack:nth-child(1) {
+ /* On desktop, clamp height by pixels instead. */
+ height: auto;
+ min-height: unset;
+ max-height: 406px;
+ }
+ .sp-layout > .sp-stack:nth-child(2) {
+ /* On desktop, clamp height by pixels instead. */
+ height: auto;
+ min-height: unset;
+ max-height: 406px;
+ }
+ .sp-layout.sp-layout-expanded > .sp-stack:nth-child(1) {
+ max-height: unset;
+ }
+ .sp-layout.sp-layout-expanded > .sp-stack:nth-child(2) {
+ max-height: unset;
+ }
+}
diff --git a/beta/tailwind.config.js b/beta/tailwind.config.js
index aebf5b4b..011fbb8a 100644
--- a/beta/tailwind.config.js
+++ b/beta/tailwind.config.js
@@ -21,10 +21,12 @@ module.exports = {
},
boxShadow: {
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
- DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+ DEFAULT:
+ '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
lg: '0px 0.8px 2px rgba(0, 0, 0, 0.032), 0px 2.7px 6.7px rgba(0, 0, 0, 0.048), 0px 12px 30px rgba(0, 0, 0, 0.08)',
- 'lg-dark': '0 0 0 1px rgba(255,255,255,.15), 0px 0.8px 2px rgba(0, 0, 0, 0.032), 0px 2.7px 6.7px rgba(0, 0, 0, 0.048), 0px 12px 30px rgba(0, 0, 0, 0.08)',
+ 'lg-dark':
+ '0 0 0 1px rgba(255,255,255,.15), 0px 0.8px 2px rgba(0, 0, 0, 0.032), 0px 2.7px 6.7px rgba(0, 0, 0, 0.048), 0px 12px 30px rgba(0, 0, 0, 0.08)',
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
'3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
@@ -33,7 +35,7 @@ module.exports = {
},
extend: {
maxWidth: {
- xs: '21rem'
+ xs: '21rem',
},
outline: {
blue: ['1px auto ' + colors.link, '3px'],