Tucker's Review

[tuckabelle]

• [x] -webkit-font-smoothing: antialiased;
• [x] can we add some kind of loading think for when the podcast audio is loading?
• [x] Web Accessibility Checklist - The A11Y Project

Misc Audio

• [x] if we're going to just have a "transcript" button for the mobile, let's do that and get rid of the three dots, cause they aren't working
• [x] Let's not turn the icon and action button yellow (also their styling seems to be controled separately)
• [x] On desktop, the transcript button closes if the user clicks anywhere else on the page

Header

General

• [x] Change "About" menu title to "Learn about the Trade Guys"
  • This text makes the menu wrap onto two lines
• [x] Add role = "navigation" to nav tag
• [x] Add role="banner" to header tag
• [x] Add role="main" to main tag

  Desktop

• [x] Keep the logo arrow the same width in relation to the words (right now it get longer as the screen get bigger)
  • Smaller width of arrow like on mobile, at all screen sizes
• [x] the share arrow should line up with the sidebar (be 1/3 of width)
• [x] the share arrow is kinda messed up on Single Post screens

  Mobile

• [x] if the mobile menu was open when you left a page, clicking the back button the brower takes you back to the page with th emobile menu already open
• [x] for pages with the yellow header: .page-header {padding-top: 3rem}
• [x] The "MENU" button scrolls and disappears if you scroll on it
• [x] if you have time... this is for aria stuff on mobile Accessible Mobile Menu

Footer

General

• [x] Add title and alt to link tags for Apple Podcast
• [x] Add role="footer" to footer tag

  Desktop

  Mobile

• [x] .site-footer-contact .csis-logo {margin-bottom: .5rem;}
• [x] .site-footer-contact {padding-top: 2rem;}
• [x] .address { margin: 0 0 .5rem; }
• [x] site-footer-desc {padding-bottom: 2rem;}
• [x] .site-footer-subscribe {2rem 1rem}

Homepage

General

• [x] #guys_arrow {width: 12rem;}
• [x] The transcript button
  • [x] The transcript should pop up only if the user clicks on the three dots
  • [x] have it fade in
  • [x] add a bit more padding {padding: 0.75rem 1rem;}
  • [x] .icon-transcript {padding-right: .5rem;}
• [x] post-list {margin-top: 1.5rem; padding-top: 1.5rem;}
• [x] .featured-stat-desc {font-size: 1.5rem; color: white; line-height: 1.3; margin-bottom: 0px;}
• [x] featured-stat-source {margin-top: 5px;}
• [x] featured-stat-container {5rem 2rem;}
  • Is this padding? If so, it means the chevron SVG won't extend all the way to the bottom edge
• [x] .featured-post-list-main {padding-bottom: 4rem;}
• [x] .home .see-more {margin-top: 2rem}
• [x] button on hover: padding: 10px 10px 10px 50px (if will make the words move to the side)
• [x] Add title and alt to link tags for Apple Podcast and Soundcloud icons
• [x] Assign ids to the form inputs so the labels can be associated with them
• [x] Add to "All Episodes" link tag: aria-label="View list of all poscast episodes"
• [x] Add to "View All" article link tag: aria-label="View list of all Trade Explained articles"

  Desktop

• [x] Body does not extend as far as header
  • Due to grid max widths being set. Need to decide how to extend podcast list or sidebar to accommodate a wider width
• [x] .home .podcast-info .podcast-subscribe {margin-bottom: 2rem}
• [x] .site-footer section: have padding-top and padding-bottom: 3rem;

  Mobile

• [x] Let's put the article pictures on the right
• [x] last .trade-guy (andrew): margin-bottom: 1rem;
• [x] can we center the trade guy's image/text?

Single Post

General

• [x] post-meta {line-height: 1.5;}

  Desktop

• [x] .page-header {margin-bottom: 1rem}
• [x] you can take thick black line above meta section all the way to left side
• [x] .single-post .post-content .post-info .post-meta {margin-botom: 1.5rem}

  Mobile

• [x] .pagination-single-post .pagination-previous, .pagination-single-post .pagination-next {margin-bottom: .5rem;}

Archive

General

• [x] can we add a item/page count at top above the dark border? "PAGE 1 OR 5 (15 ITEMS)" in the monospace font, with the "PAGE 1 OR 5" part bolded. On mobile, let's center it like at the bottom

  Desktop

• [x] "Trade Terms Explained" description: font-size: 1rem;

  Mobile

• [x] remove big black boarder from top of post list
• [x] decrease space between listing meta and description
• [x] let's put the image on the right side
• [x] .post-list-title {font-size:1.25rem}
• [x] .post-list-content p {font-size: 1rem}

About

General

• [x] remove margin-bototm from h2

Tag/Author/Series Archives

General

• [x] In header, add "series:" or "tag:" on a line before the name. This should NOT be bolded, but the name of the series/tag should be.

  Desktop

• [x] Change header font size to 3.25