Skip to content

Commit

Permalink
Made gallery look nicer
Browse files Browse the repository at this point in the history
  • Loading branch information
VulpoTheDev committed Sep 26, 2022
1 parent 267244f commit 0d057a4
Show file tree
Hide file tree
Showing 5 changed files with 38 additions and 14 deletions.
19 changes: 11 additions & 8 deletions src/components/ArtCarousel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,18 @@ interface IArtCarouselProps {

const ArtCarousel = ({ title, images = [] }: IArtCarouselProps) => {
return (
<div id={styles["carousel-container"]}>
<div id={styles["carousel-comp"]}>
<h2>{title}</h2>
<div id={styles["carousel"]}>
<Artwork image={"/images/examples/ozzy/1.jpg"} />
<Artwork image={"/images/examples/ozzy/2.png"} />
<Artwork image={"/images/examples/ozzy/3.png"} />
<Artwork image={"/images/examples/ozzy/4.png"} />
<Artwork image={"/images/examples/ozzy/5.png"} />
<Artwork image={"/images/examples/ozzy/6.png"} />
<div id={styles["carousel-container"]}>
<div id={styles["carousel"]}>
<Artwork image={"/images/examples/ozzy/1.jpg"} />
<Artwork image={"/images/examples/ozzy/2.png"} />
<Artwork image={"/images/examples/ozzy/3.png"} />
<Artwork image={"/images/examples/ozzy/4.png"} />
<Artwork image={"/images/examples/ozzy/5.png"} />
<Artwork image={"/images/examples/ozzy/6.png"} />
<Artwork image={"/images/examples/ozzy/6.png"} />
</div>
</div>
</div>
)
Expand Down
2 changes: 1 addition & 1 deletion src/components/Artwork.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function Artwork({ image }) {
// TODO: Make a Popup modal of the image
return (
<div id={styles["artwork"]}>
<img src={image} />
<img src={image} alt={"Artwork"} />
</div>
)
}
14 changes: 11 additions & 3 deletions src/styles/ArtCarousel.module.scss
Original file line number Diff line number Diff line change
@@ -1,16 +1,24 @@
@use "partials/mixins" as *;

#carousel-comp {
padding-top: 25px;
#carousel-container {
display: flex;
flex-direction: column;
padding: 25px 0 100px 0;
flex-direction: row;
justify-content: left;
width: 100%;
h2 {
font-size: 2rem;
}
#carousel {
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex-direction: row;
// Two rows per page
overflow-x: hidden;



}
}
}
13 changes: 12 additions & 1 deletion src/styles/Artworks.module.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
#artwork {
transform: scale(0.2);
margin: 0.5rem 1rem 0.5rem 0;
img {
height: 250px;
width: 100%;
object-fit: cover;
border-radius: 7px;
transition: transform 0.2s ease-in-out;
&:hover {
cursor: pointer;
transform: scale(1.05);
}
}
}
4 changes: 3 additions & 1 deletion src/styles/User.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -47,16 +47,18 @@
row-gap: 0.2rem;
h1 {
font-weight: 900;
font-size: 2.5rem;
// font-size: 1.2rem;
}

h2 {
font-size: 24px;
margin: 10px 0;
}

p {
font-weight: 600;
font-size: 20px;
font-size: 1.2rem;
}
}

Expand Down

0 comments on commit 0d057a4

Please sign in to comment.