Check top and bottom margin settings for the leaf divider.

What is this?

The author used this page while rebuilding the website from scratch and taking total control of the viewport. To accomplish this, he had to use the same platform as “page builders,” software companies that come between people who publish content on the Internet and the raw screen you see. This is a very non-traditional solution to the problem, but I believe it works. The device type you are using, be it an old cell phone (important if the author is to reach everyone in the coming weeks), the latest iPod, or an 8k TV. It doesn’t matter the way this website is implemented. The only thing that matters is that if you are using a device that has landscape mode, which includes ALL CELL PHONES AND TABLET DEVICES, but also some desktop computers, the author is targeting your landscape mode. In other words, if you are using a cell phone, the website will not format properly in portrait mode. Turn the device to landscape mode when reading my stuff. Okay? That was two or three of the most difficult weeks of my entire life. The author worked 16-hour days and slept very little to make that possible. He needs to reach everyone in the world with a cell phone. It was quite a challenge for someone who has never built such a container from scratch.

Flexbox

Check margins and appearance of flexboxes.

Relative font sizes

There is little or no literature on setting font sizes based on the viewport. I targeted vmax (landscape mode) for obvious reasons and then settled on setting normal print to 2vmax after some experimentation. After that, I just used percentages to arrive at the following standard font sizes. The trick is that you can arrive at real-number percentages (e.g., 2.4vmax) of the viewport in this way, which is otherwise syntactically not allowed for some odd reason. Had I not accidentally discovered this by trial and error, the design would have failed.

This is an example of tiny-print @ 0.5vmax.

This is an example of very-small-print @ 1.3vmax.

This is an example of small-print @ 1.6vmax.

This is an example of normal-print @ 2vmax.

This is an example of first-paragraph @ 2.4vmax

This is an example of big-print @ 2.4vmax.

This is an example of large-print @ 3vmax.

This is an example of very-large-print @ 3.5vmax.

This is an example of huge-print @ 4vmax.

Shouting something! @ 6vmax

Screaming something! @ 8vmax

MAGNIFIER @ 10vmax

Here is the code if you are interested. Remember to set font-size to 2vmax in the HTML header also so that rem works. BUT, AND THIS IS A HUGE BUT, SETTING THE FONT SIZE TO A PERCENTAGE OF THE VIEWPORT IN THE HTML HEADERS PASSES IN A LENGTH, WHICH IS ENTIRELY DIFFERENT THAN SETTING FONT SIZE TO A VIEWPORT PERCENTAGE IN THE CSS. That was an expensive lesson.

:root { font-size: 2vmax; }

:root {
	--tiny-print:		 50%;
	--very-small-print:	 65%;
	--small-print:		 80%;
	--normal-print:		100%;
	--first-paragraph:	120%;
	--big-print:		120%;	/* MUST BE SET THE SAME AS first-paragraph */
	--large-print:		150%;
	--very-large-print:	175%;
	--huge-print:		200%;
	--shout:		300%; 
	--scream:		400%; 
	--magnifier:		500%; 
	--figcaption-font-size:	 80%;	
}

.tiny-print		{ font-size: var(--tiny-print); } 
.very-small-print	{ font-size: var(--very-small-print); } 
.small-print		{ font-size: var(--small-print); } 
.normal-print		{ font-size: var(--normal-print); } 
.first-paragraph	{ font-size: var(--first-paragraph); margin-top: 10px } 
.big-print		{ font-size: var(--big-print); } 
.large-print		{ font-size: var(--large-print); } 
.very-large-print	{ font-size: var(--very-large-print); } 
.huge-print		{ font-size: var(--huge-print); } 
.shout			{ font-size: var(--shout);  font-weight: 500; text-shadow: 3px 3px 3px #aaa; } 
.scream			{ font-size: var(--scream); font-weight: 500; text-shadow: 3px 3px 3px #aaa; } 
.magnifier		{ font-size: var(--magnifier); font-weight: 500; } 

Arial comparisons and px to rem equivalencies

This section compares the responsive font sizes in use on LeonardodaVinci.tv, which are expressed as a percentage of vmax (the device in landscape mode) to more traditional ways of expressing fixed font lengths. The px to rem equivalences are from a useful tool at nekocalc.com

Font weights

Look for differences in black because I am overiding Astra’s color scheme. It is clear from thiis output that using font-weight settings such as 500 is meaningless with this ‘Special Elite’ font. It is either bold or not.

For score and seven years ago PARAGRAPH 200 – Extra Light (Ultra Light)

For score and seven years ago PARAGRAPH 300 – Light

For score and seven years ago PARAGRAPH 400 – Normal

For score and seven years ago PARAGRAPH 500 – Medium

For score and seven years ago PARAGRAPH 600 – Semi Bold (Demi Bold)

For score and seven years ago PARAGRAPH 700 – Bold

For score and seven years ago PARAGRAPH 800 – Extra Bold (Ultra Bold)

For score and seven years ago PARAGRAPH 900 – Black (Heavy)

Solving the font vertical alignment problem

Ten horizontal rules are stacked on top of each other to demonstrate that there is neither a margin nor padding above the horizontal rules.

This is tiny-print. DECENDERS: gjpqy

This is very-small-print. DECENDERS: gjpqy

This is small-print. DECENDERS: gjpqy

This is normal-print. DECENDERS: gjpqy

Paragraph tag with no class. DECENDERS: gjpqy

This is just typing. Why do we need paragraph tags if they are little more than a mechanism for being able to specify an end-of-line character? Why not just type and forget the paragraph tags? Typing a span with a class is not much different than typing a paragraph tag with the same class. DECENDERS: gjpqy

This is a first-paragraph. DECENDERS: gjpqy

This is big-print. DECENDERS: gjpqy

This is large-print. DECENDERS: gjpqy

This is very-large-print. DECENDERS: gjpqy

This is huge-print. DECENDERS: gjpqy

This is a shout. DECENDERS: gjpqy

This is a scream. DECENDERS: gjpqy

Magifier. DECENDERS: gjpqy

Header I DECENDERS: gjpqy

Header II DECENDERS: gjpqy

Header III DECENDERS: gjpqy

Header IV DECENDERS: gjpqy

Header V DECENDERS: gjpqy

Header VI DECENDERS: gjpqy

Header: This is an example of a run on HEADER 5 title to see what happens with word-wrap in relation to the horizontal rule (WHICH HAS NO MARGIN OR PADDING)

Four score and seven years ago

<hr /> horizontal rules

RED SEPARATOR LINE

GREEN SEPARATOR LINE

BLUE SEPARATOR LINE

This is a Header 1. HEADERS SECTION

Header 1 is deliberately broken because Astra uses the h1 tag for page titles. Aligning h1 to my page left margin shift the page title to the right.

THIS IS A HEADER 2: Here is where we find out what happens when a header wraps. Does it word wrap by default?

“Four score and seven years ago” is 47, a reference to the Roman god of war, Mars, and the 15^th prime. Which of these two facts is more important, the author cannot say. The 47 acknowledges that who they are really fighting is the banking class. The 15 reminds them of their sacred duty to be wise custodians of what they know. How do I know this? For two reasons. If seriously contemplated by the rare individual who does not choose to hide behind the grotesque lies he has been told his entire life, there is only one sane conclusion. “Four score and seven” taken literally is 87. 87 is not prime and is meaningless to a Rosicrucian. However, “Four score and seven years ago” in the Pythagoras cipher equals 115. In the author’s world, what he just said was more profound than realizing for the first time that mankind never set foot on the Moon in a tin can wrapped around a powerful rocket engine that left so much dust on the ground that there are footprints IN ALL OF THE MISSIONS THAT THAT CLAIMED TO LAND ON THE MOON. Wake up! That one expression, “Four score and seven years ago” is the message.

This is a Header 3

“Four score and seven years ago” is 47, the 15^th prime.

This is a Header 4

“Four score and seven years ago” is 47, the 15^th prime.

This is a Header 5

“Four score and seven years ago” is 47, the 15^th prime.

This is a Header 5

“Four score and seven years ago” is 47, a reference to the Roman god of war, Mars, and the 15^th prime. Which of these two facts is more important, the author cannot say. The 47 acknowledges that who they are really fighting is the banking class. The 15 reminds them of their sacred duty to be wise custodians of what they know. How do I know this? For two reasons. If seriously contemplated by the rare individual who does not choose to hide behind the grotesque lies he has been told his entire life, there is only one sane conclusion. “Four score and seven” taken literally is 87. 87 is not prime and is meaningless to a Rosicrucian. However, “Four score and seven years ago” in the Pythagoras cipher equals 115. In the author’s world, what he just said was more profound than realizing for the first time that mankind never set foot on the Moon in a tin can wrapped around a powerful rocket engine that left so much dust on the ground that there are footprints IN ALL OF THE MISSIONS THAT THAT CLAIMED TO LAND ON THE MOON. Wake up! That one expression, “Four score and seven years ago” is the message.

Figures

EXPECTED RESULTS: THE FOLLOWING FIGURE WITH NO CSS CLASS SHOULD SPAN THE ENTIRE SCREEN.