Skip to content

Commit

Permalink
Added Fade In to Blogs Cover Poster, Some Fixes (#89)
Browse files Browse the repository at this point in the history 
IDK
  • Loading branch information
@deveshsawant05
deveshsawant05 authored Aug 11, 2024
1 parent e51724a commit 5b74f67
Show file tree
Hide file tree
Showing 12 changed files with 90 additions and 55 deletions.
Binary file removed public/cc-logo.png
View file
Binary file not shown.
12 changes: 12 additions & 0 deletions public/dot-logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions public/iiitv-logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/app/blogs/components/blogCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export default function BlogCard(props) {
</Link>
<div className={`blogs-data ${montserratFont.className}`}>
<hr />
<div className="flex items-center justify-between mt-2">
<div className="flex items-center justify-between gap-2 mt-2">
<div className="flex items-center gap-2 ml-4">
<Avatar className="h-8 w-8">
<AvatarImage src="/placeholder-user.jpg" />
Expand Down
8 changes: 6 additions & 2 deletions src/app/blogs/components/blogCoverPoster.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,12 @@ import Image from 'next/image';
export default function Blogs() {
const blogCoverImage = "/blog_cover_poster.png";
return(
<div className='lg:100vh w-full'>
<img src={blogCoverImage} className='lg:100vh w-full' alt="Blog cover poster" />
<div className='w-full'>
<img src={blogCoverImage}
style={
{animation: "pulse-poster 0.5s cubic-bezier(0.4, 0, 0.6, 1) 1"}
}
className='w-full' alt="Blog cover poster" />
</div>
)
}
11 changes: 0 additions & 11 deletions src/app/blogs/components/comment.jsx
View file

This file was deleted.

4 changes: 2 additions & 2 deletions src/app/blogs/page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,8 +82,8 @@ export default function Blogs() {

return (
<>
<div className='flex flex-col items-center'>
<BlogPosterCover />
<div className='flex flex-col items-center '>
<BlogPosterCover/>
<div className="blogs-search-div">
<input type="text" value={searchInputValue} className={`${montserratFont.className} blogs-search-input`}
placeholder='Search...'
Expand Down
12 changes: 7 additions & 5 deletions src/components/footer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ function Footer() {
<hr className="col-span-1 lg:col-span-12 footer-divider-1"/>
<div className="col-span-1 lg:col-span-4">
<div className="footer-cc-logo">
<Image className="footer-cc-logo-img " src="/cc-logo.png" width={512} height={512} alt="IIITV Logo"/>
<Image className="footer-cc-logo-img " src="/iiitv-logo.svg" width={512} height={512} alt="IIITV Logo"/>
<div>
<p className="footer-cc-logo-title">Coding Club</p>
<p className="footer-cc-logo-subtitle">Community</p>
Expand Down Expand Up @@ -80,16 +80,18 @@ function Footer() {
<div className={`${montserratFont.className} footer-container-2`}>
<div className="footer-dot-container">
<p>Designed by DOT</p>
<div className="dot-icon">
<div /><div /><div /><div /><div /><div /><div /><div /><div />
</div>
<Image
className="dot-logo"
src="/dot-logo.svg"
alt="IIITV Logo" width={512} height={512}
/>
</div>
<hr className="footer-container-2-divider"></hr>
<div className="footer-cc-container">
<p>Developed by Coding Club</p>
<Image
className="footer-cc-logo-img-2"
src="/cc-logo.png"
src="/iiitv-logo.svg"
alt="IIITV Logo" width={512} height={512}
/>
</div>
Expand Down
17 changes: 10 additions & 7 deletions src/components/navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ import React, { use, useState } from "react";
import "@/styles/navbar.css";
import Link from "next/link";
import Image from "next/image";
import { Noto_Sans } from "next/font/google";

const notoSansFont = Noto_Sans({ weight: ["300","400"], subsets: ["latin"] });

function Navbar() {
const [hiddenMenu,setHiddenMenu] = useState(true);
Expand All @@ -11,28 +14,28 @@ function Navbar() {
}

const eventsLink = "/events";
const projectsLink = "/projects";
const blogsLink = "/blogs";
const membersLink = "/members";
const contactUsLink = "/contact_us";

return (
<>
<div id="pseudo"></div>
<div className="navbar">
<Link href="/" className="logo-container" prefetch={false}>
<Image className="logo-img" src="/cc-logo.png" alt="IIITV Logo" height={512} width={512}/>
<Link href="/" className={`logo-container ${notoSansFont.className}`} prefetch={false}>
<Image className="logo-img" src="/iiitv-logo.svg" alt="IIITV Logo" height={512} width={512}/>
<div className="logo-title-container">
<p className="logo-title">Coding Club</p>
<p className="logo-subtitle">Community</p>
</div>
</Link>
<div className="menu-container">
<div className={`menu-container ${notoSansFont.className}`}>
<Link href={eventsLink} className="text-primary" prefetch={false}>Events</Link>
<Link href={projectsLink} className="text-primary" prefetch={false} >Projects</Link>
<Link href={blogsLink} className="text-primary" prefetch={false} >Blogs</Link>
<Link href={membersLink} className="text-primary" prefetch={false}>Members</Link>
<Link href={contactUsLink} className="text-primary" prefetch={false}>Contact Us</Link>
</div>
<div className="mobile-menu">
<div className={`mobile-menu ${notoSansFont.className}`}>
<div className="menu-icon">
<input type="checkbox" id="hi" hidden onChange={MenuToggle} value={!hiddenMenu} />
<label className="menu" htmlFor="hi">
Expand All @@ -46,7 +49,7 @@ function Navbar() {
<div className="mobile-menu-container" style={{display : (hiddenMenu ? "none" : "") }}>
<div className="mobile-menu-container2">
<p><Link href={eventsLink} className="text-primary" prefetch={false}>Events </Link></p>
<p><Link href={projectsLink} className="text-primary" prefetch={false}>Projects </Link></p>
<p><Link href={blogsLink} className="text-primary" prefetch={false}>Blogs </Link></p>
<p><Link href={membersLink} className="text-primary" prefetch={false}>Members </Link></p>
<p><Link href={contactUsLink} className="text-primary" prefetch={false}>Contact Us </Link></p>
</div>
Expand Down
20 changes: 13 additions & 7 deletions src/styles/blogs.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@

@keyframes pulse-poster{
0% {
filter: saturate(0%) brightness(0%);
}
100%{
filter: saturate(100%) brightness(100%);
}
}
.blogs-div{
width: 100%;
display: flex;
Expand All @@ -8,7 +15,6 @@
.blogs-container{
width: 95%;
}

.blogs-search-div{
position: relative;
width: max-content;
Expand Down Expand Up @@ -119,11 +125,12 @@
.show-more-button{

box-sizing: border-box;
width: 400px;
height: 60px;
width: 300px;
height: 45px;

background-color : color-mix(in srgb, var(--primary) 10%, transparent);
box-shadow: #291f24 1px 1px 15px;
background-color : color-mix(in srgb, var(--primary) 5%, transparent);
box-shadow: color-mix(in srgb, #fff 5%, transparent) 1px 1px 15px;
border: solid color-mix(in srgb, var(--primary) 20%, transparent) 1px;
border-radius: 43px;

transition: 0.5s;
Expand All @@ -147,6 +154,5 @@

box-sizing: border-box;
width: 200px;
height: 50px;
}
}
40 changes: 25 additions & 15 deletions src/styles/footer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
}
.footer-divider-1{
width: 90%;
height: 2.5px;
height: 1px;
border: none;
background-color: #A49D9D;
background-color: var(--muted-foreground);
justify-self: center;
box-shadow: 0px 3.34204px 3.34204px rgba(0, 0, 0, 0.25);
margin: 25px 0;
Expand Down Expand Up @@ -39,7 +39,6 @@
align-self: flex-end;
font-weight: 100;
font-size: 16px;
color: #E9E9E9;
margin: 0 3px;
}

Expand Down Expand Up @@ -108,7 +107,8 @@
font-weight: 300;
justify-content: center;
align-items: center;
background: linear-gradient(90deg, #201F31 27.6%, #282739 50.91%, #201F31 72.19%);
background-color: var(--background);
background: linear-gradient(90deg, var(--background) 27.6%, color-mix(in srgb, var(--muted-foreground) 10%, transparent) 50.91%, var(--background) 72.19%);

margin-top: 50px;
}
Expand All @@ -129,15 +129,9 @@
gap: 5px;
}

.dot-icon{
display: grid;
grid-template-columns: repeat(3,6px);
grid-template-rows: repeat(3,6px);
gap: 2.5px;
}
.dot-icon>*{
background-color: #E9E9E9;
border-radius: 100%;
.dot-logo{
height: 25px;
width: 25px;
}
.footer-cc-logo-img-2{
height: 35px;
Expand Down Expand Up @@ -231,11 +225,17 @@
transition: 0.5s ease;
transform: scale(1.0);
}

.footer-container-2>*{
font-size: 16px;
}
}

/* Footer Container 2 Divider Responsiveness */
@media screen and (max-width : 580px){
@media screen and (max-width : 478px){
.footer-container-2{
flex-direction: column;
padding-top: 5px;
}
.footer-container-2-divider{
width: 60%;
height: 2px;
Expand All @@ -247,5 +247,15 @@
.footer-container-2>div>p{
text-align: center;
}
.footer-container-2>div{
margin: 0;
padding: 0;
}
.footer-cc-logo-img-2{
height: 25px;
}
.dot-logo{
height: 20px;
}

}
7 changes: 2 additions & 5 deletions src/styles/navbar.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital@0;1&display=swap');

#pseudo{
width: 100%;
height: 65px;
Expand Down Expand Up @@ -49,7 +47,6 @@
gap: 0px;
}
.logo-title{
font-family: "Noto Sans", sans-serif;
font-size: 30px;
letter-spacing: -0.05em;
line-height: 0.9;
Expand All @@ -65,7 +62,6 @@
display: flex;
justify-content: space-evenly;
gap: 50px;
font-family: "Noto Sans", sans-serif;
font-size: 18px;
}

Expand All @@ -78,7 +74,8 @@
right: 10px;
width: 200px;
height: 250px;
background: var(--secondary);
background-color : color-mix(in srgb, var(--background)80%, transparent);
backdrop-filter: blur(10px);
box-shadow: 5px 5px 4.5px rgba(0, 0, 0, 0.25);
border: #ffbade solid 1px;
border-radius: 10px;
Expand Down

1 comment on commit 5b74f67

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for iiitvcc ready!

✅ Preview
https://iiitvcc-b66hhm0bh-iiitv-coding-clubs-projects.vercel.app

Built with commit 5b74f67.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.