Remove footers, install font
This commit is contained in:
parent
9f0e1edc88
commit
e5aa80e123
|
|
@ -4,7 +4,8 @@
|
|||
|
||||
body {
|
||||
line-height: 1.6;
|
||||
font-size: 1.125rem;
|
||||
font-size: 1.25rem;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
color: #333;
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
|
|
|
|||
44
src/Grid.css
44
src/Grid.css
|
|
@ -1,11 +1,10 @@
|
|||
.grid-container {
|
||||
background: #bad4ff;
|
||||
text-align: center;
|
||||
max-width: 120rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
//background: linear-gradient(135deg, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
|
||||
position: relative;
|
||||
|
||||
float: left;
|
||||
|
|
@ -29,19 +28,21 @@
|
|||
}
|
||||
|
||||
.menu .logo {
|
||||
background-color: #E9E9E9;
|
||||
object-fit: contain;
|
||||
padding-top: 1em;
|
||||
min-height: 5rem;
|
||||
}
|
||||
|
||||
.menu section {
|
||||
background-color: #E9E9E9;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.menu section aside {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -52,13 +53,18 @@
|
|||
padding: 2rem;
|
||||
}
|
||||
|
||||
.menu footer {
|
||||
background-color: #E9E9E9;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.project {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.project header {
|
||||
font-size: 2.25rem;
|
||||
font-size: 2rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
|
|
@ -74,7 +80,7 @@
|
|||
|
||||
.project.left section p {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
|
|
@ -94,21 +100,13 @@
|
|||
padding: 1rem;
|
||||
}
|
||||
|
||||
.project footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 1em;
|
||||
font-size: 1rem;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.photo a {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.photo header, .photo footer {
|
||||
.photo header {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -124,22 +122,10 @@
|
|||
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%;
|
||||
|
|
@ -179,13 +165,13 @@
|
|||
padding-bottom: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.menu {
|
||||
background-color: #E9E9E9;
|
||||
}
|
||||
.grid-item-content.photo {
|
||||
padding: 0;
|
||||
}
|
||||
.photo a header {
|
||||
display: block;
|
||||
}
|
||||
.photo a footer {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
24
src/Grid.js
24
src/Grid.js
|
|
@ -47,17 +47,11 @@ class Grid extends React.Component {
|
|||
<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>
|
||||
</section>
|
||||
<footer>
|
||||
<p>Project (Hardware)</p><p>2018-10-11</p>
|
||||
</footer>
|
||||
</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'>
|
||||
|
|
@ -66,9 +60,6 @@ class Grid extends React.Component {
|
|||
<img src={switch1} alt='' />
|
||||
<p>Custom circuit that lets me control a ceiling light over Wifi.</p>
|
||||
</section>
|
||||
<footer>
|
||||
<p>Project (Hardware)</p><p>2018-10-11</p>
|
||||
</footer>
|
||||
</GridItem>
|
||||
<GridItem type='project bottom'>
|
||||
<header>Plant Waterer</header>
|
||||
|
|
@ -76,26 +67,17 @@ class Grid extends React.Component {
|
|||
<img src={pump1} alt='' />
|
||||
<p>Controller that waters my plant automatically every day.</p>
|
||||
</section>
|
||||
<footer>
|
||||
<p>Project (Hardware)</p><p>2018-10-11</p>
|
||||
</footer>
|
||||
</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'>
|
||||
|
|
@ -104,17 +86,11 @@ class Grid extends React.Component {
|
|||
<img src={hand1} alt='' />
|
||||
<p>Sculpture welded together out of scrap metal for practice.</p>
|
||||
</section>
|
||||
<footer>
|
||||
<p>Project (Hardware)</p><p>2018-10-11</p>
|
||||
</footer>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
.Home {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -30,6 +30,7 @@ server
|
|||
<title>Tanner Collin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="reset.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
|
||||
${
|
||||
assets.client.css
|
||||
? `<link rel="stylesheet" href="${assets.client.css}">`
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user