Make banner with title and logo
colinbrislawn opened this issue · comments
Current header (with logo, title, and tagline)
Make a new banner that includes these elements.
Should this new banner go on all pages (like the current one) or only on the index page?
An image banner (with or without special font and logo) may be nice.
John Fulton is a board member who may be able to provide us a better set of images for the header.
Folks like the logo. Let's figure out how to import it in super high quality and present it in the header.
We are interested in using the logo and font / title / tagline.
Font is 'Park Avenue' can be easily downloaded from
http://www.azfonts.net/load_font/parkavenue_bt.html
http://www.fonts101.com/fonts/view/Script/20361/ParkAvenue
More licensing info here: https://www.myfonts.com/fonts/atf/park-avenue/alternate_cuts.html
Due to this, I think embedding it is ill advised. Instead, I'll make a static png image for the page.
Edit: Demo pages are live!
https://colinbrislawn.github.io/CamerataMusica/
https://colinbrislawn.github.io/CamerataMusica/background1.html
https://colinbrislawn.github.io/CamerataMusica/background2.html
https://colinbrislawn.github.io/CamerataMusica/background3.html
https://colinbrislawn.github.io/CamerataMusica/background4.html
Opening the banner up a bit more really gives it space to breathe. We should be considered this. It would also give us enough room to feature performers in the banner on individual pages.
padding: 170px 0
Logo is up and ready for testing! I'm pretty pleased with this result, but the work is not done.
- Swap in high(re) resolution banner image and banner logo
- Test on other platforms
- Choose background
- Get feedback
Consider #banner {max-height: 80%;} so that the title is never 'below the fold'.
so that the title is never 'below the fold'.
Very popular. Let's do this. Experiment with max height on different sized screens.
Also, let's considering using an accent color to emphasize the menu. Also maybe use a dividing line, maybe white.
While implementing this, remember to fix #27
Also make background color white #ffffff
One possible fix (other than manual <style> like I use now) is to have the banner background-image be listed in the Meta section, then use an if block to activate special style and insert the image. See these lines
{% if page.banner %}
<style>
#banner{
background-image:url("{{ page.banner }}");
}
</style>
{% else %}
Oh, I'm designing this all wrong.
This should be added to the base.html template to include in in any page, then custom css added to style.css such for #banner.fullpage has all the attributes use on other pages, and meta:fullpage_url as the image location.
I should implement this soon...
The scope of page metadata for Jinja2 templates confuses me...
Anyway, this has been implemented in the article.html template.
https://github.com/colinbrislawn/CamerataMusica/blob/master/pelican-bootstrap3/templates/article.html
On article pages, you can now pass these metadata variables to get large banners.
Banner: ./images/2016-2017/the-byrd-ensemble-large.jpg
Bannerposition: center
Bannerheight: 700px
I consider this issues resolved!