template testing + darkmode

src/assets/css/minimalist.css

@@ -1,11 +1,16 @@
-body { font-family: sans-serif;
+body {
-  font-size: 15px;
+    font-family: "Helvetica neue", sans-serif;
-  line-height: 20px;
+    font-size: 15px;
-  max-width: 50em;
+    line-height: 20px;
-  hyphens: auto;
+    max-width: 50em;
-  -webkit-hyphens: auto;
+    margin: 0 auto;
-  -moz-hyphens:auto;
+    hyphens: auto;
-  -ms-hyphens:auto; }
+    background: #002b36;
+    color: #839496;
+    -webkit-hyphens: auto;
+    -moz-hyphens:auto;
+    -ms-hyphens:auto;
+}
 
 h1, h2, h3, h4, h5, h6,
 pre, code, blockquote, ol, ul,
@@ -34,7 +39,6 @@ h3::before { content: "### "; opacity: 0.5; }
 h4::before { content: "#### "; opacity: 0.5; }
 h5::before { content: "##### "; opacity: 0.5; }
 h6::before { content: "###### "; opacity: 0.5; }
-p { margin: 0; padding: 0; }
 hr {
     position: relative;
     height: 20px;
@@ -56,31 +60,33 @@ hr:after {
     width: 100%;
     word-wrap: break-word;
 }
-blockquote { margin-left: 0; }
+pre { max-width: 100%; overflow: scroll; }
-pre { max-width: 100%; overflow: scroll; font-size: 12px; }
 pre::after,pre::before {
     content: "~~~~~~~~~";
-    font-size: 12px;
+    font-size: 16px;
+    line-height: 20px;
     display: block;
-    opacity: 1; }
+    opacity: 0.3; }
 code {
     font-family: "courrier new", monospace;
-    background: #f2f2f2;
+    background: #073642;
 }
 pre code { background: none; }
 blockquote {
+    margin-left: 0;
     position: relative;
     padding-left: 17px;
     padding-left: 2ch;
     overflow: hidden;
 }
+blockquote *:first-child {margin-top: 0;}
+blockquote *:last-child {margin-bottom: 0;}
 blockquote:after {
     content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";
     white-space: pre;
     position: absolute;
     top: 0;
     left: 0;
-    font-size: 14px;
     line-height: 20px;
     opacity: 0.3;
 }
@@ -88,28 +94,27 @@ blockquote:after {
 li {
     position: relative;
     display: block;
-    padding-left: 18px;
 }
-li:after {
+li li { padding-left: 20px; }
-    position: absolute;
+ul > li:before {
-    top: 0;
+    content: "– ";
-    left: 0;
+    font-weight: bold;
-}
+    opacity: 0.5;
-ul > li:after {
-    content: "▪";
-    opacity: 0.2;
 }
 ol {
     counter-reset: ol;
 }
-ol > li:after {
+ol > li:before {
-    content: counter(ol) ".";
+    content: counter(ol) ". ";
     counter-increment: ol;
+    font-weight: bold;
+    opacity: 0.5;
 }
 
 /* colors */
-a, a:visited { color: #008AFF; }
+p a, p a:visited { color: #93a1a1; }
-a:active, a:hover, a:focus { color: #0085a1; }
+a, a:visited { color: #2aa198; }
+a:active, a:hover, a:focus { color: #268bd2; }
 
 h1 { color: #6c71c4;}
 h2 { color: #d33682;}
@@ -130,3 +135,20 @@ navigation a { display: inline-block;
                padding: .5ex 1ex;
                margin-right: 1em;
              }
+.article-date { opacity: 0.5; font-size: 0.8; }
+
+table { width: 100%; margin: 20px 0; border-collapse: collapse; }
+th { height: 20px;
+     padding: 0 10px;
+     text-align: left;
+     border-left: solid 1px #ddd;
+     border-right: solid 1px #ddd;
+     background: #5c71c4;
+     color: #FFF;
+   }
+tr:hover { background-color: #ffd; }
+td { height: 20px;
+     vertical-align: middle;
+     border-left: solid 1px #ddd;
+     border-right: solid 1px #ddd;
+     padding: 0 10px; }

src/index.org

@@ -1,13 +1,19 @@
-* Code magic                                                                            :noexport:
+#+TITLE: Welcome!
-#+TITLE: her.esy.fun
-#+AUTHOR: Yann Esposito
-#+EMAIL: yann.esposito@gmail.com
 #+DATE: 2019-07-04
 #+KEYWORDS: programming
+#+AUTHOR: Yann Esposito
+#+EMAIL: yann.esposito@gmail.com
 #+DESCRIPTION:
 #+LANGUAGE: en
 #+LANG: en
 #+OPTIONS: H:6
+
+This is a new take on my personal blog.
+With a lot more minimalism in mind.
+
+With [[http://orgmode.org][org-mode]]
+
+* Code magic                                                                            :noexport:
 #+begin_src elisp :results none
   (require 'org)
   (require 'ox-publish)
@@ -32,9 +38,13 @@
      "<link rel=\"alternative\" type=\"application/rss+xml\" title=\"Subscribe to articles\" href=\"/archives.xml\" />"
      "<link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/favicon.ico\">"))
 
-  (defun org-blog-preamble (_plist)
+  (defun org-blog-preamble (info)
     "Pre-amble for whole blog."
-    "<strong><code>Her.esy.fun</code></strong>")
+    (concat
+     "<strong><code>Her.esy.fun"
+     (when-let ((date (get-from-info info :date)))
+       (format " - <span class=\"article-date\">%s</span>" date))
+     "</code></strong>"))
 
   (defun menu ()
     "Blog menu"
@@ -54,18 +64,19 @@
     (concat "<footer>"
             (when-let ((author (get-from-info info :author)))
               (if-let ((email (plist-get info :email)))
-                  (format "<p class=\"author\">Author: <a href=\"mailto:%s\">%s</a></p>" email author)
+                  (format "<div class=\"author\">Author: <a href=\"mailto:%s\">%s</a></div>" email author)
-                (format "<p class=\"author\">Author: %s</p>" author)))
+                (format "<div class=\"author\">Author: %s</div>" author)))
             (when-let ((date (get-from-info info :date)))
-              (format "<p class=\"date\">Created: %s</p>" date))
+              (format "<div class=\"date\">Created: %s</div>" date))
             (when-let ((keywords (plist-get info :keywords)))
-              (format "<p class=\"keywords\">Keywords: <code>%s</code></p>" keywords))
+              (format "<div class=\"keywords\">Keywords: <code>%s</code></div>" keywords))
-            (format "<p class=\"date\">Generated: %s</p>"
+            (format "<div class=\"date\">Generated: %s</div>"
                     (format-time-string "%Y-%m-%d %H:%M:%S"))
-            (format (concat "<p class=\"creator\"> Generated with "
+            (format (concat "<div class=\"creator\"> Generated with "
                             "<a href=\"https://www.gnu.org/software/emacs/\" target=\"_blank\" rel=\"noopener noreferrer\">Emacs %s</a>, "
                             "<a href=\"http://spacemacs.org\" target=\"_blank\" rel=\"noopener noreferrer\">Spacemacs %s</a>, "
-                            "<a href=\"http://orgmode.org\" target=\"_blank\" rel=\"noopener noreferrer\">Org Mode %s</a>")
+                            "<a href=\"http://orgmode.org\" target=\"_blank\" rel=\"noopener noreferrer\">Org Mode %s</a>"
+                            "</div>")
                     emacs-version spacemacs-version org-version)
             "</footer>"
             "<hr/>"
@@ -170,12 +181,112 @@
 
 #+end_src
 
-* Welcome!
+* Template Testing
 
-[[https://her.esy.fun][her.esy.fun]]
+Text can be *bold*, /italic/, +strikethrough+ or =keyword=.
 
-This is a new take on my personal blog.
+[[/index.html][Link to another page]].
-With a lot more minimalism in mind.
 
-With [[http://orgmode.org][org-mode]]
+There should be whitespace between paragraphs.
 
+* Header 2
+
+There should be whitespace between paragraphs.
+GitHub is a code hosting platform for version control and collaboration.
+It lets you and others work together on projects from anywhere.
+
+** Header 3
+
+#+begin_quote
+This is a blockquote folling a header.
+
+When something is important enough, you do it even if the odds are not in your
+favor.
+#+end_quote
+
+*** Header 4
+
+#+begin_src javascript
+// Javascript code with syntax highlighting.
+var fun = function lang(l) {
+  dateformat.i18n = require('./lang/' + l)
+  return true;
+}
+#+end_src
+
+#+begin_src ruby
+# Ruby code with syntax highlighting
+GitHubPages::Dependencies.gems.each do |gem, version|
+  s.add_dependency(gem, "= #{version}")
+end
+#+end_src
+
+#+begin_src clojure
+(defn clj-fn
+  "A clojure function with syntax highlighting"
+  [arg]
+  (clojure.pprint/pprint arg))
+#+end_src
+
+#+begin_src haskell
+-- main hello world
+main :: IO ()
+main = do
+  putStrLn "What is your name?"
+  name <- getLine
+  putStrLn $ "Hello " <> name <> "!"
+#+end_src
+
+**** Header 5
+
+- this is an unordered list following a header.
+- this is an unordered list following a header.
+- this is an unordered list following a header.
+
+***** Header 6
+
+1. this is an ordered list following a header.
+2. this is an ordered list following a header.
+   - sub unordered
+     - sub sub unordered
+     - xxx
+   - unordered
+     1. ordered again
+     2. yep :)
+3. this is an ordered list following a header.
+   1. sub ordered
+   2. second
+      1. sub sub ordered
+      2. still
+   3. here
+4. this is an ordered list following a header.
+
+| head1        | head two          |
+|--------------+-------------------|
+| ok           | good swedish fish |
+| out of stock | good and plenty   |
+| ok           | good =oreos=      |
+| ok           | good =zoute= drop |
+
+There's a horizontal rule below this
+
+------
+
+** Here is an unordered list:
+
+- level 1 item
+  - level 2 item
+  - level 2 item
+  - level 2 item
+    - level 3 item
+    - level 3 item
+- level 1 item
+  - level 2 item
+    - level 3 item
+    - level 3 item
+  - level 2 item
+  - level 2 item
+- level 1 item
+  - level 2 item
+  - level 2 item
+  - level 2 item