Skip to content

Instantly share code, notes, and snippets.

@nolanlawson

nolanlawson/index.css

Last active August 29, 2015 14:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nolanlawson/6db863f1e513bab9e273 to your computer and use it in GitHub Desktop.
Save nolanlawson/6db863f1e513bab9e273 to your computer and use it in GitHub Desktop.
Download ZIP
Sliding footer menu
Raw
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;
}
Raw
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>
Raw
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');
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment