Commit b396bf8b authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Update feature images so they line up. Start fixing feature layout

parent f54b5311
{{ define "main" }}
<main id="content">
<!-- begin dirty -->
<img src='images/aral-speaking-2.png' class='tincan-mock tincan-mock-aral'>
<img src='images/laura-listening-2.png' class='tincan-mock tincan-mock-laura'>
<!-- end dirty -->
<div class="feature">
<h1><span class='title-small-tech'>Small Technology</span> <span class='title-foundation'>Foundation</span></h1>
</div>
......
This image diff could not be displayed because it is too large. You can view the blob instead.
This image diff could not be displayed because it is too large. You can view the blob instead.
......@@ -313,26 +313,46 @@ main * {
grid-column: 1 / 20; /* full width */
display: grid;
grid-template-columns: var(--grid-columns-main);
padding: 4.33em 0;
}
.home .feature {
padding: 2.33em 0 4.33em;
padding: 0.5em 0 4.33em;
position: relative; /* enable positioning on pseudo selectors */
}
.home .feature:before, .home .feature:after {
content: "";
display: block;
height: 14.5em;
margin-top: -1em;
width: 150%;
}
.home .feature:before {
background: url('/images/aral-speaking-2.png') center right no-repeat;
background-size: 100%;
grid-column: 1 / 4;
}
.home .feature:after {
background: url('/images/laura-listening-2.png') center right no-repeat;
background-size: 100%;
grid-column: 17 / 20;
}
.feature h1 {
color: #422D50;
display: block;
grid-column: 2 / 19; /* centred */
grid-column: 4 / 17; /* centred */
margin: 0;
}
.feature .title-small-tech {
background: url('/images/small-technology.png') top center no-repeat; /* 785 x 140px = 5.607142857 / 1 */
background-size: 11.7747em 2.1em; /* width height (uses ratio from image above) */
background: url('/images/small-technology.png') bottom center no-repeat; /* 785 x 140px = 5.607142857 / 1 */
background-size: 100%;
display: block;
height: 0;
padding: 2.1em 0 0 0;
padding: 1.6em 0 0 0;
overflow: hidden; /* hide text, only show image */
width: 100%;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment