Verified Commit ed3ba7e7 authored by Aral Balkan's avatar Aral Balkan
Browse files

Quick test of using a single image for the header

parent ef23846d
......@@ -2,7 +2,8 @@
<main id="content">
<div class="feature">
<h1><span class='title-small-tech'>Small Technology</span> <span class='title-foundation'>Foundation</span></h1>
<img class='header-image' src='images/index-header.jpeg'>
<!-- <h1><span class='title-small-tech'>Small Technology</span> <span class='title-foundation'>Foundation</span></h1> -->
</div>
{{ .Content }}
......
......@@ -311,13 +311,14 @@ main * {
}
.feature {
background: #D2D8ED;
/* background: #D2D8ED; */
grid-column: 1 / 20; /* full width */
display: grid;
grid-template-columns: var(--grid-columns-main);
grid-template-rows: 1em auto auto 1em;
padding-bottom: 6em; /* make space for image */
/* grid-template-rows: 1em auto auto 1em; */
/* padding-bottom: 6em; make space for image */
z-index: 1; /* put behind subtitle */
margin-top: -3rem;
}
.home .feature {
......@@ -329,11 +330,10 @@ main * {
content: "";
display: block;
grid-row: 1 / 6;
margin-top: -2em; /* pull Aral's head above feature box */
object-fit: cover;
}
.home .feature:before {
/* .home .feature:before {
background: url('/images/aral-speaking-2.png') center right no-repeat;
background-size: 100%;
grid-column: 1 / 4;
......@@ -343,43 +343,31 @@ main * {
background: url('/images/laura-listening-2.png') center left no-repeat;
background-size: 100%;
grid-column: 17 / 20;
}
.feature h1 {
color: #422D50;
display: block;
grid-column: 3 / 18; /* centred */
grid-row: 2 / 4;
margin: 1em 0 1em 0; /* margin provides space for subtitle below to fill */
}
} */
.feature .title-small-tech {
background: url('/images/small-technology.png') bottom center no-repeat; /* 785 x 140px = 5.607142857 / 1 */
background-size: 100%;
display: block;
height: 0;
padding: 1.8em 0 0 0; /* top padding is height of image */
overflow: hidden; /* hide text, only show image */
.header-image {
grid-column: 1/20;
width: 100%;
}
.feature .title-foundation {
display: block;
text-align: center;
}
.subtitle {
background: #E9EEFB;
background: #76BCC7;
grid-column: 2 / 19; /* centred */
display: grid;
grid-template-columns: var(--grid-columns-17-cols);
margin: -2em 0 1.5em 0;
margin: 1em 0 1.5em 0;
padding: 1.5em 0;
z-index: 2; /* pull in front of feature */
}
.subtitle p {
color: #422D50;
color: #154652;
grid-column: 2 / 17; /* centred on subgrid */
margin-bottom: 0;
}
......
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