vagabond/the-internet-vagabond-dot-com
1
0
Fork 0
Code Issues 3 Pull requests Projects 2 Activity Actions

General Updates

Browse source 
- Change "license" of code from WTFPL to Unlicense, and content from
  WTFPL to Creative Commons Zero.
- CSS
    - Remove header tags from most non-content sources
    - Update post footers to fit better on small screens
    - Update site footer styles
- Update layouts accordingly
- Update README
This commit is contained in:
Bill Niblock 2021-12-20 17:50:48 -05:00
parent ddcdda5f5b
commit c1b9298c90
8 changed files with 121 additions and 148 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
LICENSE
View file

@ -1,13 +0,0 @@
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.

23
README.md
View file

@ -9,19 +9,24 @@ writing. Nothing I say is visionary or profound. I will tend to focus on
technology, gaming, and philosophy. All opinions my own. technology, gaming, and philosophy. All opinions my own.
### To-Do ### To-Do
* Look into webmentions * Implement Cactus Comments
* Look into Web Mentions
* Consider self-hosting
### Latest Technology Update :: 2020-06/07 ### Latest Technology Update :: 2021-12
* Improved the handling of code blocks, both in-line and stand-alone. * Added "web analytic" gathering via GoatCounter
* Added styles for a "Sources" table. See rule `h3 + table` in the styles. * Cleaned up styles a bit, notably removing the use of header tags outside of
* Updated 404 page to use proper styles. post content.
* Added a license file, and a copyright notice on each article. Not that it * Changed "license" of the code to the Unlicense, and all published content to
matters: continue to do what the fuck you want. CC0.
## Licenses / Copyrights/ Bureaucracy ## Licenses / Copyrights/ Bureaucracy
All code and content licensed under the [WTFPL](http://www.wtfpl.net/about/), All code is [Unlicensed](https://unlicense.org/), and all published content is
unless otherwise noted in the individual files: [dedicated to the public
domain](https://creativecommons.org/publicdomain/zero/1.0/), unless otherwise
noted in the individual files:
* GoatCounter Javascript (/src/scripts/goatcounter.js) licensed under the * GoatCounter Javascript (/src/scripts/goatcounter.js) licensed under the
[ISC](https://opensource.org/licenses/ISC) [ISC](https://opensource.org/licenses/ISC)

24
UNLICENSE Normal file
View file

@ -0,0 +1,24 @@
This is free and unencumbered software released into the public domain.
Anyone is free to copy, modify, publish, use, compile, sell, or
distribute this software, either in source code form or as a compiled
binary, for any purpose, commercial or non-commercial, and by any
means.
In jurisdictions that recognize copyright laws, the author or authors
of this software dedicate any and all copyright interest in the
software to the public domain. We make this dedication for the benefit
of the public at large and to the detriment of our heirs and
successors. We intend this dedication to be an overt act of
relinquishment in perpetuity of all present and future rights to this
software under copyright law.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
For more information, please refer to <http://unlicense.org/>

64
_includes/cor_menu.html
View file

@ -1,28 +1,33 @@
<footer> <footer>
<nav> <nav>
<h5><a href="/">home</a></h5> <div><a href="/">home</a></div>
{% for topic in site.topics %} {% for topic in site.topics %}
<h5><a href="/topics/{{ topic.title }}">{{ topic.title }}</a></h5> <div><a href="/topics/{{ topic.title }}">{{ topic.title }}</a></div>
{% endfor %} {% endfor %}
</nav> </nav>
<hr /> <hr />
<section class="h-card"> <section class="h-card">
<section id="about"> <section class="footer_about" id="about">
<h5> <div>The Site</div>
The Site | <div>
<a class="u-url" href="{{ site.url }}/feed.xml" <a class="u-url" href="{{ site.url }}/feed.xml"
aria-label="RSS feed for the site"> aria-label="RSS feed for the site">
<span class="fa fa-rss" aria-hidden="true" <span class="fa fa-rss" aria-hidden="true"
title="RSS Feed"</span> title="RSS Feed"</span>
</a> | </a> |
<a class="u-url" href="https://theinternetvagabond.goatcounter.com/" <a class="u-url" href="https://theinternetvagabond.goatcounter.com/"
aria-label="GoatCounter statistics for the stie"> aria-label="GoatCounter statistics for the site">
<span class="fa fa-bar-chart" aria-hidden="true" <span class="fa fa-bar-chart" aria-hidden="true"
title="GoatCounter Statistics"</span> title="GoatCounter Statistics"</span>
</a> |
<a class="u-url" href="https://github.com/VagabondAzulien/VagabondAzulien.github.io"
aria-label="Source code repository for the site">
<span class="fa fa-code" aria-hidden="true"
title="Site Source Code"</span>
</a> </a>
</h5> </div>
<a class="u-url u-uid" href="https://theinternetvagabond.com"></a> <a class="u-url u-uid" href="https://theinternetvagabond.com"></a>
<p> <p>
This site is a small slice of internet real-estate that I use for This site is a small slice of internet real-estate that I use for
@ -30,15 +35,30 @@
focus on technology, gaming, and philosophy. All opinions my focus on technology, gaming, and philosophy. All opinions my
own. own.
</p> </p>
<h5> <div>The Vagabond</div>
The Vagabond | <div>
<a class="u-email" rel="me" <a class="u-email" rel="me"
href="mailto:bill@theinternetvagabond.com" href="mailto:bill@theinternetvagabond.com"
aria-label="Email Bill at The Internet Vagabond dot com"> aria-label="Email Bill at The Internet Vagabond dot com">
<span class="fa fa-envelope-o" aria-hidden="true" <span class="fa fa-envelope-o" aria-hidden="true"
title="bill at theinternetvagabond.com"</span> title="Email bill at theinternetvagabond.com"</span>
</a> |
<a class="u-url" rel="me" href="https://matrix.to/#/@vagabondazulien:exp.farm"
aria-label="Link to me on Matrix">
<span class="fa fa-matrix-org " aria-hidden="true"
title="Speak with me on Matrix"</span>
</a> |
<a class="u-url" rel="me" href="https://www.twitch.tv/vagabondazulien/profile"
aria-label="Link to my Twitch channel">
<span class="fa fa-twitch " aria-hidden="true"
title="My Twitch channel"</span>
</a> |
<a class="u-url" rel="me" href="https://github.com/VagabondAzulien"
aria-label="Link to my GitHub profile">
<span class="fa fa-github" aria-hidden="true"
title="My GitHub profile"</span>
</a> </a>
</h5> </div>
<p> <p>
My name is <span class="p-name">Bill Niblock</span>. <span My name is <span class="p-name">Bill Niblock</span>. <span
class="p-note">I'm a computer scientist by education, a technologist class="p-note">I'm a computer scientist by education, a technologist
@ -47,28 +67,6 @@
New York</span>, <span class="p-country-name">USA</span>. New York</span>, <span class="p-country-name">USA</span>.
</p> </p>
</section> </section>
<section id="social">
<a class="u-url" rel="me" href="https://github.com/VagabondAzulien"
aria-label="Link to my GitHub profile">
<span class="fa fa-github fa-2x" aria-hidden="true"
title="My GitHub profile"</span>
</a>
<a class="u-url" rel="me" href="https://www.twitch.tv/vagabondazulien/profile"
aria-label="Link to my Twitch channel">
<span class="fa fa-twitch fa-2x" aria-hidden="true"
title="My Twitch channel"</span>
</a>
<a class="u-url" rel="me" href="https://steamcommunity.com/id/azulien"
aria-label="Link to my Steam profile">
<span class="fa fa-steam fa-2x" aria-hidden="true"
title="My Steam profile"</span>
</a>
<a class="u-url" rel="me" href="https://matrix.to/#/@vagabondazulien:exp.farm"
aria-label="Link to me on Matrix">
<span class="fa fa-matrix-org fa-2x" aria-hidden="true"
title="Speak with me on Matrix"</span>
</a>
</section>
<section style="display: none;"> <section style="display: none;">
<span class="p-category">Gaming</span> <span class="p-category">Gaming</span>
<span class="p-category">Technology</span> <span class="p-category">Technology</span>

4
_layouts/corrupt_index.html
View file

@ -15,8 +15,8 @@
<link rel="icon" type="image/x-icon" <link rel="icon" type="image/x-icon"
href="{{ site.url }}/src/images/favicon.ico" /> href="{{ site.url }}/src/images/favicon.ico" />
<link rel="stylesheet" <link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css"
integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY="
crossorigin="anonymous"> crossorigin="anonymous">
<script data-goatcounter="https://theinternetvagabond.goatcounter.com/count" <script data-goatcounter="https://theinternetvagabond.goatcounter.com/count"
async src="{{ site.url}}/src/scripts/goatcounter.js"></script> async src="{{ site.url}}/src/scripts/goatcounter.js"></script>

32
_layouts/corrupt_post.html
View file

@ -15,8 +15,8 @@
<link rel="icon" type="image/x-icon" <link rel="icon" type="image/x-icon"
href="{{ site.url }}/src/images/favicon.ico" /> href="{{ site.url }}/src/images/favicon.ico" />
<link rel="stylesheet" <link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css"
integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY="
crossorigin="anonymous"> crossorigin="anonymous">
<script data-goatcounter="https://theinternetvagabond.goatcounter.com/count" <script data-goatcounter="https://theinternetvagabond.goatcounter.com/count"
async src="{{ site.url }}/src/scripts/goatcounter.js"></script> async src="{{ site.url }}/src/scripts/goatcounter.js"></script>
@ -35,18 +35,26 @@
<main> <main>
<article> <article>
{{ content }} {{ content }}
<h4 class="author_info"> <div class="author_info">
<span>[ {{ page.author }} ]</span> {{ page.author }}
<span>[ {{ page.pub }} ]</span> <a href="https://unlicense.org/"
<span>[ aria-label="Code dedicated to the public domain under Unlicense">
<span class="fa fa-cc-pd" aria-hidden="true"
title="Code dedicated to the public domain under Unlicense"</span>
</a>
<a href="https://creativecommons.org/publicdomain/zero/1.0/"
aria-label="Published to the public domain under CC0">
<span class="fa fa-cc-zero" aria-hidden="true"
title="Content dedicated to the public domain under CC0"</span>
</a>
{{ page.pub }}
<br />
[
{% for topic in page.topics %} {% for topic in page.topics %}
<a href="/topics/{{topic}}">{{topic}}</a> <a href="/topics/{{topic}}">{{topic}}</a>
{% endfor %}] {% endfor %}
</span> ]
<span>[ </div>
<a href="http://www.wtfpl.net/about/">wtfpl</a> ]
</span>
</h4>
</article> </article>
</main> </main>
{% include cor_menu.html %} {% include cor_menu.html %}

40
src/styles/corrupt_layout.css
View file

@ -2,7 +2,6 @@ html {
/* Change this value to any color you want */ /* Change this value to any color you want */
--hilite: #8D3FC5; --hilite: #8D3FC5;
} }
body { body {
background-color: #3B3B3B; background-color: #3B3B3B;
margin: 0; margin: 0;
@ -13,7 +12,6 @@ header {
border-bottom: 1px solid var(--hilite); border-bottom: 1px solid var(--hilite);
box-shadow: 0px 5px 30px -5px var(--hilite); box-shadow: 0px 5px 30px -5px var(--hilite);
} }
header a { header a {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
@ -22,7 +20,6 @@ header a {
justify-content: center; justify-content: center;
height: 100%; height: 100%;
} }
header .wrapper { header .wrapper {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
@ -33,28 +30,18 @@ footer {
border-top: 1px solid var(--hilite); border-top: 1px solid var(--hilite);
box-shadow: 0px -5px 30px -5px var(--hilite); box-shadow: 0px -5px 30px -5px var(--hilite);
} }
nav { nav {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: space-around; justify-content: space-around;
} }
footer hr { footer hr {
margin: 20px 5em; margin: 20px 5em;
} }
footer #social {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
padding: 1em;
}
main { main {
max-width: 100%; max-width: 100%;
} }
main #details { main #details {
display: flex; flex-flow: row wrap; display: flex; flex-flow: row wrap;
text-align: center; text-align: center;
@ -63,24 +50,20 @@ main #details {
font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif; font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: darkgrey; letter-spacing: 0.4em; color: darkgrey; letter-spacing: 0.4em;
} }
main #date { main #date {
width: 100%; width: 100%;
text-align: center; text-align: center;
color: grey; color: grey;
} }
main #tags { main #tags {
width: 100%; width: 100%;
text-align: center; text-align: center;
color: grey; color: grey;
} }
main #desc { main #desc {
padding: 0em 2em 2em 2em; padding: 0em 2em 2em 2em;
color: white; color: white;
} }
main pre.highlight { main pre.highlight {
overflow-x: auto; overflow-x: auto;
color: white; color: white;
@ -92,25 +75,11 @@ main pre.highlight {
border-bottom: 2px solid var(--hilite); border-bottom: 2px solid var(--hilite);
border-right: 2px solid var(--hilite); border-right: 2px solid var(--hilite);
} }
main ul { main ul {
padding: 0em 4em; padding: 0em 4em;
} }
h3 + table {
width: 100%;
padding: 0em 1em;
text-align: right;
}
h4.author_info {
display: flex;
justify-content: space-around;
flex-flow: column;
}
@supports (display: grid) { @supports (display: grid) {
.cor_page { .cor_page {
display: grid; display: grid;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
@ -154,7 +123,6 @@ h4.author_info {
box-shadow: unset; box-shadow: unset;
min-height: 100vh; min-height: 100vh;
} }
nav { nav {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
@ -166,23 +134,15 @@ h4.author_info {
main { main {
margin: 0 5em; margin: 0 5em;
} }
main #date { main #date {
width: 50%; width: 50%;
text-align: left; text-align: left;
color: grey; color: grey;
} }
main #tags { main #tags {
width: 50%; width: 50%;
text-align: right; text-align: right;
color: grey; color: grey;
} }
h4.author_info {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
}
} }
} }

69
src/styles/corrupt_typog.css
View file

@ -3,77 +3,87 @@ html {
/* Change this value to any color you want */ /* Change this value to any color you want */
--hilite: #8D3FC5; --hilite: #8D3FC5;
} }
ul,ol,p { ul,ol,p {
color: white; color: white;
} }
a,a:visited,a:link,a:focus { a,a:visited,a:link,a:focus {
text-decoration: none; text-decoration: none;
color: darkgrey; color: darkgrey;
transition: color 0.5s; transition: color 0.5s;
} }
a:hover { a:hover {
color: white; color: white;
transition: color 0.5s; transition: color 0.5s;
} }
nav a:hover { nav a:hover {
color: var(--hilite); color: var(--hilite);
transition: color 0.5s; transition: color 0.5s;
} }
header div { header div {
color: darkgrey; letter-spacing: 0.8em; color: darkgrey; letter-spacing: 0.8em;
} }
header span { header span {
color: white; color: white;
letter-spacing: 0.9em; letter-spacing: 0.9em;
transition: color 2s; transition: color 2s;
} }
header a:hover > div > span { header a:hover > div > span {
color: var(--hilite); color: var(--hilite);
transition: color 1s; transition: color 1s;
} }
article p {
footer #email { padding: 0em 2em;
color: darkgrey; }
article p code {
font: 1.05em monospace;
color: #ededed;
background-color: #2B2B2B;
padding: 0em 0.25em;
}
article .author_info {
text-align: center;
padding: 10px;
border-top: 1px solid darkgrey;
font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: darkgrey; letter-spacing: 0.4em;
} }
nav { nav {
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: darkgrey; letter-spacing: 0.6em; line-height: 2.0em; color: darkgrey; letter-spacing: 0.6em; line-height: 2.0em;
} }
nav div {
#about p { text-align: right;
padding: 10px;
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: darkgrey; letter-spacing: 0.6em;
margin-top: 0; margin-bottom: 0;
}
footer p {
line-height: 1.5em; letter-spacing: 0.1em; text-align: left; color: white; line-height: 1.5em; letter-spacing: 0.1em; text-align: left; color: white;
padding: 0em 1em; padding: 0em 1em;
} }
footer div {
/* Article Titles */ text-align: right;
padding: 10px;
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: darkgrey; letter-spacing: 0.6em;
margin-top: 0; margin-bottom: 0;
}
h1 { h1 {
padding: 10px; padding: 10px;
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: darkgrey; letter-spacing: 0.25em; color: darkgrey; letter-spacing: 0.25em;
} }
h1::first-letter { h1::first-letter {
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: white; color: white;
} }
/* Article section Header, left-aligned */
h2 { h2 {
text-align: left; text-align: left;
padding: 10px; padding: 10px;
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: darkgrey; letter-spacing: 0.6em; color: darkgrey; letter-spacing: 0.6em;
} }
/* Article section Sub-Header, left-aligned */
h3 { h3 {
text-align: left; text-align: left;
padding: 10px; padding: 10px;
@ -81,8 +91,6 @@ h3 {
font: 0.85em "Lucida Sans Unicode", "Lucida Grande", sans-serif; font: 0.85em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: darkgrey; letter-spacing: 0.5em; color: darkgrey; letter-spacing: 0.5em;
} }
/* Article footer and tags */
h4 { h4 {
text-align: center; text-align: center;
padding: 10px; padding: 10px;
@ -90,8 +98,6 @@ h4 {
font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif; font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: darkgrey; letter-spacing: 0.4em; color: darkgrey; letter-spacing: 0.4em;
} }
/* Footer links and section titles */
h5 { h5 {
text-align: right; text-align: right;
padding: 10px; padding: 10px;
@ -99,24 +105,9 @@ h5 {
color: darkgrey; letter-spacing: 0.6em; color: darkgrey; letter-spacing: 0.6em;
margin-top: 0; margin-bottom: 0; margin-top: 0; margin-bottom: 0;
} }
/* Category button */
/* TODO: Change this to a different tag */
h6 { h6 {
padding: 10px; padding: 10px;
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: darkgrey; letter-spacing: 0.5em; text-align: center; color: darkgrey; letter-spacing: 0.5em; text-align: center;
border: 1px solid darkgrey; border: 1px solid darkgrey;
} }
article p {
padding: 0em 2em;
}
/* Inline code formatting */
article p code {
font: 1.05em monospace;
color: #ededed;
background-color: #2B2B2B;
padding: 0em 0.25em;
}