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

102
css/default.css
View File

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

127
css/highlight.css
View File

@@ -1,30 +1,97 @@
pre code { color: var(--subtext0); } pre code {
code span.kw { color: var(--green); } /* Keyword */ color: var(--subtext0);
code span.dt { color: var(--yellow); } /* DataType */ }
code span.dv { color: var(--sapphire); } /* DecVal */ code span.kw {
code span.bn { color: var(--sapphire); } /* BaseN */ color: var(--green);
code span.fl { color: var(--sapphire); } /* Float */ } /* Keyword */
code span.ch { color: var(--sapphire); } /* Char */ code span.dt {
code span.st { color: var(--sapphire); } /* String */ color: var(--yellow);
code span.co { color: var(--text); font-style: italic; } /* Comment */ } /* DataType */
code span.ot { color: var(--sky); } /* Other */ code span.dv {
code span.al { color: var(--maroon); } /* Alert */ color: var(--sapphire);
code span.fu { color: var(--sky); } /* Function */ } /* DecVal */
code span.cn { color: var(--sapphire); } /* Constant */ code span.bn {
code span.sc { color: var(--maroon); } /* SpecialChar */ color: var(--sapphire);
code span.vs { color: var(--subtext0); } /* VerbatimString */ } /* BaseN */
code span.ss { color: var(--maroon); } /* SpecialString */ code span.fl {
code span.im { color: var(--subtext0); } /* Import */ color: var(--sapphire);
code span.va { color: var(--sky); } /* Variable */ } /* Float */
code span.cf { color: var(--green); } /* ControlFlow */ code span.ch {
code span.op { color: var(--green); } /* Operator */ color: var(--sapphire);
code span.bu { color: var(--subtext0); } /* BuiltIn */ } /* Char */
code span.ex { color: var(--subtext0); } /* Extension */ code span.st {
code span.pp { color: var(--peach); } /* Preprocessor */ color: var(--sapphire);
code span.at { color: var(--subtext0); } /* Attribute */ } /* String */
code span.er { color: var(--maroon); } /* Error */ code span.co {
code span.wa { color: var(--peach); font-style: italic; } /* Warning */ color: var(--text);
code span.do { color: var(--text); font-style: italic; } /* Documentation */ font-style: italic;
code span.an { color: var(--text); font-style: italic; } /* Annotation */ } /* Comment */
code span.cv { color: var(--text); font-style: italic; } /* CommentVar */ code span.ot {
code span.in { color: var(--text); font-weight:normal; font-style: normal; } /* Information */ 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 title: Home
home: true 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>. Hello, I post stuff here. Check the <a href="/archive.html">archive</a>.

4
templates/archive.html
View File

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

11
templates/dailies.html
View File

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

48
templates/default.html
View File

@@ -1,16 +1,16 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge"> <meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>nattopages - $title$</title> <title>nattopages - $title$</title>
<link rel="stylesheet" href="/css/default.css" /> <link rel="stylesheet" href="/css/default.css" />
<link rel="stylesheet" href="/css/highlight.css" /> <link rel="stylesheet" href="/css/highlight.css" />
</head> </head>
<body> <body>
<header> <header>
<div class="nattopages"> <div id="nattopages">
<a href="/">nattopages</a> <a href="/">nattopages</a>
</div> </div>
<nav> <nav>
@@ -21,26 +21,44 @@
</nav> </nav>
</header> </header>
<main role="main"> <main role="main">$body$</main>
$body$
</main>
<footer> <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> All content published under
<a href="https://git.weirdnatto.in/natto1784/nattopages">Source</a> available under MIT License<br> <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 Site proudly generated by
<a href="http://jaspervdj.be/hakyll">Hakyll</a><br> <a href="http://jaspervdj.be/hakyll">Hakyll</a><br />
53EC 089E F230 E47A 83BA 8F81 9594 9BD4 B853 F559<br> 53EC 089E F230 E47A 83BA 8F81 9594 9BD4 B853 F559<br />
<a href="/rss.xml">RSS 2.0</a><br> <a href="/rss.xml">RSS 2.0</a><br />
<ul class="subdomains" style="list-style-type: none;"> <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)$ $for(subdomains)$
<li style="display: inline-block;"> <li style="display: inline-block">
<a href="https://$name$.$domain$"> <a href="https://$name$.$domain$">
<img src="/images/icons/$name$.svg" alt="https://$name$.$domain$" width="30" height="30"/> <img
src="/images/icons/$name$.svg"
alt="https://$name$.$domain$"
width="30"
height="30"
/>
</a> </a>
</li> </li>
$endfor$ $endfor$
</ul> </ul>
</footer> </footer>
<img
id="sticker"
src="/images/personal/nyn.webp"
alt="いらっしゃいませ"
aria-hidden="true"
/>
</body> </body>
</html> </html>

4
templates/post-list.html
View File

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

19
templates/post.html
View File

@@ -1,19 +1,10 @@
<article> <article>
<h1 class="post-title">$title$</h1> <h1 class="post-title">$title$</h1>
<section class="post-header"> <section class="post-header">
Posted on $date$ Posted on $date$ $if(author)$ by $author$ $endif$<br />
$if(author)$ $if(tags)$ Tags: $tags$ $endif$<br />
by $author$ $if(modified)$ Last modified on $modified$ $endif$
$endif$<br>
$if(tags)$
Tags: $tags$
$endif$<br>
$if(modified)$
Last modified on $modified$
$endif$
</section>
<hr>
<section>
$body$
</section> </section>
<hr />
<section>$body$</section>
</article> </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")$ $partial("templates/post-list.html")$