My Website and Blog Setup

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;
    }


}

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")
    )