Updated website style.

This commit is contained in:
Nicolás A. Ortega Froysa 2021-10-05 19:54:00 +02:00
parent c6ff6165f2
commit 89df509860
14 changed files with 177 additions and 279 deletions

View File

@ -1,12 +1,15 @@
</ul>
</article>
<hr />
</ul>
</div>
</main>
<footer>
<p>
Copyright &copy; 2016-${copyyear} Nicolás Ortega Froysa<br />
This page is licensed under the
<a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" >CC-BY-SA 4.0 International</a> license.
</p>
<p><a href="http://ft2bvxji6lxfttqcjz6ed3iyzdhv4gbcdl2bt7cdxguk56xsvdkqnbid.onion/" >
Onion Address
</a></p>
<p>Copyright &copy; 2016-${copyyear} Nicolás A. Ortega Froysa<br />
This document is licensed under a
<a href="https://creativecommons.org/licenses/by-nd/4.0/" >
CC-BY-ND 4.0 License
</a>.</p>
</footer>
</body>
</html>

View File

@ -8,30 +8,31 @@
<meta name="description" content="${description}" />
<meta name="author" content="${author}" />
<meta name="generator" content="${sitegenerator}" />
<title>Blog - ${sitetitle}</title>
<title>${title} - ${sitetitle}</title>
<link rel="stylesheet" href="/style.css" type="text/css" />
<link rel="icon" href="/favicon.png" type="image/png" />
<link rel="alternate" href="/blog/atom.xml" type="application/atom+xml" title="${sitetitle} Atom Feed" />
</head>
<body>
<header>
<h1 class="site-title" >The Music in Noise</h1>
<p><i>"If there were one million families praying the Rosary every day, the entire world would be saved."</i><br />
&#10013; Pope Saint Pius X</p>
</header>
<hr />
<nav>
<a href="/" >Home</a>
<a href="/blog/" >Blog</a>
<a href="/music.html" >Music</a>
<a href="/poetry.html" >Poetry</a>
<a href="/projects.html" >Projects</a>
<a href="/contact.html" >Contact</a>
<a href="http://ft2bvxji6lxfttqcjz6ed3iyzdhv4gbcdl2bt7cdxguk56xsvdkqnbid.onion/" style="float:right" >Onion</a>
<a href="https://themusicinnoise.net/" style="float:right" >Clear-Net</a>
</nav>
<hr />
<article>
<h2 class="page-title" >Blog</h2>
<p>Feeds: <a href="rss.xml" >RSS</a> | <a href="atom.xml" >Atom</a></p>
<h1 class="site-title" >The Music in Noise</h1>
<ul>
<li><a href="/" >Home</a></li>
<li><a href="/blog/" >Blog</a></li>
<li><a href="/music.html" >Music</a></li>
<li><a href="/poetry.html" >Poetry</a></li>
<li><a href="https://gitlab.com/naortega/" >Code</a></li>
<li><a href="https://odysee.com/@nortega:7?r=FnizT7ACmJrTdw6HQJxAVGgFcHGN6oFy&sunset=lbrytv" >Videos</a></li>
<li><a href="/contact.html" >Contact</a></li>
</ul>
</nav>
<main>
<header>
<h1 class="page-title" >Blog</h1>
</header>
<div>
<h2>Feeds</h2>
<p><a href="rss.xml" >RSS</a> | <a href="atom.xml" >Atom</a></p>
<h2>Posts</h2>
<ul>

View File

@ -1,11 +0,0 @@
</article>
<hr />
<footer>
<p>
Copyright &copy; 2016-${copyyear} Nicolás Ortega Froysa<br />
This page is licensed under the
<a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" >CC-BY-SA 4.0 International</a> license.
</p>
</footer>
</body>
</html>

View File

@ -0,0 +1 @@
../../../templates/page/footer.html

View File

@ -1,34 +0,0 @@
<!DOCTYPE html>
<html lang="${lang}" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="${lang}" />
<meta name="viewport" content="width=device-width" />
<meta name="keywords" content="${keywords}" />
<meta name="description" content="${description}" />
<meta name="author" content="${author}" />
<meta name="generator" content="${sitegenerator}" />
<title>${title} - ${sitetitle}</title>
<link rel="stylesheet" href="/style.css" type="text/css" />
<link rel="icon" href="/favicon.png" type="image/png" />
<link rel="alternate" href="/blog/atom.xml" type="application/atom+xml" title="${sitetitle} Atom Feed" />
</head>
<body>
<header>
<h1 class="site-title" >The Music in Noise</h1>
<p><i>"If there were one million families praying the Rosary every day, the entire world would be saved."</i><br />
&#10013; Pope Saint Pius X</p>
</header>
<hr />
<nav>
<a href="/" >Home</a>
<a href="/blog/" >Blog</a>
<a href="/music.html" >Music</a>
<a href="/poetry.html" >Poetry</a>
<a href="/projects.html" >Projects</a>
<a href="/contact.html" >Contact</a>
<a href="http://ft2bvxji6lxfttqcjz6ed3iyzdhv4gbcdl2bt7cdxguk56xsvdkqnbid.onion/" style="float:right" >Onion</a>
<a href="https://themusicinnoise.net/" style="float:right" >Clear-Net</a>
</nav>
<hr />
<article>

View File

@ -0,0 +1 @@
../../../templates/page/header.html

View File

@ -1,3 +1,3 @@
<h2 class="page-title" >${title} - ${created}</h2>
<h1 class="page-title" >${title} - ${created}</h1>
%{contentfile}
<p><i>Last updated: <time>${updated}</time></i></p>

View File

@ -1,6 +0,0 @@
filename = decentralized.html
title = Decentralized
description = List of free software applications that use decentralized networks for client communication.
keywords = decentralization, code, free software, privacy
created = 2020-11-08
updated = 2020-11-08

View File

@ -1,91 +0,0 @@
<p>This page is dedicated to creating a list of decentralized
applications as an alternative to popular centralized ones. What follows
are different types of online tools that we use day-to-day, a
centralized example, and (if existent) a decentralized alternative. If
you have anything to add to this list, please send me a message via any
means available on my <a href="/contact.html" >contact page</a>. One
requirement is that the technology not only be decentralized, but also
<a href="https://www.gnu.org/philosophy/free-sw.html" target="_blank" >
free software</a>. Some of these examples may be centralized but still
respecting your freedom, these will be marked with the prefix
"[free]".</p>
<h3 id="email" >E-Mail</h3>
<ul>
<li>Centralized:
<ul>
<li>[non-free] Outlook</li>
<li>[free] <a href="http://www.mutt.org/" target="_blank" >Mutt</a></li>
<li>[free] <a href="https://www.thunderbird.net/en-US/" target="_blank" >Thunderbird</a></li>
</ul>
</li>
<li>Decentralized:
<ul>
<li>[free] <a href="https://www.bitmessage.org/wiki/Main_Page" target="_blank" >Bitmessage</a></li>
</ul>
</li>
</ul>
<h3 id="ic" >Instant Communications</h3>
<ul>
<li>Centralized:
<ul>
<li>[non-free] Skype</li>
<li>[non-free] WhatsApp</li>
<li>[free] <a href="https://wire.com/en/" target="_blank" >Wire</a></li>
<li>[free] <a href="https://telegram.org/" target="_blank" >Telegram</a></li>
<li>[free] <a href="https://meet.jit.si/" target="_blank" >Jitsi Meet</a></li>
</ul>
</li>
<li>Decentralized:
<ul>
<li>[free] <a href="https://tox.chat/" target="_blank" >Tox</a></li>
<li>[free] <a href="https://ring.cx/" target="_blank" >GNU Ring</a></li>
</ul>
</li>
</ul>
<h3 id="routing" >Internet Routing/DNS</h3>
<ul>
<li>Centralized:
<ul>
<li>Google DNS</li>
<li>OpenDNS</li>
</ul>
</li>
<li>Decentralized:
<ul>
<li>[free] <a href="https://geti2p.net/en/" target="_blank" >I2P</a></li>
<li>[free] <a href="https://www.torproject.org/" target="_blank" >TOR</a></li>
</ul>
</li>
</ul>
<h3 id="media" >Media Uploading</h3>
<ul>
<li>Centralized:
<ul>
<li>[non-free] YouTube</li>
<li>[free] <a href="https://mediagoblin.org/" target="_blank" >Media Goblin</a></li>
</ul>
</li>
<li>Decentralized:
<ul>
<li>Torrents</li>
<li>[free] <a href="https://joinpeertube.org/en/" target="_blank" >Peertube</a></li>
<li>[free] <a href="https://lbry.com/" target="_blank" >lbry</a></li>
</ul>
</li>
</ul>
<h3 id="social-media" >Social Media</h3>
<ul>
<li>Centralized:
<ul>
<li>[non-free] Facebook</li>
<li>[non-free] Twitter</li>
<li>[non-free] Google+</li>
</ul>
</li>
<li>Decentralized:
<ul>
<li>[free] <a href="https://diasporafoundation.org/" target="_blank" >Diaspora</a></li>
<li>[free] <a href="https://gnu.io/social/" target="_blank" >GNU Social</a></li>
</ul>
</li>
</ul>

View File

@ -1,6 +0,0 @@
filename = doublesgame.html
title = DoublesGame
description = A game that you can program while waiting for your new distro to install.
keywords = programming, doubles, game
created = 2020-11-08
updated = 2020-11-08

View File

@ -1,34 +0,0 @@
<p>DoublesGame is not a game that you download, install, and run, per
se. Rather, it is a game that you write yourself. The idea of the game
is that it is something to do while you're installing an OS and have
time to kill (because the installer is cleaning your hard drive for
encryption, or it's downloading updated packages, or anything else,
really, we know that shit takes forever). The idea of the game is that,
using your favorite editor provided by the image by default (typically
<code>`vi'</code> or <code>`nano'</code>) you write using your favorite
language provided by the image by default (you are typically given a C
compiler, an assembler, a bash shell, and a Python interpreter, but if
your image provides something else then that's fair game) a game which
has the following characteristics:</p>
<ul>
<li>
Query the user in an infinite loop the answer to
<code>`2^n'</code>, where <code>`n'</code> is a variable that
you continuously increment and starts at 1.
</li>
<li>
If the wrong answer is given the user will be asked to try
again.
</li>
<li>
If <code>`0'</code> is given as an answer the game exits (since
there are no doubles that equal 0).
</li>
</ul>
<p>If you would like to add extra rules you may do so, in fact, it is
encouraged in order to make the game last longer.</p>
<p>This game will require that the user at least use conditionals,
loops, variables, and user I/O. There are some examples in multiple
languages in
<a href="https://gitlab.com/naortega/DoublesGame-Collection" target="_blank" >this repository</a>.</p>

View File

@ -1,6 +1,3 @@
<center>
<h3>Software Developer &amp; Systems Administrator</h3>
</center>
<h3>Who Am I?</h3>
<p>I'm a Spanish-American, living in Seville, Spain. I'm fluent in English and
Spanish, with a decent proficiency in Portuguese and Esperanto. My interests
@ -53,7 +50,7 @@ clearing of lake access points.</p>
<center>
<h3>Cryptocurrency</h3>
<div class="card" >
<h5>Monero (XMR):</h5>
<h4>Monero (XMR):</h4>
<small>42espNaUqPdJK4vTir4NDfH4gT6brFR4F5KPRADrg5t98LkzHnQfFnUDZZEetp3Zw5K8V4v364tN3TMxfg4eXEN9RpnrNBG</small>
</div>
</center>

154
style.css
View File

@ -28,32 +28,94 @@
body {
background-color: #fdf6e3;
color: #45575C;
font-family: serif;
}
body {
width: 50%;
margin-left: auto;
margin-right: auto;
}
header {
.site-title {
font-family: sans-serif;
font-size: 45px;
text-transform: uppercase;
text-align: center;
}
nav {
overflow: hidden;
font-family: sans-serif;
float: none;
width: 90%;
border-style: solid;
border-width: 0 0 5px 0;
padding-bottom: 15px;
margin: 0 auto 0 auto;
}
nav > ul {
padding-left: 10px;
list-style-type: none;
text-align: center;
}
nav > ul > li {
display: inline;
font-size: 28px;
margin: 10px;
}
nav a {
float: left;
display: block;
font-size: 18px;
padding: 4px 8px;
text-align: center;
text-decoration: none;
}
main {
float: none;
width: 90%;
margin: 0 auto 0 auto;
font-size: 18px;
}
main h1 {
font-size: 32px;
}
main h2 {
font-size: 26px;
}
main h3 {
font-size: 20px;
}
main p, main blockquote {
text-align: justify;
text-justify: inter-word;
}
header > h1 {
font-family: sans-serif;
font-size: 38px;
text-align: center;
}
header > h2 {
font-family: sans-serif;
font-size: 24px;
text-align: center;
}
img.profile {
width: 40%;
float: right;
border-radius: 15%;
margin: 10px;
}
code {
font-family: monospace;
}
footer {
text-align: center;
width: 100%;
float: right;
}
ul {
margin-top: 5px;
}
@ -98,11 +160,6 @@ ol.roman-numerals {
list-style-type: upper-roman;
}
blockquote, p {
font-size: 16px;
line-height: 24px;
}
a {
color: #185885;
}
@ -124,16 +181,6 @@ figure img {
text-align: center;
}
h3, h4 {
margin-bottom: 0px;
padding-bottom: 0px;
}
h5 {
margin-top: 3px;
margin-bottom: 3px;
}
div.card {
padding: 10px;
border-radius: 5px;
@ -142,6 +189,10 @@ div.card {
background-color: #eee8d5;
}
div.card > h4 {
margin: 2px;
}
.album-cover {
width: 300px;
display: block;
@ -152,14 +203,39 @@ div.card {
padding: 1px 10px;
}
code {
font-family: monospace;
}
footer {
text-align: center;
}
@media screen and (max-width: 800px) {
body { width: 100%; }
@media (min-width: 1200px) {
.site-title {
text-align: left;
}
nav {
width: 20%;
height: 85%;
float: left;
margin: 15px;
padding: 0 15px 15px 15px;
border-style: solid;
border-width: 0 5px 0 0;
position: fixed;
}
nav > ul {
text-align: left;
}
nav > ul > li {
display: block;
font-size: 32px;
float: none;
}
main {
float: right;
width: 70%;
margin: 20px;
padding: 20px;
}
footer {
width: 75%;
float: right;
}
img.profile {
width: 35%;
}
}

View File

@ -1,11 +1,13 @@
</article>
<hr />
</main>
<footer>
<p>
Copyright &copy; 2016-${copyyear} Nicolás Ortega Froysa<br />
This page is licensed under the
<a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" >CC-BY-SA 4.0 International</a> license.
</p>
<p><a href="http://ft2bvxji6lxfttqcjz6ed3iyzdhv4gbcdl2bt7cdxguk56xsvdkqnbid.onion/" >
Onion Address
</a></p>
<p>Copyright &copy; 2016-${copyyear} Nicolás A. Ortega Froysa<br />
This document is licensed under a
<a href="https://creativecommons.org/licenses/by-nd/4.0/" >
CC-BY-ND 4.0 License
</a>.</p>
</footer>
</body>
</html>

View File

@ -14,21 +14,16 @@
<link rel="alternate" href="/blog/atom.xml" type="application/atom+xml" title="${sitetitle} Atom Feed" />
</head>
<body>
<header>
<h1 class="site-title" >The Music in Noise</h1>
<p><i>"If there were one million families praying the Rosary every day, the entire world would be saved."</i><br />
&#10013; Pope Saint Pius X</p>
</header>
<hr />
<nav>
<a href="/" >Home</a>
<a href="/blog/" >Blog</a>
<a href="/music.html" >Music</a>
<a href="/poetry.html" >Poetry</a>
<a href="/projects.html" >Projects</a>
<a href="/contact.html" >Contact</a>
<a href="http://ft2bvxji6lxfttqcjz6ed3iyzdhv4gbcdl2bt7cdxguk56xsvdkqnbid.onion/" style="float:right" >Onion</a>
<a href="https://themusicinnoise.net/" style="float:right" >Clear-Net</a>
<h1 class="site-title" >The Music in Noise</h1>
<ul>
<li><a href="/" >Home</a></li>
<li><a href="/blog/" >Blog</a></li>
<li><a href="/music.html" >Music</a></li>
<li><a href="/poetry.html" >Poetry</a></li>
<li><a href="https://gitlab.com/naortega/" >Code</a></li>
<li><a href="https://odysee.com/@nortega:7?r=FnizT7ACmJrTdw6HQJxAVGgFcHGN6oFy&sunset=lbrytv" >Videos</a></li>
<li><a href="/contact.html" >Contact</a></li>
</ul>
</nav>
<hr />
<article>
<main>

View File

@ -1,2 +1,6 @@
<h2 class="page-title" >${title}</h2>
%{contentfile}
<header>
<h1 class="page-title" >${title}</h1>
</header>
<div>
%{contentfile}
</div>