hugo
/
website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Migrate styling to central stylesheet.

Browse Source
master
Hugo Thunnissen 4 years ago
parent b802ddfc01
commit abfea72d1f
8 changed files with 84 additions and 253 deletions
Show Stats Download Patch File Download Diff File

38
blog.html
Unescape Escape View File

@ -1,18 +1,11 @@
<html>
<head>
<title>Blog</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
</head>
<style type="text/css">
a:visited {
color: #c2e;
}
a {
color: #0095dd;
}
h2 a {
color: #5b4636;
text-decoration: none;
@ -22,31 +15,6 @@
color: #5b4636;
text-decoration: none;
}
html {
font-family: Helvetica, Arial, sans-serif;
color: #5b4636;
background-color: #f4ecd8;
}
body {
padding: 1em;
margin: auto;
}
@media only all and (pointer: coarse), (pointer: none) {
body {
font-size: 5.5vmin;
}
}
@media only all and (pointer: fine) {
body {
font-size: calc(16px + 0.6vmin);
min-width: 500px;
max-width: 50em;
}
}
</style>
<body>
@ -60,8 +28,8 @@
<div><h2 style="margin-bottom: 0.1em;"><a href="posts/use-your-mail-client-for-physical-mail/index.html"> How To Use Your Email Client For Physical Mail </a></h2><i style="font-size: 0.8em;">Mon 17 Feb 2020 11:55:42 AM CET</i><p style="margin-top: 0.5em;">Whether it&#39;s to re-read a conversation, find a plane ticket I ordered or check
when a meeting was planned, I often find myself looking up old emails. It&#39;s
usually easy to do so because email clients are designed for the task: Many of
them support full-text search and some even complement that with advanced
tagging and categorization systems. To be honest I have become completely ... <a href="posts/use-your-mail-client-for-physical-mail/index.html">Continue reading</a></p>
them support full-text search and some even complement that with neat tagging
and categorization systems. To be honest I have become completely dependent on ... <a href="posts/use-your-mail-client-for-physical-mail/index.html">Continue reading</a></p>
</div>
<hr><div><h2 style="margin-bottom: 0.1em;"><a href="posts/simple-static-blog/index.html"> Creating a Simple Static Blog </a></h2><i style="font-size: 0.8em;">Sat 08 Feb 2020 12:14:16 PM CET</i><p style="margin-top: 0.5em;">I love personal websites. It&#39;s amazing that people can share content with the
entire world just by writing some text and throwing it behind a web server. I

12
feed.xml
Unescape Escape View File

@ -5,8 +5,8 @@
<link>https://hugot.nl/blog.html</link>
<description>Hugo's personal blog</description>
<language>en-us</language>
<pubDate>Mon 17 Feb 2020 12:20:14 PM CET</pubDate>
<lastBuildDate>Mon 17 Feb 2020 12:20:14 PM CET</lastBuildDate>
<pubDate>wo 15 apr 2020 15:32:13 CEST</pubDate>
<lastBuildDate>wo 15 apr 2020 15:32:13 CEST</lastBuildDate>
<docs>http://blogs.law.harvard.edu/tech/rss</docs>
<generator>Hugo's Custom Bash Script</generator>
<managingEditor>social@hugot.nl</managingEditor>
@ -14,20 +14,20 @@
<item><title> How To Use Your Email Client For Physical Mail </title><link>https://hugot.nl/posts/use-your-mail-client-for-physical-mail/index.html</link><description>Whether it&#39;s to re-read a conversation, find a plane ticket I ordered or check
when a meeting was planned, I often find myself looking up old emails. It&#39;s
usually easy to do so because email clients are designed for the task: Many of
them support full-text search and some even complement that with advanced
tagging and categorization systems. To be honest I have become completely</description><pubDate>Mon 17 Feb 2020 11:55:42 AM CET</pubDate><guid isPermaLink="false"> How To Use Your Email Client For Physical Mail MjYyNjk3NDk5NCA0MDkzCg==</guid>
them support full-text search and some even complement that with neat tagging
and categorization systems. To be honest I have become completely dependent on</description><pubDate>Mon 17 Feb 2020 11:55:42 AM CET</pubDate><guid isPermaLink="false"> How To Use Your Email Client For Physical Mail NDc2MDg1MjYxIDQxODUK</guid>
</item>
<item><title> Creating a Simple Static Blog </title><link>https://hugot.nl/posts/simple-static-blog/index.html</link><description>I love personal websites. It&#39;s amazing that people can share content with the
entire world just by writing some text and throwing it behind a web server. I
wanted to know what that is like, so I set out to create a personal website of
my own. As you can see I succeeded in doing so, but getting here wasn&#39;t as
straight forward as I initially thought it would be. I thought that, being a</description><pubDate>Sat 08 Feb 2020 12:14:16 PM CET</pubDate><guid isPermaLink="false"> Creating a Simple Static Blog Mzg5NDU4OTEwNiA2MTI4Cg==</guid>
straight forward as I initially thought it would be. I thought that, being a</description><pubDate>Sat 08 Feb 2020 12:14:16 PM CET</pubDate><guid isPermaLink="false"> Creating a Simple Static Blog MjU5OTIyNDIwMyA2MTI5Cg==</guid>
</item>
<item><title> Introduction </title><link>https://hugot.nl/posts/introduction/index.html</link><description>Hello, welcome to my blog! My name is Hugo. I am a 22 year old Software
Engineering student from the Netherlands. Software development is a huge part
of my life, I write a lot of (weird) programs to scratch my own itch and most
software I create is open_source by default. I also run a one-man company that
provides some IT services on the side.</description><pubDate>Sat 08 Feb 2020 09:30:06 AM CET</pubDate><guid isPermaLink="false"> Introduction MjM3MzUyOTAwNSA5MDYK</guid>
provides some IT services on the side.</description><pubDate>Sat 08 Feb 2020 09:30:06 AM CET</pubDate><guid isPermaLink="false"> Introduction MzYzMzkyNDgwOCA5MDcK</guid>
</item>
</channel>
</rss>

38
generate-blog.bash
Unescape Escape View File

@ -35,18 +35,11 @@ print-blog-html-top() {
echo '<html>
<head>
<title>Blog</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
</head>
<style type="text/css">
a:visited {
color: #c2e;
}
a {
color: #0095dd;
}
h2 a {
color: #5b4636;
text-decoration: none;
@ -56,31 +49,6 @@ print-blog-html-top() {
color: #5b4636;
text-decoration: none;
}
html {
font-family: Helvetica, Arial, sans-serif;
color: #5b4636;
background-color: #f4ecd8;
}
body {
padding: 1em;
margin: auto;
}
@media only all and (pointer: coarse), (pointer: none) {
body {
font-size: 5.5vmin;
}
}
@media only all and (pointer: fine) {
body {
font-size: calc(16px + 0.6vmin);
min-width: 500px;
max-width: 50em;
}
}
</style>
<body>
@ -159,10 +127,10 @@ while read -r post_html; do
# The title should be on the 2nd line of text, right after the link to the
# homepage. This is a bit inflexible but it will do for now.
title="$(tail -n +2 <<<"$text" | head -n 1 | tr -d '*')" || exit $?
title="$(tail -n +3 <<<"$text" | head -n 1 | tr -d '*')" || exit $?
# Use the first 5 lines after the title as post excerpt.
excerpt="$(tail -n +3 <<<"$text" | head -n 5)" || exit $?
excerpt="$(tail -n +4 <<<"$text" | head -n 5)" || exit $?
# Escape the post html file name to safely use it in the generated html.
href="$(escape-html <<<"$post_html")" || exit $?

36
index.html
Unescape Escape View File

@ -2,44 +2,10 @@
<html>
<head>
<title>Hugot</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
</head>
<style type="text/css">
a:visited {
color: #c2e;
}
a {
color: #0095dd;
}
html {
font-family: Helvetica, Arial, sans-serif;
color: #5b4636;
background-color: #f4ecd8;
}
body {
padding: 1em;
margin: auto;
}
@media only all and (pointer: coarse), (pointer: none) {
body {
font-size: 5.5vmin;
}
}
@media only all and (pointer: fine) {
body {
font-size: calc(16px + 0.6vmin);
min-width: 500px;
max-width: 50em;
}
}
</style>
<body>
<a href="blog.html">Blog</a>
<h1>Hugo's homepage</h1>

36
posts/introduction/index.html
Unescape Escape View File

@ -2,44 +2,10 @@
<html>
<head>
<title>Introduction</title>
<link rel="stylesheet" type="text/css" href="../../style.css">
<meta charset="UTF-8">
</head>
<style type="text/css">
a:visited {
color: #c2e;
}
a {
color: #0095dd;
}
html {
font-family: Helvetica, Arial, sans-serif;
color: #5b4636;
background-color: #f4ecd8;
}
body {
padding: 1em;
margin: auto;
}
@media only all and (pointer: coarse), (pointer: none) {
body {
font-size: 5.5vmin;
}
}
@media only all and (pointer: fine) {
body {
font-size: calc(16px + 0.6vmin);
min-width: 500px;
max-width: 50em;
}
}
</style>
<body>
<a href="../../blog.html">Home</a>
<h1>Introduction</h1>

49
posts/simple-static-blog/index.html
Unescape Escape View File

@ -1,49 +1,11 @@
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
<title>Creating a Simple Static Blog</title>
<link rel="stylesheet" type="text/css" href="../../style.css">
<meta charset="UTF-8">
</head>
<style type="text/css">
a:visited {
color: #c2e;
}
a {
color: #0095dd;
}
html {
font-family: Helvetica, Arial, sans-serif;
color: #5b4636;
background-color: #f4ecd8;
}
body {
padding: 1em;
margin: auto;
}
@media only all and (pointer: coarse), (pointer: none) {
body {
font-size: 5.5vmin;
}
}
@media only all and (pointer: fine) {
body {
font-size: calc(16px + 0.6vmin);
min-width: 500px;
max-width: 50em;
}
}
pre {
white-space: pre-wrap;
}
</style>
<body>
<a href="../../blog.html">Home</a>
<h1>Creating a Simple Static Blog</h1>
@ -181,9 +143,10 @@
stole the colors from firefox's reader mode btw). It's such a small amount
that I don't mind copy-pasting it at the top of all new HTML pages that I add
to my website. This might make it harder to change the styling later, but it
has the added benefit that each page is a standalone document. So for example <code>wget PAGE_URL</code>
will download a HTML page that looks exactly the same locally as it does on
the web without having to download any extra assets.
has the added benefit that each page is a standalone document. So for
example <code>wget PAGE_URL</code> will download a HTML page that looks
exactly the same locally as it does on the web without having to download any
extra assets.
</p>
<p>

79
posts/use-your-mail-client-for-physical-mail/index.html
Unescape Escape View File

@ -2,59 +2,10 @@
<html>
<head>
<title>Use Your Email Client For Physical Mail</title>
<link rel="stylesheet" type="text/css" href="../../style.css">
<meta charset="UTF-8">
</head>
<style type="text/css">
a:visited {
color: #c2e;
}
a {
color: #0095dd;
}
html {
font-family: Helvetica, Arial, sans-serif;
color: #5b4636;
background-color: #f4ecd8;
}
body {
padding: 1em;
margin: auto;
}
aside {
width: 30%;
min-width: 10em;
background-color: rgba(0,0,0, 0.1);
float: right;
padding: 1em;
margin: 1em;
}
@media only all and (pointer: coarse), (pointer: none) {
body {
font-size: 5.5vmin;
}
aside {
width: inherit;
}
}
@media only all and (pointer: fine) {
body {
font-size: calc(16px + 0.6vmin);
min-width: 500px;
max-width: 50em;
}
}
</style>
<body>
<a href="../../blog.html">Home</a>
<article>
@ -124,20 +75,20 @@
This is all easy enough, but I'm lazy. I didn't feel like opening up my
email client and doing manual copy-pasting, so I decided to automate the
process a little further. I have postfix setup on my system to relay to my
mail server, so I can simply use the <code>mail</code> command to send emails without a
GUI mail client. I combined that with tesseract in a little bash
script. The script iterates through all of its arguments and interprets
them as filenames of scanned documents. It calls tesseract to extract text
from them, concatenates the results, attaches the files to an email and
sends it to my personal email address. Now all I have to do is run the
script with filenames of some documents and my job is done. If anyone is
interested in an actual program that does the same thing and doesn't
require you to setup postfix, let me know! I might consider authoring one
if it's useful to more people than just myself. The script I'm currently
using can be found <a href="scan-to-mailpile.bash.html">here (pretty)</a>
and <a href="scan-to-mailpile.bash">here (raw)</a>, but I don't recommend
using it if you don't fully understand its contents, it's not a polished
user experience 🤓.
mail server, so I can simply use the <code>mail</code> command to send
emails without a GUI mail client. I combined that with tesseract in a
little bash script. The script iterates through all of its arguments and
interprets them as filenames of scanned documents. It calls tesseract to
extract text from them, concatenates the results, attaches the files to an
email and sends it to my personal email address. Now all I have to do is
run the script with filenames of some documents and my job is done. If
anyone is interested in an actual program that does the same thing and
doesn't require you to setup postfix, let me know! I might consider
authoring one if it's useful to more people than just myself. The script
I'm currently using can be found <a href="scan-to-mailpile.bash.html">here
(pretty)</a> and <a href="scan-to-mailpile.bash">here (raw)</a>, but I
don't recommend using it if you don't fully understand its contents, it's
not a polished user experience 🤓.
</p>
</article>
</body>

49
style.css
Unescape Escape View File

@ -0,0 +1,49 @@
a:visited {
color: #c2e;
}
a {
color: #0095dd;
}
html {
font-family: Helvetica, Arial, sans-serif;
color: #5b4636;
background-color: #f4ecd8;
}
body {
padding: 1em;
margin: auto;
}
aside {
width: 30%;
min-width: 10em;
background-color: rgba(0,0,0, 0.1);
float: right;
padding: 1em;
margin: 1em;
}
pre {
white-space: pre-wrap;
}
@media only all and (pointer: coarse), (pointer: none) {
body {
font-size: 5.5vmin;
}
aside {
width: inherit;
}
}
@media only all and (pointer: fine) {
body {
font-size: calc(16px + 0.6vmin);
min-width: 500px;
max-width: 50em;
}
}
Write Preview
Loading…
Cancel
Save