From 13f75877901450220406e7914bbeff69fca5eed0 Mon Sep 17 00:00:00 2001 From: Mads Hartmann Date: Sun, 22 Apr 2018 19:41:57 +0200 Subject: [PATCH 1/3] Style the page using the colors from the scalafmt logo --- readme/Intro.scalatex | 7 +- readme/Readme.scalatex | 7 +- readme/resources/custom.css | 125 ++++++++++++++++++ .../scala/org/scalafmt/readme/Readme.scala | 4 +- 4 files changed, 135 insertions(+), 8 deletions(-) create mode 100644 readme/resources/custom.css diff --git a/readme/Intro.scalatex b/readme/Intro.scalatex index 9f8df256a..7fa7edf84 100644 --- a/readme/Intro.scalatex +++ b/readme/Intro.scalatex @@ -10,10 +10,9 @@ @blockquote Any style guide written in English is either so brief that it’s ambiguous, or so long that no one reads it. - - @blockquote - -- Bob Nystrom, @lnk("\"Hardest Program I've Ever Written\"", "http://journal.stuffwithstuff.com/2015/09/08/the-hardest-program-ive-ever-written/"), - Dart, Google. + @small + -- Bob Nystrom, @lnk("\"Hardest Program I've Ever Written\"", "http://journal.stuffwithstuff.com/2015/09/08/the-hardest-program-ive-ever-written/"), + Dart, Google. @p @lnk("Scalafmt", repo) turns the mess on the left into the (hopefully) diff --git a/readme/Readme.scalatex b/readme/Readme.scalatex index b2384bb94..305021bb2 100644 --- a/readme/Readme.scalatex +++ b/readme/Readme.scalatex @@ -3,7 +3,10 @@ @import org.scalafmt.config.ScalafmtConfig @import org.scalafmt.config.ScalafmtConfig.default -@sect("Scalafmt - code formatter for Scala", org.scalafmt.Versions.stable) +@raw + + +@sect("Scalafmt", org.scalafmt.Versions.stable) @scalatex.Intro() @scalatex.Installation() @@ -16,4 +19,4 @@ @scalatex.Footer() @raw - Fork me on GitHub + Fork me on GitHub diff --git a/readme/resources/custom.css b/readme/resources/custom.css new file mode 100644 index 000000000..6d41be078 --- /dev/null +++ b/readme/resources/custom.css @@ -0,0 +1,125 @@ + +/** + * Menu + */ + +.scalatex-scrollspy-Styles-menu { + /* Can't override the width in CSS as it's manipulated in JS when the menu is + collapsed. */ + /* width: 350px !important; */ +} + +.scalatex-scrollspy-Styles-selected { + background: #eb4d54; +} + +.scalatex-scrollspy-Styles-closed { + color: white; +} + +.scalatex-scrollspy-Styles-selected { + background: #af2442; +} +.scalatex-scrollspy-Styles-pathed { + border-left: 2px solid #af2442; +} + +.scalatex-scrollspy-Styles-menuLink, +.scalatex-scrollspy-Styles-menuLink:hover { + background: #af2442; +} + +.scalatex-scrollspy-Styles-menu { + background: #af2442; +} + +.scalatex-scrollspy-Styles-note { + color: white; +} + +.scalatex-scrollspy-Styles-noteBox { + background: #af2442; + padding-bottom: 10px; + text-align: center; +} + +.scalatex-scrollspy-Styles-menuItem { + border-bottom: #af2442 solid 2px; +} + +.scalatex-scrollspy-Styles-menuItem:hover { + background: #af2442; + color: white; +} + +ul.menu-item-list { + background: #eb4d54; + border-right: 2px solid #af2442; +} + +/** + * Content + */ + + +.scalatex-site-Styles-hoverContainer.scalatex-site-Styles-headerTag { + border-bottom: none !important; +} + +.scalatex-site-Styles-content { + max-width: 1000px; + color: black; + + color: rgba(46,48,58,0.96); +} + +.scalatex-site-Styles-content p { + font-size: 1.2rem; + line-height: 1.7rem; +} + +.scalatex-site-Styles-content a:visited, +.scalatex-site-Styles-content a:link { + color: #af2442; +} + +.scalatex-site-Styles-content pre code { + padding: 1em 20px; + background: transparent; + background: #f9f9f9; + border-left: 10px solid #ccc; +} + +.scalafmt-pair { + background: #f9f9f9; + border-left: 10px solid #ccc; + display: flex; + justify-content: space-around; +} + +/** Ovrride pre code styling in case of pair split as it's taken caore of by + * .scalafmt-pair*/ +.scalatex-site-Styles-content .scalafmt-pair pre code { + background: transparent; + border-left: none; +} + +blockquote { + background: #f9f9f9; + border-left: 10px solid #ccc; + margin: 1.5em 0px; + padding: 1em 20px; + quotes: "“" "”" "‘" "’"; +} + +blockquote:before { + color: #af2442; + content: open-quote; + font-size: 4em; + line-height: 0.1em; + vertical-align: -0.4em; +} + +blockquote small { + display: block; +} diff --git a/readme/src/main/scala/org/scalafmt/readme/Readme.scala b/readme/src/main/scala/org/scalafmt/readme/Readme.scala index 78012ad27..4d062aa2b 100644 --- a/readme/src/main/scala/org/scalafmt/readme/Readme.scala +++ b/readme/src/main/scala/org/scalafmt/readme/Readme.scala @@ -83,10 +83,10 @@ object Readme { def issue(id: Int) = a(href := repo + s"/issues/$id", s"#$id") def issues(ids: Int*) = span(ids.map(issue): _*) - def half(frags: Frag*) = div(frags, width := "50%", float.left) + def half(frags: Frag*) = div(frags) def ignore(frags: Frag*) = span("") - def pairs(frags: Frag*) = div(frags, div(clear := "both")) + def pairs(frags: Frag*) = div(frags, `class` := "scalafmt-pair") def sideBySide(left: String, right: String) = pairs(List(left, right).map(x => half(hl.scala(x))): _*) From df4b41774d8ff56282f42700484cea5965fb58bd Mon Sep 17 00:00:00 2001 From: Mads Hartmann Date: Mon, 23 Apr 2018 18:56:22 +0200 Subject: [PATCH 2/3] Swap the colors. Remove borders --- readme/resources/custom.css | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/readme/resources/custom.css b/readme/resources/custom.css index 6d41be078..e5c0e7b0a 100644 --- a/readme/resources/custom.css +++ b/readme/resources/custom.css @@ -10,7 +10,7 @@ } .scalatex-scrollspy-Styles-selected { - background: #eb4d54; + background: #af2442; } .scalatex-scrollspy-Styles-closed { @@ -18,43 +18,44 @@ } .scalatex-scrollspy-Styles-selected { - background: #af2442; + background: #eb4d54; } .scalatex-scrollspy-Styles-pathed { - border-left: 2px solid #af2442; + border-left: none; } .scalatex-scrollspy-Styles-menuLink, .scalatex-scrollspy-Styles-menuLink:hover { - background: #af2442; + background: #eb4d54; } .scalatex-scrollspy-Styles-menu { - background: #af2442; + background: #eb4d54; } .scalatex-scrollspy-Styles-note { color: white; + font-weight: 300; } .scalatex-scrollspy-Styles-noteBox { - background: #af2442; + background: #eb4d54; padding-bottom: 10px; text-align: center; } .scalatex-scrollspy-Styles-menuItem { - border-bottom: #af2442 solid 2px; + border-bottom: none; } .scalatex-scrollspy-Styles-menuItem:hover { - background: #af2442; + background: #eb4d54; color: white; } ul.menu-item-list { - background: #eb4d54; - border-right: 2px solid #af2442; + background: #af2442; + border-right: 2px solid #eb4d54; } /** @@ -80,7 +81,7 @@ ul.menu-item-list { .scalatex-site-Styles-content a:visited, .scalatex-site-Styles-content a:link { - color: #af2442; + color: #eb4d54; } .scalatex-site-Styles-content pre code { @@ -113,7 +114,7 @@ blockquote { } blockquote:before { - color: #af2442; + color: #eb4d54; content: open-quote; font-size: 4em; line-height: 0.1em; From b5e6484fb32b5e75e1827e5a05e75831091446f5 Mon Sep 17 00:00:00 2001 From: Mads Hartmann Date: Mon, 23 Apr 2018 22:01:30 +0200 Subject: [PATCH 3/3] Use line-height, not margin. Fixes anchors --- readme/resources/custom.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/readme/resources/custom.css b/readme/resources/custom.css index e5c0e7b0a..30fc9a4b6 100644 --- a/readme/resources/custom.css +++ b/readme/resources/custom.css @@ -65,6 +65,8 @@ ul.menu-item-list { .scalatex-site-Styles-hoverContainer.scalatex-site-Styles-headerTag { border-bottom: none !important; + line-height: 2em; + margin: 0; } .scalatex-site-Styles-content {