We decided to use Montserrat for the Logo type and the headings.

Implement this and choose a font for smaller text, define spacing and whatever needed.

Under "OTS People" we would like to show some real stories from OTS community people.
We will show:

• small picture
• person label - is a learner or a coach? or an organizer?
• intro
• more button
• longer text

It would be ideal to have a component that show the picture and intro to the stories and if user want can display more content and read the whole story.
Maybe an accordion? Or just a hide/show content? Your choise to find a good solution :)

Under "About" we have "What drive us" page.
Here we should write the reasons behind OpenTechSchool.
The copy should keep in mind that some users could be interested to copy-and-paste part of it to use for possible press communication.
It would be nice to write them in personal way, not typical "We love open web" way.

Other section of this page are:

• Our Values
• Testimonials (this will be a short intro to some OTS stories and then will include a link to community/ots-people/ots-stories page.)

Different title's proposal for this page will also take in consideration.

You can find old content here:
http://www.opentechschool.org/about.html

Ots people is a sub item of "Community" and it should give a feeling of our approach and how our events are.
It should answers to questions like: Will be the meetup welcoming? Can i make "dummy" questions?
Is it beginner-friendly?

What would probably be inside of this page is:

• What is this community about?
• How we believe education should be
• some successful stories from learners (also learners that now have developer job)

• use consistent quotation for nav config _data/nav.yml
• header background color white
• donate button should be pink and with border like in the design
• menu mobile icon
• mobile dropdown style
• menu open on mobile shouldn't stay open when window become bigger

Let's keep this design mockup as guideline:
https://www.figma.com/proto/MHyUqUq6gd5EuGuIBerw2Z76/OTS-latest-design?scaling=min-zoom&redirected=1&node-id=2%3A2

@Gushsd we merge your branch to keep working on other part of the website, here are what it still need to be done for menu

Hello @gsambrotta @gnunicorn @xMartin @Gushsd !
The OTS Leipzig team would love to update the look and feel of the current website to be more modern and fresh. Since you started the website relaunch project I'd like to know what the current status of the project is. Are you still planning to move forward with this work? How much work is left before it can go live?
I'd love to hear from you!

Under "About" we have "History" page.
Here we need to write a short history of OTS.
The copy should keep in mind that some users could be interested to copy-and-paste part of it to use for possible press communication.

Think about if make sense to include in this page Sub-section like:
Legal Form
"We are No-Profit!"

In case we include all these 3 sections, it might be better to give a more general title to this page.

Some content can be found here:
http://www.opentechschool.org/about.html

in "Contribute" page we would like to explain people, coach and not, how they can contribute to OTS, all the different ways.

Is probably important to add:

• link to our forum
• link to our github
• link to our learning material on github
• link to code of conduction
• link to coaches guidelines (or little sum)
• link to how to be member
• link to /chapters to find their city and meetups near

Add section on "Volounteer jobs" where we explain the current Volounteer position we are in need.
This should lead to a link to a trend on our forum.

We currently have the locator to show all chapters on a map. Considering how "few" active chapters we actually have, this seems like a visual overkill and we might want to make the entire thing lighter. Try to design and answer the questions:

• What should an overview chapter page look like? Maybe as a grid like on womenwhocode? Any other way?
• How to display and distinguish inactive from active chapters?

Link to imprint page have to be in the footer.
In the current version of website-relaunch is under About->Imprint

See implementation on current (old) city page "UPCOMING EVENTS".

For an example implementation of a widget see team list on chapter pages using fetchAndRender implemented in head.html.

Main menu (header, top right) item "Community" and "About" should have dropdown menu.
Design is still to be decided but should be in line with the main header and in general with OTS style/colors.

Items that goes under "About" are:

• History
• Projects
• Where we operate
• What drive us
• Contact

Items that goes under "Community" are:

• Chapters
• Projects
• OTS People

"Projects" and "OTS People" will have a secondary menu inside the page, as "page header" (not dropdown):
"Projects"

• Regular events
• Projects
• Contribution

"OTS People"

• Ots Stories
• How we think eduction should be
• Why be part of OTS Community
• Get in touch with us

Step to achive task:

• create dropdown menu design/style
• create page under main menu and connect to it
• create "page submenu" design/style
• create "page submenu" page
  (new created page could be empty or with just a title)

Note: When submit the PR, please attach also picture to show the intended design.

See implementation on current (old) city pages.

(no JavaScript programming needed)

On "Learn" page we would like to have a list on how people can learn and where they can find learning material.
Content would probably include:

• little intro
• Link to our learning material "learn.opentechschool.org" and short explanation on how to use it
• Explain we have little project where people can contribute to learn and give a link to discourse trend where all projects are posted (discourse trend still need to be create)

Implement a map where user can see all the OTS chapters.
Chapters are shown on the map as marker on the city of the chapter.
This page location is /community/chapters

Specs:

1. Show active/inactive chapters as markers
2. each marker should link to chapter page
3. Map has to be responsive.
4. Be sure user can easily navigate on the map without the mouse is being captured and user get stack in zoom in/zoom out
5. On Mobile we should see just a list of active chapter (no map is loaded at all)

Marker data:
check into _chapters/chapter-name.md
each file should have config line: active: boolean
Check that each chapter has one, if not add it.
Write active: true for active chapter and active: false for inactive chapter.
Marker design:

• blue if the chapter is active
• grey if the chapter is inactive

See implementation on current (old) home page "UPCOMING EVENTS" for all chapters.

For an example implementation of a widget see team list on chapter pages using fetchAndRender implemented in head.html.

See implementation on current (old) home page "DISCUSSION" with latest four topics.

For an example implementation of a widget see team list on chapter pages using fetchAndRender implemented in head.html.

Implement footer html and style based on mockup:

Footer is shared template between all the pages
We don't want footer to be too full of elements
Footer must include link to:

• Imprint
• Contact

And:

• OTS logo
• Social links/buttons
• this sentence: "Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. "

This page is sub item of "About" section.
In this page we would like to give a overview about what we do and where we do it.
There will be two main sections:

1. OTS is worldwide: mention that we have chapters in different area of the world, explain how we approach OTS locally and globally
   Link to /chapters page

2. What we do: Explain we work with different format, we have different projects and we do lot of collaborations.
   Link to /projects page.
   (hint: http://www.opentechschool.org/projects/)

We want to show some nice numbers and stuff - maybe similar to the how it is done on opensourcebash. So we need some numbers compiled about OpenTechSchool globally and locally and decide how we want to display them.

Implement design for general text page.
[mockup to be added]

Please keep in mind that this is general style that have to work for all text-only page.
Design must be responsive and looking good on phone too.

On "OTS People" we would like to give a feeling of our events.
I think a good idea to do so is through picture.
Anyway we don't want to have a huge photo gallery, we want something that is enough to give a good feeling of what we do and how we do it but is not invasive in the page.

• Choose gallery design
• Collect picture
• Implement gallery

If you think that make sense, gallery can also be a link to another page or could be widget

On the top left there is a "donate" link, this link should be connected to the foundation page.
Foundation page should include explanation of foundation, how to be a memeber and how to donate sections

Specs:

• link "donate" button to /foundation
• Make section: OTS foundation
• Leave space for donate widget
• Add section: Why be a member? / How to be a member?

What should the new page for each chapter show. Which information makes sense to be shown, how should that be featured and in which order should it be put in? What should happen if information isn't readily available? What should the chapter page for an inactive chapter look like or should it not be there at all?

You can take a look at the current http://www.opentechschool.org/berlin chapter page for a website with a lot of content and the feature possible - but most other, even active chapters, don't have many of those features.

Imprint page currently display our first version.
Is probably still good but need a content revision to see if still actual.

Here can be found the old content:
http://www.opentechschool.org/imprint.html

Foundation page should include explanation of foundation, how to be a memeber and how to donate.

Specs:

• Give short intro text on OTS foundation
• Write content that answer to questions: Why be a member? / How to be a member?

Content can be taken from here: (http://www.opentechschool.org/foundation/)

We will redesign entirly our home page.
On this ticket please implement just the main structure of the home page, so that each section can be filled separately later on.

Here is the mockup of the homepage.
The idea is taken a lot from opensourcebash.org, so if anything is not clear, please refer to that website.
If any other information is missing, feel free to fill gaps how you feel make more sense.
In order to be merged, this ticket will require at least 2 +1 from the community.

Also for the footer just build the space for it.
It will then develop in another ticket.

Trying to set up the development on fedora 26 doesn't work. When I try to load the page in chrome it just displays a #blank page. When I open dev-tools it's also emty e.g. no requests etc. This may be an issue with hugo, chrome or my and possibly other linux distros

steps to recreate

1. run fedora 26 as VM
2. clone repo and git checkout setup/hugo branch
3. run npm install
4. run npm install hugo-bin --save-dev
5. edit package.json
   • replace script "build": "run-s build:*" with "build": "run-s build:* && hugo"
   • add "serve": "hugo server --watch" to scripts
6. run npm run build
7. run npm run serve
8. open new command prompt and run npm run watch
9. visit http://localhost:1313/ in chrome browser

Run pages against https://github.com/pa11y/pa11y