nolanlawson/index.css

## index.css
/*
 * Non-essential stuff
 */

html {
  background: #333;
  font-family: Helvetica, Arial, sans-serif;
  color: f0f0f0;
}

body {
  margin: 10px 20px;
}

h1 {
  font-size: 4em;
}

p {
  font-size: 1.3em;
}

.show-hide-menu-container {
  width: 100%;
  text-align:center;
  padding-bottom: 20px;
}

#show-hide-menu {
  max-width:300px;
  font-size:1.5em;
  margin: 0 10px 0 10px;
  padding: 10px;
}

@media screen and (max-width: 767px) {
  h1 {
    font-size: 2em;
  }
  #show-hide-menu {
    font-size: 1em;
  }
  p {
    font-size: 1em;
  }
}


/*
 * Core of the menu
 */

.sqs-format-bar-outer-container {
  left: 0;
  opacity: 0;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);

  -webkit-transition:all 0.5s ease;
  transition:all 0.5s ease;
}

.sqs-format-bar-outer-container.showing {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  -webkit-transition:all 0.5s ease;
  transition:all 0.5s ease;
}

.sqs-format-bar-outer-container {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.sqs-format-bar-container {
  margin: 0 2px;
  background: white;
}

.sqs-format-bar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 50px;
  margin: 0;
}
.sqs-format-bar div {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.sqs-format-bar div button {
  background: white;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  border-right: 1px solid #ededed;
  border-left: 1px solid #ededed;
}
.sqs-format-bar button:active {
  background: #f0f0f0;
}
.sqs-format-bar button:focus {
  outline: 0;
}
.sqs-format-bar .sqs-bold button {
  font-weight: bold;
}
.sqs-format-bar .sqs-italics button {
  font-style: italic;
}
.sqs-format-bar .sqs-underline button {
  text-decoration: underline;
}


## index.html
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="index.css"/>
  </head>
  <body>
    <h1>Crazy web page built on dreams and stylesheets</h1>

    <div class="show-hide-menu-container">
      <button id="show-hide-menu">Show/hide the menu!</button>
    </div>
      <p>
        riverrun, past Eve and Adam's, from swerve of shore to bend
        of bay, brings us by a commodius vicus of recirculation back to
        Howth Castle and Environs.
      </p>
      <p>
            Sir Tristram, violer d'amores, fr'over the short sea, had passen-
        core rearrived from North Armorica on this side the scraggy
        isthmus of Europe Minor to wielderfight his penisolate war: nor
        had topsawyer's rocks by the stream Oconee exaggerated themselse
        to Laurens County's gorgios while they went doublin their mumper
        all the time: nor avoice from afire bellowsed mishe mishe to
        tauftauf thuartpeatrick: not yet, though venissoon after, had a
        kidscad buttended a bland old isaac: not yet, though all's fair in
        vanessy, were sosie sesthers wroth with twone nathandjoe. Rot a
        peck of pa's malt had Jhem or Shen brewed by arclight and rory
        end to the regginbrow was to be seen ringsome on the aquaface.
      </p>
      <p>
                The fall (bababadalgharaghtakammi
                narronnkonnbronntonner-
          ronntuonnthunntrovarrhounawn
          skawntoohoohoordenenthur-
          nuk!) of a once wallstrait oldparr is retaled early in bed and later
          on on on on on on on on on on on on on on on on on on on on onof the
          offwall entailed at such short notice the pftjschute of Finnegan,
          erse solid man, that the humptyhillhead of humself prumptly sends
          an unquiring one well to the west in quest of his tumptytumtoes:
          and their upturnpikepointandplace is at the knock out in the park
          where oranges have been laid to rust upon the green since dev-
          linsfirst loved livvy.
      </p>
      <p>
           What clashes here of wills gen wonts, oystrygods gaggin fishy-
        gods! Brékkek Kékkek Kékkek Kékkek! Kóax Kóax Kóax! Ualu
        Ualu Ualu! Quaouauh! Where the Baddelaries partisans are still
        out to mathmaster Malachus Micgranes and the Verdons cata-
        pelting the camibalistics out of the Whoyteboyce of Hoodie
        Head. Assiegates and boomeringstroms. Sod's brood, be me fear!
        Sanglorians, save! Arms apeal with larms, appalling. Killykill-
        killy: a toll, a toll. What chance cuddleys, what cashels aired
        and ventilated! What bidimetoloves sinduced by what tegotetab-
        solvers! What true feeling for their's hayair with what strawng
        voice of false jiccup! O here here how hoth sprowled met the
        duskt the father of fornicationists but, (O my shining stars and
        body!) how hath fanespanned most high heaven the skysign of
        soft advertisement! But was iz? Iseut? Ere were sewers? The oaks
        of ald now they lie in peat yet elms leap where askes lay. Phall if
        you but will, rise you must: and none so soon either shall the
        pharce for the nunce come to a setdown secular phoenish.
      </p>
      <p>
            Bygmester Finnegan, of the Stuttering Hand, freemen's mau-
        rer, lived in the broadest way immarginable in his rushlit toofar-
        back for messuages before joshuan judges had given us numbers
        or Helviticus committed deuteronomy (one yeastyday he sternely
        struxk his tete in a tub for to wstruxk his tete in a tub for to wstruxk his tete in a tub for ut again, by the might of moses, the very wat-
        er was eviparated and all the guenneses had met their exodus so
        that ought to show you what a pentschanjeuchy chap he was!)
        and during mighty odd years this man of hod, cement and edi-
        fices in Toper's Thorp piled buildung supra buildung pon the
        banks for the livers by the Soangso. He addle liddle phifie Annie
        ugged the little craugged the little craugged the little craugged the little crauhile balbulous, mithre ahead, with goodly trowel in
        grasp and ivoroiled overalls which he habitacularly fondseed, like
        Haroun Childeric Eggeberth he would caligulate by multiplicab-
        les the alltitude and malltitude until he seesaw by neatlight of the
        liquor wheretwin 'twas born, his roundhead staple of other days
        to rise in undress maisonry upstanded (joygrantit!), a waalworth
        of a skyerscape of most eyeful hoyth entowerly, erigenating from
        </p><p>
              Of the first was he to bare arms and a name: Wassaily Boos-
          laeugh of Riesengeborg. His crest of huroldry, in vert with
          ancillars, troublant, argent, a hegoak, poursuivant, horrid, horned.
          His scutschum fessed, with archers strung, helio, of the second.
          Hootch is for husbandman handling his hoe. Hohohoho, Mister
          Finn, you're going to be Mister Finnagain! Comeday morm and,
          O, you're vine! Sendday's eve and, ah, you're vinegar! Hahahaha,
          Mister Funn, you're going to be fined again!
        </p><p>
              What then agentlike brought about that tragoady thundersday
          this municipal sin business? Our cubehouse still rocks as earwitness
          to the thunder of his arafatas but we hear also through successive
          ages that shebby choruysh of unkalified muzzlenimiissilehims that
          would blackguardise the whitestone ever hurtleturtled out of
          heaven. Stay us wherefore in our search for tighteousness, O Sus-
          tainer, what time we rise and when we take up to toothmick and
          before we lump down upown our leatherbed and in the night and
          at the fading of the stars ! For a nod to the nabir is better than wink
          to the wabsanti. Otherways wesways like that provost scoffing
          bedoueen the jebel and the jpysiabedoueen the jebel and the jpysiabedoueen the jebel and thwe'll know if the feast is a flyday. She
          has a gift of seek on site and she allcasually ansars helpers, the
          dreamydeary. Heed! Hedreamydeary. Heed! Hedreamydeary. Heed! Hedreamydeary. Heed!it moughdreamydeary. Heed! Hedreamydeary. Heed! Hedr
          promises, as others looked at it. (There extand by now one thou-
          sand and one stories, all told, of the same). But so sore did abe
          ite ivvy's holired abbles, (what with the wallhall's horrors of rolls-
          rights, carhacks, stonengens, kisstvanes, tramtrees, fargobawlers,
          autokinotons, hippohobbilies, streetfleets, tournintaxes, mega-
          phoggs, circuses and wardsmoats and basilikerks and aeropagods
          and the hoyse and the jollybrool and the peeler in the coat and
          the mecklenburk bitch bite at his ear and the merlinburrow bur-
          rocks and his fore old porecourts, the bore the more, and his
        </p>
    <div class="sqs-format-bar-outer-container">
      <div class="sqs-format-bar-container">
        <div class="sqs-format-bar">
          <div class="sqs-link">
            <button>
              Link
            </button>
          </div>
          <div class="sqs-reset">
            <button>
              Reset
            </button>
          </div>
          <div class="sqs-bold">
            <button>
              B
            </button>
          </div>
          <div class="sqs-italics">
            <button>
              I
            </button>
          </div>
          <div class="sqs-underline">
            <button>
              U
            </button>
          </div>
        </div>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

## index.js
(function () {
  'use strict';

  var button = document.getElementById('show-hide-menu');
  var container = document.getElementsByClassName('sqs-format-bar-outer-container')[0];
  button.onclick = function() {
    container.classList.toggle('showing');
  }
})();
	/*
	* Non-essential stuff
	*/

	html {
	background: #333;
	font-family: Helvetica, Arial, sans-serif;
	color: f0f0f0;
	}

	body {
	margin: 10px 20px;
	}

	h1 {
	font-size: 4em;
	}

	p {
	font-size: 1.3em;
	}

	.show-hide-menu-container {
	width: 100%;
	text-align:center;
	padding-bottom: 20px;
	}

	#show-hide-menu {
	max-width:300px;
	font-size:1.5em;
	margin: 0 10px 0 10px;
	padding: 10px;
	}

	@media screen and (max-width: 767px) {
	h1 {
	font-size: 2em;
	}
	#show-hide-menu {
	font-size: 1em;
	}
	p {
	font-size: 1em;
	}
	}


	/*
	* Core of the menu
	*/

	.sqs-format-bar-outer-container {
	left: 0;
	opacity: 0;
	-webkit-transform: translate3d(0, 50px, 0);
	transform: translate3d(0, 50px, 0);

	-webkit-transition:all 0.5s ease;
	transition:all 0.5s ease;
	}

	.sqs-format-bar-outer-container.showing {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);

	-webkit-transition:all 0.5s ease;
	transition:all 0.5s ease;
	}

	.sqs-format-bar-outer-container {
	position: fixed;
	bottom: 0;
	width: 100%;
	}

	.sqs-format-bar-container {
	margin: 0 2px;
	background: white;
	}

	.sqs-format-bar {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	height: 50px;
	margin: 0;
	}
	.sqs-format-bar div {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	}
	.sqs-format-bar div button {
	background: white;
	border: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	border-right: 1px solid #ededed;
	border-left: 1px solid #ededed;
	}
	.sqs-format-bar button:active {
	background: #f0f0f0;
	}
	.sqs-format-bar button:focus {
	outline: 0;
	}
	.sqs-format-bar .sqs-bold button {
	font-weight: bold;
	}
	.sqs-format-bar .sqs-italics button {
	font-style: italic;
	}
	.sqs-format-bar .sqs-underline button {
	text-decoration: underline;
	}
	<html>
	<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="index.css"/>
	</head>
	<body>
	<h1>Crazy web page built on dreams and stylesheets</h1>

	<div class="show-hide-menu-container">
	<button id="show-hide-menu">Show/hide the menu!</button>
	</div>
	<p>
	riverrun, past Eve and Adam's, from swerve of shore to bend
	of bay, brings us by a commodius vicus of recirculation back to
	Howth Castle and Environs.
	</p>
	<p>
	Sir Tristram, violer d'amores, fr'over the short sea, had passen-
	core rearrived from North Armorica on this side the scraggy
	isthmus of Europe Minor to wielderfight his penisolate war: nor
	had topsawyer's rocks by the stream Oconee exaggerated themselse
	to Laurens County's gorgios while they went doublin their mumper
	all the time: nor avoice from afire bellowsed mishe mishe to
	tauftauf thuartpeatrick: not yet, though venissoon after, had a
	kidscad buttended a bland old isaac: not yet, though all's fair in
	vanessy, were sosie sesthers wroth with twone nathandjoe. Rot a
	peck of pa's malt had Jhem or Shen brewed by arclight and rory
	end to the regginbrow was to be seen ringsome on the aquaface.
	</p>
	<p>
	The fall (bababadalgharaghtakammi
	narronnkonnbronntonner-
	ronntuonnthunntrovarrhounawn
	skawntoohoohoordenenthur-
	nuk!) of a once wallstrait oldparr is retaled early in bed and later
	on on on on on on on on on on on on on on on on on on on on onof the
	offwall entailed at such short notice the pftjschute of Finnegan,
	erse solid man, that the humptyhillhead of humself prumptly sends
	an unquiring one well to the west in quest of his tumptytumtoes:
	and their upturnpikepointandplace is at the knock out in the park
	where oranges have been laid to rust upon the green since dev-
	linsfirst loved livvy.
	</p>
	<p>
	What clashes here of wills gen wonts, oystrygods gaggin fishy-
	gods! Brékkek Kékkek Kékkek Kékkek! Kóax Kóax Kóax! Ualu
	Ualu Ualu! Quaouauh! Where the Baddelaries partisans are still
	out to mathmaster Malachus Micgranes and the Verdons cata-
	pelting the camibalistics out of the Whoyteboyce of Hoodie
	Head. Assiegates and boomeringstroms. Sod's brood, be me fear!
	Sanglorians, save! Arms apeal with larms, appalling. Killykill-
	killy: a toll, a toll. What chance cuddleys, what cashels aired
	and ventilated! What bidimetoloves sinduced by what tegotetab-
	solvers! What true feeling for their's hayair with what strawng
	voice of false jiccup! O here here how hoth sprowled met the
	duskt the father of fornicationists but, (O my shining stars and
	body!) how hath fanespanned most high heaven the skysign of
	soft advertisement! But was iz? Iseut? Ere were sewers? The oaks
	of ald now they lie in peat yet elms leap where askes lay. Phall if
	you but will, rise you must: and none so soon either shall the
	pharce for the nunce come to a setdown secular phoenish.
	</p>
	<p>
	Bygmester Finnegan, of the Stuttering Hand, freemen's mau-
	rer, lived in the broadest way immarginable in his rushlit toofar-
	back for messuages before joshuan judges had given us numbers
	or Helviticus committed deuteronomy (one yeastyday he sternely
	struxk his tete in a tub for to wstruxk his tete in a tub for to wstruxk his tete in a tub for ut again, by the might of moses, the very wat-
	er was eviparated and all the guenneses had met their exodus so
	that ought to show you what a pentschanjeuchy chap he was!)
	and during mighty odd years this man of hod, cement and edi-
	fices in Toper's Thorp piled buildung supra buildung pon the
	banks for the livers by the Soangso. He addle liddle phifie Annie
	ugged the little craugged the little craugged the little craugged the little crauhile balbulous, mithre ahead, with goodly trowel in
	grasp and ivoroiled overalls which he habitacularly fondseed, like
	Haroun Childeric Eggeberth he would caligulate by multiplicab-
	les the alltitude and malltitude until he seesaw by neatlight of the
	liquor wheretwin 'twas born, his roundhead staple of other days
	to rise in undress maisonry upstanded (joygrantit!), a waalworth
	of a skyerscape of most eyeful hoyth entowerly, erigenating from
	</p><p>
	Of the first was he to bare arms and a name: Wassaily Boos-
	laeugh of Riesengeborg. His crest of huroldry, in vert with
	ancillars, troublant, argent, a hegoak, poursuivant, horrid, horned.
	His scutschum fessed, with archers strung, helio, of the second.
	Hootch is for husbandman handling his hoe. Hohohoho, Mister
	Finn, you're going to be Mister Finnagain! Comeday morm and,
	O, you're vine! Sendday's eve and, ah, you're vinegar! Hahahaha,
	Mister Funn, you're going to be fined again!
	</p><p>
	What then agentlike brought about that tragoady thundersday
	this municipal sin business? Our cubehouse still rocks as earwitness
	to the thunder of his arafatas but we hear also through successive
	ages that shebby choruysh of unkalified muzzlenimiissilehims that
	would blackguardise the whitestone ever hurtleturtled out of
	heaven. Stay us wherefore in our search for tighteousness, O Sus-
	tainer, what time we rise and when we take up to toothmick and
	before we lump down upown our leatherbed and in the night and
	at the fading of the stars ! For a nod to the nabir is better than wink
	to the wabsanti. Otherways wesways like that provost scoffing
	bedoueen the jebel and the jpysiabedoueen the jebel and the jpysiabedoueen the jebel and thwe'll know if the feast is a flyday. She
	has a gift of seek on site and she allcasually ansars helpers, the
	dreamydeary. Heed! Hedreamydeary. Heed! Hedreamydeary. Heed! Hedreamydeary. Heed!it moughdreamydeary. Heed! Hedreamydeary. Heed! Hedr
	promises, as others looked at it. (There extand by now one thou-
	sand and one stories, all told, of the same). But so sore did abe
	ite ivvy's holired abbles, (what with the wallhall's horrors of rolls-
	rights, carhacks, stonengens, kisstvanes, tramtrees, fargobawlers,
	autokinotons, hippohobbilies, streetfleets, tournintaxes, mega-
	phoggs, circuses and wardsmoats and basilikerks and aeropagods
	and the hoyse and the jollybrool and the peeler in the coat and
	the mecklenburk bitch bite at his ear and the merlinburrow bur-
	rocks and his fore old porecourts, the bore the more, and his
	</p>
	<div class="sqs-format-bar-outer-container">
	<div class="sqs-format-bar-container">
	<div class="sqs-format-bar">
	<div class="sqs-link">
	<button>
	Link
	</button>
	</div>
	<div class="sqs-reset">
	<button>
	Reset
	</button>
	</div>
	<div class="sqs-bold">
	<button>
	B
	</button>
	</div>
	<div class="sqs-italics">
	<button>
	I
	</button>
	</div>
	<div class="sqs-underline">
	<button>
	U
	</button>
	</div>
	</div>
	</div>
	</div>
	<script src="index.js"></script>
	</body>
	</html>
	(function () {
	'use strict';

	var button = document.getElementById('show-hide-menu');
	var container = document.getElementsByClassName('sqs-format-bar-outer-container')[0];
	button.onclick = function() {
	container.classList.toggle('showing');
	}
	})();