Issue 55 - Designed footer area

[anuschka]

Commented Petra's work on base.html and created a separate footer.html in the layout folder. Designed footer similar to our mocqups. Still in the works:

• google maps embed api instead of static picture on the right
• link colours for hoover, active, ...
• fix some views (index, about, members) that overlap with footer

[goranche]

Still in the works

this is a pull request, not an issue or to-do list... write what's done, not what still might be done and might (probably) be part of another pull request

[anuschka]

:smile: What is done so far:

[PettraV]

Looks great! I would add also twitter logo :) and I would significantly downsize the map, as it looks as the most important info in the footer. Since footers are becoming more important and the main content clean, I was thinking that we keep in navabar just projects, members, events and log in, the rest can go to footer. Just an idea ;) And it is a bit embarrassing to say, but I am not familiar with logos in the middle column, please explain :)

[goranche]

does the codecatz_silver.png image really need to be that big?

[anuschka]

Thanks for all your comments. I still have to look into a few of the things you mentioned. With Google API it now looks like this: PS. At this moment the Google API key is generated with my own google account. We may want to create a CodeCatz one :smile:

[anuschka]

I removed the commented out footer section in base.html and the styling for code_catz_silver that I resized to 30x30px.

[anuschka]

@PettraV : Ja twitter se da dodati z lahkoto :smile: A imamo CodeCatz twitter account? As for the middle section with logos I saw it here http://events.codeweek.eu and liked it :smile:

[PettraV]

logo shape will have to be adjusted with the one you picked. I hope this will help :)

<a href="https://twitter.com/codecatz"><i class="fa fa-twitter-square fa-3x"></i></a> 

[goranche]

@PettraV I've corrected your comment, because the code wasn't showing (you can't just write HTML code in the comments as if it were normal text)

please check when writing comments, there is a Preview button for exactly that purpose

[PettraV]

:+1: :+1: :)

[ghost]

@PettraV @anuschka Great work guys, but Ithink the map might work better in the About page not the footer (Does any webpage really have a map in the footer). Isn't it just to big to fit to the footer? If you resize it it won't really be comprehensive. :) Just some thoughts :)

[anuschka]

@fbbunny: We can totally move the map somewhere else. It is just a few lines in the html :smile:

[anuschka]

[ialja]

@anuschka There is no need for a screenshot at every change - we can checkout the changes on our own :) Also, what we mean by the images being too big is not their CSS size, but their actual file size. It's unnecessary to have the CodeCatz logo 800 x 800 pixels big and 23 KB heavy if you're only displaying it as a 30 x 30 pixel image. Your browser will have to download the full image. 23 KB might not sound like a lot, but images do add up. We want our page to load as fast as possible, even on a crappy internet connection, don't we?

Personally, I even use https://imageoptim.com to compress images for web sites. Less is more in this case!

On a side note, I agree with @fbbunny - the map isn't really important info and would make more sense on the About page.

P.S.: Only a Google search away - https://twitter.com/codecatz ;)

[anuschka]

Sounds good @ialja. Thanks a lot for the tips and tricks :+1: PS. Will not spam you with screenshots in the future :stuck_out_tongue:

[ghost]

@anuschka Great!

[livike]

Looks good to me. However I don't like maps in footer at all. Why do you need "kersnikova4.png" image if you are using google maps?

[livike]

Can you just remove the-60px bottom margin from the #wrap(margin: 0 auto -60px;) in style.css? With this will be resolved also the overlapping issue #98.

[anuschka]

Note for mentors: Style.css is not part of this PR. Please remove it.

[ialja]

The proposed changes clash with the rest of the design (titles get hidden behind the navbar), so we'll not be merging this until fixed.