jim comments #1
Description
@beetz12 Overall, this looks good with no major issues that I see.
I did a first pass through with the live database imported on localhost, and here are minor styling items of note.
Underlining of Linked Buttons
type="button"
These tags with type="button" show an underlined styling of the text, which differs from the current site.
On the /hg-night page, the "Submit a Talk" and "Join our Meetup Group" buttons.
The "Recap" and "Videos"
Other Buttons Impacted
This underlining also happens on the "Subscribe" button on the /events and /calendar pages, though it doesn't use the same type="button".
HG Nights Page Call to Action Box Width
On the /hg-nights page, the two call to action boxes at the top aren't as wide as the event summary boxes below, which creates an odd appearance in the web browser.
Homepage Timeline
On the homepage, the timeline of "Upcoming Events" shows a green calendar icon which does not show in the Bootstrap theme, but that's because the code, oddly, uses a "display:none" to hide it. I don't think we need the green icon there, so unless it's going to mess up some other part of the site, we could remove the following from the view / Blade file.
<div class="timeline-badge bg-success">
<i class="fa fa-calendar"></i>
</div>
Homepage Timeline Vertical Line Positioning
On the same homepage timeline, there's a stylized vertical line that's showing to the left of the timeline on the Bootstrap site. This appears to be a CSS styling using .timeline:before
On the Tailwind version the vertical line is showing to the right side and is overlapping other elements of the timeline.
Footer Icon Alignment
The "Links" and "Other Links" in the footer had left alignment in Bootstrap and appear to have a center alignment in the new Tailwind version. The left alignment feels more appropriate in my opinion.
Missing Jumbotron Image on HG Labs Page
The div id="#jumbotron-image" in Bootstrap had a CSS background image. This is missing in Tailwind.
The CSS for that image targeted a /img/labs.png as seen in resources/sass/labs.scss
min-height: 30em;
background-color: white;
background: url(img/labs.png) no-repeat top left;
background-position-x: 0;
position: relative;
}
Bulleted List Margin on About Page
The Bootstrap site had a 2em margin on the <li> elements. The Tailwind has no margin. It seems a 1em margin would be a good middle-ground.
Contribute Page Call to Action Alignment
The top section was previously left aligned in the Bootstrap site and is center aligned in Tailwind. Since the other pages primarily use left alignment in this section, maintaining left aligning on /contribute seems appropriate.
Originally posted by @allella in hackgvl#601 (comment)