Need custom text and static materials for icons, banner, colors, etc

[emiliom]

From @ocefpaf: We need an intro text and more static material for icons, banner, colors, etc to make it look less like IOOS and more like BiG-CZ.

[lsetiawan]

Hi All, I have a proposition for the navbar and footer color:

NAVBAR:

.masthead {
    background-color: #5E5C57
}

.greedy-nav { 
    background-color: #5E5C57
}

FOOTER:

/* For the background-image, can download it first... I just used the direct link for now */
.page__footer {
    background-image: url(http://portal.bigcz.org/local/images/framework/background-trans.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: hsl(45, 5%, 18%);
}

[ocefpaf]

Much better @lsetiawan! I like it. I'm sending a PR with those now to check how it looks in my browsers.

[lsetiawan]

@ocefpaf what do you think of the html background-color change to: #F5F5F5?

[ocefpaf]

@ocefpaf what do you think of the html background-color change to: #F5F5F5?

I kind of prefer the original one, but I don't really have a strong opinion for this one.

[lsetiawan]

I kind of prefer the original one, but I don't really have a strong opinion for this one.

Alrighty. 😄 We'll wait for @emiliom maybe to decide on that one.

Also, I think that the pagination color should pop a little more..

.pagination--pager {
    color: #818181;
}

[ocefpaf]

Also, I think that the pagination color should pop a little more..

👍

[lsetiawan]

@ocefpaf Why isn't webpage updating? I merged the PR. Do I have to do something else? Thanks.

[ocefpaf]

For some reason doctr is not tracking the theme files 😒
See https://travis-ci.org/BiG-CZ/notebook_data_demo/jobs/250441402#L1036

I am investigating this, meanwhile I will perform a manual update. Hold on...

[emiliom]

@ocefpaf what do you think of the html background-color change to: #F5F5F5?

I'm with @ocefpaf. I prefer the original -- the one being used right now.

[emiliom]

@ocefpaf, I'll try to get the notebook data demo ready (polished up and with better, more user friendly notebooks) over the next couple of weeks.

A couple of things, with that goal in mind:

• Can you tell me what files to edit to update the "front page" content and banner/top links
• Is the CI working (both Travis and AppVeyor)? Looks like they're not, based on the status icons (I forget the name of those things!) on the README.md

[ocefpaf]

Can you tell me what files to edit to update the "front page" content and banner/top links

The jekyll page model is a little bit confusing at first. You'll find everything at https://github.com/BiG-CZ/notebook_data_demo/tree/master/webpage

But "first page" is a number of elements and they won't be in a single place, for example to modify navigation title (top links), etc you'll need to edit https://github.com/BiG-CZ/notebook_data_demo/blob/master/webpage/_data/navigation.yml

and the landing page is https://github.com/BiG-CZ/notebook_data_demo/blob/master/webpage/index.md

The header and footer (banner) have an HTML part and sometimes a figure.
The images are located at https://github.com/BiG-CZ/notebook_data_demo/tree/master/webpage/jupyter_notebook_jekyll_theme/images
and the HTML/CSS are located at https://github.com/BiG-CZ/notebook_data_demo/tree/master/webpage/jupyter_notebook_jekyll_theme/_includes

The best way to edit stuff IMO is to use the browser developer mode and find where the what part you want to edit comes from.

[ocefpaf]

@emiliom after I wrote this I realized that my answer above is not clear at all. I know that @lsetiawan is an expert on HTML/Jekyll/CSS, but if you want a better explanation I can give you a quick tour on the inner guts of the jekyll theme we are using here over a skype call.

[emiliom]

No worries. The changes I had in mind, to possibly do myself, are very minor and involve just simple content. And I do know enough HTML/CSS/Jekyll to follow your description 😉

[ocefpaf]

Awesome!

[emiliom]

I edited the landing page just now. Yeah, I know, I did it directly as a commit on the repo abusing my admin privileges ... But it's only one simple markdown page, so I don't feel bad about it 😈

I assume the system will auto-update after CI tests are completed? Or maybe the CI mechanism is not run when a PR is not involved 🤔

[lsetiawan]

I assume the system will auto-update after CI tests are completed? Or maybe the CI mechanism is not run when a PR is not involved 🤔

I checked Travis, it ran. 😄

[emiliom]

Cool, thanks for checking! Now the landing page is an informative, accurate and boring white page with text and links. I'll tweak it later on to reduce the text and add an image, to make it less boring.

@lsetiawan, could you locate where the link for the upper-left BiGCZ image is specified, and change it to http://bigcz.org? I haven't tracked down where that is. No rush.

[ocefpaf]

I assume the system will auto-update after CI tests are completed? Or maybe the CI mechanism is not run when a PR is not involved 🤔

They will run. We need only to check if Travis-CI completed. (Which @lsetiawan already did 😄)

@lsetiawan, could you locate where the link for the upper-left BiGCZ image is specified, and change it to http://bigcz.org? I haven't tracked down where that is. No rush.

The link is part of the theme and it is in jupyter_notebook_jekyll_theme/_includes/masthead.html.

Note that the tile BiG-CZ Data Demo Center and its link is kind of redundant with the logo. I only added that as a placeholder btw.

So maybe you want that to change that tile to point to http://bigcz.org instead of the logo link.
That would mean a "theme usage change" and not a "theme modification."*

Either way, navigating to external links are always tricky b/c you will change the user experience by sending them somewhere different from the current page. Explicit links in the text are always the best bet, main but logo and menu are odd, the user will think that it is the same page but it is not.

I sent #18 to implement that in case you want to test it out.

* Theme modifications are fair game but we diverge from the original theme and, sometimes, may lead to forks that are hard to keep in sync. That is definitely now a problem here! You'll probably never want to update the theme with its upstream version for this page.

[emiliom]

@ocefpaf thanks for both the changes and the explanations and recommendations. I agree with you that we want to avoid making "theme modifications". I didn't realize that my request to change the link on the logo involved a theme modification. Hmm.

I also agree about being careful with external links. But this brings up a question about all the external links I put on the landing page. That landing page is composed in markdown. Is there a way (some special code for Jekyll processing?) to specify that a markdown link should be interpreted as an external link to be opened in a separate window?

It's no big deal, though. If there's a simple solution, great; if not, we leave things as is -- and maybe even revert the logo link back to what you had before, so that we don't introduce a theme modification ...

[emiliom]

• Theme modifications are fair game but we diverge from the original theme and, sometimes, may lead to forks that are hard to keep in sync. That is definitely now a problem here! You'll probably never want to update the theme with its upstream version for this page.

Ah, I see that you probably meant to say "That is definitely not a problem here!" Yeah, this demo gallery may end up having a life time of one year tops. Who knows. So it's unlikely that an upstream theme update would be compelling.

[ocefpaf]

Yeah, this demo gallery may end up having a life time of one year tops

Even if it lives +1 year I don't see the need to catch up with that theme. We'll probably change to a new one that hopefully will be more notebook friendly.