Create photo grid items

This commit is contained in:
Tanner Collin 2018-07-28 20:45:29 -06:00
parent 313c337b52
commit 9f0e1edc88
6 changed files with 105 additions and 14 deletions

View File

@ -102,6 +102,50 @@
font-family: monospace; font-family: monospace;
} }
.photo a {
display: block;
position: relative;
height: 100%;
}
.photo header, .photo footer {
display: none;
position: absolute;
width: 100%;
z-index: 2;
background: rgba(0, 0, 0, 0.4);
color: white;
}
.photo header {
top: 0;
font-size: 1.5rem;
padding: 0.5rem;
}
.photo footer {
bottom: 0;
justify-content: space-between;
padding: 0 1em;
font-size: 1rem;
font-family: monospace;
}
.photo a:hover header {
display: block;
}
.photo a:hover footer {
display: flex;
}
.photo img {
position: absolute;
height: 100%;
left: 0;
}
@media all and (max-width: 120rem) { @media all and (max-width: 120rem) {
.grid-item { .grid-item {
width: 25%; width: 25%;
@ -133,5 +177,15 @@
.grid-item { .grid-item {
width: 100%; width: 100%;
padding-bottom: 100%; padding-bottom: 100%;
margin-bottom: 1rem;
}
.grid-item-content.photo {
padding: 0;
}
.photo a header {
display: block;
}
.photo a footer {
display: flex;
} }
} }

View File

@ -10,6 +10,11 @@ import switch1 from './switch1.jpg';
import pump1 from './pump1.jpg'; import pump1 from './pump1.jpg';
import hand1 from './hand1.jpg'; import hand1 from './hand1.jpg';
import banff1 from './banff1.jpg';
import bee1 from './bee1.jpg';
import canmore1 from './canmore1.jpg';
import carshow1 from './carshow1.jpg';
//function importAll(r) { //function importAll(r) {
// return r.keys().map(x => r(x)); // return r.keys().map(x => r(x));
//} //}
@ -22,9 +27,9 @@ class Grid extends React.Component {
return ( return (
<div className='grid-container'> <div className='grid-container'>
<GridItem type='menu'> <GridItem type='menu'>
<img src={logo} className='logo' alt='Tanner Collin signature' /> <img src={logo} className='logo' alt='' />
<section> <section>
<img src={tanner} alt='Tanner' /> <img src={tanner} alt='' />
<aside> <aside>
<p>Home</p> <p>Home</p>
<p>Projects</p> <p>Projects</p>
@ -39,47 +44,79 @@ class Grid extends React.Component {
<GridItem type='project left'> <GridItem type='project left'>
<header>LED Dress</header> <header>LED Dress</header>
<section> <section>
<img src={dress1} alt='LED Dress thumbnail' /> <img src={dress1} alt='' />
<p>A dress lit up with LEDs that act as twinkling stars. Seven act as The Big Dipper, and the rest twinkle randomly.</p> <p>A dress lit up with LEDs that act as twinkling stars. Seven act as The Big Dipper, and the rest twinkle randomly.</p>
</section> </section>
<footer> <footer>
<p>Project (Hardware)</p> <p>Project (Hardware)</p><p>2018-10-11</p>
<p>2018-10-11</p>
</footer> </footer>
</GridItem> </GridItem>
<GridItem type='photo'>
<a>
<header>Thorncliffe Car Show</header>
<img src={carshow1} alt='' />
<footer>
<p>Photography</p><p>2018-10-11</p>
</footer>
</a>
</GridItem>
<GridItem type='project bottom'> <GridItem type='project bottom'>
<header>Remote Control Lightswitch</header> <header>Remote Control Lightswitch</header>
<section> <section>
<img src={switch1} alt='Lightswitch thumbnail' /> <img src={switch1} alt='' />
<p>Custom circuit that lets me control a ceiling light over Wifi.</p> <p>Custom circuit that lets me control a ceiling light over Wifi.</p>
</section> </section>
<footer> <footer>
<p>Project (Hardware)</p> <p>Project (Hardware)</p><p>2018-10-11</p>
<p>2018-10-11</p>
</footer> </footer>
</GridItem> </GridItem>
<GridItem type='project bottom'> <GridItem type='project bottom'>
<header>Plant Waterer</header> <header>Plant Waterer</header>
<section> <section>
<img src={pump1} alt='Plant Waterer thumbnail' /> <img src={pump1} alt='' />
<p>Controller that waters my plant automatically every day.</p> <p>Controller that waters my plant automatically every day.</p>
</section> </section>
<footer> <footer>
<p>Project (Hardware)</p> <p>Project (Hardware)</p><p>2018-10-11</p>
<p>2018-10-11</p>
</footer> </footer>
</GridItem> </GridItem>
<GridItem type='photo'>
<a>
<header>Prince's Island Park</header>
<img src={bee1} alt='' />
<footer>
<p>Photography</p><p>2018-10-11</p>
</footer>
</a>
</GridItem>
<GridItem type='photo'>
<a>
<header>Johnston Creek, Banff</header>
<img src={banff1} alt='' />
<footer>
<p>Photography</p><p>2018-10-11</p>
</footer>
</a>
</GridItem>
<GridItem type='project left'> <GridItem type='project left'>
<header>Hand of Ozymandias</header> <header>Hand of Ozymandias</header>
<section> <section>
<img src={hand1} alt='Metal Hand thumbnail' /> <img src={hand1} alt='' />
<p>Sculpture welded together out of scrap metal for practice.</p> <p>Sculpture welded together out of scrap metal for practice.</p>
</section> </section>
<footer> <footer>
<p>Project (Hardware)</p> <p>Project (Hardware)</p><p>2018-10-11</p>
<p>2018-10-11</p>
</footer> </footer>
</GridItem> </GridItem>
<GridItem type='photo'>
<a>
<header>VW Van in Canmore</header>
<img src={canmore1} alt='' />
<footer>
<p>Photography</p><p>2018-10-11</p>
</footer>
</a>
</GridItem>
</div> </div>
); );
} }

BIN
src/banff1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 565 KiB

BIN
src/bee1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

BIN
src/canmore1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 301 KiB

BIN
src/carshow1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 371 KiB