@tools CSS Checker

 

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.

Psalm 91:1-3
He that dwelleth in the secret place of the most High shall abide under the shadow of the Almighty. I will say of the Lord, He is my refuge and my fortress: my God; in him will I trust. Surely he shall deliver thee from the snare of the fowler

 

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

 

10px | 0.5rem | tiny-print (50% of 2vmax)

[1vmax]

Arial 10px “Four score and seven years ago”

Special Elite 10px

Special Elite 0.5rem

This is an example of tiny-print (50% of 2vmax)

 

12px | 0.75rem | very-small-print (65% of 2vmax)

Arial 12px “Four score and seven years ago”

Special Elite 12px

Special Elite 0.75rem

This is an example of very-small-print (65% of 2vmax)

 

14px | 0.875rem | small-print (80% of 2vmax)

Arial 14px “Four score and seven years ago”

Special Elite 14px

Special Elite 0.875rem

This is an example of small-print (80% of 2vmax)

 

BROWSER DEFAULT FONT SIZE COMPARISON

16px | 1rem | normal-print (100% of 2vmax)

[2vmax]

Arial 16px “Four score and seven years ago”

Special Elite 16px

Special Elite 1rem

This is an example of normal-print (100% of 2vmax)

 

20px | 1.25rem | big-print (120% of 2vmax)

Arial 20px “Four score and seven years ago”

Special Elite 20px

Special Elite 1.25rem

This is an example of big-print (120% of 2vmax)

 

24px | 1.5rem | large-print (150% of 2vmax)

[3vmax]

Arial 24px “Four score and seven years ago”

Special Elite 24px

Special Elite 1.5rem

This is an example of large-print (150% of 2vmax)

 

28px | 1.75rem | very-large-print (175% of 2vmax)

Arial 28px “Four score and seven years ago”

Special Elite 28px

Special Elite 1.75rem

This is an example of very-large-print (175% of 2vmax)

 

32px | 2rem | huge-print (200% of 2vmax)

[4vmax]

Arial 32px “Four score and seven years ago”

Special Elite 32px

Special Elite 2rem

This is an example of huge-print (200% of 2vmax)

 

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 DIVISION 200 – Extra Light (Ultra Light)

For score and seven years ago PARAGRAPH 300 – Light

For score and seven years ago DIVISION 300 – Light

For score and seven years ago PARAGRAPH 400 – Normal

For score and seven years ago DIVISION 400 – Normal

For score and seven years ago PARAGRAPH 500 – Medium

For score and seven years ago DIVISION 500 – Medium

 

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

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

For score and seven years ago PARAGRAPH 700 – Bold

For score and seven years ago DIVISION 700 – Bold

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

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

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

For score and seven years ago DIVISION 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


Typing inside a div tag without using a p tag 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 15th 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 15th prime.

 

This is a Header 4


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

 

This is a Header 5

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

 

image-432
This is a Header 5

“Four score and seven years ago” is 47, a reference to the Roman god of war, Mars, and the 15th 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.

Die Sintflut (Francis Danby, 1837–1839; Tate Gallery, London)
image-large
image-medium
image-small