Dark Theme CSS - January 2020

created Jan 10, 2020

View-source this page. I've been using this dark them for several weeks. I use it within the Markdown viewer extension for Chrome when I view my test site at http://md.soupmode.com. I use different CSS colors for the Firefox Markdown viewer extension.

Anyway, many geeks rave about dark themes, but most annoy my eyes. The one below works well for me. But I also like the blue version that I use at my test site http://sora.soupmode.com.

I'm using test content below. I created some of this test content in older posts that I excerpted below, but some of the test content was created by others. It does not matter. It's placeholder content meant to test the CSS.

This is a heading 2 line, which I rarely use.

By Nick Adams - Thu, Oct 10, 2019, updated 4:20 p.m.

The content in this page is disjointed and meaningless. I'm using it for testing.

We started the morning at the Glass City Roasters coffee shop, which is now located on Elanor Ave in West Toledo. It's small, cozy, and well decorated. We ordered latte coffee drinks and their version of muesli, which contained warm milk.

After spending a little while at the coffee shop, we walked across the street to Glass City Treasures, which is an antique-like store, except it's well organized and neat inside. It was decorated for Christmas. Deb bought a small wire basket that was displayed outside.

Heading three

Next, we shopped at the Toledo Farmers Market, located near the Erie Street Market in the Warehouse District of downtown Toledo. We bought the usual items, such as produce (winter produce now), eggs, honey, etc. I bought a maple-bacon doughnut from the Holey Toledough doughnut truck, located next to the market. It tasted fantastic. A plain doughnut would be excellent.

From downtown Toledo, we drove to the Toledo Botanical Garden, located at the western edge of the city, next to Sylvania. The art and craft guilds sell their crafts and artwork on one weekend in December. It's called "Heralding the Holidays." It's one of our favorite art and craft events for the entire year in the Toledo area.

Heading four

At the garden, we purchased a few items as gifts for others, and I bought fingerless gloves from a new fiber vendor, called Branching Out Studio, managed by Christie Clark. Her tag line states, "Nature-inspired art and fiber." We enjoyed this studio or setup a lot.

We also visited with a local alpaca farmer who brought two of his alpacas to the garden for people to admire. They are fun, interesting critters. They make these low, grumbling noises or grunts. The farmer had a pen setup outside. His farm is located near Swanton. He has 20 alpacas. He sends the fleece off to be milled into yarn. He sells the yarn at his farm and maybe elsewhere.

From the alpaca farmer's business card:

Deb got inspired by the works of guild members, and we stopped at Jo Ann's on the way home. I went inside too and perused yarn. But we did not buy anything. They didn't have the fabric that Deb wanted, and the checkout line was amazingly long.

this is a code line 
this is a second code line
and a third code line

Last evening, Deb was a participating vendor in a small craft show, held at Elmhurst Elementary School, which is located two blocks from our home. The school can be seen from our front yard. Deb sold a few baby-related items, such as blankets and bib cloths. Deb needs to create new Punkin Pie Designs business cards with correct contact info. I should work on the website.

But back to Saturday, we went home after our Jo Ann's experience. We weren't home for long though. We met Chris at the Mason Jar around 6:00 p.m. for dinner. The Mason Jar is a mid-sized bar and restaurant, located along Secor Road, a few miles north of the Ohio-Michigan line. They offer interesting food options and good beer.

Deb and I enjoyed a fabulous-tasting brown ale from a Saugatuck, Michigan brewery. We ordered another, but the Mason Jar ran out. I ordered a cheeseburger, which was tasty. Shared a cheesey, artichoke or spinach dip appetizer that came with tortilla chips.

It was a fine day and evening, visiting small, local businesses, farmers, bakers, artists, and crafters and chatting with a good friend.


Most of my content pages are simply designed by using a small amount of Markdown markup, simple HTML templates, and minimal CSS. I mainly use:

I rarely use:

November 2014

Pre-winter, but worth mentioning because of the stretch of abnormally cold weather that occurred from Nov 12 through Nov 22. On some days, our temps were 20 to 25 degrees below normal.

On seven days during that stretch, our temps dipped into the teens. On Nov 18, TOL recorded a low of 9 degrees. We received a few inches of snowfall during this period.

That's not unusual weather for mid-January, but for mid-November, it was a bit bizarre, especially because of the duration.

Another heading 3


Normally, I don't use a horizontal rule following a heading line, but I wanted to test how it looks. If the CSS adds margin spacing above an H3 line, then I don't see the point of the horizontal rule. But if no extra spacing existed above the H3, then the horizontal rule might help the reader see the break better.

Here is a useless paragraph that is used to test using the inline code markup command, based upon the single backtick and nothing else.

Pull quotes? Don't need no stinkin' pull quotes. In nearly 20 years of posting on the web, I have rarely highlighted text by centering it and displaying it in a large font size.

What's annoying is when articles display a pull quote when that same quote exists within the article. Why? It's probably an article "design" issue to break up large areas of text. Or it's done to slow down the people who quickly skim the article. Bolded/emphasized text within the article can work as well, in my opinion, without the redundancy.

This is a heading 3

Here is some text containing a footnote.1 That footnote was formatted by surrounding the number one with the HTML sup tag with no spacing between the period and the opening sup tag.

Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.

Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.

Another way to mention a footnote is to use a number within brackets with no HTML tags. In this example, I also used Mardown's method to bold the brackets and the number two.[2]

This is a heading 4

This image is 640 pixels wide and 480 pixels tall.

building mural in west oak area of west toledo

All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.

code lines:

local filename = "/home/munger/rss3/rss3.txt"

local f = assert(io.open(filename, "r"))
local rss3_text = f:read("a")
f:close()

local blocks = split(rss3_text, "\n\n")

local feed = {}
local items_array = {}
local site_hash = {}

for i=1,#blocks do
    local tmp_hash = {}
    for n, v in rex.gmatch(blocks[i], "(\\w ): (.*)", "", nil) do
        tmp_hash[n] = v
    end
    if i > 1 then
        table.insert(items_array, tmp_hash)
    else
        feed.site = tmp_hash
    end
end

feed.items = items_array

table_print(feed)

It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.

Inspirations for this page

My lack of CSS was inspired by these pages:

All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.

Heading 5

Modern web browsers still support the <center> tag even though it was removed from the HTML spec in v4 or v5. Why did the HTML priesthood drop the center tag? Did the center tag make too much sense? It centers text horizontally. Simple. The HTML priesthood suggests using CSS to center text horizontally. But the center tag is semantically clear, at least to me. I'll let the HTML validators choke on the center tag. I'll continue to use because the web browser links2 -g still supports the center tag. Despite my above rant, I'm not using the center tag in this post.

Heading 6

Favorite minimal CSS inspired by one of the effing test pages, listed above:

body{
    /* font size approx 22 px */
    margin:1em auto;
    max-width:30em;
    padding:0 .62em;
    font:1.37em/1.62 sans-serif;
}
h1,h2,h3 {line-height:1.2;}
h1 {font-size: 1.65em;}
p {margin: 1.8em 0 1.8em 0;}
img {max-width: 100%;}
@media print{
    body{max-width:none}
}

An example page that uses the above CSS can be viewed at this page that is hosted at my Amazon AWS S3 bucket.

My sawv.org post titled Styling Text Articles Upward lists other simple pages that are hosted at on S3 bucket.

I like to test article pages in the following web browsers:

The Blackberry was work phone for my wife, back around 2010-2012. In the spring of 2018, I dug out that old Blackberry, got it charged, reset it, and connected it to our home's WiFi. I can use it for web browsing.

If I want to use system fonts, then I need to use the following CSS.

body {font-family: system-ui, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Lucida Grande", Verdana, "Helvetica", sans-serif;}

I should check for any updates to the system fonts list.

If I want the code block to scroll horizontally, instead of wrapping the text, then I need to use the following CSS.

pre, code {overflow-x: scroll; overflow-y: hidden;}

Personally, I prefer the horizontal scroll of long code within a block, but some older browsers don't support that CSS. But I rarely use the code block.

I like using <pre> to display tabular data if it's a small block. If it's a larger block, then it would need to scroll horizontally.


Footnotes

  1. Here is the text of the footnote itself. No Country For Old Men is one of my all-time favorite movies. Everything was excellent: the characters, the landscape, the slow pacing, the lack of a musical soundtrack, the writing, directing, and acting.

  2. At the Bowling Green fiber festival, held in late March 2018 I bought a 4.75-pound bag of raw fleece from a local farmer. I also spent about $800 on a new, two-pedal Lendrum spinning wheel.