template testing + darkmode
This commit is contained in:
parent
5850dec67f
commit
4a6b616335
2 changed files with 179 additions and 46 deletions
|
@ -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,
|
h1, h2, h3, h4, h5, h6,
|
||||||
pre, code, blockquote, ol, ul,
|
pre, code, blockquote, ol, ul,
|
||||||
|
@ -34,7 +39,6 @@ h3::before { content: "### "; opacity: 0.5; }
|
||||||
h4::before { content: "#### "; opacity: 0.5; }
|
h4::before { content: "#### "; opacity: 0.5; }
|
||||||
h5::before { content: "##### "; opacity: 0.5; }
|
h5::before { content: "##### "; opacity: 0.5; }
|
||||||
h6::before { content: "###### "; opacity: 0.5; }
|
h6::before { content: "###### "; opacity: 0.5; }
|
||||||
p { margin: 0; padding: 0; }
|
|
||||||
hr {
|
hr {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
@ -56,31 +60,33 @@ hr:after {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
word-wrap: break-word;
|
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 {
|
pre::after,pre::before {
|
||||||
content: "~~~~~~~~~";
|
content: "~~~~~~~~~";
|
||||||
font-size: 12px;
|
font-size: 16px;
|
||||||
|
line-height: 20px;
|
||||||
display: block;
|
display: block;
|
||||||
opacity: 1; }
|
opacity: 0.3; }
|
||||||
code {
|
code {
|
||||||
font-family: "courrier new", monospace;
|
font-family: "courrier new", monospace;
|
||||||
background: #f2f2f2;
|
background: #073642;
|
||||||
}
|
}
|
||||||
pre code { background: none; }
|
pre code { background: none; }
|
||||||
blockquote {
|
blockquote {
|
||||||
|
margin-left: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-left: 17px;
|
padding-left: 17px;
|
||||||
padding-left: 2ch;
|
padding-left: 2ch;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
blockquote *:first-child {margin-top: 0;}
|
||||||
|
blockquote *:last-child {margin-bottom: 0;}
|
||||||
blockquote:after {
|
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>";
|
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;
|
white-space: pre;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
font-size: 14px;
|
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
|
@ -88,28 +94,27 @@ blockquote:after {
|
||||||
li {
|
li {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
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 {
|
ol {
|
||||||
counter-reset: ol;
|
counter-reset: ol;
|
||||||
}
|
}
|
||||||
ol > li:after {
|
ol > li:before {
|
||||||
content: counter(ol) ".";
|
content: counter(ol) ". ";
|
||||||
counter-increment: ol;
|
counter-increment: ol;
|
||||||
|
font-weight: bold;
|
||||||
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* colors */
|
/* 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;}
|
h1 { color: #6c71c4;}
|
||||||
h2 { color: #d33682;}
|
h2 { color: #d33682;}
|
||||||
|
@ -130,3 +135,20 @@ navigation a { display: inline-block;
|
||||||
padding: .5ex 1ex;
|
padding: .5ex 1ex;
|
||||||
margin-right: 1em;
|
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; }
|
||||||
|
|
147
src/index.org
147
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
|
#+DATE: 2019-07-04
|
||||||
#+KEYWORDS: programming
|
#+KEYWORDS: programming
|
||||||
|
#+AUTHOR: Yann Esposito
|
||||||
|
#+EMAIL: yann.esposito@gmail.com
|
||||||
#+DESCRIPTION:
|
#+DESCRIPTION:
|
||||||
#+LANGUAGE: en
|
#+LANGUAGE: en
|
||||||
#+LANG: en
|
#+LANG: en
|
||||||
#+OPTIONS: H:6
|
#+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
|
#+begin_src elisp :results none
|
||||||
(require 'org)
|
(require 'org)
|
||||||
(require 'ox-publish)
|
(require 'ox-publish)
|
||||||
|
@ -32,9 +38,13 @@
|
||||||
"<link rel=\"alternative\" type=\"application/rss+xml\" title=\"Subscribe to articles\" href=\"/archives.xml\" />"
|
"<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\">"))
|
"<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."
|
"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 ()
|
(defun menu ()
|
||||||
"Blog menu"
|
"Blog menu"
|
||||||
|
@ -54,18 +64,19 @@
|
||||||
(concat "<footer>"
|
(concat "<footer>"
|
||||||
(when-let ((author (get-from-info info :author)))
|
(when-let ((author (get-from-info info :author)))
|
||||||
(if-let ((email (plist-get info :email)))
|
(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)))
|
(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)))
|
(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-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=\"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://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)
|
emacs-version spacemacs-version org-version)
|
||||||
"</footer>"
|
"</footer>"
|
||||||
"<hr/>"
|
"<hr/>"
|
||||||
|
@ -170,12 +181,112 @@
|
||||||
|
|
||||||
#+end_src
|
#+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
|
||||||
|
|
Loading…
Reference in a new issue