feat(Stencila Theme): Refactor styles to be mobile first
@@ -141,7 +141,6 @@ figure {
background-color: #fff;
width: auto;
max-width: 100%;
- min-width: var(--max-width);
margin: 1.25rem auto;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.16);
border: 1px solid #dbdbdb;
@@ -177,13 +176,11 @@ figcaption *:first-child {
}
article > pre {
- /* max-width: calc(100vw - var(--max-width)); */
- /* margin-left: calc((var(--max-width) - 100vw) 4 / 2 - 1rem) !important; */
- background-color: #fff !important;
+ background-color: #fff;
}
pre {
- font-size: 80% !important;
+ font-size: 80%;
}
p {
@@ -301,6 +298,7 @@ h6 {
ul,
ol {
padding: 0;
+ list-style-position: inside;
& ul,
& ol {
@@ -378,18 +376,15 @@ blockquote {
}
}
-@media screen and (max-width: 380px) {
+@media screen and (min-width: 720px) {
+ article > pre,
+ article > pre[class*='language-'],
+ figure {
+ min-width: var(--max-width);
+ }
+
ul,
ol {
- padding-left: 1.25rem;
+ list-style-position: outside;
}
-
- /* Allow huge figures (e.g. tables) to be scrollable
- on mobile in a smaller area (vs. displayed in full
- width and height). */
- /* figure,
- pre[class*='language-'] {
- max-width: 100%;
- overflow-y: auto;
- } */
}
