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> <html>
<head> <head>
<title>Blog</title> <title>Blog</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> </head>
<style type="text/css"> <style type="text/css">
a:visited {
color: #c2e;
}
a {
color: #0095dd;
}
h2 a { h2 a {
color: #5b4636; color: #5b4636;
text-decoration: none; text-decoration: none;
@ -22,31 +15,6 @@
color: #5b4636; color: #5b4636;
text-decoration: none; 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> </style>
<body> <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 <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 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 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 them support full-text search and some even complement that with neat tagging
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> 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> </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 <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 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> <link>https://hugot.nl/blog.html</link>
<description>Hugo's personal blog</description> <description>Hugo's personal blog</description>
<language>en-us</language> <language>en-us</language>
<pubDate>Mon 17 Feb 2020 12:20:14 PM CET</pubDate> <pubDate>wo 15 apr 2020 15:32:13 CEST</pubDate>
<lastBuildDate>Mon 17 Feb 2020 12:20:14 PM CET</lastBuildDate> <lastBuildDate>wo 15 apr 2020 15:32:13 CEST</lastBuildDate>
<docs>http://blogs.law.harvard.edu/tech/rss</docs> <docs>http://blogs.law.harvard.edu/tech/rss</docs>
<generator>Hugo's Custom Bash Script</generator> <generator>Hugo's Custom Bash Script</generator>
<managingEditor>social@hugot.nl</managingEditor> <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 <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 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 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 them support full-text search and some even complement that with neat tagging
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> 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>
<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 <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 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 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 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>
<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 <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 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 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 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> </item>
</channel> </channel>
</rss> </rss>

38
generate-blog.bash
Unescape Escape View File

@ -35,18 +35,11 @@ print-blog-html-top() {
echo '<html> echo '<html>
<head> <head>
<title>Blog</title> <title>Blog</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> </head>
<style type="text/css"> <style type="text/css">
a:visited {
color: #c2e;
}
a {
color: #0095dd;
}
h2 a { h2 a {
color: #5b4636; color: #5b4636;
text-decoration: none; text-decoration: none;
@ -56,31 +49,6 @@ print-blog-html-top() {
color: #5b4636; color: #5b4636;
text-decoration: none; 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> </style>
<body> <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 # 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. # 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. # 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. # Escape the post html file name to safely use it in the generated html.
href="$(escape-html <<<"$post_html")" || exit $? href="$(escape-html <<<"$post_html")" || exit $?

36
index.html
Unescape Escape View File

@ -2,44 +2,10 @@
<html> <html>
<head> <head>
<title>Hugot</title> <title>Hugot</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> </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> <body>
<a href="blog.html">Blog</a> <a href="blog.html">Blog</a>
<h1>Hugo's homepage</h1> <h1>Hugo's homepage</h1>

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

@ -2,44 +2,10 @@
<html> <html>
<head> <head>
<title>Introduction</title> <title>Introduction</title>
<link rel="stylesheet" type="text/css" href="../../style.css">
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> </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> <body>
<a href="../../blog.html">Home</a> <a href="../../blog.html">Home</a>
<h1>Introduction</h1> <h1>Introduction</h1>

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

@ -1,49 +1,11 @@
<!DOCTYPE HTML> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Creating a Simple Static Blog</title> <title>Creating a Simple Static Blog</title>
<link rel="stylesheet" type="text/css" href="../../style.css">
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> </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> <body>
<a href="../../blog.html">Home</a> <a href="../../blog.html">Home</a>
<h1>Creating a Simple Static Blog</h1> <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 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 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 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> has the added benefit that each page is a standalone document. So for
will download a HTML page that looks exactly the same locally as it does on example <code>wget PAGE_URL</code> will download a HTML page that looks
the web without having to download any extra assets. exactly the same locally as it does on the web without having to download any
extra assets.
</p> </p>
<p> <p>

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

@ -2,59 +2,10 @@
<html> <html>
<head> <head>
<title>Use Your Email Client For Physical Mail</title> <title>Use Your Email Client For Physical Mail</title>
<link rel="stylesheet" type="text/css" href="../../style.css">
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> </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> <body>
<a href="../../blog.html">Home</a> <a href="../../blog.html">Home</a>
<article> <article>
@ -124,20 +75,20 @@
This is all easy enough, but I'm lazy. I didn't feel like opening up my 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 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 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 mail server, so I can simply use the <code>mail</code> command to send
GUI mail client. I combined that with tesseract in a little bash emails without a GUI mail client. I combined that with tesseract in a
script. The script iterates through all of its arguments and interprets little bash script. The script iterates through all of its arguments and
them as filenames of scanned documents. It calls tesseract to extract text interprets them as filenames of scanned documents. It calls tesseract to
from them, concatenates the results, attaches the files to an email and extract text from them, concatenates the results, attaches the files to an
sends it to my personal email address. Now all I have to do is run the email and sends it to my personal email address. Now all I have to do is
script with filenames of some documents and my job is done. If anyone is run the script with filenames of some documents and my job is done. If
interested in an actual program that does the same thing and doesn't anyone is interested in an actual program that does the same thing and
require you to setup postfix, let me know! I might consider authoring one doesn't require you to setup postfix, let me know! I might consider
if it's useful to more people than just myself. The script I'm currently authoring one if it's useful to more people than just myself. The script
using can be found <a href="scan-to-mailpile.bash.html">here (pretty)</a> I'm currently using can be found <a href="scan-to-mailpile.bash.html">here
and <a href="scan-to-mailpile.bash">here (raw)</a>, but I don't recommend (pretty)</a> and <a href="scan-to-mailpile.bash">here (raw)</a>, but I
using it if you don't fully understand its contents, it's not a polished don't recommend using it if you don't fully understand its contents, it's
user experience 🤓. not a polished user experience 🤓.
</p> </p>
</article> </article>
</body> </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