Webpage look and feel

The default publishing settings might already be good. But the best part is, I can can customize each and every aspect of it. The way to do this is to set some of the org export variables.

• Set org-html-head-include-scripts to nil, so that the export doesn't add default scripts in the head.
• Set org-html-head-include-default-style to nil, this will avoid adding any default stylesheet in the head so that I can use my own.
• Set org-html-head to "<link rel="stylesheet" href="/css/style.css" />" where href refers to the stylesheet I want. This will add the link tag in all of the exported html files. Probably, if we have #+SETUPFILE: path/to/setup/file.org included in the org file, the content of this variable is ignored.

Note: Remember to escape the special characters in the string assigned to this variable.

Now that I know how to add custom stylesheet and scripts in the exported html files, I want to "make" a custom stylesheet. I can go and write rules for each required tags and classes one by one. But I am not really a web designer. Some nice people, who are professional, have contributed to the open source community by making nice stylesheets which are free to use and modify.

Bootstrap css

Bootstrap is a nice css framework for making responsive webpages. It is a bit heavy one.

w3-css

Framework from w3-schools. It is marketed as smaller faster and easier to use alternative to Bootstrap. I used this in the old version of my web-page.

Tailwind css

It has mode complicated but common styles and transformations defined as classes. Although, I never tried it.

All of these are kind of heavy as most of the styling are defined as classes and to apply that style to a div, I need to add that class to the tag. But, here I just want to make simple webpage where I can write my notes and publish. So, I do not really need stylesheets defined by classes. The one I like and use is

Simple-css

A simple css framework. Not as class definitions but tags themselves are styled. And it is very lite. Keep is simple, silly!!! 😛

The upside of useing standard frameworks is that they are usually hosted on content delivery networks like CDNJS and JSDeliver. I can just inclide http link to the script. But the downside of using content delivery network is that the stylesheet cannot be customised. But I can just download .css files, modify it and add to my project.

Now that I have a basic stylesheet, I want to modify the way I want it. What I did is use some easily available tools and some hacky tricks to make it work.

Inspect element Ctrl+Shift+I

When I publish a page, I will just open console, inspect each element and select colors that I like. I can even take styles from other webpages which I like.

Colorzilla tool

I used this tool to pick colors from webpages and images. It is nice tool to get hex value of color that I like.

Dark reader

With this tool, I adjusted some settings of overall color feel. And when I arrived at a style I liked, I used above two tools to make the style sheet.

The styling I did so far is only for normal html elements. The code blocks are exported to pre and code tags. But the code itself does not contain language specific highliting. To do that I use htmlize package and set the variable org-html-htmlize-output-type to inline. This will export code with syntax highliting used by current emacs themes. Although the colors will be exported as inline css style. Theme change, code highliting change.

If I set the same variable to 'css, it will create org classes for each different code elements. Then I can make a stylesheet to have a custom code highliting, or again pick it up from themes. To get the color values of an emacs theme, I use the command org-html-htmlize-generate-css. This creates a buffer with emacs theme exported as a css. But this contains styles for all the emacs related packages and elements which I do not need. I can then pick up the definitions and put it in code css stylesheet and add to the html.

To get all the classes in the exported html, I used following javascript snippet from a kind user on stackoverflow:

var allClasses = [];

var allElements = document.querySelectorAll('*');

for (var i = 0; i < allElements.length; i++) {
  var classes = allElements[i].className.toString().split(/\s+/);
  for (var j = 0; j < classes.length; j++) {
    var cls = classes[j];
    if (cls && allClasses.indexOf(cls) === -1)
      allClasses.push(cls);
  }
}

console.log(allClasses);

And that is how I styled my webpage 😎