Skip to content

Commit

Permalink
some changes
Browse files Browse the repository at this point in the history
  • Loading branch information
r-e-d-ant committed Jul 12, 2022
1 parent e5e71b8 commit 07e17ad
Show file tree
Hide file tree
Showing 7 changed files with 67 additions and 19 deletions.
44 changes: 44 additions & 0 deletions public/css/artInfo.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,13 @@

.bx-x {
cursor: pointer;
color: var(--second-clr);
position: fixed;
top: 0;
left: 0;
font-size: 2rem;
}

.artinfo-container {
position: fixed;
z-index: 3;
Expand All @@ -20,6 +29,7 @@
.img-div {
width: 50%;
place-self: center;
margin: 1rem 0;
}
@media screen and (min-width: 964px) {
.artinfo-container {
Expand Down Expand Up @@ -58,5 +68,39 @@
font-size: .7rem;
}

.art-title {
font-family: 'Carter One', sans-serif;
font-weight: 400;
font-size: 1.2rem;
}

.art-description {
font-family: 'Futura';
line-height: 1.6rem;
}

.share-btn {
cursor: pointer;
background-color: var(--second-clr);
border: 1px solid rgba(15, 33, 36, 0.2);
border-radius: 5px;
padding: .5rem 1rem;
margin-top: 2rem;
display: flex;
align-items: center;
}
.inShareBtn {
color: rgba(15, 33, 36, 0.691);
font-size: 1rem;
font-weight: 400;
}
.share-btn:hover {
border: 1px solid #0f2124;
}
.share-btn:hover > .inShareBtn {
color: #0f2124;
}

.bx-share-alt {
margin-right: .2rem;
}
19 changes: 10 additions & 9 deletions public/css/collectionsPage.css
Original file line number Diff line number Diff line change
Expand Up @@ -37,18 +37,19 @@
background-color: var(--second-clr);
border: 2px solid var(--border-clr);
}
.bx-search-alt-2 {
background-color: var(--primary-clr-alt);
color: var(--second-clr-alt);
font-size: 1.8rem;
}
.search-btn {
cursor: pointer;
background-color: var(--primary-clr-alt);
padding: 0 1rem;
display: grid;
place-content: center;
display: flex;
align-items: center;
justify-content: center;
transition: 250ms background;
}
.search-btn div {
.search-btn:hover {
background-color: var(--primary-clr);
}
.search-btn i {
color: var(--second-clr);
font-size: 1rem;
font-size: 2rem;
}
1 change: 1 addition & 0 deletions public/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,7 @@ a {
}

.art-image-container {
cursor: zoom-in;
position: relative;
margin-bottom: 1rem;
}
Expand Down
1 change: 1 addition & 0 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
content="Online site to see art gallery"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="%PUBLIC_URL%/css/style.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/header.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/homePage.css">
Expand Down
18 changes: 10 additions & 8 deletions src/components/ArtInfo.jsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@

import { Link } from "react-router-dom"

const ArtInfo = ({art}) => {
const ArtInfo = ({art, setArtInfo}) => {
return (
<>
<i className="bx bx-x" onClick={() => setArtInfo(false)}></i>
<div className="artinfo-container">
<div className="modal">
<div className="artist-info">
<div className="artist-info container">
<h3 className="art-author">{ art.author }</h3>
<h5 className="date-out">{ art.origin +", "+ art.dateOut }</h5>
</div>
<div className="img-div">
<img src={art.artImage} alt={ art.name }></img>
</div>
<h2 className="art-title">{ art.name }</h2>
<p className="art-description">{ art.description }</p>
<div className="actions-container">
<Link to="#">Share</Link>
<h2 className="art-title container">{ art.name }</h2>
<p className="art-description container">{ art.description }</p>
<div className="actions-container container">
<button className="share-btn">
<i className="bx bx-share-alt inShareBtn"></i>
<span className="inShareBtn">Share</span>
</button>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Collections.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const Collections = ({arts}) => {
</div>
))}
</div>
{artInfo && artData ? <ArtInfo art={artData} /> : null}
{artInfo && artData ? <ArtInfo art={artData} setArtInfo={setArtInfo} /> : null}
</>
);
}
Expand Down
1 change: 0 additions & 1 deletion src/routes/CollectionsPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ const CollectionsPage = () => {
<div className="form-control">
<input type="search" placeholder="Search by keyword, artist" className="search-input"></input>
<div className="icon-container search-btn">
<div>se</div>
<i className='bx bx-search-alt-2'></i>
</div>
</div>
Expand Down

0 comments on commit 07e17ad

Please sign in to comment.