nortega/themusicinnoise-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated new style.

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

4
Makefile
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

1
blog/templates/index.html/footer-part.html Normal file
View File

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

16
blog/templates/index.html/footer.html
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>

6
blog/templates/index.html/header-part.html Normal file
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>

38
blog/templates/index.html/header.html
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>

10
pages/home.html
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%;
} }
} }

11
templates/page/footer.html
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>

20
templates/page/header.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>