From fbcc998ae6b3a386d7027862af222454c9b47c71 Mon Sep 17 00:00:00 2001 From: Ned Redmond Date: Tue, 25 Jul 2023 15:59:36 -0400 Subject: [PATCH] replaced old styles with bibliotron styles --- packages/perseus/src/styles/articles.less | 231 ++++++++++++++++++++-- 1 file changed, 218 insertions(+), 13 deletions(-) diff --git a/packages/perseus/src/styles/articles.less b/packages/perseus/src/styles/articles.less index b34a7976a2..3a7f900d10 100644 --- a/packages/perseus/src/styles/articles.less +++ b/packages/perseus/src/styles/articles.less @@ -3,32 +3,129 @@ @import "./util.less"; // Article Renderer -// TODO(oliver): These are the old article styles. When we transition over -// to the new styles we should remove these! -.framework-perseus.perseus-article { +.framework-perseus.perseus-article:not(.perseus-mobile) { + @textColor: #21242c; + .body-text() { + color: @textColor; + font-size: 20px; + line-height: 30px; + } + + @paragraphSpacing: 32px; .perseus-widget-container { - &.widget-float-left { - float: left; - padding-right: 1em; + // HACK(matthewc): to get around this fixed font-size + // since we want the definition widget to match + // surrounding text + &:not(.perseus-widget__definition) { + .legacy-typography; + } + + &.widget-float-left, + &.widget-float-right { max-width: 50%; + padding-top: @paragraphSpacing; width: 100%; + .perseus-image-caption .paragraph .paragraph { + margin-bottom: 0; + } + } + + &.widget-float-left { + float: left; + padding-right: @paragraphSpacing; } &.widget-float-right { float: right; - padding-left: 1em; - max-width: 50%; - width: 100%; + padding-left: @paragraphSpacing; } } .perseus-renderer > .paragraph { - margin-left: auto; - margin-right: auto; - max-width: 700px; + .body-text; + margin: 0 auto; + max-width: @articleMaxWidth; + } + .perseus-renderer + > .paragraph + .paragraph + > div:not(.perseus-widget-passage-container) { + // These are actual paragraphs + .body-text; + margin-bottom: @paragraphSpacing; + margin-top: 0; + + // Inline math should have the same font-size as the surrounding text. + // There is no wrapping element around .katex to indicate that it is + // inline, so we rely on the "actual paragraph" check above + // (a .paragraph that contains another .paragraph instead of a + // .perseus-block-math). + .katex { + font-size: 100%; + } + } + .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) { + .body-text; + } + table { + .body-text; + margin-bottom: @paragraphSpacing; + } + + h2 { + font-family: inherit; + font-size: 30px; + font-weight: 700; + line-height: 1.1; + margin-bottom: 16px; + margin-top: 48px; + } + + h3 { + font-family: inherit; + font-size: 26px; + font-weight: 700; + line-height: 1.1; + margin-bottom: 16px; + margin-top: 32px; + } + + h4, + h5, + h6 { + font-family: inherit; + font-size: 22px; + font-weight: 700; + line-height: 25px; + margin-bottom: 16px; + margin-top: 32px; + } + + blockquote { + padding: 0 32px; + } + + .MathJax .math { + color: inherit; + } + + .perseus-image-widget { + text-align: center; + } + + .perseus-image-caption .perseus-renderer .paragraph .paragraph, + .perseus-image-caption .perseus-renderer .paragraph ol, + .perseus-image-caption .perseus-renderer .paragraph ul { + color: @offBlack64; + font-size: 14px; + line-height: 19px; + margin: 16px auto 42px; + max-width: 455px; + text-align: left; } .paragraph.perseus-paragraph-full-width { + margin-bottom: @paragraphSpacing; margin-left: 0; margin-right: 0; max-width: none; @@ -38,6 +135,79 @@ max-width: none; } } + + // Some images use an image widget, but some are just inlined in the + // paragraph. Inlined images need legacy typography, too. + .unresponsive-svg-image, + .svg-image { + .legacy-typography; + } + .perseus-block-math { + margin-bottom: @paragraphSpacing; + position: relative; + + &:before { + bottom: 0; + content: ""; + position: absolute; + right: 0; + top: 0; + width: 30px; + } + } + .perseus-block-math-inner { + overflow-x: auto; + padding-bottom: 8px; + padding-right: 20px; + padding-top: 8px; + } + + // If the article starts with a heading, remove its unnecessary top margin. + > .clearfix:first-child { + > .perseus-renderer:first-child > .paragraph:first-child { + h1, + h2, + h3, + h4, + h5, + h6 { + &:first-child { + margin-top: 0; + } + } + } + } + + .perseus-renderer > .paragraph .perseus-formats-tooltip { + padding: 8px 12px; + + .paragraph { + margin-bottom: 0; + + // We don't _expect_ a radio in a tooltip. + // We just need the specificity in order to override body text. + ul:not(.perseus-widget-radio) { + font-size: 15px; + line-height: 1.5; + margin: 0; + } + } + } + + code { + font-family: Courier, monospace; + } + + pre { + background-color: @gray95; + border-radius: 4px; + color: @gray17; + font-size: 18px; + padding: 16px; + white-space: pre; + overflow: auto; + margin: 0 -16px 32px -16px; + } } // HACK(emily): This is a copy of a bunch of the mixins from the block of @@ -84,7 +254,42 @@ .choice-text(14px, 1.25); } -.framework-perseus:not(.perseus-article).perseus-mobile { +.framework-perseus.perseus-mobile { + .perseus-article { + .perseus-widget-container { + &.widget-float-left { + float: left; + padding-right: 1em; + max-width: 50%; + width: 100%; + } + + &.widget-float-right { + float: right; + padding-left: 1em; + max-width: 50%; + width: 100%; + } + } + + .perseus-renderer > .paragraph { + margin-left: auto; + margin-right: auto; + max-width: 700px; + } + + .paragraph.perseus-paragraph-full-width { + margin-left: 0; + margin-right: 0; + max-width: none; + + > .paragraph { + margin: 0; + max-width: none; + } + } + } + @baseUnit: 16px; // TODO(charlie): Pure defines XL as 1280px. However, Bibliotron and our new