Updated new style.

This commit is contained in:
Nicolás A. Ortega Froysa 2021-11-16 20:27:33 +01:00
parent c0efe667c9
commit c8ab67b958
10 changed files with 103 additions and 213 deletions

4
.gitignore vendored
View File

@ -1,2 +1,6 @@
# ignore generated site # ignore generated site
output/ output/
# Ignore compiled files
blog/templates/index.html/header.html
blog/templates/index.html/footer.html

View File

@ -11,6 +11,8 @@ pages:
blog: blog:
mkdir -p $(OUTPUT_DIR)/blog mkdir -p $(OUTPUT_DIR)/blog
cat templates/page/header.html blog/templates/index.html/header-part.html > blog/templates/index.html/header.html
cat blog/templates/index.html/footer-part.html templates/page/footer.html > blog/templates/index.html/footer.html
find blog/posts -type f -name '*.cfg' -print0 | sort -zr | xargs -0 saait -o $(OUTPUT_DIR)/blog/ -t blog/templates/ find blog/posts -type f -name '*.cfg' -print0 | sort -zr | xargs -0 saait -o $(OUTPUT_DIR)/blog/ -t blog/templates/
sync: all sync: all
@ -18,3 +20,5 @@ sync: all
clean: clean:
rm -rf $(OUTPUT_DIR) rm -rf $(OUTPUT_DIR)
rm -f blog/templates/index.html/header.html
rm -f blog/templates/index.html/footer.html

View File

@ -0,0 +1 @@
</ul>

View File

@ -1,16 +0,0 @@
</ul>
</div>
</main>
<footer>
<p><a href="http://ft2bvxji6lxfttqcjz6ed3iyzdhv4gbcdl2bt7cdxguk56xsvdkqnbid.onion/" >
Onion Address
</a> -
<a href="https://themusicinnoise.net/" >Clear-Net</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

@ -0,0 +1,6 @@
<h1>Blog</h1>
<h2>Feeds</h2>
<p><a href="rss.xml" >RSS</a> | <a href="atom.xml" >Atom</a></p>
<h2>Posts</h2>
<ul>

View File

@ -1,38 +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>
<nav>
<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

@ -2,7 +2,7 @@
src="/profile.png" src="/profile.png"
alt="Profile picture." alt="Profile picture."
title="Profile picture." title="Profile picture."
class="profile" /> id="profile" />
<h2>Who Am I?</h2> <h2>Who Am I?</h2>
<p>I'm a Spanish-American, living in Seville, Spain. I'm fluent in English and <p>I'm a Spanish-American, living in Seville, Spain. I'm fluent in English and
@ -52,11 +52,3 @@ our crew members for the duration of the job, and worked in
various national parks and lake access points. Our work was various national parks and lake access points. Our work was
primarily trail construction, removal of invasive species, and primarily trail construction, removal of invasive species, and
clearing of lake access points.</p> clearing of lake access points.</p>
<center>
<h2>Cryptocurrency</h2>
<div class="crypto-card" >
<h3>Monero (XMR):</h3>
<small>42espNaUqPdJK4vTir4NDfH4gT6brFR4F5KPRADrg5t98LkzHnQfFnUDZZEetp3Zw5K8V4v364tN3TMxfg4eXEN9RpnrNBG</small>
</div>
</center>

204
style.css
View File

@ -25,109 +25,64 @@
* For more information, please refer to <http://unlicense.org/> * For more information, please refer to <http://unlicense.org/>
*/ */
/* GENERAL */
body { body {
background-color: #fdf6e3; background-color: #fdf6e3;
color: #45575C; color: #45575C;
} }
.site-title { header {
margin: 30px;
}
header h1 {
font-family: sans-serif; font-family: sans-serif;
font-size: 45px; font-size: 50px;
text-transform: uppercase;
text-align: center; text-align: center;
} }
nav { nav {
font-family: sans-serif; background-color: #002b36;
float: none; width: 100%;
width: 90%; padding: 6px 0;
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; text-align: center;
} }
nav > ul > li { nav > a {
display: inline; text-decoration: none;
font-size: 28px; font-size: 24px;
margin: 10px; font-family: sans-serif;
padding: 8px 10px;
} }
nav a { nav > a:hover {
text-decoration: none; background-color: #073642;
}
a {
color: #268bd2;
}
a:visited {
color: #d33682;
} }
main { main {
float: none; width: 60%;
width: 90%; margin: 5px auto;
margin: 0 auto 0 auto; text-align: justify;
font-size: 18px; padding: 5px;
} }
main h1 { 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; 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 { footer {
text-align: center; text-align: center;
width: 100%; width: 35%;
float: right; margin: 7px auto;
} border-top: 1px solid;
ul {
margin-top: 5px;
}
ul.code {
padding-left: 10px;
}
ul.code li {
font-family: monospace;
font-size: 16px;
list-style-type: none;
} }
ol.refs { ol.refs {
@ -160,45 +115,21 @@ ol.roman-numerals {
list-style-type: upper-roman; list-style-type: upper-roman;
} }
a {
color: #185885;
}
a:visited {
color: #9B225D;
}
sup { sup {
font-size: 12px; font-size: 12px;
line-height: 80%; line-height: 80%;
} }
figure { figure {
margin: 0 auto 0 auto; /*margin: 0 auto 0 auto;*/
text-align: center; /*text-align: center;*/
width: 65%; /*width: 65%;*/
} }
figcaption { figcaption {
font-size: 14px; font-size: 14px;
} }
.page-title {
text-align: center;
}
div.crypto-card {
padding: 10px;
border-radius: 5px;
width: 30%;
word-wrap: break-word;
background-color: #eee8d5;
}
div.crypto-card > h3 {
margin: 2px;
}
img.album-cover { img.album-cover {
width: 40%; width: 40%;
/*float: right;*/ /*float: right;*/
@ -211,43 +142,52 @@ img.album-cover {
padding: 1px 10px; padding: 1px 10px;
} }
@media (min-width: 1200px) { /* SPECIFIC */
.site-title {
text-align: left; img#profile {
width: 40%;
float: right;
border-radius: 15%;
margin: 10px;
} }
nav {
width: 20%; /* SMALL SCREENS */
height: 85%; @media (max-width: 1200px) {
float: left; /* GENERIC */
margin: 15px; body {
padding: 0 15px 15px 15px; font-size: 22px;
border-style: solid;
border-width: 0 5px 0 0;
position: fixed;
} }
nav > ul { header > h1 {
text-align: left; font-size: 75px;
} }
nav > ul > li { nav > a {
display: block;
font-size: 32px; font-size: 32px;
float: none;
} }
main { main {
float: right; width: 90%;
width: 70%; }
margin: 20px; main h1 {
padding: 20px; font-size: 38px;
}
main h2 {
font-size: 34px;
}
main h3 {
font-size: 30px;
}
main h4 {
font-size: 26px;
} }
footer { footer {
width: 75%; width: 75%;
float: right;
} }
img.profile {
width: 35%; /* SPECIFIC */
} img#profile {
img.album-cover { float: none;
float: right; display: block;
margin: 15px; margin-left: auto;
margin-right: auto;
width: 30%;
} }
} }

View File

@ -1,14 +1,11 @@
</main> </main>
<footer> <footer>
<p><a href="http://ft2bvxji6lxfttqcjz6ed3iyzdhv4gbcdl2bt7cdxguk56xsvdkqnbid.onion/" > <p><a href="http://ft2bvxji6lxfttqcjz6ed3iyzdhv4gbcdl2bt7cdxguk56xsvdkqnbid.onion/" >Onion Address</a>
Onion Address -
</a> -
<a href="https://themusicinnoise.net/" >Clear-Net</a></p> <a href="https://themusicinnoise.net/" >Clear-Net</a></p>
<p>Copyright &copy; 2016-${copyyear} Nicolás A. Ortega Froysa<br /> <p>Copyright &copy; 2016-${copyyear} Nicolás A. Ortega Froysa<br />
This document is licensed under a This document is licensed under the
<a href="https://creativecommons.org/licenses/by-nd/4.0/" > <a href="https://creativecommons.org/licenses/by-nd/4.0/" >CC-BY-ND 4.0 License</a>.</p>
CC-BY-ND 4.0 License
</a>.</p>
</footer> </footer>
</body> </body>
</html> </html>

View File

@ -14,16 +14,16 @@
<link rel="alternate" href="/blog/atom.xml" type="application/atom+xml" title="${sitetitle} Atom Feed" /> <link rel="alternate" href="/blog/atom.xml" type="application/atom+xml" title="${sitetitle} Atom Feed" />
</head> </head>
<body> <body>
<header>
<h1>The Music in Noise</h1>
</header>
<nav> <nav>
<h1 class="site-title" >The Music in Noise</h1> <a href="/" >Home</a>
<ul> <a href="/blog/" >Blog</a>
<li><a href="/" >Home</a></li> <a href="/music.html" >Music</a>
<li><a href="/blog/" >Blog</a></li> <a href="/poetry.html" >Poetry</a>
<li><a href="/music.html" >Music</a></li> <a href="https://gitlab.com/naortega/" >Code</a>
<li><a href="/poetry.html" >Poetry</a></li> <a href="https://odysee.com/@nortega:7?r=FnizT7ACmJrTdw6HQJxAVGgFcHGN6oFy&sunset=lbrytv" >Videos</a>
<li><a href="https://gitlab.com/naortega/" >Code</a></li> <a href="/contact.html" >Contact</a>
<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> </nav>
<main> <main>