Various 2

On this page:

1. Drab Retro Colours
2. Absolute Positioning
3. CSS variables
4. Setting the top margin to zero
5. styling Order

Drab retro colours

These colours can be used directly in the CSS.

NB. Because of the old printing processes many retro designs would be limited to just two or three colours plus black and white (the paper colour). Black and white could be replaced with --OffBlack and --OffWhite variables.

Split neutrals: oranges/yellows/whites OR light/dark

Absolute Positioning

To get absolute positioning to work the way it's supposed to, that is an element is positioned inside its parent, the parent must also have a position value of relative or absolute or fixed, but not static, which is the default.

CSS variables

You can now use variables for different properties in CSS. By defining a custom variable you can change everywhere that variable is at the same time.

A concrete example: say you want the header, the navigation and footer section to all have the background color. Typically you might have to define this in 3 separate places. If you want to change it you have to back to all 3 places. However with variable you can just change your custom property and it will change everywhere it's used.

Typically you'll define it in the root element so it covers every instance but you can assign it any element.

Make a word for your custom property. Let's call the above nav-bg-color.

You define it in the root (or whereever you want it to apply) thus:

Note the two dashes at the start of your custom name. These are always used with variables.

Then you tell each element you're using your custom variable property like this:

Now all you have to do to change the colour in all 3 places is change the colour in the variable you defined in the :root element. Hey presto, it changes in all three places.

Top margin to zero...

Sometimes an element won't reach the top or bottom of the page as expectd. The margin is set to zero so what gives? Well an empty element has no height so an element inside it will break out the bottom and any top margin will stick out the top. Solution? Set the top (or bottom) margin to zero for those elements. Use padding instead to get them where you want them.

Key was reducing the top tag with content's margin to zero. Weird huh? FF only?

Styling order

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.

nav ul {
	margin-top:0;
}

.flex {
	display:flex;
}

.flexbox {
	padding:0;
	margin-right: 1.5em;
}

.flexbox > ul {
	list-style-type: none;
	margin: 1em 0;
	padding: 0;
}

.flexbox > ul > li {
	padding: 12px 7px;
	font-size: 0.8em;
	color: #000;
}

.flexbox > p {
	font-weight: bold;
}

h2 {
	counter-increment: myIndex 1;
}
h2::before {
	content: counter(myIndex) ". " ;
}

ol.pagenav {
	margin-left: 1em;
	list-style-type: decimal;
}

#centered-text {
    width: min(450px, 100%);
    height: 230px;
    border: solid 1px #fff3;
    background-color: #1111;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}