Skip to content

Commit

Permalink
replaced old styles with bibliotron styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@nedredmond
nedredmond committed Jul 25, 2023
1 parent 0545be5 commit fbcc998
Showing 1 changed file with 218 additions and 13 deletions.
231 changes: 218 additions & 13 deletions packages/perseus/src/styles/articles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit fbcc998

Please sign in to comment.