48 lines
776 B
CSS
48 lines
776 B
CSS
#projects {
|
|
header {
|
|
height: 300px;
|
|
}
|
|
.projects_grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, auto));
|
|
grid-gap: 20px;
|
|
figure {
|
|
figcaption {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
article {
|
|
display: grid;
|
|
grid-gap: 20px;
|
|
margin-top: 100px;
|
|
/*
|
|
* trying to create a responsive design, but still some bugs
|
|
* so for now stick to mobile first
|
|
*
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
*/
|
|
grid-template-columns: auto;
|
|
p {
|
|
grid-column: 1 / span 2;
|
|
grid-column: 1;
|
|
}
|
|
img:first-of-type {
|
|
grid-column: 1;
|
|
}
|
|
img {
|
|
width: 600px;
|
|
/*
|
|
min-width: 300px;
|
|
width: 100%;
|
|
max-height: 500px;
|
|
max-width: 500px;
|
|
margin: 0px auto;
|
|
*/
|
|
}
|
|
}
|
|
.mouse {
|
|
margin-top: 100px;
|
|
}
|
|
}
|