prior to the // link appearing $scrollLength: 100vh; * { box-sizing: border-box; } // Smooth scrolling IF user doesn't have a preference due to motion sensitivities @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } main { // leave room for the "scroll track" padding: 0 3rem; // required to make sure the `absolute` positioning of // the anchor wrapper is indeed `relative` to this element vs. the body position: relative; max-width: $main-width; margin: 2rem auto; // Optional, clears margin if last element is a block item *:last-child { margin-bottom: 0; } } .back-to-top-wrapper { // uncomment to visualize "track" // outline: 1px solid red; position: absolute; top: $scrollLength; right: 0.25rem; bottom: -5em; width: 3em; pointer-events: none; } .back-to-top-link { // `fixed` is fallback position: fixed; // preferred positioning, requires prefixing for most support, and not supported on Safari // @link https://caniuse.com/#search=position%3A%20sticky position: sticky; // reinstate clicks pointer-events: all; // achieves desired positioning within the viewport // relative to the top of the viewport once `sticky` takes over, or always if `fixed` fallback is used top: calc(100vh - 5rem); // basic styling display: inline-block; text-decoration: none; font-size: 2rem; line-height: 3rem; text-align: center; width: 3rem; height: 3rem; border-radius: 50%; padding: 0.25rem; // "pretty" styles, including states border: 1px solid $color; background-color: scale-color($color, $lightness: 85%); transition: transform 80ms ease-in; &:hover, &:focus { transform: scale(1.1); } &:focus { outline: none; box-shadow: 0 0 0 3px scale-color($color, $lightness: 35%); } } body { font-family: "Baloo 2", sans-serif; min-height: 100vh; height: 100%; display: grid; grid-template-rows: auto 1fr auto auto; } header, footer { display: grid; place-items: center; background-color: $color; color: #fff; } header { background-image: url(https://images.unsplash.com/photo-1513628253....); background-position: center; background-size: cover; background-repeat: no-repeat; } h1 { font-size: 4rem; text-align: center; } p { font-size: 1.125rem; line-height: 1.5; } +++++ <header id="top"> <h1>The Star</h1> <h2><cite>H.G. Wells</cite></h2> </header> <main> <article> <p>It was on the first day of the New Year that the announcement was made, almost simultaneously from three observatories, that the motion of the planet Neptune, the outermost of all the planets that wheel about the sun, had become very erratic. Ogilvy had already called attention to a suspected retardation in its velocity in December. Such a piece of news was scarcely calculated to interest a world the greater portion of whose inhabitants were unaware of the existence of the planet Neptune, nor outside the astronomical profession did the subsequent discovery of a faint remote speck of light in the region of the perturbed planet cause any very great excitement. Scientific people, however, found the intelligence remarkable enough, even before it became known that the new body was rapidly growing larger and brighter, that its motion was quite different from the orderly progress of the planets, and that the deflection of Neptune and its satellite was becoming now of an unprecedented kind. </p> <p>Few people without a training in science can realise the huge isolation of the solar system. The sun with its specks of planets, its dust of planetoids, and its impalpable comets, swims in a vacant immensity that almost defeats the imagination. Beyond the orbit of Neptune there is space, vacant so far as human observation has penetrated, without warmth or light or sound, blank emptiness, for twenty million times a million miles. That is the smallest estimate of the distance to be traversed before the very nearest of the stars is attained. And, saving a few comets more unsubstantial than the thinnest flame, no matter had ever to human knowledge crossed this gulf of space, until early in the twentieth century this strange wanderer appeared. A vast mass of matter it was, bulky, heavy, rushing without warning out of the black mystery of the sky into the radiance of the sun. By the second day it was clearly visible to any decent instrument, as a speck with a barely sensible diameter, in the constellation Leo near Regulus. In a little while an opera glass could attain it. </p> <p>On the third day of the new year the newspaper readers of two hemispheres were made aware for the first time of the real importance of this unusual apparition in the heavens. 'A Planetary Collision,' one London paper headed the news, and proclaimed Duchaine's opinion that this strange new planet would probably collide with Neptune. The leader writers enlarged upon the topic; so that in most of the capitals of the world, on January 3rd, there was an expectation, however vague of some imminent phenomenon in the sky; and as the night followed the sunset round the globe, thousands of men turned their eyes skyward to see--the old familiar stars just as they had always been. </p> <p> Until it was dawn in London and Pollux setting and the stars overhead grown pale. The Winter's dawn it was, a sickly filtering accumulation of daylight, and the light of gas and candles shone yellow in the windows to show where people were astir. But the yawning policeman saw the thing, the busy crowds in the markets stopped agape, workmen going to their work betimes, milkmen, the drivers of news-carts, dissipation going home jaded and pale, homeless wanderers, sentinels on their beats, and in the country, labourers trudging afield, poachers slinking home, all over the dusky quickening country it could be seen--and out at sea by seamen watching for the day--a great white star, come suddenly into the westward sky! </p> <p> Brighter it was than any star in our skies; brighter than the evening star at its brightest. It still glowed out white and large, no mere twinkling spot of light, but a small round clear shining disc, an hour after the day had come. And where science has not reached, men stared and feared, telling one another of the wars and pestilences that are foreshadowed by these fiery signs in the Heavens. Sturdy Boers, dusky Hottentots, Gold Coast Negroes, Frenchmen, Spaniards, Portuguese, stood in the warmth of the sunrise watching the setting of this strange new star. <p> <p> And in a hundred observatories there had been suppressed excitement, rising almost to shouting pitch, as the two remote bodies had rushed together; and a hurrying to and fro, to gather photographic apparatus and spectroscope, and this appliance and that, to record this novel astonishing sight, the destruction of a world. For it was a world, a sister planet of our earth, far greater than our earth indeed, that had so suddenly flashed into flaming death. Neptune it was, had been struck, fairly and squarely, by the strange planet from outer space and the heat of the concussion had incontinently turned two solid globes into one vast mass of incandescence. Round the world that day, two hours before the dawn, went the pallid great white star, fading only as it sank westward and the sun mounted above it. Everywhere men marvelled at it, but of all those who saw it none could have marvelled more than those sailors, habitual watchers of the stars, who far away at sea had heard nothing of its advent and saw it now rise like a pigmy moon and climb zenithward and hang overhead and sink westward with the passing of the night. <p> <p> And when next it rose over Europe everywhere were crowds of watchers on hilly slopes, on house-roofs, in open spaces, staring eastward for the rising of the great new star. It rose with a white glow in front of it, like the glare of a white fire, and those who had seen it come into existence the night before cried out at the sight of it. "It is larger," they cried. "It is brighter!" And, indeed the moon a quarter full and sinking in the west was in its apparent size beyond comparison, but scarcely in all its breadth had it as much brightness now as the little circle of the strange new star. <p> <p>"It is brighter!"" cried the people clustering in the streets. But in the dim observatories the watchers held their breath and peered at one another. "<em>It is nearer</em>," they said. "<em>Nearer!</em>" <p> <a href="https://commapress.co.uk/resources/online-short-stories/the-star-h.g.-wells/" target="_blank">Continue reading...</a> </article> <div class="back-to-top-wrapper"> <a href="#top" class="back-to-top-link" aria-label="Scroll to Top">?? </div> </main> <footer> <p>© ACME</p> </footer>