Fixed Disappearing Scrolling Header

fixed-disappearing-scrolling-header.markdown

Fixed Disappearing Scrolling Header

Photo by eflon, licensed under Creative Commons. Full explanation on my blog next week.

A Pen by Dudley Storey on CodePen.

License.

index.html

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<header>
	<h1>Land <span>of the</span> Lost</h1>
	<img src="mountain-range-front.png">
</header>
<main>
  <p>From this point he marched two stages—ten parasangs—to the river Psarus, which is two hundred feet broad, and from the Psarus he marched a single stage—five parasangs—to Issi, the last city in Cilicia. It lies on the seaboard—a prosperous, large and flourishing town. Here they halted three days, and here Cyrus was joined by his fleet. There were thirty-five ships from Peloponnesus, with the Lacedaemonian admiral Pythagoras on board. These had been piloted from Ephesus by Tamos the Egyptian, who himself had another fleet of twenty-five ships belonging to Cyrus. These had formed Tamos's blockading squadron at Miletus, when that city sided with Tissaphernes; he had also used them in other military services rendered to Cyrus in his operations against that satrap. There was a third officer on board the fleet, the Lacedaemonian Cheirisophus, who had been sent for by Cyrus, and had brought with him seven hundred hoplites, over whom he was to act as general in the service of Cyrus. The fleet lay at anchor opposite Cyrus's tent. Here too another reinforcement presented itself. This was a body of four hundred hoplites, Hellenic mercenaries in the service of Abrocomas, who deserted him for Cyrus, and joined in the campaign against the king.</p>
  <p>From Issi, he marched a single stage—five parasangs—to the gates of Cilicia and Syria. This was a double fortress: the inner and nearer one, which protects Cilicia, was held by Syennesis and a garrison of Cilicians; the outer and further one, protecting Syria, was reported to be garrisoned by a body of the king's troops. Through the gap between the two fortresses flows a river named the Carsus, which is a hundred feet broad, and the whole space between was scarcely more than six hundred yards. To force a passage here would be impossible, so narrow was the pass itself, with the fortification walls stretching down to the sea, and precipitous rocks above; while both fortresses were furnished with gates. It was the existence of this pass which had induced Cyrus to send for the fleet, so as to enable him to lead a body of hoplites inside and outside the gates; and so to force a passage through the enemy, if he were guarding the Syrian gate, as he fully expected to find Abrocomas doing with a large army. This, however, Abrocomas had not done; but as soon as he learnt that Cyrus was in Cilicia, he had turned round and made his exit from Phoenicia, to join the king with an army amounting, as report said, to three hundred thousand men.</p>
  <p>From this point Cyrus pursued his march, through Syria a single stage—five parasangs—to Myriandus, a city inhabited by Phoenicians, on the sea-coast. This was a commercial port, and numerous merchant vessels were riding at anchor in the harbour. Here they halted seven days, and here Xenias the Arcadian general, and Pasion the Megarian got on board a trader, and having stowed away their most valuable effects, set sail for home; most people explained the act as the outcome of a fit of jealousy, because Cyrus had allowed Clearchus to retain their men, who had deserted to him, in hopes of returning to Hellas instead of marching against the king; when the two had so vanished, a rumour spread that Cyrus was after them with some ships of war, and some hoped the cowards might be caught, others pitied them, if that should be their fate.</p>
</main>

style.scss

@font-face {
		font-family: 'Sucrose Bold Two';
		src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/sucrose.woff2') format('woff2');
		}
@font-face {
    font-family: 'IM Fell French Canon Pro';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/im-fell-french-canon-pro.woff2') format('woff2');
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
header { 
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mountain-range.jpg);
	padding-top: 61.73333333%;
	background-repeat: no-repeat;
	background-size: cover;
  font-family: 'Sucrose Bold Two';
  overflow: hidden;
}
header img {
	position: absolute;
	top: 0;
	right: 0;
	width: 45.8%;
}
header h1 { 
	position: fixed;
	top: 2rem;
	right: 2rem;
  font-size: 12vw;
  line-height: .8;
  margin-top: 0;
  text-align: center;
}
header h1 span {
  display: block;
  font-size: 8.75vw;
}
main { 
  background: #fff;
  position: relative;
  border: 1px solid #fff;
  font-family: 'IM Fell French Canon Pro';
  font-size: 1.4rem;
  padding: 2rem 25%;
  line-height: 1.6;
}
@media all and (max-width: 400px) {
  main { padding: 2rem; }
}