At this point python script is able to generate website content. Time has come to design its style. I want to see mucka.pro in minimalist design. I will keep black and white style, no fireworks.

Idea

I would like to design this webpage with layout of a scietific article or a formal letter. I am going for a white background with big black sans serif font. Subheadings highlighted with bold font. Figures and listings, along with their captions, placed centrally, separated from the text.

Assumptions and Design

The common approach nowadays is to have a stylesheet designed with narrow-screen devices in mind, I will start there. Support for wider screens will be added in form of an extension. Maximum supported text width limited to 800px. General draft shown on figure 1.

Implementation

The base problem is setting the page width. On small screens text should occupy entire screen. On bigger screens, text should occupy only part of screen. Wide text is extremely illegible, so limiting text width is crucial. I feel that text should not be wider than 800px. Rest of screen can be occupied by navigational elements. However, this goes beyond minimal feature set I have planned.

:root {
  --default-width: 95%;
}

body {
  width: var(--default-width);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media only screen and (min-width: 800px) {
  :root {
    --default-width: 800px;
  }
}
  

Next topic is font size. If I define font size using px unit, it will be scaled by browser. Therefore focusing on absolute values does not make sense. Only the relative size differences between the elements are important.

Most text is aligned to left, with a few exceptions. Header and footer are centered. Date at top is aligned to right, like in formal letters. Details at bottom are also aligned to right, feels better that way. I set some margin over footer, just to make little optical gap. Subheadings receives a bit bigger font than regular text.

.header, .title, .date, .content, .footer, .details {
  width: var(--default-width);
  font: normal 12px Lato, Roboto, sans-serif;
  margin-left: auto;
  margin-right: auto;
}

.header, .content {
  text-align: left;
}

.title, .date, .details {
  text-align: right;
}

.content {
  font-size: 14px;
}

.details div {
  font-size: 10px;
}

.footer {
  font-size: 10px;
  margin-top: 10px;
  text-align: center;
}

h1 {
  font-size: 15pt;
}
  

Inserts like code listings, figures or video require special treatment. Insert are centered, leaving some side margin on bigger screens. Code listing are blue colored. Syntax highlighter is not part of minimal feature set. I add horizontal scroll bar to listings. On small screens, even using relatively small font size, I cannot fit 80 characters on screen. I think that extremely small font will be far more annoying than scrolling.

figure {
    margin-left: 1%;
    margin-right: 1%;
}

figcaption {
  text-align: center;
}

pre {
  overflow-x: scroll;
  font-size: 10pt;
}

code {
  color: blue;
}

img {
  margin: auto;
  display: block;
  max-width: 80%;
}

video {
  position: relative;
  width: 100%;
  object-fit: cover;
}

@media only screen and (min-width: 800px) {
  figure {
    margin-left: 5%;
    margin-right: 5%;
  }
}
  

Last two elements are logo and details. As logo placeholder I put empty 200x60 px rectangle with 1 px border. As for details, I put small border over every detail entry.

.header .logo {
  display: inline-block;
  width: 200px;
  height: 60px;
  border: 1px solid;
  text-align: center;
}

.details div {
  width: fit-content;
  display: inline-block;
  border: 1px solid;
  margin: 1px;
  padding: 1px;
}

@media only screen and (min-width: 800px) {
  .details div {
    padding: 2px;
  }
}
  

Entire implementation can be found in commit 00bf6c93.

Effect

I achieved quite acceptable website layout. All required elements are properly formatted. Final effect shown on video 1.

Summary

Implementing a graphical interface is always bothersome for me. CSS is not very likable programmer environment. I wanted to avoid additional libraries like SASS. Despite the odds, i was able to achieve satisfying effect.