tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Tben 2022-03-26 20:38:02 +01:00
parent dd95ee9e9e
commit 213293b9f4
2 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/PortfolioEntry.jsx
View File

@ -36,16 +36,8 @@ export default function PortfolioEntry({ title, description, url, image }) {
return ( return (
<div className="portfolio-entry-block"> <div className="portfolio-entry-block">
<h2 style={ { marginTop: "0" } }><TextShuffler textInput={ title } /></h2> <h2 style={ { marginTop: "0" } }><TextShuffler textInput={ title } /></h2>
<div style={ { <div className="portfolio-image-wrapper">
width: "100%", <img src={ image } alt="" className="portfolio-image" />
height: "300px",
marginBottom: "15px"
} }>
<img src={ image } alt="" style={ {
width: "100%",
height: "100%",
objectFit: "cover"
} } />
</div> </div>
<span> <span>
<TextShuffler textInput={ description } /> <TextShuffler textInput={ description } />

36
styles/main.css
View File

@ -260,14 +260,6 @@ nav a:hover {
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.3);
padding: 20px; padding: 20px;
} }
.portfolio-entry-block img {
width: 100%;
height: 300px;
object-fit: contain;
object-position: left top;
margin-bottom: 20px;
}
/*############################################# -- Contact Forms */ /*############################################# -- Contact Forms */
form { form {
margin-top: 40px; margin-top: 40px;
@ -320,6 +312,23 @@ textarea {
margin-bottom: 3px; margin-bottom: 3px;
} }
.portfolio-image-wrapper {
width: 100%;
height: 300px;
margin-bottom: 15px;
overflow: hidden;
}
.portfolio-image {
width: 100%;
height: 100%;
object-fit: cover;
width: 100%;
height: 300px;
object-position: left top;
margin-bottom: 20px;
}
/* ############################################################################################### /* ###############################################################################################
################################################################################################## ##################################################################################################
################################################################################################## ##################################################################################################
@ -360,9 +369,14 @@ textarea {
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.portfolio-entry-block img { .portfolio-image-wrapper {
object-fit: cover; height: auto;
height: 200px; }
.portfolio-image {
object-fit: contain;
height: auto;
margin: 0;
} }
} }