Fix images in Chrome

This commit is contained in:
Tanner Collin 2018-07-28 15:03:23 -06:00
parent 2ce4389ce7
commit 313c337b52
2 changed files with 27 additions and 21 deletions

View File

@ -29,23 +29,26 @@
} }
.menu .logo { .menu .logo {
width: 100%; object-fit: contain;
padding: 1rem 5rem 0; padding-top: 1em;
min-height: 5rem;
} }
.menu section { .menu section {
display: flex;
min-height: 0; min-height: 0;
flex: 1;
} }
.menu aside { .menu section aside {
flex: 1; position: relative;
align-self: center; top: 50%;
transform: translateY(-50%);
text-align: right; text-align: right;
} }
.menu .mug { .menu section img {
height: 100%; height: 100%;
float: right;
padding: 2rem; padding: 2rem;
} }
@ -62,27 +65,22 @@
.project section { .project section {
min-height: 0; min-height: 0;
flex: 1; flex: 1;
display: flex;
}
.project footer {
display: flex;
justify-content: space-between;
margin: 0 1em;
font-size: 1rem;
font-family: monospace;
} }
.project.bottom section { .project.bottom section {
flex-flow: column; flex-flow: column;
display: flex;
} }
.project.left section p { .project.left section p {
align-self: center; position: relative;
top: 50%;
transform: translateY(-50%);
} }
.project.left section img { .project.left section img {
height: 100%; height: 100%;
float: right;
padding: 1rem; padding: 1rem;
} }
@ -96,6 +94,14 @@
padding: 1rem; padding: 1rem;
} }
.project footer {
display: flex;
justify-content: space-between;
margin: 0 1em;
font-size: 1rem;
font-family: monospace;
}
@media all and (max-width: 120rem) { @media all and (max-width: 120rem) {
.grid-item { .grid-item {
width: 25%; width: 25%;

View File

@ -22,8 +22,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 logo' /> <img src={logo} className='logo' alt='Tanner Collin signature' />
<section> <section>
<img src={tanner} alt='Tanner' />
<aside> <aside>
<p>Home</p> <p>Home</p>
<p>Projects</p> <p>Projects</p>
@ -32,15 +33,14 @@ class Grid extends React.Component {
<p>About</p> <p>About</p>
<p>Contact</p> <p>Contact</p>
</aside> </aside>
<img src={tanner} className='mug' alt='Picture of Tanner' />
</section> </section>
<footer>More info or a .onion link.</footer> <footer>More info or a .onion link.</footer>
</GridItem> </GridItem>
<GridItem type='project left'> <GridItem type='project left'>
<header>LED Dress</header> <header>LED Dress</header>
<section> <section>
<p>A dress lit up with LEDs that act as twinkling stars. Seven act as The Big Dipper, and the rest twinkle randomly.</p>
<img src={dress1} alt='LED Dress thumbnail' /> <img src={dress1} alt='LED Dress thumbnail' />
<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>
@ -72,8 +72,8 @@ class Grid extends React.Component {
<GridItem type='project left'> <GridItem type='project left'>
<header>Hand of Ozymandias</header> <header>Hand of Ozymandias</header>
<section> <section>
<p>Sculpture welded together out of scrap metal for practice.</p>
<img src={hand1} alt='Metal Hand thumbnail' /> <img src={hand1} alt='Metal Hand thumbnail' />
<p>Sculpture welded together out of scrap metal for practice.</p>
</section> </section>
<footer> <footer>
<p>Project (Hardware)</p> <p>Project (Hardware)</p>