natto1784/nattopages
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

treewide: add sticker and format

Browse Source 
Signed-off-by: Amneesh Singh <natto@weirdnatto.in>
This commit is contained in:
Amneesh Singh
2025-08-31 17:57:06 +05:30
parent 5af774f08d
commit 3d03aa97e2
10 changed files with 264 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
css/default.css
View File

@@ -1,94 +1,94 @@
@font-face {
font-family: 'Arvo';
font-family: "Arvo";
font-style: normal;
src: url('../fonts/Arvo-Regular.woff2') format('woff2');
src: url("../fonts/Arvo-Regular.woff2") format("woff2");
}
@font-face {
font-family: 'Arvo';
font-family: "Arvo";
font-weight: bold;
src: url('../fonts/Arvo-Bold.woff2') format('woff2');
src: url("../fonts/Arvo-Bold.woff2") format("woff2");
}
@font-face {
font-family: 'Arvo';
font-family: "Arvo";
font-style: italic;
src: url('../fonts/Arvo-Italic.woff2') format('woff2');
src: url("../fonts/Arvo-Italic.woff2") format("woff2");
}
@font-face {
font-family: 'Arvo';
font-family: "Arvo";
font-weight: bold;
font-style: italic;
src: url('../fonts/Arvo-BoldItalic.woff2') format('woff2');
src: url("../fonts/Arvo-BoldItalic.woff2") format("woff2");
}
@font-face {
font-family: 'Lato';
font-style: normal;
src: url('../fonts/Lato-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'Lato';
font-weight: bold;
src: url('../fonts/Lato-Bold.woff2') format('woff2');
}
@font-face {
font-family: 'Lato';
font-style: italic;
src: url('../fonts/Lato-Italic.woff2') format('woff2');
}
@font-face {
font-family: 'Lato';
font-weight: bold;
font-style: italic;
src: url('../fonts/Lato-BoldItalic.woff2') format('woff2');
}
@font-face {
font-family: 'Quantico';
font-family: "Lato";
font-style: normal;
src: url('../fonts/Quantico-Regular.woff2') format('woff2');
src: url("../fonts/Lato-Regular.woff2") format("woff2");
}
@font-face {
font-family: 'Quantico';
font-family: "Lato";
font-weight: bold;
src: url('../fonts/Quantico-Bold.woff2') format('woff2');
src: url("../fonts/Lato-Bold.woff2") format("woff2");
}
@font-face {
font-family: 'Quantico';
font-family: "Lato";
font-style: italic;
src: url('../fonts/Quantico-Italic.woff2') format('woff2');
src: url("../fonts/Lato-Italic.woff2") format("woff2");
}
@font-face {
font-family: 'Quantico';
font-family: "Lato";
font-weight: bold;
font-style: italic;
src: url('../fonts/Quantico-BoldItalic.woff2') format('woff2');
src: url("../fonts/Lato-BoldItalic.woff2") format("woff2");
}
@font-face {
font-family: "Quantico";
font-style: normal;
src: url("../fonts/Quantico-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Quantico";
font-weight: bold;
src: url("../fonts/Quantico-Bold.woff2") format("woff2");
}
@font-face {
font-family: "Quantico";
font-style: italic;
src: url("../fonts/Quantico-Italic.woff2") format("woff2");
}
@font-face {
font-family: "Quantico";
font-weight: bold;
font-style: italic;
src: url("../fonts/Quantico-BoldItalic.woff2") format("woff2");
}
@font-family {
font-family: 'Monoid';
font-family: "Monoid";
font-style: normal;
src: url('../fonts/Monoid-Regular.woff2') format('woff2');
src: url("../fonts/Monoid-Regular.woff2") format("woff2");
}
@font-face {
font-family: 'Monoid';
font-family: "Monoid";
font-weight: bold;
src: url('../fonts/Monoid-Bold.woff2') format('woff2');
src: url("../fonts/Monoid-Bold.woff2") format("woff2");
}
@font-family {
font-family: 'Monoid';
font-family: "Monoid";
font-style: italic;
src: url('../fonts/Monoid-Italic.woff2') format('woff2');
src: url("../fonts/Monoid-Italic.woff2") format("woff2");
}
:root {
@@ -163,11 +163,18 @@ body {
word-wrap: break-word;
}
h1, h2, h3 {
h1,
h2,
h3 {
color: var(--overlay2);
}
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Arvo", serif;
font-weight: normal;
}
@@ -177,18 +184,19 @@ header {
margin: 4.2rem 0;
}
main a, footer a {
main a,
footer a {
color: var(--sky);
}
main a:not(.footnote-ref):hover,
main .footnote-ref *:hover,
footer a:hover{
footer a:hover {
color: var(--base);
background: var(--sky);
}
.subdomains li a:hover {
#subdomains li a:hover {
background: none !important;
}
@@ -197,7 +205,8 @@ a {
font-family: "Quantico", monospace;
}
a:hover, a *:hover {
a:hover,
a *:hover {
transition-duration: 0.1s;
}
@@ -249,12 +258,12 @@ article .post-header {
color: var(--text);
}
.nattopages {
#nattopages {
text-align: center;
margin: 1rem auto 3rem;
}
.nattopages a {
#nattopages a {
font-weight: bold;
font-family: "Monoid";
font-size: 3rem;
@@ -280,7 +289,7 @@ article > section {
}
pre {
font-family: 'Monoid', monospace;
font-family: "Monoid", monospace;
padding: 2rem;
border-radius: 1rem;
border-left: 0.5rem solid var(--sapphire);
@@ -295,7 +304,8 @@ pre {
width: max-content;
}
img, video {
img,
video {
max-width: 100%;
}
@@ -303,7 +313,7 @@ img, video {
max-width: 100%;
position: relative;
height: 0;
padding-bottom: 56.25%
padding-bottom: 56.25%;
}
.iframe-parent iframe {
@@ -314,6 +324,14 @@ img, video {
height: 100%;
}
#sticker {
bottom: -2em;
left: -2em;
position: fixed;
z-index: 9999;
transform: rotate(45deg);
}
@media (max-width: 319px) {
body {
width: 90%;
@@ -324,16 +342,16 @@ img, video {
footer {
text-align: center;
}
nav {
flex-direction: column;
}
nav a {
display: block;
line-height: 1.6;
}
.toc {
padding: 1rem;
}
@@ -361,6 +379,10 @@ img, video {
}
@media (max-width: 639px) {
#sticker {
display: none;
}
nav {
flex-direction: column;
}

127
css/highlight.css
View File

@@ -1,30 +1,97 @@
pre code { color: var(--subtext0); }
code span.kw { color: var(--green); } /* Keyword */
code span.dt { color: var(--yellow); } /* DataType */
code span.dv { color: var(--sapphire); } /* DecVal */
code span.bn { color: var(--sapphire); } /* BaseN */
code span.fl { color: var(--sapphire); } /* Float */
code span.ch { color: var(--sapphire); } /* Char */
code span.st { color: var(--sapphire); } /* String */
code span.co { color: var(--text); font-style: italic; } /* Comment */
code span.ot { color: var(--sky); } /* Other */
code span.al { color: var(--maroon); } /* Alert */
code span.fu { color: var(--sky); } /* Function */
code span.cn { color: var(--sapphire); } /* Constant */
code span.sc { color: var(--maroon); } /* SpecialChar */
code span.vs { color: var(--subtext0); } /* VerbatimString */
code span.ss { color: var(--maroon); } /* SpecialString */
code span.im { color: var(--subtext0); } /* Import */
code span.va { color: var(--sky); } /* Variable */
code span.cf { color: var(--green); } /* ControlFlow */
code span.op { color: var(--green); } /* Operator */
code span.bu { color: var(--subtext0); } /* BuiltIn */
code span.ex { color: var(--subtext0); } /* Extension */
code span.pp { color: var(--peach); } /* Preprocessor */
code span.at { color: var(--subtext0); } /* Attribute */
code span.er { color: var(--maroon); } /* Error */
code span.wa { color: var(--peach); font-style: italic; } /* Warning */
code span.do { color: var(--text); font-style: italic; } /* Documentation */
code span.an { color: var(--text); font-style: italic; } /* Annotation */
code span.cv { color: var(--text); font-style: italic; } /* CommentVar */
code span.in { color: var(--text); font-weight:normal; font-style: normal; } /* Information */
pre code {
color: var(--subtext0);
}
code span.kw {
color: var(--green);
} /* Keyword */
code span.dt {
color: var(--yellow);
} /* DataType */
code span.dv {
color: var(--sapphire);
} /* DecVal */
code span.bn {
color: var(--sapphire);
} /* BaseN */
code span.fl {
color: var(--sapphire);
} /* Float */
code span.ch {
color: var(--sapphire);
} /* Char */
code span.st {
color: var(--sapphire);
} /* String */
code span.co {
color: var(--text);
font-style: italic;
} /* Comment */
code span.ot {
color: var(--sky);
} /* Other */
code span.al {
color: var(--maroon);
} /* Alert */
code span.fu {
color: var(--sky);
} /* Function */
code span.cn {
color: var(--sapphire);
} /* Constant */
code span.sc {
color: var(--maroon);
} /* SpecialChar */
code span.vs {
color: var(--subtext0);
} /* VerbatimString */
code span.ss {
color: var(--maroon);
} /* SpecialString */
code span.im {
color: var(--subtext0);
} /* Import */
code span.va {
color: var(--sky);
} /* Variable */
code span.cf {
color: var(--green);
} /* ControlFlow */
code span.op {
color: var(--green);
} /* Operator */
code span.bu {
color: var(--subtext0);
} /* BuiltIn */
code span.ex {
color: var(--subtext0);
} /* Extension */
code span.pp {
color: var(--peach);
} /* Preprocessor */
code span.at {
color: var(--subtext0);
} /* Attribute */
code span.er {
color: var(--maroon);
} /* Error */
code span.wa {
color: var(--peach);
font-style: italic;
} /* Warning */
code span.do {
color: var(--text);
font-style: italic;
} /* Documentation */
code span.an {
color: var(--text);
font-style: italic;
} /* Annotation */
code span.cv {
color: var(--text);
font-style: italic;
} /* CommentVar */
code span.in {
color: var(--text);
font-weight: normal;
font-style: normal;
} /* Information */

BIN
images/personal/nyn.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

3
index.html
View File

@@ -2,5 +2,6 @@
title: Home
home: true
---
<h2><b>Welcome<b></h2>
<h2><b>Welcome</b></h2>
Hello, I post stuff here. Check the <a href="/archive.html">archive</a>.

6
templates/archive.html
View File

@@ -1,7 +1,5 @@
<p>
<h3> Here you can find all my previous posts: </h3>
</p>
<h3>Here you can find all my previous posts:</h3>
$partial("templates/post-list.html")$
<h3>Tags</strong></h3>
<h3><strong>Tags</strong></h3>
<div class="tags">$tags$</div>

19
templates/dailies.html
View File

@@ -1,16 +1,13 @@
You have stumbled upon a relic of the past that I never maintained.
<hr>
<hr />
$for(today)$
<article>
<h1 class="post-title">$title$</h1>
<div class="post-teaser">
$body$
</div>
<hr>
</article>
<article>
<h1 class="post-title">$title$</h1>
<div class="post-teaser">$body$</div>
<hr />
</article>
$endfor$
<p>
<h3> Previous Dailies: </h3>
</p>
<h3>Previous Dailies:</h3>
$partial("templates/post-list.html")$

100
templates/default.html
View File

@@ -1,46 +1,64 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>nattopages - $title$</title>
<link rel="stylesheet" href="/css/default.css" />
<link rel="stylesheet" href="/css/highlight.css" />
</head>
<body>
<header>
<div class="nattopages">
<a href="/">nattopages</a>
</div>
<nav>
<a href="/about.html">About</a>
<a href="/contact.html">Contact</a>
<a href="/archive.html">Archive</a>
<a href="/links.html">Links</a>
</nav>
</header>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>nattopages - $title$</title>
<link rel="stylesheet" href="/css/default.css" />
<link rel="stylesheet" href="/css/highlight.css" />
</head>
<body>
<header>
<div id="nattopages">
<a href="/">nattopages</a>
</div>
<nav>
<a href="/about.html">About</a>
<a href="/contact.html">Contact</a>
<a href="/archive.html">Archive</a>
<a href="/links.html">Links</a>
</nav>
</header>
<main role="main">
$body$
</main>
<main role="main">$body$</main>
<footer>
All content published under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</a><br>
<a href="https://git.weirdnatto.in/natto1784/nattopages">Source</a> available under MIT License<br>
Site proudly generated by
<a href="http://jaspervdj.be/hakyll">Hakyll</a><br>
53EC 089E F230 E47A 83BA 8F81 9594 9BD4 B853 F559<br>
<a href="/rss.xml">RSS 2.0</a><br>
<ul class="subdomains" style="list-style-type: none;">
$for(subdomains)$
<li style="display: inline-block;">
<a href="https://$name$.$domain$">
<img src="/images/icons/$name$.svg" alt="https://$name$.$domain$" width="30" height="30"/>
</a>
</li>
$endfor$
</ul>
</footer>
</body>
<footer>
All content published under
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
>Creative Commons Attribution-NonCommercial-ShareAlike 4.0
International</a
><br />
<a href="https://git.weirdnatto.in/natto1784/nattopages">Source</a>
available under MIT License<br />
Site proudly generated by
<a href="http://jaspervdj.be/hakyll">Hakyll</a><br />
53EC 089E F230 E47A 83BA 8F81 9594 9BD4 B853 F559<br />
<a href="/rss.xml">RSS 2.0</a><br />
<div style="color: red">
Subdomains may be down for the next few months, I am not exactly in a
position to host until october
</div>
<ul id="subdomains" style="list-style-type: none">
$for(subdomains)$
<li style="display: inline-block">
<a href="https://$name$.$domain$">
<img
src="/images/icons/$name$.svg"
alt="https://$name$.$domain$"
width="30"
height="30"
/>
</a>
</li>
$endfor$
</ul>
</footer>
<img
id="sticker"
src="/images/personal/nyn.webp"
alt="いらっしゃいませ"
aria-hidden="true"
/>
</body>
</html>

8
templates/post-list.html
View File

@@ -1,7 +1,5 @@
<ul>
$for(posts)$
<li class="post-item">
<a href="$url$">$title$</a> - $date$
</li>
$endfor$
$for(posts)$
<li class="post-item"><a href="$url$">$title$</a> - $date$</li>
$endfor$
</ul>

25
templates/post.html
View File

@@ -1,19 +1,10 @@
<article>
<h1 class="post-title">$title$</h1>
<section class="post-header">
Posted on $date$
$if(author)$
by $author$
$endif$<br>
$if(tags)$
Tags: $tags$
$endif$<br>
$if(modified)$
Last modified on $modified$
$endif$
</section>
<hr>
<section>
$body$
</section>
<h1 class="post-title">$title$</h1>
<section class="post-header">
Posted on $date$ $if(author)$ by $author$ $endif$<br />
$if(tags)$ Tags: $tags$ $endif$<br />
$if(modified)$ Last modified on $modified$ $endif$
</section>
<hr />
<section>$body$</section>
</article>

3
templates/tag.html
View File

@@ -1,2 +1,3 @@
Here are all the posts marked with tag <strong style="font-size: 3rem;">$tag$</strong>:
Here are all the posts marked with tag
<strong style="font-size: 3rem">$tag$</strong>:
$partial("templates/post-list.html")$