Improve design of website
Closed this issue · 15 comments
We might want to make some changes to the design of the website, I'll just drop some ideas here.
Features
- Style the
<detail>tag better (see discussion here) - Add possibility to link to suitable predecessor and successor exercises
- Add comment possibility
Some themes
A couple of more things to do:
- Simplify footer. Write the title only once.
- Fix footer text. After I changed the github repo to "lunduniversity/schoolprog", the repo text interferes with the description.
-
<detail>tag with<ul><li><ul>inside don't seem to work. - Major headings (
===) are styled smaller than minor headings (##).
The http://kojojs.kogics.net online IDE for Scala is now a lot improved, and I think most of our examples could be run there as well now.
This brings up the question of if it would be possible to write conditional markdown - to let the user switch between viewing scala and python examples. Any ideas on that? This would save a lot of work in trying to keep separate files in sync.
@gorelhedin It is possible with our current jekyll setup. Please have a look at the multilang branch in my fork, specifically: afe53ba
This is based purely on the liquid markup used by jekyll, by writing or finding a plugin specialized for this maybe we could make it cleaner but it is already fairly simple.
Basically:
- separate out the front matter into separate files for each language (see
scala.mdandpython.md) - in these files set a variable (or two, I chose
proglangandext, we should standardise this if we go with this approach) - include the main
README.md - in
README.mduse liquid markup to alter the page depending on the variables
In my README.md I've used different approaches to demonstrate what can be achieved:
- In the "Denna övning innehåller" list I've used an if block
- In all the code blocks I've substituted in the
proglangvariable so that the highlighting is correct - In the first code block I've used the case block (probably the most natural for most applications)
- In the last code block I've used
include_relativewith the extension variable to include1.pyor1.scaladepending on the language
@ahnlabb That sounds great! Thanks for the examples. I'll try it out.
Just found this neat resource on how to style <details>, I'd recommend skimming it for a more fruitful discussion about how we want it: http://html5doctor.com/the-details-and-summary-elements/
@gorelhedin <ul><li>Test</li></ul> seems to work inside <details> (the closing </li> tag is required for some XHTML-parsing reason).
Edit: <ul><li/>Test</ul> also works.
@ErikBjare Thanks, nice resource! I'd like a little more space after each </details>. Would that be possible?
@gorelhedin Fixed in 8266db1
@ErikBjare Looks great! Thanks!
@ErikBjare Help! I did some changes to the turtle exercise, and now the web site does not build! I have tried to read the error message, but I don't understand what is wrong. Can you help?
@ErikBjare In investigating a bit more, it seems that the only difference from the last build is that Travis fails in the last step with the message "Couldn't push the build to github.com/lunduniversity/schoolprog.git:gh-pages". In googling this, it is suggested that this kind of error occurs when the branch is protected: travis-ci/travis-ci#8548. However, as far as I can see, we don't have any protected branches. Any more ideas?
@remexre Thanks a lot - the workaround solved our problem!
Good enough for now.