diff --git a/package.json b/package.json index e50cd785..f9503aae 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "aws-sdk": "^2.295.0", "express": "^4.16.3", "fs-extra": "^7.0.0", + "include-media": "^1.4.9", "linkify-urls": "^2.0.0", "mathjax-node-page": "^2.0.0", "s3-recursive-uploader": "^0.3.0", diff --git a/src/assets/css/_colors.scss b/src/assets/css/_colors.scss new file mode 100644 index 00000000..7fe7fba9 --- /dev/null +++ b/src/assets/css/_colors.scss @@ -0,0 +1,5 @@ +// Don't use alpha, because borders mix together +$borderColor: black; +$lightBorderColor: lighten(black, 50%); + +$secondaryBackground: darken(white, 5%); diff --git a/src/assets/css/_figures.scss b/src/assets/css/_figures.scss deleted file mode 100644 index 6c6ad552..00000000 --- a/src/assets/css/_figures.scss +++ /dev/null @@ -1,23 +0,0 @@ -@import "./fonts"; - -.ltx_figure, -.ltx_table { - margin: 1rem 0; - - max-width: 100%; - overflow-x: auto; - - @media (min-width: 1024px) { - margin: 2rem 0; - } -} - -.ltx_caption { - @extend %system-font-small; - - color: rgba(0, 0, 0, 0.6); - - a { - color: rgba(0, 0, 0, 0.6); - } -} diff --git a/src/assets/css/_fonts.scss b/src/assets/css/_fonts.scss index 4bb79bff..86a59d3d 100644 --- a/src/assets/css/_fonts.scss +++ b/src/assets/css/_fonts.scss @@ -1,29 +1,81 @@ -%body-font { - font-family: $bodyFontFamily; - font-size: 17px; - line-height: 1.55em; +@import "./media"; - @media (min-width: 768px) { - font-size: 20px; +$fontFamilyComputerModern: "CMUSerif-Roman", serif; +$fontFamilyHelvetica: "Helvetica Neue", Helvetica, sans-serif; +$fontFamilyMonospace: "CMUTypewriter-Light", monospace; + +%font-medium { + font-family: $fontFamilyComputerModern; + font-size: 16px; + line-height: 1.5; + + @include media(">=tablet", "=desktop") { + font-size: 24px; } } -%system-font { - font-family: $systemFontFamily; +%font-monospace { + font-family: $fontFamilyMonospace; + font-size: 14px; - line-height: 1.55em; + line-height: 1.5; + + @include media(">=tablet", "=desktop") { + font-size: 22px; } } -%system-font-small { - font-family: $systemFontFamily; +%font-sans-serif-heading { + font-family: $fontFamilyHelvetica; + + font-size: 14px; + line-height: 1.5; + letter-spacing: 0.03em; + -webkit-font-smoothing: antialiased; + font-style: normal; + font-weight: 400; + text-transform: uppercase; + + @include media(">=tablet", "=desktop") { + font-size: 20px; + } +} + +%font-sans-serif-heading-small { + @extend %font-sans-serif-heading; + font-size: 12px; - line-height: 1.55em; - @media (min-width: 768px) { - font-size: 13px; + @include media(">=tablet", "=desktop") { + font-size: 16px; + } +} + +%font-sans-serif-small { + font-family: $fontFamilyHelvetica; + font-size: 12px; + + @include media(">=tablet", "=desktop") { + font-size: 16px; } } diff --git a/src/assets/css/_headings.scss b/src/assets/css/_headings.scss deleted file mode 100644 index fc65ac9f..00000000 --- a/src/assets/css/_headings.scss +++ /dev/null @@ -1,135 +0,0 @@ -//

-.ltx_title_document { - margin-top: 2rem; - margin-bottom: 1rem; - font-weight: 400; - font-size: 32px; - line-height: 1em; - font-family: $headingFontFamily; - - @media (min-width: 768px) { - font-size: 46px; - margin-top: 48px; - } - - @media (min-width: 1080px) { - font-size: 50px; - letter-spacing: -0.02em; - } -} - -// Various things in header -.ltx_subtitle { - font-family: $headingFontFamily; - font-size: 20px; - margin-bottom: 2rem; - - @media (min-width: 1080px) { - font-size: 24px; - } -} - -//

-.ltx_title_section, -.ltx_title_abstract, -.ltx_title_appendix, -.ltx_title_bibliography { - font-family: $headingFontFamily; - font-weight: 400; - font-size: 28px; - line-height: 1.25em; - margin-top: 36px; - margin-bottom: 24px; - - @media (min-width: 768px) { - margin-top: 48px; - font-size: 32px; - } -} - -//

-.ltx_title_subsection { - font-family: $headingFontFamily; - font-weight: 400; - font-size: 22px; - line-height: 1.4em; - margin-top: 36px; - margin-bottom: 18px; - font-style: italic; - - @media (min-width: 768px) { - font-size: 28px; - } -} - -//

-// Bold, same size as body text, but on its own line. -.ltx_title_subsubsection { - font-weight: bold; - font-family: inherit; - font-size: inherit; - - // No section numbers - .ltx_tag { - display: none; - } -} - -//

/
-// Bold, same size as body text, but in-line with the text. Like: -// *Some heading.* A paragraph following it. -.ltx_title_paragraph, -.ltx_title_subparagraph { - font-weight: bold; - font-family: inherit; - font-size: inherit; - margin: 0; - // 0.75em is around the size of two spaces. - margin-right: 0.75em; - float: left; -} - -// Section numbers -.ltx_title_section, -.ltx_title_abstract, -.ltx_title_appendix, -.ltx_title_bibliography, -.ltx_title_subsection { - position: relative; - /* Space for section number */ - padding-right: 40px; - - @media (min-width: 768px) { - padding-right: 0; - } -} - -.ltx_tag_section, -.ltx_tag_subsection { - font-family: $headingFontFamily; - font-style: normal; - color: rgba(0, 0, 0, 0.3); - position: absolute; - width: 150px; - right: 0; - text-align: right; - font-size: 0.9em; - - @media (min-width: 768px) { - right: unset; - left: -170px; - } - @media (min-width: 1080px) { - right: unset; - left: -180px; - } - - a, - a:active { - border-bottom: none; - } - - a:hover { - border-bottom: 1px solid rgba(0, 0, 0, 0.3); - } -} diff --git a/src/assets/css/_layout.scss b/src/assets/css/_layout.scss deleted file mode 100644 index 8c1b6796..00000000 --- a/src/assets/css/_layout.scss +++ /dev/null @@ -1,41 +0,0 @@ -// .ltx_document is root element. sections and appendix are children, -// which then have a sub-grid inside. -.ltx_document, -.ltx_section, -.ltx_subsection, -.ltx_subsubsection, -.ltx_appendix, -.ltx_page_footer { - display: grid; - grid-template-columns: [screen-start] 8px [page-start text-start] 1fr [page-end text-end] 8px [screen-end]; - grid-column-gap: 8px; - - @media (min-width: 768px) { - grid-template-columns: [screen-start] 1fr [page-start text-start] 650px [page-end text-end] 1fr [screen-end]; - grid-column-gap: 16px; - } - - @media (min-width: 1080px) { - grid-template-columns: [screen-start] 1fr [page-start text-start] 650px [text-end gutter-start] 330px [page-end gutter-end] 1fr [screen-end]; - grid-column-gap: 16px; - } - - // By default, everything is the text column - & > * { - grid-column: text; - } - - & > .ltx_title, - & > .ltx_figure { - grid-column: page; - } -} - -// Reset sections and appendix back to screen so sub-grid inside is same size as -// parent. -.ltx_section, -.ltx_subsection, -.ltx_subsubsection, -.ltx_appendix { - grid-column: screen; -} diff --git a/src/assets/css/_media.scss b/src/assets/css/_media.scss new file mode 100644 index 00000000..a3f06c00 --- /dev/null +++ b/src/assets/css/_media.scss @@ -0,0 +1,7 @@ +@import "../../../node_modules/include-media/dist/include-media"; + +$breakpoints: ( + phone: 320px, + tablet: 768px, + desktop: 1024px +); diff --git a/src/assets/css/_tables.scss b/src/assets/css/_tables.scss deleted file mode 100644 index 95d22a4d..00000000 --- a/src/assets/css/_tables.scss +++ /dev/null @@ -1,105 +0,0 @@ -@import "./fonts"; - -.ltx_tabular { - @extend %system-font; - - border-collapse: collapse; - - margin: 2em 0; -} - -.ltx_tabular .ltx_td, -.ltx_tabular .ltx_th { - padding: 0.3em 0.8em; - - @media (min-width: 768px) { - padding: 0.5em 0.8em; - } - - // Don't let anything justify a table cell because it looks like ass - &.ltx_align_justify { - text-align: left; - } -} - -// Normal borders -.ltx_border_t { - border-top: 1px solid $borderColor; -} -.ltx_border_r { - border-right: 1px solid $borderColor; -} -.ltx_border_b { - border-bottom: 1px solid $borderColor; -} -.ltx_border_l { - border-left: 1px solid $borderColor; -} - -// Double borders -// For now, make these just the same as normal borders. -.ltx_border_tt { - border-top: 1px solid $borderColor; -} -.ltx_border_rr { - border-right: 1px solid $borderColor; -} -.ltx_border_bb { - border-bottom: 1px solid $borderColor; -} -.ltx_border_ll { - border-left: 1px solid $borderColor; -} - -// Light borders -.ltx_border_T { - border-top: 1px solid $lightBorderColor; -} -.ltx_border_R { - border-right: 1px solid $lightBorderColor; -} -.ltx_border_B { - border-bottom: 1px solid $lightBorderColor; -} -.ltx_border_L { - border-left: 1px solid $lightBorderColor; -} - -// Framing -// TODO: test this -.ltx_framed { - border: 1px solid $borderColor; -} -.ltx_framed_rectangle { - border-style: solid; - border-width: 1px; -} -.ltx_framed_top { - border-top-style: solid; - border-top-width: 1px; -} -.ltx_framed_left { - border-left-style: solid; - border-left-width: 1px; -} -.ltx_framed_right { - border-right-style: solid; - border-right-width: 1px; -} -.ltx_framed_bottom, -.ltx_framed_underline { - border-bottom-style: solid; - border-bottom-width: 1px; -} -.ltx_framed_topbottom { - border-top-style: solid; - border-top-width: 1px; - border-bottom-style: solid; - border-bottom-width: 1px; -} -.ltx_framed_leftright { - border-left-style: solid; - border-left-width: 1px; - border-right-style: solid; - border-right-width: 1px; -} diff --git a/src/assets/css/_variables.scss b/src/assets/css/_variables.scss deleted file mode 100644 index 18043634..00000000 --- a/src/assets/css/_variables.scss +++ /dev/null @@ -1,13 +0,0 @@ -$headingFontFamily: Baskerville, Georgia, serif; -$bodyFontFamily: Georgia, serif; -$systemFontFamily: -apple-system, BlinkMacSystemFont, "Roboto", sans-serif; - -$primaryTextColor: rgba(0, 0, 0, 0.8); -$secondaryTextColor: rgba(0, 0, 0, 0.5); -$linkColor: hsla(206, 90%, 20%, 0.7); - -// Don't use alpha, because borders mix together -$borderColor: lighten(black, 90%); -$lightBorderColor: lighten(black, 95%); - -$secondaryBackground: darken(white, 5%); diff --git a/src/assets/css/components/_errors.scss b/src/assets/css/components/_errors.scss new file mode 100644 index 00000000..1bd15d49 --- /dev/null +++ b/src/assets/css/components/_errors.scss @@ -0,0 +1,8 @@ +.ltx_ERROR, +.ltx_missing, +.ltx_nounicode { + color: red; +} +.ltx_rdf { + display: none; +} diff --git a/src/assets/css/components/_link.scss b/src/assets/css/components/_link.scss new file mode 100644 index 00000000..5381ed30 --- /dev/null +++ b/src/assets/css/components/_link.scss @@ -0,0 +1,13 @@ +a { + color: #7c7ec1; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + + // monospace URLs look stupid + &.ltx_font_typewriter { + font-family: inherit; + } +} diff --git a/src/assets/css/components/_ltx_abstract.scss b/src/assets/css/components/_ltx_abstract.scss new file mode 100644 index 00000000..78684b3a --- /dev/null +++ b/src/assets/css/components/_ltx_abstract.scss @@ -0,0 +1,13 @@ +@import "../fonts"; + +.ltx_abstract { + border: 1px solid #666; + padding: 1.5em; + margin-bottom: 2em; + + .ltx_title_abstract { + @extend %font-sans-serif-heading; + + margin: 0 0 1em 0; + } +} diff --git a/src/assets/css/components/_ltx_align.scss b/src/assets/css/components/_ltx_align.scss new file mode 100644 index 00000000..14d7ba78 --- /dev/null +++ b/src/assets/css/components/_ltx_align.scss @@ -0,0 +1,24 @@ +.ltx_align_left { + text-align: left; +} +.ltx_align_right { + text-align: right; +} +.ltx_align_center { + text-align: center; +} +.ltx_align_justify { + text-align: justify; +} +.ltx_align_top { + vertical-align: top; +} +.ltx_align_bottom { + vertical-align: bottom; +} +.ltx_align_middle { + vertical-align: middle; +} +.ltx_align_baseline { + vertical-align: baseline; +} diff --git a/src/assets/css/components/_ltx_authors.scss b/src/assets/css/components/_ltx_authors.scss new file mode 100644 index 00000000..dba2ed97 --- /dev/null +++ b/src/assets/css/components/_ltx_authors.scss @@ -0,0 +1,22 @@ +@import "../fonts"; + +.ltx_authors { + @extend %font-medium; + + margin-bottom: 1em; + + .ltx_personname { + font-weight: bold; + } + + // No spaces between authors + .ltx_author_before { + display: none; + } + + .ltx_creator, + .ltx_author_after, + .ltx_author_notes .ltx_contact { + display: block; + } +} diff --git a/src/assets/css/components/_ltx_bibliography.scss b/src/assets/css/components/_ltx_bibliography.scss new file mode 100644 index 00000000..3b0774a1 --- /dev/null +++ b/src/assets/css/components/_ltx_bibliography.scss @@ -0,0 +1,34 @@ +@import "../fonts"; +@import "../media"; + +.ltx_bibliography { + margin: 4em 0; + grid-column: page; + + .ltx_title_bibliography { + @extend %font-sans-serif-heading; + + margin: 0 0 2em 0; + } + + .ltx_biblist { + list-style: none; + margin: 0; + padding: 0; + + @include media(">=desktop") { + column-count: 2; + } + } + + .ltx_bibitem { + @extend %font-medium; + + padding: 0 2em; + margin: 0 0 2em 0; + + .ltx_tag_bibitem + .ltx_bibblock { + font-style: italic; + } + } +} diff --git a/src/assets/css/components/_ltx_caption.scss b/src/assets/css/components/_ltx_caption.scss new file mode 100644 index 00000000..3cc0b1f0 --- /dev/null +++ b/src/assets/css/components/_ltx_caption.scss @@ -0,0 +1,6 @@ +@import "../fonts"; + +.ltx_caption { + @extend %font-medium; + font-style: italic; +} diff --git a/src/assets/css/_citations.scss b/src/assets/css/components/_ltx_cite.scss similarity index 82% rename from src/assets/css/_citations.scss rename to src/assets/css/components/_ltx_cite.scss index fd3d752b..900c8ac8 100644 --- a/src/assets/css/_citations.scss +++ b/src/assets/css/components/_ltx_cite.scss @@ -1,12 +1,16 @@ +@import "../colors"; +@import "../fonts"; + +// TODO: finish .ltx_cite { - @extend %system-font; + @extend %font-sans-serif-small; font-style: normal; text-align: center; position: relative; top: -2px; margin: 0 2px; - color: $linkColor; + // color: $linkColor; a.ltx_ref, a.ltx_ref:hover { @@ -14,8 +18,9 @@ } } +// TODO: This doesn't work .tippy-tooltip.engrafo-theme { - @extend %system-font; + @extend %font-sans-serif-small; background-color: $secondaryBackground; border: 1px solid $borderColor; diff --git a/src/assets/css/components/_ltx_date.scss b/src/assets/css/components/_ltx_date.scss new file mode 100644 index 00000000..654c645d --- /dev/null +++ b/src/assets/css/components/_ltx_date.scss @@ -0,0 +1,8 @@ +@import "../fonts"; + +.ltx_date { + @extend %font-medium; + + font-style: italic; + margin-bottom: 1em; +} diff --git a/src/assets/css/components/_ltx_document.scss b/src/assets/css/components/_ltx_document.scss new file mode 100644 index 00000000..c1fb6e08 --- /dev/null +++ b/src/assets/css/components/_ltx_document.scss @@ -0,0 +1,48 @@ +@import "../media"; + +.ltx_document { + background: white; + margin-bottom: 4em; + + // Grid + // .ltx_document is root element. sections and appendix are children, + // which then have a sub-grid inside. + &, + .ltx_section, + .ltx_subsection, + .ltx_subsubsection, + .ltx_appendix { + display: grid; + grid-template-columns: [screen-start] 8px [page-start text-start] 1fr [page-end text-end] 8px [screen-end]; + grid-column-gap: 8px; + + @include media(">=tablet", "=desktop") { + grid-template-columns: [screen-start] 1fr [page-start text-start] 700px [text-end gutter-start] 200px [page-end gutter-end] 1fr [screen-end]; + grid-column-gap: 16px; + } + + // By default, everything is the text column + & > * { + grid-column: text; + } + + & > .ltx_title, + & > .ltx_figure { + grid-column: page; + } + } + + // Reset sections and appendix back to screen so sub-grid inside is same size as + // parent. + .ltx_section, + .ltx_subsection, + .ltx_subsubsection, + .ltx_appendix { + grid-column: screen; + } +} diff --git a/src/assets/css/components/_ltx_enumerate.scss b/src/assets/css/components/_ltx_enumerate.scss new file mode 100644 index 00000000..d4d32032 --- /dev/null +++ b/src/assets/css/components/_ltx_enumerate.scss @@ -0,0 +1,8 @@ +.ltx_enumerate { + margin: 2em 0; + padding-left: 2.5em; + + & > .ltx_item { + padding-left: 0.5em; + } +} diff --git a/src/assets/css/components/_ltx_equation.scss b/src/assets/css/components/_ltx_equation.scss new file mode 100644 index 00000000..d185d91f --- /dev/null +++ b/src/assets/css/components/_ltx_equation.scss @@ -0,0 +1,3 @@ +.ltx_equation { + margin: 2em 0; +} diff --git a/src/assets/css/components/_ltx_figure.scss b/src/assets/css/components/_ltx_figure.scss new file mode 100644 index 00000000..e1007b64 --- /dev/null +++ b/src/assets/css/components/_ltx_figure.scss @@ -0,0 +1,10 @@ +.ltx_figure { + margin: 4rem 0; + + max-width: 100%; + overflow-x: auto; + + .ltx_caption { + margin-top: 1em; + } +} diff --git a/src/assets/css/_text.scss b/src/assets/css/components/_ltx_font.scss similarity index 80% rename from src/assets/css/_text.scss rename to src/assets/css/components/_ltx_font.scss index c3318693..6701a14d 100644 --- a/src/assets/css/_text.scss +++ b/src/assets/css/components/_ltx_font.scss @@ -1,3 +1,5 @@ +@import "../fonts"; + // TODO: should we allow this? .ltx_font_serif { } @@ -5,11 +7,7 @@ } .ltx_font_typewriter { - font-family: monospace; -} -// monospace URLs look stupid -.ltx_url.ltx_font_typewriter { - font-family: inherit; + font-family: $fontFamilyMonospace; } .ltx_font_bold { @@ -45,12 +43,3 @@ .ltx_font_mathcaligraphic { font-family: "Lucida Calligraphy", "Zapf Chancery", "URW Chancery L"; } - -.ltx_red { - color: red; -} - -.ltx_verbatim { - font-size: 0.8; - color: rgba(0, 0, 0, 0.6); -} diff --git a/src/assets/css/components/_ltx_indent.scss b/src/assets/css/components/_ltx_indent.scss new file mode 100644 index 00000000..4ae0101f --- /dev/null +++ b/src/assets/css/components/_ltx_indent.scss @@ -0,0 +1,3 @@ +.ltx_indent { + margin-left: 3em; +} diff --git a/src/assets/css/components/_ltx_itemize.scss b/src/assets/css/components/_ltx_itemize.scss new file mode 100644 index 00000000..0e483625 --- /dev/null +++ b/src/assets/css/components/_ltx_itemize.scss @@ -0,0 +1,8 @@ +.ltx_itemize { + margin: 2em 0; + padding-left: 2.5em; + + & > .ltx_item { + padding-left: 0.5em; + } +} diff --git a/src/assets/css/components/_ltx_keywords.scss b/src/assets/css/components/_ltx_keywords.scss new file mode 100644 index 00000000..a4d4db10 --- /dev/null +++ b/src/assets/css/components/_ltx_keywords.scss @@ -0,0 +1,12 @@ +@import "../fonts"; + +.ltx_keywords { + .ltx_title_keywords { + @extend %font-medium; + + font-weight: bold; + margin: 0; + } + + @extend %font-medium; +} diff --git a/src/assets/css/_listings.scss b/src/assets/css/components/_ltx_listing.scss similarity index 77% rename from src/assets/css/_listings.scss rename to src/assets/css/components/_ltx_listing.scss index 535a2834..7aa77edf 100644 --- a/src/assets/css/_listings.scss +++ b/src/assets/css/components/_ltx_listing.scss @@ -1,10 +1,9 @@ +@import "../fonts"; + .ltx_listing { - font-size: 0.8em; - border-left: 3px solid rgba(0, 0, 0, 0.05); - padding: 0 0 0 24px; - color: rgba(0, 0, 0, 0.6); - font-family: monospace; - margin: 2rem 0; + @extend %font-monospace; + padding: 0 0 0 3em; + margin: 4rem 0; // Remove download button. It's much easier to copy and paste .ltx_listing_data { diff --git a/src/assets/css/components/_ltx_page_footer.scss b/src/assets/css/components/_ltx_page_footer.scss new file mode 100644 index 00000000..1f46d1a0 --- /dev/null +++ b/src/assets/css/components/_ltx_page_footer.scss @@ -0,0 +1,3 @@ +.ltx_page_footer { + display: none; +} diff --git a/src/assets/css/components/_ltx_para.scss b/src/assets/css/components/_ltx_para.scss new file mode 100644 index 00000000..e2de6d4b --- /dev/null +++ b/src/assets/css/components/_ltx_para.scss @@ -0,0 +1,17 @@ +.ltx_para { + @extend %font-medium; + + .ltx_p { + margin: 0; + } + + // * { + // text-indent: 0; + // } +} + +// This doesn't quite work right - sometimes things in previous .ltx_para +// are not text, but a quote or equation or figure or something like that. +.ltx_para + .ltx_para > .ltx_p { + text-indent: 2em; +} diff --git a/src/assets/css/components/_ltx_quote.scss b/src/assets/css/components/_ltx_quote.scss new file mode 100644 index 00000000..1dc22fc8 --- /dev/null +++ b/src/assets/css/components/_ltx_quote.scss @@ -0,0 +1,3 @@ +.ltx_quote { + margin: 2em 0em 2em 3em; +} diff --git a/src/assets/css/components/_ltx_red.scss b/src/assets/css/components/_ltx_red.scss new file mode 100644 index 00000000..a816cfa6 --- /dev/null +++ b/src/assets/css/components/_ltx_red.scss @@ -0,0 +1,4 @@ +// lol wut +.ltx_red { + color: red; +} diff --git a/src/assets/css/components/_ltx_section.scss b/src/assets/css/components/_ltx_section.scss new file mode 100644 index 00000000..d8a90d73 --- /dev/null +++ b/src/assets/css/components/_ltx_section.scss @@ -0,0 +1,9 @@ +@import "../media"; + +.ltx_section { + margin: 2em 0; + + @include media(">=tablet") { + margin: 4em 0; + } +} diff --git a/src/assets/css/components/_ltx_table.scss b/src/assets/css/components/_ltx_table.scss new file mode 100644 index 00000000..76da94e2 --- /dev/null +++ b/src/assets/css/components/_ltx_table.scss @@ -0,0 +1,10 @@ +.ltx_table { + margin: 4rem 0; + + max-width: 100%; + overflow-x: auto; + + .ltx_caption { + margin-top: 1em; + } +} diff --git a/src/assets/css/components/_ltx_tabular.scss b/src/assets/css/components/_ltx_tabular.scss new file mode 100644 index 00000000..cf51299f --- /dev/null +++ b/src/assets/css/components/_ltx_tabular.scss @@ -0,0 +1,106 @@ +@import "../colors"; +@import "../fonts"; + +.ltx_tabular { + @extend %font-sans-serif-small; + + border-collapse: collapse; + + margin: 2em 0; + + .ltx_td, + .ltx_th { + padding: 0.3em 0.8em; + + @media (min-width: 768px) { + padding: 0.5em 0.8em; + } + + // Don't let anything justify a table cell because it looks like ass + &.ltx_align_justify { + text-align: left; + } + } + + // Normal borders + .ltx_border_t { + border-top: 1px solid $borderColor; + } + .ltx_border_r { + border-right: 1px solid $borderColor; + } + .ltx_border_b { + border-bottom: 1px solid $borderColor; + } + .ltx_border_l { + border-left: 1px solid $borderColor; + } + + // Double borders + // For now, make these just the same as normal borders. + .ltx_border_tt { + border-top: 1px solid $borderColor; + } + .ltx_border_rr { + border-right: 1px solid $borderColor; + } + .ltx_border_bb { + border-bottom: 1px solid $borderColor; + } + .ltx_border_ll { + border-left: 1px solid $borderColor; + } + + // Light borders + .ltx_border_T { + border-top: 1px solid $lightBorderColor; + } + .ltx_border_R { + border-right: 1px solid $lightBorderColor; + } + .ltx_border_B { + border-bottom: 1px solid $lightBorderColor; + } + .ltx_border_L { + border-left: 1px solid $lightBorderColor; + } + + // Framing + // TODO: test this + .ltx_framed { + border: 1px solid $borderColor; + } + .ltx_framed_rectangle { + border-style: solid; + border-width: 1px; + } + .ltx_framed_top { + border-top-style: solid; + border-top-width: 1px; + } + .ltx_framed_left { + border-left-style: solid; + border-left-width: 1px; + } + .ltx_framed_right { + border-right-style: solid; + border-right-width: 1px; + } + .ltx_framed_bottom, + .ltx_framed_underline { + border-bottom-style: solid; + border-bottom-width: 1px; + } + .ltx_framed_topbottom { + border-top-style: solid; + border-top-width: 1px; + border-bottom-style: solid; + border-bottom-width: 1px; + } + .ltx_framed_leftright { + border-left-style: solid; + border-left-width: 1px; + border-right-style: solid; + border-right-width: 1px; + } +} diff --git a/src/assets/css/components/_ltx_title_document.scss b/src/assets/css/components/_ltx_title_document.scss new file mode 100644 index 00000000..93013aea --- /dev/null +++ b/src/assets/css/components/_ltx_title_document.scss @@ -0,0 +1,20 @@ +@import "../fonts"; +@import "../media"; + +.ltx_title_document { + font-family: $fontFamilyComputerModern; + margin: 1em 0 2em 0; + max-width: 13em; // TODO: put this in grid? + + font-size: 30px; + line-height: 1.1; + + @include media("=tablet") { + font-size: 40px; + min-height: 2em; + } + @include media(">=desktop") { + font-size: 60px; + min-height: 2em; + } +} diff --git a/src/assets/css/components/_ltx_title_paragraph.scss b/src/assets/css/components/_ltx_title_paragraph.scss new file mode 100644 index 00000000..6ac0ff00 --- /dev/null +++ b/src/assets/css/components/_ltx_title_paragraph.scss @@ -0,0 +1,12 @@ +@import "../fonts"; + +// Bold, same size as body text, but in-line with the text. Like: +// *Some heading.* A paragraph following it. +.ltx_title_paragraph { + @extend %font-medium; + font-weight: bold; + margin: 0; + // 0.75em is around the size of two spaces. + margin-right: 0.75em; + float: left; +} diff --git a/src/assets/css/components/_ltx_title_section.scss b/src/assets/css/components/_ltx_title_section.scss new file mode 100644 index 00000000..5ecd733a --- /dev/null +++ b/src/assets/css/components/_ltx_title_section.scss @@ -0,0 +1,12 @@ +@import "../fonts"; + +.ltx_title_section { + @extend %font-sans-serif-heading; + + margin-bottom: 4em; + + .ltx_tag_section { + display: inline-block; + min-width: 50px; + } +} diff --git a/src/assets/css/components/_ltx_title_subparagraph.scss b/src/assets/css/components/_ltx_title_subparagraph.scss new file mode 100644 index 00000000..a251b734 --- /dev/null +++ b/src/assets/css/components/_ltx_title_subparagraph.scss @@ -0,0 +1,12 @@ +@import "../fonts"; + +// Bold, same size as body text, but in-line with the text. Like: +// *Some heading.* A paragraph following it. +.ltx_title_subparagraph { + @extend %font-medium; + font-weight: bold; + margin: 0; + // 0.75em is around the size of two spaces. + margin-right: 0.75em; + float: left; +} diff --git a/src/assets/css/components/_ltx_title_subsection.scss b/src/assets/css/components/_ltx_title_subsection.scss new file mode 100644 index 00000000..6a7b88dc --- /dev/null +++ b/src/assets/css/components/_ltx_title_subsection.scss @@ -0,0 +1,12 @@ +@import "../fonts"; + +.ltx_title_subsection { + @extend %font-sans-serif-heading-small; + + margin-bottom: 1.5em; + + .ltx_tag_subsection { + display: inline-block; + min-width: 50px; + } +} diff --git a/src/assets/css/components/_ltx_title_subsubsection.scss b/src/assets/css/components/_ltx_title_subsubsection.scss new file mode 100644 index 00000000..d036d4f5 --- /dev/null +++ b/src/assets/css/components/_ltx_title_subsubsection.scss @@ -0,0 +1,13 @@ +@import "../fonts"; + +.ltx_title_subsubsection { + @extend %font-medium; + + font-weight: bold; + margin: 0 0 1em 0; + + // No section numbers + .ltx_tag_subsubsection { + display: none; + } +} diff --git a/src/assets/css/components/_ltx_verbatim.scss b/src/assets/css/components/_ltx_verbatim.scss new file mode 100644 index 00000000..433caaa1 --- /dev/null +++ b/src/assets/css/components/_ltx_verbatim.scss @@ -0,0 +1,5 @@ +@import "../fonts"; + +.ltx_verbatim { + @extend %font-monospace; +} diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss index 5562469f..addef093 100644 --- a/src/assets/css/index.scss +++ b/src/assets/css/index.scss @@ -1,6 +1,3 @@ -@import "./variables"; -@import "./fonts"; - // TODO: don't set any global styles body { margin: 0; @@ -8,116 +5,37 @@ body { // Contain everything inside .ltx_page_main .ltx_page_main { - @import "./citations"; - @import "./figures"; - @import "./headings"; - @import "./layout"; - @import "./listings"; - @import "./tables"; - @import "./text"; - - @extend %body-font; - color: $primaryTextColor; - padding-bottom: 72px; - background: white; - - a { - color: inherit; - border-bottom: 1px solid rgba(0, 0, 0, 0.4); - text-decoration: none; - - &:hover { - border-bottom: 1px solid $primaryTextColor; - } - } - - .ltx_page_content { - margin-bottom: 4rem; - } - - .ltx_authors, - .ltx_date, - .ltx_keywords, - .ltx_title_keywords { - @extend %system-font-small; - - font-weight: 400; - } - - .ltx_title_keywords { - margin: 0; - font-weight: bold; - } - - .ltx_authors { - margin-bottom: 1rem; - - .ltx_personname { - font-weight: bold; - } - - // No spaces between authors - .ltx_author_before { - display: none; - } - - .ltx_creator, - .ltx_author_after, - .ltx_author_notes .ltx_contact { - display: block; - } - } - - .ltx_date { - color: $secondaryTextColor; - } - - .ltx_p { - margin-bottom: 24px; - } - - .ltx_page_footer { - @extend %system-font-small; - color: $secondaryTextColor; - font-weight: 400; - } - .ltx_indent { - margin-left: 2rem; - } - - .ltx_align_left { - text-align: left; - } - .ltx_align_right { - text-align: right; - } - .ltx_align_center { - text-align: center; - } - .ltx_align_justify { - text-align: justify; - } - .ltx_align_top { - vertical-align: top; - } - .ltx_align_bottom { - vertical-align: bottom; - } - .ltx_align_middle { - vertical-align: middle; - } - .ltx_align_baseline { - vertical-align: baseline; - } - - /* LaTeXML system stuff */ - .ltx_ERROR, - .ltx_missing, - .ltx_nounicode { - @extend %system-font; - color: red; - } - .ltx_rdf { - display: none; - } + // .ltx_document is the root element for most of the document, containing the grid layout + @import "./components/ltx_document"; + + @import "./components/link"; + @import "./components/ltx_abstract"; + @import "./components/ltx_align"; + @import "./components/ltx_authors"; + @import "./components/ltx_bibliography"; + @import "./components/ltx_caption"; + @import "./components/ltx_cite"; + @import "./components/ltx_date"; + @import "./components/ltx_equation"; + @import "./components/ltx_enumerate"; + @import "./components/ltx_figure"; + @import "./components/ltx_font"; + @import "./components/ltx_indent"; + @import "./components/ltx_itemize"; + @import "./components/ltx_keywords"; + @import "./components/ltx_listing"; + @import "./components/ltx_page_footer"; + @import "./components/ltx_para"; + @import "./components/ltx_quote"; + @import "./components/ltx_red"; + @import "./components/ltx_section"; + @import "./components/ltx_table"; + @import "./components/ltx_tabular"; + @import "./components/ltx_title_document"; + @import "./components/ltx_title_paragraph"; + @import "./components/ltx_title_section"; + @import "./components/ltx_title_subparagraph"; + @import "./components/ltx_title_subsection"; + @import "./components/ltx_title_subsubsection"; + @import "./components/ltx_verbatim"; } diff --git a/yarn.lock b/yarn.lock index a1fd1a75..95645058 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4719,6 +4719,10 @@ in-publish@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.0.tgz#e20ff5e3a2afc2690320b6dc552682a9c7fadf51" +include-media@^1.4.9: + version "1.4.9" + resolved "https://registry.yarnpkg.com/include-media/-/include-media-1.4.9.tgz#d0020b7be3eb2d54868a20943595ce380e0bc43b" + indent-string@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"