scorchingoyster / owasp-layout Goto Github PK

I'm trying to come up with a template for this - there will be two different types of posts - ones that we want to attribute to an author and others we do not. After the copy there will be a need to get to a index page - but seems like that could use the search results page template. I like the light blue treatment of hte news-events list

JSON of events for the Santa Barbara Meetup:

Event Name(as a link)

Date, Time at Venue name, city, State

So in the case of the data above we would have:

Web-app security training/CTF hosted by OWASP SB & Security Innovation (as link to Meetup)
August 22, 2019, 3pm PT at InTouch Health, Goleta, CA

=== RAW JSON ===
HTTP/1.1 200 success
{
"0": {
"created": 1564523618000,
"duration": 18000000,
"id": "263596915",
"name": "Web-app security training/CTF hosted by OWASP SB & Security Innovation",
"rsvp_limit": 30,
"date_in_series_pattern": false,
"status": "upcoming",
"time": 1566511200000,
"local_date": "2019-08-22",
"local_time": "15:00",
"rsvp_close_offset": "PT2H",
"updated": 1565728955000,
"utc_offset": -25200000,
"waitlist_count": 0,
"yes_rsvp_count": 24,
"venue": {
"id": 26471154,
"name": "InTouch Health",
"lat": 34.43021011352539,
"lon": -119.8868408203125,
"repinned": true,
"address_1": "7402 Hollister Ave",
"city": "Goleta",
"country": "us",
"localized_country_name": "USA",
"zip": "93117",
"state": "CA"
},
"group": {
"created": 1444171088000,
"name": "Santa Barbara OWASP Chapter",
"id": 19002931,
"join_mode": "open",
"lat": 34.41999816894531,
"lon": -119.70999908447266,
"urlname": "Santa-Barbara-OWASP-Chapter",
"who": "Hackers",
"localized_location": "Santa Barbara, CA",
"state": "CA",
"country": "us",
"region": "en_US",
"timezone": "US/Pacific"
},
"link": "https://www.meetup.com/Santa-Barbara-OWASP-Chapter/events/263596915/",
"description": "

*** PLEASE RSVP BEFORE TUESDAY, AUGUST 20 SO WE CAN HAVE THE RIGHT HEAD COUNT FOR SPACE, FOOD AND DRINKS ***

Come join us for this special event hosted jointly by OWASP SB & Security Innovation. We'll take advantage of Security Innovation's CMD+CTRL platform, which includes both training features and web-app CTF challenges.

More info: https://www.securityinnovation.com/training/cmd-ctrl-cyber-range-security-training/

Attendees can work at their own pace; beginner/intermediate level people can benefit from the training while working on the challenges whereas more advanced pentesters can solely focus on the CTF if they wish... and go home with a nice prize!

1st prize: A drone!
2nd prize: $100 gift card.
3rd prize: $50 gift card.

As always, we'll have food, drinks, great networking opportunities, and a lot of fun!

Event Agenda
03.00pm -- Event Kickoff & Announcements, by Walter Martín Villalba (OWASP)
03.15pm -- CTF Intro & Sign-up, by Security Innovation
03.30pm -- CTF & Training Start
07.00pm -- CTF & Training End / Prizes! / Dinner
07.30pm -- Open Discussion, by everyone :)

### CTF REQUIREMENTS ###
Laptop with wireless card and updated browser. No special tools are required, although an HTTP proxy such as OWASP ZAP or Burp could be used for some of the challenges.

Event location:
InTouch Health -- BUILDING 2 (see attached pictures)
7402 Hollister Ave · Goleta, CA

We hope to see you there!

Martín & the OWASP SB Team

PS: if you've been enjoying our frequent events since the relaunch in late 2018, please take a minute to rate our group on meetup.com.

FF 64

Would be nice (low priority) that when search box loses focus the field animates disappear.

At the bottom of Corporate Members logos, left justify "See all members" in that section. and place "Become a Member" hyperlink to right.

Remove "Become an OWASP Member Today" and "Why should you become..."

Currently has nothing

If possible accordion treatment into menus.

One way to get around the Company Name then right below logo as a name would be to put the logo under the copy on a new line and right justify. Not a requirement, just an idea.

It would be awesome if we had a way to add a menu separator to menus. In other systems I've used if the name of the submenu is "-" (just a dash) it treats the item as a vertical line. Again on https://www2.owasp.org/ ....

On the PROJECTS menu it's natural to have a menu separator between the last cheat sheet and "Browse all projects...". Same on CHAPTERS where we would have one after "Find a local chapter" and "Start a local Chapter". Both of those items belong in that menu but have different user context than other items. Having a "-" would give us flexibility to add it anywhere - but alas those are the most only likely place.

We should test abnormally long menu titles since the plan is some will be project names. My preference is the drop down width is dynamic long, with a set common minimum ( what we have now is fine) . There should be some examples in the menu hierarchy I sent a while back. I would prefer text doesn't wrap on menu itms

Need to tinker with grid layout

It would be nice to have four variations:

1. White copy on blue (current design)
2. White copy on black
3. White copy on green
4. black copy on grey

the header needs some sort of demarcation (bar/rule/graphic/shading/etc) to set it apart from the rest of the page. We do this on mobile, just not on desktop.

H1-H5, Table, italic, bold, and custom components too

regular text, code (most of these are handled by Git Markdown

WIP link: https://scorchingoyster.github.io/owasp-layout/sample

Need to increased in size and centered.

For instance on the staff page we would have a picture on left and would want copy to the right. There are likely instances where we might want right/left instead so two classes.

I would treat the object as tall as either element - if the picture is tall then white space under short copy. If copy long then picture top aligned.

Reduce line height by ~1/2. I think there's too much space between menues

Mostly looking at color palette and consistency

When I visit the project page. Then start clicking the submenus eventually the submenu copy gets "selected" with a blue border around it.

decrease margin on .home .main-wrapper to 0px (at least top) so there is equal space between bottom of alert, logo and top of homepage-promo

This way on mobile the Spotlight will be first.

I think it would be good to have some sort of visual HR between welcome AND project/chapter AND project/chapter AND news-events.

Some sites will give you a 5-10px gradient to light gray. Not sure what best solution is, but I think the page could use that touch.

Check out how "loaded" menus look on https://www2.owasp.org/ Need more compact vertical line spacing.

Seems like the best location for magnifiying glass is to left of Donate button same padding as to Join button. Then animation can swing out to left.

Looks too similar to main navigation menu

maybe we also add standard front matter for _post that article pages uses a CSS class for a quote - and that way we can use the class on ohter pages too.

author_quote: "This website is coming along nicely."

The class could have left and right options and would use that mono font space with some nice padding. Maybe add the light blue bar on the "exterior side for added desing - or maybe we use a grey bar with same weight?

One challenge with logos is because of their diversity it can be very distracting if you have lots of them listed on a page. Can we use a mono color filter to make them all the same gray? Not 50% but something a bit darker. That also democratizes them from the Spotlight company.

So for the article page we would have additional front matter

author: Harold Blankenship
author_title:
picture: /assets/harold.jpg
abstract: New blog post example content. Talk about using GitHub for the new website. More text to follow in a second here. Describe the functionality and the awesome CSS.

That way the article page has that data. Is there a way that the homepage-blog section could just pull that from "the most recent" _post and render it here? The abstract field would be the copy for home page. If author object is empty then we ignore the author-title and picture.

Crude layout design will be in Slack channel

May use Google's CSE, TBD

Need to check with Mike for details