nevernotrarekev / cms-sanity-app Goto Github PK
View Code? Open in Web Editor NEWHome Page: cms-sanity-app-seven.vercel.app
Home Page: cms-sanity-app-seven.vercel.app
.featured_gridItem__9KXx1:first-of-type {
width: 100%;
padding-top: 33%;
}
.featured_gridItem__9KXx1:nth-child(2n) {
width: calc(58% - 50px);
margin-right: 50px;
}
.featured_gridItem__9KXx1:not(:first-child) {
margin-top: 50px;
padding-top: 30%;
}
.featured_gridItem__9KXx1:nth-child(3n) {
width: 42%;
padding-top: 49%;
}
.featured_gridItem__9KXx1:nth-child(4n) {
width: calc(47% - 50px);
margin-right: 50px;
padding-top: 49%;
margin-top: calc(-19% + 50px);
}
.featured_gridItem__9KXx1:nth-child(5n) {
width: 53%;
}
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;
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
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
- 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
Title/Filters
About/Credits
- 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
- 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
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.
BG Color: #141928
Button Color: #f25b5d
Modal Corner Radius: 10px;
Button corner radius: 5px;
Set Anti Aliasing to HTML
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
For videos:
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.