Skip to content

Commit

Permalink
padding for small screens
Browse files Browse the repository at this point in the history
  • Loading branch information
@GraemeFulton
GraemeFulton committed Mar 2, 2024
1 parent 8954be4 commit fab805c
Show file tree
Hide file tree
Showing 8 changed files with 17 additions and 17 deletions.
2 changes: 1 addition & 1 deletion components/footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function Footer() {
return (
<footer>
<Container maxWidth="max-w-[1320px] z-30 relative">
<div className="w-full max-w-screen-xl relative mx-auto py-16 px-6">
<div className="w-full max-w-screen-xl relative mx-auto py-16">
<div className="flex flex-wrap">
<div className="w-full md:w-6/12">
<p className="text-xl font-semibold">
Expand Down
2 changes: 1 addition & 1 deletion components/people/ProfilePageLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ const ProfilePageLayout = ({
</div>

<div className="flex-1 z-20 -mt-[120px]">
<div className="max-w-[1320px] mx-auto mb-20 mt-6 lg:mt-0">
<div className="max-w-[1320px] mx-auto px-6 md:px-3 mb-20 mt-6 lg:mt-0">
{unapproved?<div className="mt-[60px]">
<div className="mt-3 flex w-full bg-white shadow p-4 px-4 rounded-xl text-black/90 max-w-3xl mx-auto">
<div className="hidden md:block mr-4 my-auto">
Expand Down
2 changes: 1 addition & 1 deletion components/v4/section/HeroArticleSection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import HeroPostGrid from "../layout/HeroPostGrid";
// import {RssSimple} from 'phosphor-react'
const HeroArticleSection = ({user, heroCardPost,showBigPost, viewablePosts, cols,title, showHeading,showHeadingRow }) => {
return (
<Container padding={false} maxWidth="max-w-[1320px] mx-auto px-0 md:px-3">
<Container padding={false} maxWidth="max-w-[1320px] mx-auto px-6 md:px-3">
{/* <div className="w-full shadow-md h-full grid grid-cols-12 flex justify-center bg-white rounded-3xl p-6 lg:p-6"> */}
<div className="w-full h-full grid grid-cols-12 flex justify-center">
<div className={`w-full max-w-full flex flex-col col-span-12 `}>
Expand Down
4 changes: 2 additions & 2 deletions components/v4/section/PostsSectionHero.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import HeroArticleSection from "./HeroArticleSection";
// import {RssSimple} from 'phosphor-react'
const PostsSectionHero = ({user, heroCardPost,toolsList,showHeroTitle,groupSlice, viewablePosts, showTags,title, showRecent,showTitle }) => {
return (
<Container padding={false} maxWidth="max-w-[1320px] mx-auto px-6 md:px-0">
<Container padding={false} maxWidth="max-w-[1320px] mx-auto">
{showRecent &&
<>
{/* <div className="w-full shadow-md h-full grid grid-cols-12 flex justify-center bg-white rounded-3xl p-6 mt-6 lg:p-6"> */}
Expand Down Expand Up @@ -43,7 +43,7 @@ const PostsSectionHero = ({user, heroCardPost,toolsList,showHeroTitle,groupSlice
<TagsNavRow/>
</div>
}
<div className="w-full h-full grid grid-cols-12 flex justify-center md:px-3">
<div className="w-full h-full grid grid-cols-12 flex justify-center px-6 md:px-3">
<div className={`${!showRecent?'-mt-4':''} w-full max-w-full flex flex-col gap-2 col-span-12 `}>
<div className="flex justify-between">
{showTitle!==false &&
Expand Down
2 changes: 1 addition & 1 deletion components/v4/section/TagsNavRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const tags = [

const TagsNavRow = ({currentPage}) => {
return (
<Container padding={false} maxWidth={"max-w-[1320px] mx-auto mt-7 mb-2 md:px-3"}>
<Container padding={false} maxWidth={"max-w-[1320px] mx-auto mt-7 mb-2 px-6 md:px-3"}>
{/* browse all */}
<div className="flex flex-wrap">
<GiantTag classes={`${currentPage=='topics'?'border border-gray-800':''} pl-2 mr-4 md:mr-8`} link={`/topics`}>
Expand Down
12 changes: 6 additions & 6 deletions pages/post/[slug].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ const date = post.attributes.date

<div
style={{"backgroundImage":"linear-gradient(rgba(32, 52, 144,0.16) 1px, transparent 1px), linear-gradient(to right, rgba(32, 52, 144,0.16) 1px, rgba(247, 247, 247,0.16) 1px)","backgroundSize":"26px 26px"}}
className="relative mx-auto w-[1301px] border-b border-b-indigo-500/20 border-r border-indigo-500/10 max-w-full z-10">
className="relative -mt-[96px] md:-mt-0 pt-[64px] md:pt-0 mx-auto w-[1301px] border-b border-b-indigo-500/20 border-r border-indigo-500/10 max-w-full z-10 px-6 md:px-3">
{!post.currentLocaleAvailable && <NoticeTranslation />}

<div className="pt-4">
Expand Down Expand Up @@ -210,7 +210,7 @@ const date = post.attributes.date
</div>

</div>
<div className="h-[300px] md:h-[550px] px-4 md:px-0 max-w-full w-[1020px] md:bg-blue-50 mx-auto z-30 -mt-[120px] md:-mt-[100px] relative rounded-2xl shadow-md outline outline-1 outline-gray-300/20 overflow-hidden">
<div className="h-[300px] md:h-[550px] px-4 md:px-0 max-w-full w-[1020px] md:bg-blue-50 mx-auto z-30 -mt-[120px] md:-mt-[100px] relative md:rounded-2xl md:shadow-md md:outline md:outline-1 outline-gray-300/20 overflow-hidden">
<div className="animate-pulse z-10 absolute top-0 left-0 duration-50 h-[300px] md:h-[550px] w-[1020px] md:bg-gray-100 mx-auto z-30 rounded-2xl"/>
<Image key={image} width={1020} height={550} loader={gumletLoader} className="h-full z-20 relative h-[300px] md:h-[550px] w-full object-cover rounded-2xl max-w-[1020px] mx-auto" src={image}/>
</div>
Expand All @@ -223,7 +223,7 @@ const date = post.attributes.date

<Link href={`/people/${author.slug}`}>
<div className="cursor-pointer block">
<div className="flex items-center justify-between">
<div className="flex items-center justify-between mr-1">
{avatar && (
<Image
key={authorName}
Expand All @@ -232,13 +232,13 @@ const date = post.attributes.date
}${avatar}`}
width={64}
height={64}
className="rounded-full object-cover w-[64px] h-[64px] mr-4"
className="rounded-full object-cover w-[44px] h-[44px] md:w-[64px] md:h-[64px] mr-2 md:mr-4"
alt={authorName}
loader={gumletLoader}
/>
)}
<div className="flex flex-col justify-center">
<div className="text-lg mb-0 pb-0 hover:underline font-medium">By {authorName}</div>
<div className="text-base md:text-lg mb-0 pb-0 hover:underline font-medium">By {authorName}</div>
{/* {date && (
<div className="text-base text-black/80">
Published <Date dateString={date} />
Expand Down Expand Up @@ -285,7 +285,7 @@ const date = post.attributes.date
<div className="z-0 -mt-4 h-[60%] w-full bg-gradient-to-b from-blue-100/60 to-gray-100/20 absolute top-0 left-0"/>

</div>
<article className="z-10 relative px-3 md:px-0">
<article className="z-10 relative px-6 md:px-0">
{/* <Head> */}
{/* <title>
{post.attributes?.title} | Prototypr
Expand Down
2 changes: 1 addition & 1 deletion pages/posts/[tag]/page/[pageNo].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export default function PostsPage({
{/* <img src="/static/images/angleshape.svg" className="absolute -mb-[2%] w-full bottom-0 z-40 left-0"/> */}

{/* <div className="z-20 relative"> */}
<div className="w-full p-6 pt-0 z-10 relative max-w-[1320px] px-3 mx-auto backdrop-blur-sm backdrop-opacity-20 w-full h-full">
<div className="w-full p-6 pt-0 z-10 relative max-w-[1320px] px-6 md:px-3 mx-auto backdrop-blur-sm backdrop-opacity-20 w-full h-full">
<BreadCrumbs background={false}tagName={tagName}/>
<div className="inline-flex my-4">
{/* <div className="p w-8 h-8 my-auto mr-3 rounded-full border-gray-300 bg-white"> */}
Expand Down
8 changes: 4 additions & 4 deletions pages/toolbox/[slug].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => {
<Container maxWidth="w-full bg-[#fefefe] relative z-10 pt-8">
<div className="max-w-[1320px] mx-auto grid grid-cols-12 gap-6 xl:gap-0 md:px-0 h-full">
<div className="col-span-12 lg:col-span-12">
<div className={`${gallery?.length?'-mt-[125px] mt-8 mb-6 pl-3 md:pl-0 rounded-xl':''} `}>
<div className={`${gallery?.length?'-mt-[125px] mt-8 mb-6 md:pl-0 rounded-xl':''} `}>
{/* <h3 class="text-lg font-bold">Gallery</h3> */}
{/* {post?.attributes && (
<PopupGallery
Expand All @@ -184,7 +184,7 @@ const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => {
)} */}
{gallery?.length ? <Carousel gallery={gallery}/>:''}
</div>
<div className="max-w-[1100px] mx-auto px-6 w-full">
<div className="max-w-[1100px] mx-auto w-full">
<div className="max-w-[900px] mx-auto">
<h2 class="text-2xl font-medium mb-8">Overview</h2>
<div
Expand Down Expand Up @@ -247,7 +247,7 @@ const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => {
<Container maxWidth=" w-full pb-24 bg-gradient-to-tr from-[#fefefe] to-sky-100/20 relative z-10">
{/* <img src="/static/images/bendy9.svg" className="absolute top-0 -mt-[2.9%] z-10 left-0 w-full gm-added gm-observing gm-observing-cb" loading="lazy"/> */}
{relatedPosts?.length ?
<div className="z-30 relative max-w-[1320px] mx-auto px-6 md:px-3">
<div className="z-30 relative max-w-[1320px] mx-auto md:px-3">
<img src="/static/images/toolbox/squares2.svg" className="w-full h-[128%] absolute object-cover opacity-20"/>
<div classsName="flex flex-col px-3 z-30">
<h3 className="text-2xl pt-12 mb-6 text-black/90 font-medium font-inter max-w-md">
Expand All @@ -261,7 +261,7 @@ const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => {
:null }
</Container>
<Container maxWidth="w-full pb-16 bg-[#fefefe] relative z-10 pt-0">
<div className="max-w-[1320px] pt-0 -mt-8 mb-8 mx-auto px-3 h-full">
<div className="max-w-[1320px] pt-0 -mt-8 mb-8 mx-auto h-full">
<div className="mb-20">
<NewsletterSection padding={false} title="Get the best tools every week"/>
</div>
Expand Down

0 comments on commit fab805c

Please sign in to comment.