nevernotrarekev / cms-sanity-app Goto Github PK

• Nav - my bad - keep the 65px padding left/right on the nav just like the container

• Thumbnails are static until mouse hover and loops plays.

• Add a background layer in the blue behind the video so its seen first before the video embed loads.

• Final: Set Container Max width 1440px; 65px left/right padding

• Nav Max Width of 1440px; 50px padding/left and right.

• Enable global antialising. The fonts look more bold than it should be.

• Footer: Top Padding: 40px;

• Image move down accordingline

• Tiny Lion links out to tinylion.tv

• Left align the Heading titles to logo. WIll prob need to margin-left: -65px; (Desktop only)

• My bad, set width to 1400px

• But for Work page, set the max width of the content to 1680px.

• Set global left/right padding to 30px;

• Set max width to 1680px

• Nav text hover should be the #f25b5d with border bottom

• Set the view all to 24px;

• Double the width
• Set background to #141928
• Button: reduce bottom padding so its evenly spaced. ~3px
• Set text to 18px

• Hamburger nav color to #12416c

• Hamburger nav width to 30px; top: 23px

• Navbar margin-bottom: 30px;

• Home thumbnails: set padding to 64px so they are a little taller; set marign-top: 30px;

• Reduce footer spacing

• Homepage

• Work

• Play

• About

• Single Project Page

• Logo: Set width: 123px;

• Change burger nav color: #12416c

• Center Burger Nav text
  

• Footer: Set footer image height to auto. Currently set to 340px.

• Video Reel Carousel: remove the margin top.

• Video Reel Carousel: Set the height taller. Try 180px tall. Currently at 124px.

• Global: Reduce space between nav and heading.

• Set H1 to 2.5rem

• Work: remove the "flex" on the categories. Let it stack.

• Work Single: Align left the work category. Currently it's aligned right.

• Work Single: Set H1 to 2.5 rem;

Covid Banner not showing up in Prod but works in Dev.

- General Note

• body container way too narrow throwing off the whole layout (see comp)

- Title/Tag

• ⁃ title size feel too large - set to 35px;

• project title next to client name needs to be in 600 weight

• ⁃ tag - all caps, 600 weight; 16px

• ⁃ spacing to video below is too large. Set to 45px.

- Video

• ⁃ too small, effected by margins on body
• ⁃ Previous should be abbreviated to "Prev."
• ⁃ prev/next underline weight is off

Title/Filters

• ⁃ “Our Work” title is too big. 57px
• ⁃ letter spacing is off on filters. set to .045rem
• ⁃ hover/active states needed on filters. Needs to highlight: #f25b5d with border bottom

About/Credits

• ⁃ text needs to align at top
• Left Align About Description with video.
• Project description should be in normal weight
• ⁃ spacing to video above is too large;Set to 45px
  

• Copy Et-sons.com for Header animation reveal
• For the content reveal, they dont need to slide up. Just fade in. Again referencing: http://www.et-sons.com
• Increase the transition duration to .6

• Mobile title formatting is still incorrect in regards to the “leading” height when a title drops to two lines. It's correct on desktop, and also correct on Mobile Work page. Just the Mobile Home page needs to get that same update.

- Hero Section

• Headline - Left align the Heading. Will require a -65px margin left on desktop.

• Set size to 44px; and max width to 94% on destkop.

• Remove graphic

• Heading: make 1 column

• Set title to 3 lines

• Title size to 55px; line-height: 1.1; margin-left 65px;

• Intro_wrap: Margin-bottom: 50px

• Hero text set weight to: 500

• Reduce space between base line of nav and top of header image. Should be about 90px.

• Header: "and" needs to be on the last line

• Space between header and video grid below should be about 90px. Currently sitting around 67px

• Mobile: reduce gap between Nav and header

• Project title within the autoplay videos: Set Padding left/bottom 30px.

• ⁃ hover effect darkening with blue (seeIBM thumb in comp)

• Work Tile text: 30px left/bottom padding.

• ⁃ Section height is off (too short). 4rem bottom padding.

• - Headline text should be medium weight (600)

• ⁃ line spacing is off on text (space it out)

• ⁃ text is crowding image (text container too wide should be breaking to four lines on standard desktop)
  

• Preview Titles: padding: 20px 30px;

- Grid Section

• Title padding bottom needs to match the left;

• Swap the titles around. Brand first, project title second.

• ⁃ Spacing is a bit tight (comp had 50px b/w thumbs)

• ⁃ overlay text should be #f3ede0

• ⁃ line weight on “view all” is off, should only be visible on hover
• [ ]

- Video Carousel

• Mobile, increase the height, aspect ratio will become more like a portrait, cropping of the image is to be expected.

• Add same hover effect on the videos like the works

• Enable player controls only after pressing play tho.

• .carousel-space {
  margin-bottom: 210px;
  margin-top: 50px;
  }

• Replace play icon with this one:

<svg width="77" height="77" viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M41 0.5C18.6239 0.5 0.5 18.6239 0.5 41C0.5 63.3761 18.6239 81.5 41 81.5C63.3761 81.5 81.5 63.3761 81.5 41C81.5 18.6239 63.3761 0.5 41 0.5ZM41 78.5C20.2761 78.5 3.5 61.7239 3.5 41C3.5 20.2761 20.2761 3.5 41 3.5C61.7239 3.5 78.5 20.2761 78.5 41C78.5 61.7239 61.7239 78.5 41 78.5Z" fill="white" stroke="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.9 52.4L52.1 40.6L34.9 29V52.4Z" fill="white"/>
</svg>

• Increase bottom padding from carousel link and footer. change to 180px.

• Links need to be 700 weight

• ⁃ “watch reel” text color should be #f3ede0

• ⁃ needs play icon

• ⁃ hide vimeo controls

• ⁃ link to tight to video above need more top-margin

• ⁃ if links dont rotate than order needs to be same as comp

• ⁃ spacing b/w words should be ~60px

• ⁃ Change underline to border-botttom. 10px spacing.

• Text needs hover effect.

• Possible to have the videos go full screen?

• Carousel hover text: Change cursor to hover

- Footer

• ⁃ spacing b/w footer and video section to big
• ⁃ footer to tall. Set to 256px ;
• ⁃ Drop Line and link need to be left justified to text below
• ⁃ drop line needs to be #f3ede0
• Left align "Drop us a line"
• ⁃ email address underline is wrong weight(thats my bad, should be same as view all above)
• ⁃ email address underline needs to be moved up
• ⁃ “Mondial Creative…” text should all be #f3ede0
• ⁃ baseline of left text should align with baseline of tiny lion logo
• ⁃ spacing between contact columns is off

• The header image from home page will now take place where the slider is.
• The slider will replace the bottom two images. The bottom two images will be one image.

Set Page Title to:

MONDIAL | Creative Collective | %Page Name%

• PLAY - Allow Static images + Gifs to be uploaded. Should prob a toggle between static and video.

• COVID - Allow the tagline to be editable

• COVID - Allow it to be turned on/off

• HOME - Move the Hero Illustration field to "About".

• HOME - Was having trouble witht he headline updating in the CMS onto the live site.

• ABOUT - Not sure what the About Image 1,2,3 does anymore.

• Projects - Allow assign multiple categories to one project. Most projects are a combo of Editorial/Color/FX

• Instead of vimeo id, allow full URL pasting

• Projects - Parent Column, Show the Brand name as well like "Brand Name - Title". Currently only shows title

• Content hierarchy by page (Home, Work, Play, About, COVID)

• “Featured Items” should be reels under Home

• Play Item should be nested under Play

• “Page” is actually just homepage hero

• “Post” is work

• “Work” items should be now called “Projects”

• “Work” parent page shows all Projects; needs to be able to change order

• Project - Add Vimeo "looping clip" (separate video) field, otherwise default to cover image.

• Work item needs Homepage thumb and Work page thumb.

• Play content needs “caption” field

• Add COVID page with CMS.

Would be ideal if the descriptions auto populate per page based on its avaialable content.

I.E.
Home - A Creative Collective Focused on Production, Post-Production, and Design
Work pieces: it'd be the Credits

Attached Preview Image:

• Will link out to a new page using "about" template. Contents will be hardcoded

BG Color: #141928
Button Color: #f25b5d
Modal Corner Radius: 10px;
Button corner radius: 5px;

• On scroll, the nav's width expands too far

• nav links: letter-spacing: .065em;

• underline links for active/hover. 10px padding

• Margin top padding: 2.5rem

• Desktop: Sticky Nav needs centering to match static nav positioning.
  

Set Anti Aliasing to HTML

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;

• Enable gifs when uploaded to CMS
• Make sure gifs are autoplay
• Have clean thumbnails without the play icon/darkened thumbs if not on a hover state. I’m fine with the darkening thumbs and play button if it's being hovered on.
• Mobile Play page formatting isn’t right when you’ve clicked on a post. The video loads pretty small until it starts playing and if there is a caption or credits, then it all gets kinda narrow. Hide the arrows and make the videos full width

For videos:

• Title: Needs to say Our Play. The Nav link stays "play"
• Possible to have the play icon and open modal when clicked? The controls can be revealed in the modal.
• Set the background opacity darker to 75%
• Reduce caption text size to .95rem
• Able to support YouTube videos?
• Add the dark blue backround overlay behind play icon

• General Note

• Desktop and Mobile - All thumbnails appear darker then they should, even when not hovered on. Compare same thumbnails to the Home page featured work. Once again, I like the darkened hover state, but let's start with full bright thumbs.

• Titles: Swap order. Brand First then Project Title

• Set the body container back to same as home page.

• Categories titles: Need to have active state when tabbing through.

• Single work page: Vertically align the prev/next arrows to the video.

• Mobile: Category needs to be on a new line, above the h1. Margin-bottom 5px;

• H1 - font size - 1.6rem ; line height: 1.2

• If About has no content, hide the column.

• ⁃ thumbnail text should be #f3ede0

• Reduce space between nav and header by 100px

• Go full width on the grid. Currently contained.

Question for Christian on animating logo on scroll: Do we use gif or logo? https://www.dropbox.com/s/sw3gfuzyntoms60/Mondial_Logo_WebScroll_01%20%281%29.mov?dl=0

Gif: https://cdn.discordapp.com/attachments/783776157304619058/786597075215187978/Mondial-Logo-WebScroll.gif