Baseline, Scale and Element Queries

Developer
Jakob-e
Size
8,635 Kb
Views
30,360
  1. Baseline, Scale and Element Queries Previews
  2. Baseline, Scale and Element Queries HTML Codes
  3. Baseline, Scale and Element Queries CSS Codes
  4. Baseline, Scale and Element Queries JS Codes

How do I make an baseline, scale and element queries?

What is a baseline, scale and element queries? How do you make a baseline, scale and element queries? This script and codes were developed by Jakob-e on 04 July 2022, Monday.

Baseline, Scale and Element Queries Previews
IQ Test

Baseline, Scale and Element Queries - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Baseline, Scale and Element Queries</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article> <p class="hero">Playing with Baseline, Scale and Element Queries</p> <h1>The Hobbit</h1> <p class="byline">J.R.R.Tolkien</p> <h2>Chapter 1 An Unexpected Party</h2> <p> In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to eat: it was a hobbit-hole, and that means comfort. </p> <p> It had a perfectly round door like a porthole, painted green, with a shiny yellow brass knob in the exact middle. The door opened on to a tube-shaped hall like a tunnel: a very comfortable tunnel without smoke, with panelled walls, and floors tiled and carpeted, provided with polished chairs, and lots and lots of pegs for hats and coats - the hobbit was fond of visitors. The tunnel wound on and on, going fairly but not quite straight into the side of the hill - The Hill, as all the people for many miles round called it - and many little round doors opened out of it, first on one side and then on another. No going upstairs for the hobbit: bedrooms, bathrooms, cellars, pantries (lots of these), wardrobes (he had whole rooms devoted to clothes), kitchens, dining-rooms, all were on the same floor, and indeed on the same passage. The best rooms were all on the left-hand side (going in), for these were the only ones to have windows, deep-set round windows looking over his garden and meadows beyond, sloping down to the river. </p> <figure> <div>	<img src="http://www.john-howe.com/portfolio/gallery/data/media/1/big/Map_of_the_Hobbit.jpg" /> </div> <figcaption>Illustration by John Howe</figcaption> </figure> <p> This hobbit was a very well-to-do hobbit, and his name was Baggins. The Bagginses had lived in the neighbourhood of The Hill for time out of mind, and people considered them very respectable, not only because most of them were rich, but also because they never had any adventures or did anything unexpected: you could tell what a Baggins would say on any question without the bother of asking him. This is a story of how a Baggins had an adventure, found himself doing and saying things altogether unexpected. He may have lost the neighbours' respect, but he gained-well, you will see whether he gained anything in the end. </p> <p> The mother of our particular hobbit... what is a hobbit? I suppose hobbits need some description nowadays, since they have become rare and shy of the Big People, as they call us. They are (or were) a little people, about half our height, and smaller than the bearded Dwarves. Hobbits have no beards. There is little or no magic about them, except the ordinary everyday sort which helps them to disappear quietly and quickly when large stupid folk like you and me come blundering along, making a noise like elephants which they can hear a mile off. They are inclined to be at in the stomach; they dress in bright colours (chiefly green and yellow); wear no shoes, because their feet grow natural leathery soles and thick warm brown hair like the stuff on their heads (which is curly); have long clever brown fingers, good-natured faces, and laugh deep fruity laughs (especially after dinner, which they have twice a day when they can get it). Now you know enough to go on with. As I was saying, the mother of this hobbit - of Bilbo Baggins, that is - was the fabulous Belladonna Took, one of the three remarkable daughters of the Old Took, head of the hobbits who lived across The Water, the small river that ran at the foot of The Hill. It was often said (in other families) that long ago one of the Took ancestors must have taken a fairy wife. That was, of course, absurd, but certainly there was still something not entirely hobbit-like about them, - and once in a while members of the Took-clan would go and have adventures. They discreetly disappeared, and the family hushed it up; but the fact remained that the Tooks were not as respectable as the Bagginses, though they were undoubtedly richer. Not that Belladonna Took ever had any adventures after she became Mrs. Bungo Baggins. Bungo, that was Bilbo's father, built the most luxurious hobbit-hole for her (and partly with her money) that was to be found either under The Hill or over The Hill or across The Water, and there they remained to the end of their days. Still it is probable that Bilbo, her only son, although he looked and behaved exactly like a second edition of his solid and comfortable father, got something a bit queer in his makeup from the Took side, something that only waited for a chance to come out. The chance never arrived, until Bilbo Baggins was grown up, being about fifty years old or so, and living in the beautiful hobbit-hole built by his father, which I have just described for you, until he had in fact apparently settled down immovably. </p> <p> By some curious chance one morning long ago in the quiet of the world, when there was less noise and more green, and the hobbits were still numerous and prosperous, and Bilbo Baggins was standing at his door after breakfast smoking an enormous long wooden pipe that reached nearly down to his woolly toes (neatly brushed) - Gandalf came by. Gandalf! If you had heard only a quarter of what I have heard about him, and I have only heard very little of all there is to hear, you would be prepared for any sort I of remarkable tale. Tales and adventures sprouted up all over the place wherever he went, in the most extraordinary fashion. He had not been down that way under The Hill for ages and ages, not since his friend the Old Took died, in fact, and the hobbits had almost forgotten what he looked like. He had been away over The Hill and across The Water on business of his own since they were all small hobbit-boys and hobbit-girls. </p> <p> All that the unsuspecting Bilbo saw that morning was an old man with a staff. He had a tall pointed blue hat, a long grey cloak, a silver scarf over which a white beard hung down below his waist, and immense black boots. “Good morning!” said Bilbo, and he meant it. The sun was shining, and the grass was very green. But Gandalf looked at him from under long bushy eyebrows that stuck out further than the brim of his shady hat. “What do you mean?” be said. “Do you wish me a good morning, or mean that it is a good morning whether I want not; or that you feel good this morning; or that it is morning to be good on?” <p> “All of them at once,” said Bilbo. “And a very fine morning for a pipe of tobacco out of doors, into the bargain. If you have a pipe about you, sit down and have a fill of mine! There's no hurry, we have all the day before us!” Then Bilbo sat down on a seat by his door, crossed his legs, and blew out a beautiful grey ring of smoke that sailed up into the air without breaking and floated away over The Hill. </p> <p> “Very pretty!” said Gandalf. “But I have no time to blow smoke-rings this morning. I am looking for someone to share in an adventure that I am arranging, and it's very difficult to find anyone.” </p> <p>…</p> <footer> <p>TODO's</p> <p>༺⁜࿇⁜༻</p> <ul> <li><s>Handle line breaks in headers (maybe use element queries)</s></li> <li><s>Individual line heights with respect to base-line-height</s></li> <li>Vertical text position within line height block</li> <li>Better tweaking options</li> <li>Line height aspect on images/containers</li> <li>Context aware font scaling in media or element queries</li> <li>Line height and responsive font sizing</li> <li>EX height adjustment</li> <li>CPL adjustment (55-100) - script calculated</li> </ul> </footer>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/68939/ResizeSensor.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/68939/ElementQueries.js'></script> <script src="js/index.js"></script>
</body>
</html>

Baseline, Scale and Element Queries - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Cinzel+Decorative:400,700,900);
*, :before, :after { box-sizing: border-box; margin: 0; padding: 0; outline: 0; -webkit-text-size-adjust: 100%;
}
html, body { width: 100%;
}
body { font-size: 20px; line-height: 1.5; background-color: #fff; background-image: -webkit-linear-gradient(transparent, transparent 29px, #ddd 1px); background-image: linear-gradient(transparent, transparent 29px, #ddd 1px); background-size: auto 30px; padding: 60px 30px 0;
}
@media (max-width: 420px) { body { padding: 0 30px 0; }
}
h1 { font-size: 85px; line-height: 0.90588; border-bottom: 13px solid transparent; margin-top: -4px; margin-bottom: 4px;
}
h1[min-height~="116px"] { border-bottom: 26px solid transparent;
}
h1[min-height~="206px"] { border-bottom: 9px solid transparent;
}
h1[min-height~="266px"] { border-bottom: 22px solid transparent;
}
h1[min-height~="356px"] { border-bottom: 5px solid transparent;
}
h1[min-height~="416px"] { border-bottom: 18px solid transparent;
}
h1[min-height~="506px"] { border-bottom: 1px solid transparent;
}
h1[min-height~="566px"] { border-bottom: 14px solid transparent;
}
h1[min-height~="656px"] { border-bottom: 27px solid transparent;
}
@media (max-width: 420px) { h1 { font-size: 52px; line-height: 0.90385; border-bottom: 13px solid transparent; margin-top: -10px; margin-bottom: 10px; } h1[min-height~="76px"] { border-bottom: 26px solid transparent; } h1[min-height~="136px"] { border-bottom: 9px solid transparent; } h1[min-height~="166px"] { border-bottom: 22px solid transparent; } h1[min-height~="226px"] { border-bottom: 5px solid transparent; } h1[min-height~="256px"] { border-bottom: 18px solid transparent; } h1[min-height~="316px"] { border-bottom: 1px solid transparent; } h1[min-height~="346px"] { border-bottom: 14px solid transparent; } h1[min-height~="406px"] { border-bottom: 27px solid transparent; }
}
h2 { font-size: 52px; line-height: 1; border-bottom: 8px solid transparent; margin-bottom: 30px;
}
h2[min-height~="77px"] { border-bottom: 16px solid transparent;
}
h2[min-height~="137px"] { border-bottom: 24px solid transparent;
}
h2[min-height~="197px"] { border-bottom: 2px solid transparent;
}
h2[min-height~="227px"] { border-bottom: 10px solid transparent;
}
h2[min-height~="287px"] { border-bottom: 18px solid transparent;
}
h2[min-height~="347px"] { border-bottom: 26px solid transparent;
}
h2[min-height~="407px"] { border-bottom: 4px solid transparent;
}
h2[min-height~="437px"] { border-bottom: 12px solid transparent;
}
@media (max-width: 420px) { h2 { font-size: 32px; line-height: 1; border-bottom: 28px solid transparent; margin-bottom: 0; } h2[min-height~="71px"] { border-bottom: 26px solid transparent; } h2[min-height~="101px"] { border-bottom: 24px solid transparent; } h2[min-height~="131px"] { border-bottom: 22px solid transparent; } h2[min-height~="161px"] { border-bottom: 20px solid transparent; } h2[min-height~="191px"] { border-bottom: 18px solid transparent; } h2[min-height~="221px"] { border-bottom: 16px solid transparent; } h2[min-height~="251px"] { border-bottom: 14px solid transparent; } h2[min-height~="281px"] { border-bottom: 12px solid transparent; }
}
h3 { font-size: 32px; line-height: 1.5; border-bottom: 12px solid transparent; margin-bottom: 30px;
}
h3[min-height~="76px"] { border-bottom: 24px solid transparent;
}
h3[min-height~="136px"] { border-bottom: 6px solid transparent;
}
h3[min-height~="166px"] { border-bottom: 18px solid transparent;
}
h3[min-height~="226px"] { border-bottom: 0px solid transparent;
}
h3[min-height~="256px"] { border-bottom: 12px solid transparent;
}
h3[min-height~="316px"] { border-bottom: 24px solid transparent;
}
h3[min-height~="376px"] { border-bottom: 6px solid transparent;
}
h3[min-height~="406px"] { border-bottom: 18px solid transparent;
}
h4 { font-size: 20px; line-height: 1.5; border-bottom: 0px solid transparent; margin-bottom: 30px;
}
h4[min-height~="40px"] { border-bottom: 0px solid transparent;
}
h4[min-height~="70px"] { border-bottom: 0px solid transparent;
}
h4[min-height~="100px"] { border-bottom: 0px solid transparent;
}
h4[min-height~="130px"] { border-bottom: 0px solid transparent;
}
h4[min-height~="160px"] { border-bottom: 0px solid transparent;
}
h4[min-height~="190px"] { border-bottom: 0px solid transparent;
}
h4[min-height~="220px"] { border-bottom: 0px solid transparent;
}
h4[min-height~="250px"] { border-bottom: 0px solid transparent;
}
p { font-size: 20px; line-height: 1.5; border-bottom: 0px solid transparent; margin-bottom: 30px;
}
p[min-height~="40px"] { border-bottom: 0px solid transparent;
}
p[min-height~="70px"] { border-bottom: 0px solid transparent;
}
p[min-height~="100px"] { border-bottom: 0px solid transparent;
}
p[min-height~="130px"] { border-bottom: 0px solid transparent;
}
p[min-height~="160px"] { border-bottom: 0px solid transparent;
}
p[min-height~="190px"] { border-bottom: 0px solid transparent;
}
p[min-height~="220px"] { border-bottom: 0px solid transparent;
}
p[min-height~="250px"] { border-bottom: 0px solid transparent;
}
h1 { color: #201D16; font-weight: 700; font-family: 'Cinzel Decorative';
}
h2 { color: #201D16; font-weight: 400; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;
}
p { font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;
}
p.byline { font-size: 20px; line-height: 1.5; border-bottom: 0px solid transparent; margin-top: -20px; margin-bottom: 80px; margin-left: 14px; font-family: 'Cinzel Decorative'; color: #8C9040;
}
p.byline[min-height~="40px"] { border-bottom: 0px solid transparent;
}
p.byline[min-height~="70px"] { border-bottom: 0px solid transparent;
}
p.byline[min-height~="100px"] { border-bottom: 0px solid transparent;
}
p.byline[min-height~="130px"] { border-bottom: 0px solid transparent;
}
p.byline[min-height~="160px"] { border-bottom: 0px solid transparent;
}
p.byline[min-height~="190px"] { border-bottom: 0px solid transparent;
}
p.byline[min-height~="220px"] { border-bottom: 0px solid transparent;
}
p.byline[min-height~="250px"] { border-bottom: 0px solid transparent;
}
p.byline:before { content: ' By: ';
}
@media (max-width: 420px) { p.byline { margin-top: -20px; margin-bottom: 50px; margin-left: 0; }
}
@media (min-width: 421px) and (max-width: 619px) { p.byline { margin-top: -140px; margin-bottom: 140px; margin-left: 215px; } p.byline:before { position: absolute; margin-top: -20px; }
}
.hero { font-size: 12px; line-height: 1.5; border-bottom: 12px solid transparent; color: #999;
}
.hero[min-height~="36px"] { border-bottom: 24px solid transparent;
}
.hero[min-height~="66px"] { border-bottom: 6px solid transparent;
}
.hero[min-height~="66px"] { border-bottom: 18px solid transparent;
}
.hero[min-height~="96px"] { border-bottom: 0px solid transparent;
}
.hero[min-height~="96px"] { border-bottom: 12px solid transparent;
}
.hero[min-height~="126px"] { border-bottom: 24px solid transparent;
}
.hero[min-height~="156px"] { border-bottom: 6px solid transparent;
}
.hero[min-height~="156px"] { border-bottom: 18px solid transparent;
}
footer li { position: relative; font-size: 12px; line-height: 1.5; border-bottom: 12px solid transparent; color: #999;
}
footer li[min-height~="36px"] { border-bottom: 24px solid transparent;
}
footer li[min-height~="66px"] { border-bottom: 6px solid transparent;
}
footer li[min-height~="66px"] { border-bottom: 18px solid transparent;
}
footer li[min-height~="96px"] { border-bottom: 0px solid transparent;
}
footer li[min-height~="96px"] { border-bottom: 12px solid transparent;
}
footer li[min-height~="126px"] { border-bottom: 24px solid transparent;
}
footer li[min-height~="156px"] { border-bottom: 6px solid transparent;
}
footer li[min-height~="156px"] { border-bottom: 18px solid transparent;
}
footer p { color: #999; text-align: center; margin-bottom: 0;
}
footer p + p { font-family: sans-serif; margin-bottom: 30px;
}
article { max-width: 660px; display: block; margin: 0 auto;
}
img { width: 120%; top: 50%; left: 45%; position: relative; -webkit-transform: translateY(-49%) translateX(-50%); transform: translateY(-49%) translateX(-50%);
}
figcaption { font-size: 12px; line-height: 1.5; border-bottom: 12px solid transparent; text-align: right; color: #8C9040; display: block;
}
figcaption[min-height~="36px"] { border-bottom: 24px solid transparent;
}
figcaption[min-height~="66px"] { border-bottom: 6px solid transparent;
}
figcaption[min-height~="66px"] { border-bottom: 18px solid transparent;
}
figcaption[min-height~="96px"] { border-bottom: 0px solid transparent;
}
figcaption[min-height~="96px"] { border-bottom: 12px solid transparent;
}
figcaption[min-height~="126px"] { border-bottom: 24px solid transparent;
}
figcaption[min-height~="156px"] { border-bottom: 6px solid transparent;
}
figcaption[min-height~="156px"] { border-bottom: 18px solid transparent;
}
figure div { height: 420px; overflow: hidden;
}
@media (max-width: 520px) { figure div { height: 300px; }
}
@media (max-width: 420px) { figure div { height: 240px; }
}
figure { display: block; margin-bottom: 30px;
}
footer { display: block; padding: 30px 60px; background: rgba(128, 128, 128, 0.1); margin-top: 90px;
}

Baseline, Scale and Element Queries - Script Codes JS Codes

/* https://github.com/marcj/css-element-queries */
//s3-us-west-2.amazonaws.com/s.cdpn.io/68939/ResizeSensor.js
//s3-us-west-2.amazonaws.com/s.cdpn.io/68939/ElementQueries.js
Baseline, Scale and Element Queries - Script Codes
Baseline, Scale and Element Queries - Script Codes
Home Page Home
Developer Jakob-e
Username jakob-e
Uploaded July 04, 2022
Rating 4.5
Size 8,635 Kb
Views 30,360
Do you need developer help for Baseline, Scale and Element Queries?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jakob-e (jakob-e) Script Codes
Name
Snap to base-line
CSS Shapes
Angular Selects
Encode SVG SCSS
The 100
Angular Range Filter
Responsive Aspect-Ratio SCSS Mixin
Video wallpaper and css filters
SVG Encoding
Angular toggle password directive
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!