commit 0f1e52fc34fc97afb3782c93340f75f32269a98a
parent 031733e4b3c384f9997735bfb70d1f6eab792a18
Author: mjkloeckner <martin.cachari@gmail.com>
Date: Sat, 22 Oct 2022 23:42:02 -0300
General style fixes and blog update
Stylesheets update, now the code tag can be used without generating a
code blog, simply use `<code>` to generate an inline code with its
proper box, font, etc. Plus minor deletions on inline styles.
Favicon gets circle layout.
Updated Makefile since its not working with the domain for the moment.
TODO: update build scripts to generate common/blog_index.shtml and
common/latest_uploads.shtml separated by year.
sync.sh gets updated too since it was adding metadata to the rss feed item
description.
Diffstat:
16 files changed, 229 insertions(+), 117 deletions(-)
diff --git a/Makefile b/Makefile
@@ -6,6 +6,6 @@ sync: build
sudo ./scripts/deploy_local.sh
deploy:
- rsync -e "ssh -i ~/.ssh/key-mini" -uorahvP --delete ./** root@kloeckner.com.ar:/var/www/html/
+ rsync -e "ssh -i ~/.ssh/key-mini" -uorahvP --delete ./** root@mini:/var/www/html/
.PHONY: build sync deploy
diff --git a/about.html b/about.html
@@ -36,7 +36,7 @@
<li>github: <a href="https://github.com/mjkloeckner">github.com/mjkloeckner</a></li>
<li>linkedin: <a href="https://www.linkedin.com/in/mjkloeckner/">linkedin.com/in/mjkloeckner</a> </li>
</ul>
- <hr class="article_bottom_bar" style="margin-top: 1em;">
+ <hr class="article_bottom_bar">
</article>
<!--#include virtual="/common/footer.shtml" -->
</body>
diff --git a/blog.html b/blog.html
@@ -21,9 +21,7 @@
<article>
<link rel='stylesheet' type='text/css' href="/css/article_style.css">
<h1 id="index-title">Blog</h1>
- <ul id=blog_entries>
- <!--#include virtual="/common/blog_index.shtml" -->
- </ul>
+ <!--#include virtual="/common/blog_index.shtml" -->
<div style="margin-top: 1em; padding-bottom: .75em; text-align: center; text-decoration: none;">
<a href="/rss.xml" id="rss"><img style="width: 1.5em; padding: 0;" src="/common/rss_logo.png" alt="rss logo"></a>
</div>
diff --git a/common/blog_index.shtml b/common/blog_index.shtml
@@ -1,5 +1,10 @@
+<ul id=blog_entries>
<li><time>21-Oct-2022</time> <a href="/blog/testing-syntax-highlight/testing-syntax-highlight.html">Testing code syntax highlight</a></li>
<li><time>23-Sep-2022</time> <a href="/blog/nerdearla-2022/nerdearla-2022.html">I'm going to Nerdearla 2022</a></li>
-<li><time>18-Sep-2022</time> <a href="/blog/sav/sav.html">Sorting Algorithms Visualized with SDL2</a></li>
-<li><time>23-Oct-2021</time> <a href="/blog/dwm-config/dwm-config.html">dwm - A tiling window manager configuration</a></li>
+<li><time>18-Sep-2022</time> <a href="/blog/sav/sav.html">Sorting Algorithms Visualized</a></li>
+</ul>
+
+<ul id=blog_entries>
+<li><time>23-Oct-2021</time> <a href="/blog/dwm-config/dwm-config.html">dwm - The dynamic window manager</a></li>
<li><time>04-Mar-2021</time> <a href="/blog/vim-config/vim-config.html">vim - The keyboard driven text editor</a></li>
+</ul>
diff --git a/common/header.shtml b/common/header.shtml
@@ -3,7 +3,7 @@
<h1 id="header_title">
<a href="/" id="header_link">Martin Klöckner</a>
</h1>
- <ul style="list-style-type: none; padding-bottom: .5em" class="header_buttons">
+ <ul class="header_buttons">
<li class="header_button" style="padding-right: 10px"><a href="/blog" style="text-decoration: none;">blog</a></li>
<li class="header_button" style="padding-right: 10px"><a href="/about" style="text-decoration: none;">about</a></li>
<li class="header_button"><a href="/cv.pdf" style="text-decoration: none;" target="_blank">cv<i class="icon-download"></i></a></li>
diff --git a/common/latest_uploads.shtml b/common/latest_uploads.shtml
@@ -1,5 +1,10 @@
+<ul id=blog_entries>
<li><time>21-Oct-2022</time> <a href="/blog/testing-syntax-highlight/testing-syntax-highlight.html">Testing code syntax highlight</a></li>
<li><time>23-Sep-2022</time> <a href="/blog/nerdearla-2022/nerdearla-2022.html">I'm going to Nerdearla 2022</a></li>
-<li><time>18-Sep-2022</time> <a href="/blog/sav/sav.html">Sorting Algorithms Visualized with SDL2</a></li>
-<li><time>23-Oct-2021</time> <a href="/blog/dwm-config/dwm-config.html">dwm - A tiling window manager configuration</a></li>
+<li><time>18-Sep-2022</time> <a href="/blog/sav/sav.html">Sorting Algorithms Visualized</a></li>
+</ul>
+
+<ul id=blog_entries>
+<li><time>23-Oct-2021</time> <a href="/blog/dwm-config/dwm-config.html">dwm - The dynamic window manager</a></li>
<li><time>04-Mar-2021</time> <a href="/blog/vim-config/vim-config.html">vim - The keyboard driven text editor</a></li>
+</ul>
diff --git a/css/about_style.css b/css/about_style.css
@@ -10,6 +10,7 @@ ul {
@media (max-width: 800px) {
.article_bottom_bar{
width: 45%;
+ margin-top: 1em;
}
}
@@ -39,6 +40,6 @@ ul {
@media (prefers-color-scheme: light) {
.article_bottom_bar {
- border-top: 1px dashed white;
+ border-top: 1px dashed #191919;
}
}
diff --git a/css/article_style.css b/css/article_style.css
@@ -1,14 +1,13 @@
#article-title {
- font-size: 1.5em;
- text-decoration: underline;
+ /* text-decoration: underline; */
text-align: left;
padding-top: 1em;
- padding-bottom: 1em;
+ padding-bottom: .75em;
}
.article-date {
font-size: .9em;
- padding-bottom: 2.5em;
+ padding-bottom: 2.75em;
/* color: #588B8B; */
color: #9D96B8;
font-style: italic;
@@ -31,15 +30,31 @@ img {
width: 3em;
min-width: 2em;
padding-right: .75em;
+ display: inline;
+}
+
+#article-icon img {
+ max-width: 3em;
+ vertical-align: middle;
+ padding-top: 0em;
}
#article-title-with-icon {
- display: flex;
+ /* display: flex; */
align-items: center;
+ padding-bottom: 1em;
+ padding-top: 1em;
}
-h2 { padding-bottom: 1em; }
-h3 { font-size: 1.15em; }
+#article-title-with-icon #article-title {
+ display: inline;
+}
+
+h2 {
+ padding-bottom: 1em;
+ font-size: 1.5em;
+}
+h3 { font-size: 1.25em; }
h4 { padding-bottom: .5em; }
p { padding-bottom: 1em; }
em { font-weight: bold; }
@@ -73,11 +88,51 @@ ul {
}
@media (max-width: 800px) {
- .article_bottom_bar{
+ .article_bottom_bar {
width: 45%;
+ margin-top: 1em;
}
+ #article-title {
+ padding-top: .5em;
+ padding-bottom: .75em;
+ }
+ #article-title-with-icon {
+ padding-bottom: .75em;
+ padding-top: .75em;
+ }
+ #article-icon img {
+ max-width: 2.5em;
+ }
+ #article-icon {
+ padding-right: .5em
+ }
+ p { padding-bottom: .5em; }
}
+@media (max-width: 420px) {
+ .article_bottom_bar {
+ margin-top: .5em;
+ }
+ #article-title {
+ padding-top: .25em;
+ padding-bottom: .5em;
+ font-size: 1.5em;
+ }
+ #article-title-with-icon {
+ padding-bottom: .5em;
+ padding-top: .5em;
+ }
+ #article-icon img {
+ max-width: 2em;
+ }
+ #article-icon {
+ padding-right: .25em
+ }
+ p { padding-bottom: .75em; }
+ h2 { padding-bottom: .5em; }
+}
+
+
@media (prefers-color-scheme: light) {
.article-date {
color: #7E5A9B;
@@ -85,7 +140,6 @@ ul {
.article_bottom_bar{
border-top: 1px dashed white;
}
-
}
/* Code blocks syntax highlight - Google code prettify syntax style */
diff --git a/css/style.css b/css/style.css
@@ -64,7 +64,7 @@ body {
margin-right: .5em;
font-size: 16px;
- font-family: "DejaVu Sans", sans;
+ font-family: "Helvetica", "DejaVu Sans", sans, "Verdana", sans-serif, "Georgia", serif;
/* scroll-behavior: smooth; */
}
@@ -97,9 +97,10 @@ header {
margin-top: .80em;
font-size: 1.5em;
display: inline;
- align-self: center;
- padding-bottom: 0em;
+ align-self: last baseline;
+ padding-bottom: .16em;
/* padding-top: 1em; */
+ list-style-type: none;
}
.header_flex_div {
@@ -114,7 +115,7 @@ header {
display:block;
- background-color: #191919;
+ /* background-color: #191919; */
width: 80%;
max-width: 35em;
@@ -168,11 +169,11 @@ article {
.article_bottom_bar {
border: 0;
- clear:both;
+ clear: both;
- display:block;
+ display: block;
- background-color: #191919;
+ /* background-color: #191919; */
width: 60%;
max-width: 20em;
@@ -190,7 +191,7 @@ article {
}
footer {
- padding-top: 0em;
+ padding-top: .5em;
text-align: center;
font-size: 0.75em;
@@ -200,54 +201,20 @@ footer {
}
.footer-div {
- padding: 0em 1em 2em 1em;
+ padding: .5em 2em 2em 2em;
margin-left: auto;
margin-right:auto;
}
-@media (max-width: 800px) {
- body {
- font-size: 16px;
- margin-left: 0em;
- margin-right: 0em;
- }
- header {
- padding-top: .25em;
- padding-bottom: 0;
- }
- article {
- padding-top: .5em;
- }
- .header_flex_div{
- flex-direction: column;
- justify-content: center;
- }
- .header_buttons{
- margin-top: 0;
- font-size: 1.75em;
- align-self: center;
- padding-top: 0em;
- padding-bottom: 0em;
- }
- .header_bottom_bar{
- width: 55%;
- }
- .article_bottom_bar {
- width: 40%;
- }
- #header_title {
- font-size: 3em;
- padding-left: .5em;
- padding-right: .5em;
- line-height: 1.10em;
- padding-bottom: .10em;
- }
- #index-title {
- padding-top: .5em;
- padding-bottom: .75em;
- }
+#index-title {
+ text-align: center;
+ color: #DAA520;
+ /* text-shadow: 5px 5px 5px black; */
+ padding-top: .75em;
+ padding-bottom: 1em;
}
+
img {
/* border-radius: .3em; */
@@ -288,15 +255,7 @@ ul {
margin: 0; /* Remove margins */
}
-#index-title {
- text-align: center;
- color: #DAA520;
- /* text-shadow: 5px 5px 5px black; */
- padding-top: .75em;
- padding-bottom: 1em;
-}
-
-h1 { font-size: 1.5em; }
+h1 { font-size: 1.75em; }
h2 {
font-size: 1.25em;
@@ -324,8 +283,13 @@ h5 {
p { padding-bottom: 1em; }
code {
- font-size: 1em;
+ font-size: 85%;
font-family: "Ubuntu Mono", monospace;
+ background-color: rgba(110,118,129,0.4);
+ padding: .1em .4em;
+ margin: 0;
+ border-radius: 6px;
+ white-space: nowrap;
}
pre {
@@ -350,6 +314,15 @@ pre {
overflow: auto;
}
+pre code {
+ font-size: 1em;
+ background-color: inherit;
+ padding: 0;
+ margin: 0;
+ border-radius: 0;
+ white-space: inherit;
+}
+
#command { color: #33ff11; }
#command_sym { color: #ff1694; }
#command_red { color: gold; }
@@ -399,6 +372,78 @@ time {
/* font-family: "IBMPlexMono"; */
}
+@media (max-width: 800px) {
+ body {
+ font-size: 16px;
+ margin-left: 0em;
+ margin-right: 0em;
+ }
+ header {
+ padding-top: .5em;
+ padding-bottom: 0;
+ }
+ article {
+ padding-top: .75em;
+ padding-bottom: .5em;
+ margin-bottom: .25em;
+ }
+ .header_flex_div{
+ flex-direction: column;
+ justify-content: center;
+ }
+ .header_buttons{
+ margin-top: 0;
+ font-size: 1.75em;
+ align-self: center;
+ padding-top: 0em;
+ padding-bottom: .5em;
+ }
+ .header_bottom_bar{
+ width: 55%;
+ }
+ .article_bottom_bar {
+ width: 40%;
+ padding-top: .5em;
+ margin-top: 1em;
+ }
+ #header_title {
+ font-size: 3em;
+ padding-left: .5em;
+ padding-right: .5em;
+ line-height: 1.10em;
+ padding-bottom: .10em;
+ }
+ #index-title {
+ padding-top: .5em;
+ padding-bottom: .75em;
+ }
+ p { padding-bottom: .5em; }
+}
+
+@media (max-width: 420px) {
+ #header_title {
+ font-size: 2.75em;
+ padding-left: .25em;
+ padding-right: .25em;
+ }
+ .header_buttons {
+ padding-bottom: .25em;
+ }
+ #index-title {
+ padding-top: .25em;
+ padding-bottom: .5em;
+ font-size: 1.5em;
+ }
+ p { padding-bottom: .75em; }
+ .article_bottom_bar {
+ padding-top: .25em;
+ margin-top: .75em;
+ }
+ article {
+ margin-bottom: .25em;
+ }
+}
+
@media (prefers-color-scheme: light) {
body {
background-color: white;
@@ -414,10 +459,10 @@ time {
color: #a04a00;
}
.header_bottom_bar {
- border-top: 1px dashed white;
+ border-top: 1px dashed #191919;
}
.article_bottom_bar {
- border-top: 1px dashed white;
+ border-top: 1px dashed #191919;
}
a:visited {
color: #a04a00;
@@ -431,7 +476,7 @@ time {
#index-title {
color: inherit;
}
- code {
+ pre {
background-color: #eee;
border: 3px solid #aaa;
border-radius: 0px;
@@ -452,3 +497,4 @@ time {
background: white;
}
}
+
diff --git a/favicon.png b/favicon.png
Binary files differ.
diff --git a/index.html b/index.html
@@ -41,12 +41,10 @@
</div>
</div>
- <ul id=blog_entries>
- <!--#include virtual="/common/latest_uploads.shtml" -->
- </ul>
+ <!--#include virtual="/common/latest_uploads.shtml" -->
<p>See more <a href="/blog">blog entries</a></p>
- <hr class="article_bottom_bar" style="margin-top: 1em;height: 0px;">
+ <hr class="article_bottom_bar">
</article>
<!--#include virtual="/common/footer.shtml" -->
diff --git a/md/dwm-config/dwm-config.md b/md/dwm-config/dwm-config.md
@@ -1,7 +1,7 @@
-% title: "dwm - A tiling window manager configuration"
+% title: "dwm - The dynamic window manager"
% date: "23-Oct-2021"
-# dwm - A tiling window manager configuration
+# dwm - The dynamic window manager
A window manager is a software that can manage the layout and appearance
of every window spawned in your desktop, most people confuse them with
@@ -56,14 +56,14 @@ after that you can log out of you user account, if you use a display
manager, select dwm as window manager on it and log back in, if you
don't use a display manager, you need to edit your .xinitrc file located
at your home folder, so that when you start Xorg dwm gets launched, you
-do this by adding \`exec dwm\` to the end of the .xinitrc
+do this by adding `exec dwm` to the end of the .xinitrc
file, its *important* that you add it to the end of the file.
```console
exec dwm
```
-Then you can start the X server by executing \`startx\` on a tty and
+Then you can start the X server by executing `startx` on a tty and
dwm should start without any problems.
This is what vanilla dwm looks like:
@@ -85,7 +85,7 @@ $ feh --bg-fill <image>
you can also avoid setting --bg-fill and chossing other feh options to set the wallpaper
(read man feh).
-Then add \`.fehbg &\` to your .xinitrc so the wallpaper gets loaded when Xorg starts, it is important
+Then add `.fehbg &` to your .xinitrc so the wallpaper gets loaded when Xorg starts, it is important
that you add it before dwm gets executed, otherwise it will never be ran
```console
@@ -109,7 +109,7 @@ exec dwm
Basically you configure dwm by editing its source code, there is a C header file, named
[config.h](https://github.com/mjkoeckner/dotfiles/blob/master/.config/dwm/config.def.h)
in the root folder of dwm, if you open it with a text editor you can see a
-lot of variables, for example the line \`static const int topbar = 0\`
+lot of variables, for example the line `static const int topbar = 0`
defines a variable named topbar which you can set to 1 or 0, to select
if the status bar should spawn in the top or bottom of the screen respectively.
You can also change the MOD key (by default its left alt), I like to remap
@@ -130,7 +130,7 @@ on the status bar, well you could accomplish this by executing the following com
$ xsetroot -iname $(date)
```
-and all the output of the command \`date\` would be stored on the WM\_NAME variable
+and all the output of the command `date` would be stored on the WM\_NAME variable
causing dwm to print the date on the statusbar, this
makes dwm status bar highly scriptable, in fact there are a ton of status
bar implementations, the one that I use is called
@@ -147,25 +147,25 @@ dwm by default doesn't come with emoji support, if you want to render
an emoji in the status bar, it's going to either show it as a box or in
the worst case crash.
-In order to get emoji support first make sure you have installed \`libxft\`,
+In order to get emoji support first make sure you have installed `libxft`,
then you need to get a font with emoji support, I'm using [JoyPixels® font](https://www.joypixels.com/)
you can also use [Google's noto font](https://fonts.google.com/noto),
-or any other font that comes with emoji support, then open dwm \`config.def.h\` and
+or any other font that comes with emoji support, then open dwm `config.def.h` and
append to the fonts array the name of the font you want to use as fallback for the first font,
since the emojis are not being printed because the font used doesn't include emojis, my
config looks like this:
```c
static const char *fonts[] = { "Source Code Pro:style=Regular:size=9",
- "JoyPixels:style=Regular:size=8",
- "DejaVu Sans" };
+ "JoyPixels:style=Regular:size=8",
+ "DejaVu Sans" };
```
-I've also added \`DejaVu Sans\` to the fonts array because, sometimes, the emojis where being displayed
+I've also added `DejaVu Sans` to the fonts array because, sometimes, the emojis where being displayed
with a little box or square next to them, this was a quick solution.
After you setup the font you need to remove or comment a chunk of code
-from drw.c, between lines 136-150 there is a function named \`iscol\`, you
+from drw.c, between lines 136-150 there is a function named `iscol`, you
need to remove it or comment it, since this causes dwm to crash.
```c
@@ -201,7 +201,7 @@ To apply a patch navigate to dwm's root folder and execute this command
$ patch -p1 < <file.diff>
```
-being \`file.diff\` the patch file downloaded previoulsy of course.
+being `file.diff` the patch file downloaded previoulsy of course.
If you never patched dwm before then probably no errors would be
reported, but if you already have applied a ton of patches, (or sometimes just a couple)
diff --git a/md/sav/sav.md b/md/sav/sav.md
@@ -1,7 +1,7 @@
-% title: "Sorting Algorithms Visualized with SDL2"
+% title: "Sorting Algorithms Visualized"
% date: "18-Sep-2022"
-# Sorting Algorithms Visualized with SDL2
+# Sorting Algorithms Visualized
SAV, short for Sorting Algorithms Visualized, is a desktop app that shows how an array is being sorted using different algorithms.
diff --git a/md/testing-syntax-highlight/testing-syntax-highlight.md b/md/testing-syntax-highlight/testing-syntax-highlight.md
@@ -17,10 +17,10 @@ For example, this is some C code:
#include <stdio.h>
int main(void) {
- char *hw = "Hello, world!\n";
+ char *hw = "Hello, world!\n";
- printf("%s\n", hw);
- return 0;
+ printf("%s\n", hw);
+ return 0;
}
```
@@ -29,22 +29,23 @@ from markdown files
```console
sed -e "s/\$article-title\\$/$title/" -e "s/\$article-date\\$/$date/" \
- -e "s/\$pagetitle\\$/$pagetitle/" -e '/\$body\$/r./body.html' \
- -e "s/\$lang\\$/$lang/" -e "s/\$generator\\$/$generator/" \
- -e '/\$body\$/d' $template > "$dest_dir"/"$filename".html
+ -e "s/\$pagetitle\\$/$pagetitle/" -e '/\$body\$/r./body.html' \
+ -e "s/\$lang\\$/$lang/" -e "s/\$generator\\$/$generator/" \
+ -e '/\$body\$/d' $template > "$dest_dir"/"$filename".html
```
This is an old JavaScript script that I was using to add the last modified date to a blog
post:
```js
-// https://stackoverflow.com/questions/3552461/how-do-i-format-a-date-in-javascript
+// How do I format a date in javascript?
+// stackoverflow.com/questions/3552461
function join(t, a, s) {
- function format(m) {
- let f = new Intl.DateTimeFormat('en', m);
- return f.format(t);
- }
- return a.map(format).join(s);
+ function format(m) {
+ let f = new Intl.DateTimeFormat('en', m);
+ return f.format(t);
+ }
+ return a.map(format).join(s);
}
var dt = new Date(document.lastModified);
@@ -62,7 +63,8 @@ This code is part of the script that I'm using for highlighting code blocks. It'
golang, a language that I didn't knew until I needed to modify [markdown-code-highlight-go](https://github.com/zupzup/markdown-code-highlight-go) to make it work on my use case.
```go
-rp := strings.NewReplacer("<code class=\"language-", "", "\">", "", "</code>", "")
+rp := strings.NewReplacer("<code class=\"language-", "",
+ "\">", "", "</code>", "")
style := styles.Get("monokai")
if style == nil {
diff --git a/md/vim-config/vim-config.md b/md/vim-config/vim-config.md
@@ -79,3 +79,6 @@ Plug 'morhetz/gruvbox'
Plug 'alvan/vim-closetag'
Plug 'hankchiutw/nerdtree-ranger.vim'
```
+
+then, in the case of vim-plug, you need to run `:PlugInstall` to install all the new
+plugins added.
diff --git a/scripts/sync.sh b/scripts/sync.sh
@@ -44,7 +44,7 @@ generate_rss_feed() {
article_title=$(cat $i | grep -oP '(?<=% title: \")(.*?)(?=\")')
file_name=$(echo "$i" | grep -oE '[^/]*$' | cut -d '.' -f 1)
- article_description="$(md2html $root_folder/md/$file_name/$file_name.md |\
+ article_description="$(sed '/^% /d' $root_folder/md/$file_name/$file_name.md | md2html |\
sed -E -e 's/ \(last\ update//g' -e 's/\{[^\}]*\}//g'\
-e 's/<code>|<\/code>//g' -e 's/<em>|<\/em>//g')"
