diff --git a/src/assets/css/minimalist.css b/src/assets/css/minimalist.css index 331d9d3..a44754f 100644 --- a/src/assets/css/minimalist.css +++ b/src/assets/css/minimalist.css @@ -1,11 +1,16 @@ -body { font-family: sans-serif; - font-size: 15px; - line-height: 20px; - max-width: 50em; - hyphens: auto; - -webkit-hyphens: auto; - -moz-hyphens:auto; - -ms-hyphens:auto; } +body { + font-family: "Helvetica neue", sans-serif; + font-size: 15px; + line-height: 20px; + max-width: 50em; + margin: 0 auto; + 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; font-size: 12px; } +pre { max-width: 100%; overflow: scroll; } 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 { - position: absolute; - top: 0; - left: 0; -} -ul > li:after { - content: "▪"; - opacity: 0.2; +li li { padding-left: 20px; } +ul > li:before { + content: "– "; + font-weight: bold; + opacity: 0.5; } ol { counter-reset: ol; } -ol > li:after { - content: counter(ol) "."; +ol > li:before { + content: counter(ol) ". "; counter-increment: ol; + font-weight: bold; + opacity: 0.5; } /* colors */ -a, a:visited { color: #008AFF; } -a:active, a:hover, a:focus { color: #0085a1; } +p a, p a:visited { color: #93a1a1; } +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; } diff --git a/src/index.org b/src/index.org index 3655f24..c7e0e2b 100644 --- a/src/index.org +++ b/src/index.org @@ -1,13 +1,19 @@ -* Code magic :noexport: -#+TITLE: her.esy.fun -#+AUTHOR: Yann Esposito -#+EMAIL: yann.esposito@gmail.com +#+TITLE: Welcome! #+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 @@ "" "")) - (defun org-blog-preamble (_plist) + (defun org-blog-preamble (info) "Pre-amble for whole blog." - "Her.esy.fun") + (concat + "Her.esy.fun" + (when-let ((date (get-from-info info :date))) + (format " - %s" date)) + "")) (defun menu () "Blog menu" @@ -54,18 +64,19 @@ (concat "" "
" @@ -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. -With a lot more minimalism in mind. +[[/index.html][Link to another page]]. -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