ThanhVu Nguyen, Archive
05 Jun 2021

My Website and Blog Setup

Minimal CSS that automatically switches btw light and dark, and blog setup using org-static-blog

1. Auto Dark/Light Scheme Change

My website automatically changes its color to dark and light setting depending on the user's OS preference. This useful custmization is quite simple with CSS using the @media (prefers-color-scheme: dark) {...} feature. Below is a minimal CSS example that lists light (default) and dark color schemes and automatically changes to the preferred one set by your OS or Window Manger.

body {
    background: #f6f6f6;
}

@media (prefers-color-scheme: dark) {
    body {
        color: lightgray;
        background: #454545;
    }
}

Here's the actual CSS file I use for my website.

body {
    margin: 40px auto;
    max-width: 90%;
    line-height: 1.6;
    padding: 0 10px
}

blockquote {
  background: #f9f9f9;
  border-left: 10pt solid #ccc;
  margin: 1.5em 10pt; 
  padding: 0.5em 10pt;
}


blockquote p {
  display: inline;
}

.styled {
  list-style: none;
  padding: 0;
  /* margin: 0.1; */
}

.styled li {
  padding-left: 1rem;
}

.styled li::before {
  content: attr(data-icon);
  /* Make slightly larger than the li font-size
  but smaller than the li grid-gap */
}


@media (prefers-color-scheme: light) {
    body {
        background: white;
    }
    pre,code{
        background: ghostwhite;
    }
}

@media (prefers-color-scheme: dark) {    
    /* Solarized dark color */
    body {
        color: #839496;
        background: #002b36;

    }
    a {
        color: #b58900;
    }
    a:visited {
        color: #cb4b16;
    }    
    strong {
        color: darkgray
    }
    h1 {
        color: #d33682;
    }
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #859900;
    }


    pre, code{
        background: #073642;
        border: 1pt solid #586e75;
        box-shadow: 1pt 1pt 1pt #586e75;
        padding: 1pt;
    }


}

2. Using org-static-blog

I use Org Mode in Emacs for my website and org-static-blog for my blog.

  • Below shows the setup for my blog, which has the following hierachy:
    • org/ : store .org source files
    • posts/ : store output .html files
    • files/ : store miscellaneous files (e.g., pictures) used by my blog entries
      • header.html

        <meta name="author" content="ThanhVu Nguyen">
        <meta name="referrer" content="no-referrer">
        <link rel="stylesheet" type="text/css" href="https://dynaroars.github.io/files/org.css" />
        <link href= "../files/org-orig.css" rel="stylesheet" type="text/css" /> 
        <link rel="icon" href="../files/favicon.ico">
        <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-MML-AM_CHTML">
        </script>
        
      • preamble.html

        <div class="header">
          <a href="../index.html">ThanhVu Nguyen</a>,  
          <a href="index.html">Archive</a>
        </div>
        
      • postamble.html

        <!-- <div id="archive"><a href="archive.html">Other posts</a></div>  -->
        
  • .emacs setup

    (use-package org-static-blog
      :ensure t
      :config
      (setq
       org-static-blog-publish-title "ThanhVu's website"
       org-static-blog-publish-url "./"
       org-static-blog-publish-directory "/Users/tnguyen/git/www/nguyenthanhvuh/docs/posts/"
       org-static-blog-posts-directory "/Users/tnguyen/git/www/nguyenthanhvuh/docs/org/"
       org-static-blog-drafts-directory "/Users/tnguyen/git/www/nguyenthanhvuh/docs/drafts/"
       org-static-blog-use-preview t
       org-static-blog-preview-convert-titles t
       org-static-blog-preview-ellipsis "..."   
       org-static-blog-enable-tags t
       org-static-blog-index-length 10
       org-export-with-toc t
       org-export-with-section-numbers t
    
       org-static-blog-page-header (with-temp-buffer
                                     (insert-file-contents
                                      "/Users/tnguyen/git/www/nguyenthanhvuh/docs/files/header.html")
                                     (buffer-string))
    
       org-static-blog-page-preamble (with-temp-buffer
                                       (insert-file-contents
                                        "/Users/tnguyen/git/www/nguyenthanhvuh/docs/files/preamble.html")
                                       (buffer-string))
    
       org-static-blog-page-postamble (with-temp-buffer
                                        (insert-file-contents
                                         "/Users/tnguyen/git/www/nguyenthanhvuh/docs/files/postamble.html")
                                        (buffer-string))
    
       org-static-blog-index-front-matter "<h1> ThanhVu's blog </h1>\n")
      )
    
    
Tags: computer setup blog