New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style the page using the colors from the scalameta logo #1144

Merged
merged 3 commits into from Apr 23, 2018

Conversation

3 participants
@mads-hartmann
Contributor

mads-hartmann commented Apr 22, 2018

If merged the site will look like this:

screen shot 2018-04-22 at 19 39 34

screen shot 2018-04-22 at 19 40 01

@mads-hartmann mads-hartmann changed the title from Style the page using the colors from the scalafmt logo to Style the page using the colors from the scalameta logo Apr 22, 2018

@olafurpg

This comment has been minimized.

Member

olafurpg commented Apr 22, 2018

Whoah 😍

I love the new code listings, very fresh 👍 Overall, big LGTM.

Only one comment, the bright red color in the sidebar is a bit alarming. I took a stab at making it sligtly darker with

ul.menu-item-list {
    background: #bb3e43;
    border-right: 2px solid #af2442;
}

screen shot 2018-04-22 at 20 24 50

It's a bit more bland, not as splashy, but lighter on the eye. I'm not sold yet, any suggestions?

@mads-hartmann

This comment has been minimized.

Contributor

mads-hartmann commented Apr 22, 2018

I’m happy you like it. I’ll throw togehter a few suggestions tomorrow. I have a soft spot for alarming colors but i’ll try to tone it down a bit 😅

@olafurpg

This comment has been minimized.

Member

olafurpg commented Apr 22, 2018

BTW, I've been thinking of moving the site to something markdown + tut based. I recently learned to use tut passthrough to replace the nice programmatic capabilities of scalatex.

If you are interested, I would love some help. We are exploring how to setup a new site for Metals in scalameta/metals#294 Once we have something good, I would like to use the same setup for http://scalameta.org/ and http://scalameta.org/tutorial

I've been meaning for a while to write detailed docs on parsers/printers/traversers/semanticdb but always get stuck on the website.

@mads-hartmann

This comment has been minimized.

Contributor

mads-hartmann commented Apr 23, 2018

Sure thing, I’d be happy to help. I’ll take a look later 👍🏻

@olafurpg

This comment has been minimized.

Member

olafurpg commented Apr 23, 2018

Re: colors

I like bright colors! My biggest gripe is lack of contrast between background and text, I find it difficult to read white font on bright red background.

@mads-hartmann

This comment has been minimized.

Contributor

mads-hartmann commented Apr 23, 2018

@olafurpg Here are some color combinations I've used on my blog. Does any of these combinations strike your fancy?

I totally agree that the contract right now is off 👍

@olafurpg

This comment has been minimized.

Member

olafurpg commented Apr 23, 2018

Nice blog! I like the dotfiles colors, I've always been weak for purple 😊 The yellow and black is nice too.

Do you know any good template/static site generator for docs? I've tried hugo, gitbook, docusaurus, jekyll, ornate, doxidize, sphinx, read the docs, mkdocs but struggled to get

  • github-flavored markdown
  • always accessible sidebar to jump between pages
  • always accessible TOC for open page
  • search (either generated in site or algolia is fine too)
  • "edit on github" links
  • anchor refs to headers for easy "click and share link to section"
  • template variable splicing to insert dynamic strings like project version (for copy-paste friendly installation instructions).
  • ability to inline subsets of external files, like @hl.ref in http://www.lihaoyi.com/Scalatex/#Highlighter (ideally with link to original file on github)
  • fast edit/preview feedback loop
  • nice landing page, something like https://docusaurus.io/ or https://bucklescript.github.io/
  • (optional) single page pdf generation

I can configure tut integration and publish to ghpages with mostly anything. My failure is a bigger sign of my experience with html/css than lack of functionality in those site generators 😅

@olafurpg

This comment has been minimized.

Member

olafurpg commented Apr 23, 2018

Moved this discussion to an issue #1146

I'm sorry I didn't mean to block this PR, which is already a great improvement as it is. I would be happy to merge it with a less dramatic change to the sidebar colors, the code listings are very beautiful.

@mads-hartmann

This comment has been minimized.

Contributor

mads-hartmann commented Apr 23, 2018

Thanks! I'll try a few color options later but and then I think we should merge this :) I'll join the other discussion and once we've settled on a tool I'd be happy to help port this one

@mads-hartmann

This comment has been minimized.

Contributor

mads-hartmann commented Apr 23, 2018

@olafurpg How do you feel about this?
screen shot 2018-04-23 at 18 11 13

@olafurpg

This comment has been minimized.

Member

olafurpg commented Apr 23, 2018

That looks nice! Can you push so I can test it locally?

@mads-hartmann

This comment has been minimized.

Contributor

mads-hartmann commented Apr 23, 2018

I tried a couple of other colors but didn't quite like any of them :)

@olafurpg

This comment has been minimized.

Member

olafurpg commented Apr 23, 2018

Just tried it locally and ❤️

The bright red color for select section was still a bit alarming at first, but I got used to it quickly and I like now :)

Any thoughts @pjrt ?

@olafurpg

This comment has been minimized.

Member

olafurpg commented Apr 23, 2018

btw, I don't know if this can be fixed in css or not, but it has always bugged me that clicking on sections cuts the header at the top
screen shot 2018-04-23 at 19 06 56
Top of "Related" is hidden by top of window. Is it possible to add some padding/margin to let the header breathe?

@olafurpg

Bliss 🙏

Thank you @mads-hartmann much better now to click on headers

@pjrt

This comment has been minimized.

Collaborator

pjrt commented Apr 23, 2018

Are we going for red-ish because of Scala's logo? That makes sense, though is that the Scala red? Something looks different on it.

But I am by no means a designer so don't take my opinion too strongly. I do agree with the overall change to red-like-things.

@olafurpg

This comment has been minimized.

Member

olafurpg commented Apr 23, 2018

The colors match the scalameta logo from http://scalameta.org/

It's not intended to be the scala red color. Sounds good, let's do it 💪

@olafurpg olafurpg merged commit 5a14343 into scalameta:master Apr 23, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
@olafurpg

This comment has been minimized.

Member

olafurpg commented Apr 23, 2018

@mads-hartmann mads-hartmann deleted the mads-hartmann:fresh-coat-of-paint branch Apr 23, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment