mirror of
https://github.com/JimenezJC/mshj_blog.git
synced 2026-03-07 23:34:36 -05:00
blog .8 (also comments added)
This commit is contained in:
Juan
parent
7027ce8623
commit
b4be1547cf
36 changed files with 1778 additions and 142 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
isso-dev.db
|
||||||
|
.hugo_build.lock
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
title: "Hello World"
|
title: "Hello World"
|
||||||
date: 2024-04-04T02:46:07-04:00
|
date: 2024-04-04T02:46:07-04:00
|
||||||
draft: false
|
draft: false
|
||||||
categories: ["Terminal", "Hugo"]
|
categories: ["terminal", "hugo"]
|
||||||
tags: ["css", "terminal-style", "tutorial"]
|
tags: ["css", "terminal-style", "tutorial"]
|
||||||
description: "this is quick description of this post"
|
description: "this is quick description of this post"
|
||||||
|
|
||||||
|
|
@ -10,3 +10,9 @@ description: "this is quick description of this post"
|
||||||
|
|
||||||
# yoooo
|
# yoooo
|
||||||
this is one of my first articles homies. so i wil try my best to write it the best i can
|
this is one of my first articles homies. so i wil try my best to write it the best i can
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{{< chat cactus-comments >}}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,6 @@ title: "New Test Post"
|
||||||
date: 2024-04-04T02:35:21-04:00
|
date: 2024-04-04T02:35:21-04:00
|
||||||
draft: false
|
draft: false
|
||||||
params:
|
params:
|
||||||
topic: Games
|
topic: games
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
title: "Test Post"
|
title: "Test Post"
|
||||||
date: 2023-07-22T23:03:09-04:00
|
date: 2023-07-22T23:03:09-04:00
|
||||||
draft: False
|
draft: False
|
||||||
categories: ['Games']
|
categories: ['games']
|
||||||
---
|
---
|
||||||
|
|
||||||
## Introduction
|
## Introduction
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,14 @@ languageCode = 'en-us'
|
||||||
title = 'mshj.net'
|
title = 'mshj.net'
|
||||||
theme = 'terminal'
|
theme = 'terminal'
|
||||||
|
|
||||||
|
[params]
|
||||||
|
|
||||||
|
[params.isso]
|
||||||
|
url = "http://localhost:8080/"
|
||||||
|
|
||||||
|
[security]
|
||||||
|
enableInlineShortcodes = true
|
||||||
|
|
||||||
# Enable tags and categories
|
# Enable tags and categories
|
||||||
[taxonomies]
|
[taxonomies]
|
||||||
category = "categories"
|
category = "categories"
|
||||||
|
|
|
||||||
19
isso.dev.cfg
Normal file
19
isso.dev.cfg
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
[general]
|
||||||
|
dbpath = /home/mshj/Documents/projects/mshj_blog/isso-dev.db
|
||||||
|
host =
|
||||||
|
http://localhost:1313
|
||||||
|
http://localhost:33989
|
||||||
|
|
||||||
|
[server]
|
||||||
|
listen = http://localhost:8080
|
||||||
|
|
||||||
|
[moderation]
|
||||||
|
enabled = false
|
||||||
|
|
||||||
|
[client]
|
||||||
|
require-email = false
|
||||||
|
preview = false
|
||||||
|
|
||||||
|
[guard]
|
||||||
|
enabled = true
|
||||||
|
ratelimit = 2
|
||||||
|
|
@ -22,27 +22,38 @@
|
||||||
<aside id="menu">
|
<aside id="menu">
|
||||||
<img src="/images/punpun.jpg" alt="keeper pfp">
|
<img src="/images/punpun.jpg" alt="keeper pfp">
|
||||||
|
|
||||||
<h3>go home</h3>
|
<h3><a href="/">go home</a></h3>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>blog posts</li>
|
<li><strong>useful links</strong></li>
|
||||||
<br>
|
|
||||||
<li>categories</li>
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><strong>blog categories</strong></li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/games/">Games</a>
|
<a href="//localhost:1313/categories/games/">games</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/hugo/">Hugo</a>
|
<a href="//localhost:1313/categories/hugo/">hugo</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/terminal/">Terminal</a>
|
<a href="//localhost:1313/categories/terminal/">terminal</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div class="neocities-buttons">
|
||||||
|
<strong>buttons</strong>
|
||||||
|
<div class="button-slideshow">
|
||||||
|
<a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a>
|
||||||
|
<a href="https://neocities.org/"><img src="https://neocities.org/img/neocities_88x31.gif" alt="neocities"></a>
|
||||||
|
<a href="https://www.w3.org/html/logo/"><img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" alt="html5"></a>
|
||||||
|
<a href="https://yesterweb.org/"><img src="https://yesterweb.org/img/badge.png" alt="yesterweb"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div class = "main-content">
|
<div class = "main-content">
|
||||||
|
|
|
||||||
|
|
@ -22,27 +22,38 @@
|
||||||
<aside id="menu">
|
<aside id="menu">
|
||||||
<img src="/images/punpun.jpg" alt="keeper pfp">
|
<img src="/images/punpun.jpg" alt="keeper pfp">
|
||||||
|
|
||||||
<h3>go home</h3>
|
<h3><a href="/">go home</a></h3>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>blog posts</li>
|
<li><strong>useful links</strong></li>
|
||||||
<br>
|
|
||||||
<li>categories</li>
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><strong>blog categories</strong></li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/games/">Games</a>
|
<a href="//localhost:1313/categories/games/">games</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/hugo/">Hugo</a>
|
<a href="//localhost:1313/categories/hugo/">hugo</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/terminal/">Terminal</a>
|
<a href="//localhost:1313/categories/terminal/">terminal</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div class="neocities-buttons">
|
||||||
|
<strong>buttons</strong>
|
||||||
|
<div class="button-slideshow">
|
||||||
|
<a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a>
|
||||||
|
<a href="https://neocities.org/"><img src="https://neocities.org/img/neocities_88x31.gif" alt="neocities"></a>
|
||||||
|
<a href="https://www.w3.org/html/logo/"><img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" alt="html5"></a>
|
||||||
|
<a href="https://yesterweb.org/"><img src="https://yesterweb.org/img/badge.png" alt="yesterweb"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div class = "main-content">
|
<div class = "main-content">
|
||||||
|
|
|
||||||
|
|
@ -22,27 +22,38 @@
|
||||||
<aside id="menu">
|
<aside id="menu">
|
||||||
<img src="/images/punpun.jpg" alt="keeper pfp">
|
<img src="/images/punpun.jpg" alt="keeper pfp">
|
||||||
|
|
||||||
<h3>go home</h3>
|
<h3><a href="/">go home</a></h3>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>blog posts</li>
|
<li><strong>useful links</strong></li>
|
||||||
<br>
|
|
||||||
<li>categories</li>
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><strong>blog categories</strong></li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/games/">Games</a>
|
<a href="//localhost:1313/categories/games/">games</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/hugo/">Hugo</a>
|
<a href="//localhost:1313/categories/hugo/">hugo</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/terminal/">Terminal</a>
|
<a href="//localhost:1313/categories/terminal/">terminal</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div class="neocities-buttons">
|
||||||
|
<strong>buttons</strong>
|
||||||
|
<div class="button-slideshow">
|
||||||
|
<a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a>
|
||||||
|
<a href="https://neocities.org/"><img src="https://neocities.org/img/neocities_88x31.gif" alt="neocities"></a>
|
||||||
|
<a href="https://www.w3.org/html/logo/"><img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" alt="html5"></a>
|
||||||
|
<a href="https://yesterweb.org/"><img src="https://yesterweb.org/img/badge.png" alt="yesterweb"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div class = "main-content">
|
<div class = "main-content">
|
||||||
|
|
|
||||||
|
|
@ -22,27 +22,38 @@
|
||||||
<aside id="menu">
|
<aside id="menu">
|
||||||
<img src="/images/punpun.jpg" alt="keeper pfp">
|
<img src="/images/punpun.jpg" alt="keeper pfp">
|
||||||
|
|
||||||
<h3>go home</h3>
|
<h3><a href="/">go home</a></h3>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>blog posts</li>
|
<li><strong>useful links</strong></li>
|
||||||
<br>
|
|
||||||
<li>categories</li>
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><strong>blog categories</strong></li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/games/">Games</a>
|
<a href="//localhost:1313/categories/games/">games</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/hugo/">Hugo</a>
|
<a href="//localhost:1313/categories/hugo/">hugo</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/terminal/">Terminal</a>
|
<a href="//localhost:1313/categories/terminal/">terminal</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div class="neocities-buttons">
|
||||||
|
<strong>buttons</strong>
|
||||||
|
<div class="button-slideshow">
|
||||||
|
<a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a>
|
||||||
|
<a href="https://neocities.org/"><img src="https://neocities.org/img/neocities_88x31.gif" alt="neocities"></a>
|
||||||
|
<a href="https://www.w3.org/html/logo/"><img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" alt="html5"></a>
|
||||||
|
<a href="https://yesterweb.org/"><img src="https://yesterweb.org/img/badge.png" alt="yesterweb"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div class = "main-content">
|
<div class = "main-content">
|
||||||
|
|
|
||||||
|
|
@ -22,27 +22,38 @@
|
||||||
<aside id="menu">
|
<aside id="menu">
|
||||||
<img src="/images/punpun.jpg" alt="keeper pfp">
|
<img src="/images/punpun.jpg" alt="keeper pfp">
|
||||||
|
|
||||||
<h3>go home</h3>
|
<h3><a href="/">go home</a></h3>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>blog posts</li>
|
<li><strong>useful links</strong></li>
|
||||||
<br>
|
|
||||||
<li>categories</li>
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><strong>blog categories</strong></li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/games/">Games</a>
|
<a href="//localhost:1313/categories/games/">games</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/hugo/">Hugo</a>
|
<a href="//localhost:1313/categories/hugo/">hugo</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/terminal/">Terminal</a>
|
<a href="//localhost:1313/categories/terminal/">terminal</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div class="neocities-buttons">
|
||||||
|
<strong>buttons</strong>
|
||||||
|
<div class="button-slideshow">
|
||||||
|
<a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a>
|
||||||
|
<a href="https://neocities.org/"><img src="https://neocities.org/img/neocities_88x31.gif" alt="neocities"></a>
|
||||||
|
<a href="https://www.w3.org/html/logo/"><img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" alt="html5"></a>
|
||||||
|
<a href="https://yesterweb.org/"><img src="https://yesterweb.org/img/badge.png" alt="yesterweb"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div class = "main-content">
|
<div class = "main-content">
|
||||||
|
|
|
||||||
|
|
@ -302,6 +302,260 @@ body {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Neocities button slideshow */
|
||||||
|
.neocities-buttons {
|
||||||
|
margin-top: 1rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.neocities-buttons strong {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-slideshow {
|
||||||
|
width: 88px;
|
||||||
|
height: 31px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-slideshow a {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 0;
|
||||||
|
animation: buttonFade 12s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-slideshow a:nth-child(1) { animation-delay: 0s; }
|
||||||
|
.button-slideshow a:nth-child(2) { animation-delay: 3s; }
|
||||||
|
.button-slideshow a:nth-child(3) { animation-delay: 6s; }
|
||||||
|
.button-slideshow a:nth-child(4) { animation-delay: 9s; }
|
||||||
|
|
||||||
|
.button-slideshow a img {
|
||||||
|
display: block;
|
||||||
|
width: 88px;
|
||||||
|
height: 31px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes buttonFade {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
4% { opacity: 1; }
|
||||||
|
21% { opacity: 1; }
|
||||||
|
25% { opacity: 0; }
|
||||||
|
100% { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Comments container */
|
||||||
|
.comments-container {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 700px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments-container h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Isso form overrides */
|
||||||
|
#isso-thread {
|
||||||
|
color: #ecf0f1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide email, website, and preview */
|
||||||
|
.isso-postbox-email,
|
||||||
|
.isso-postbox-website,
|
||||||
|
.isso-preview,
|
||||||
|
.isso-post-action input[name="preview"],
|
||||||
|
div[class*="isso-postbox-email"],
|
||||||
|
div[class*="isso-postbox-website"] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fallback: hide email/website input wrappers by input name */
|
||||||
|
.isso-input-wrapper:has(input[name="email"]),
|
||||||
|
.isso-input-wrapper:has(input[name="website"]),
|
||||||
|
.isso-input-wrapper:has(input[placeholder*="mail"]),
|
||||||
|
.isso-input-wrapper:has(input[placeholder*="ebsite"]) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Postbox layout */
|
||||||
|
#isso-thread .isso-postbox {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
gap: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Textarea (comment box) */
|
||||||
|
#isso-thread .isso-textarea-wrapper {
|
||||||
|
margin-bottom: 0.75rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-textarea,
|
||||||
|
#isso-thread textarea {
|
||||||
|
background: #1a1d23 !important;
|
||||||
|
color: #ecf0f1 !important;
|
||||||
|
border: 1px solid #2c3e50 !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
font-family: 'SF Mono', 'Menlo', monospace !important;
|
||||||
|
font-size: 0.9rem !important;
|
||||||
|
padding: 0.75rem !important;
|
||||||
|
min-height: 100px !important;
|
||||||
|
width: 100% !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
resize: vertical !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Author name input */
|
||||||
|
#isso-thread .isso-postbox-author,
|
||||||
|
#isso-thread .isso-input-wrapper:first-of-type {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread input[type="text"],
|
||||||
|
#isso-thread .isso-input-wrapper input {
|
||||||
|
background: #1a1d23 !important;
|
||||||
|
color: #ecf0f1 !important;
|
||||||
|
border: 1px solid #2c3e50 !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
font-family: 'SF Mono', 'Menlo', monospace !important;
|
||||||
|
font-size: 0.9rem !important;
|
||||||
|
padding: 0.5rem 0.75rem !important;
|
||||||
|
width: 100% !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Focus states */
|
||||||
|
#isso-thread textarea:focus,
|
||||||
|
#isso-thread .isso-textarea:focus,
|
||||||
|
#isso-thread input[type="text"]:focus {
|
||||||
|
border-color: #62c4ff !important;
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread textarea::placeholder,
|
||||||
|
#isso-thread input::placeholder {
|
||||||
|
color: #555 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Name + submit aligned on same row via JS-injected wrapper isn't possible,
|
||||||
|
so use CSS grid on the postbox to place them */
|
||||||
|
#isso-thread .isso-postbox {
|
||||||
|
display: grid !important;
|
||||||
|
grid-template-columns: 1fr !important;
|
||||||
|
gap: 0.75rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-textarea-wrapper {
|
||||||
|
grid-column: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-auth-section {
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: space-between !important;
|
||||||
|
gap: 0.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-postbox-author,
|
||||||
|
#isso-thread .isso-auth-section .isso-input-wrapper:first-of-type {
|
||||||
|
flex: 1 !important;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-post-action {
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-post-action:first-of-type {
|
||||||
|
margin-left: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-post-action ~ .isso-post-action {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-post-action input[type="submit"],
|
||||||
|
#isso-thread .isso-postbox-author input,
|
||||||
|
#isso-thread .isso-input-wrapper:first-of-type input {
|
||||||
|
height: 36px !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-postbox-author input,
|
||||||
|
#isso-thread .isso-input-wrapper:first-of-type input {
|
||||||
|
width: 100% !important;
|
||||||
|
min-width: 180px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread input[type="submit"] {
|
||||||
|
background: #62c4ff !important;
|
||||||
|
color: #222225 !important;
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
padding: 0.5rem 1.25rem !important;
|
||||||
|
font-family: 'SF Mono', 'Menlo', monospace !important;
|
||||||
|
font-size: 0.85rem !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
cursor: pointer !important;
|
||||||
|
transition: background 0.2s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread input[type="submit"]:hover {
|
||||||
|
background: #4ab0ed !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom comment avatars */
|
||||||
|
.isso-custom-avatar {
|
||||||
|
width: 48px !important;
|
||||||
|
height: 48px !important;
|
||||||
|
border-radius: 50% !important;
|
||||||
|
object-fit: cover !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Comment styling */
|
||||||
|
#isso-thread .isso-comment {
|
||||||
|
border-left: 2px solid #2c3e50 !important;
|
||||||
|
padding: 0.75rem !important;
|
||||||
|
padding-left: 1rem !important;
|
||||||
|
margin-bottom: 1rem !important;
|
||||||
|
margin-top: 1rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-comment-header {
|
||||||
|
color: #a3abba !important;
|
||||||
|
font-size: 0.8rem !important;
|
||||||
|
margin-bottom: 0.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-text-wrapper {
|
||||||
|
color: #ecf0f1 !important;
|
||||||
|
line-height: 1.5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-comment-footer {
|
||||||
|
color: #666 !important;
|
||||||
|
font-size: 0.75rem !important;
|
||||||
|
margin-top: 0.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-comment-footer a {
|
||||||
|
color: #a3abba !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-comment-footer a:hover {
|
||||||
|
color: #62c4ff !important;
|
||||||
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--global-font-size: 15px;
|
--global-font-size: 15px;
|
||||||
--global-line-height: 1.4em;
|
--global-line-height: 1.4em;
|
||||||
|
|
|
||||||
584
public/css/styles.css.tmp.28280.1769582633307
Normal file
584
public/css/styles.css.tmp.28280.1769582633307
Normal file
|
|
@ -0,0 +1,584 @@
|
||||||
|
/* Sleek Terminal Card */
|
||||||
|
.card-container {
|
||||||
|
--terminal-bg: #1a1d23;
|
||||||
|
--terminal-border: #2c3e50;
|
||||||
|
--terminal-accent: #3498db;
|
||||||
|
--terminal-text: #ecf0f1;
|
||||||
|
--terminal-highlight: #2ecc71;
|
||||||
|
|
||||||
|
color: var(--terminal-text) !important;
|
||||||
|
font-family: 'SF Mono', 'Menlo', monospace;
|
||||||
|
padding: 1rem;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 1.5rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
flex-grow: 1;
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Card container adjustments */
|
||||||
|
.card-container {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 700px;
|
||||||
|
padding-right: 1.5rem;
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header styling */
|
||||||
|
.card-container header {
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
padding-bottom: 0.75rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
background-color: transparent;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-container header h1 {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-container header h2 {
|
||||||
|
color: var(--terminal-text);
|
||||||
|
font-size: inherit;
|
||||||
|
font-weight: inherit;
|
||||||
|
margin: 0;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Body content */
|
||||||
|
.content-wrapper {
|
||||||
|
line-height: 1.6;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code blocks */
|
||||||
|
.content-wrapper pre {
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 0.75rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Status indicator */
|
||||||
|
.card-container::after {
|
||||||
|
content: '●';
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
right: 15px;
|
||||||
|
color: var(--terminal-highlight);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
text-shadow: 0 0 8px currentColor;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Menu list */
|
||||||
|
.menu-list {
|
||||||
|
list-style-type: none !important;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-list li {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-info {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #666;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
/* Tag list */
|
||||||
|
.tag-list {
|
||||||
|
margin-top: 1rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tag link */
|
||||||
|
.tag-link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 0.1rem 0.3rem;
|
||||||
|
border-radius: 0.3rem;
|
||||||
|
margin-right: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-link:nth-child(8n+1) {
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-link:nth-child(8n+2) {
|
||||||
|
background-color: #ff69b4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-link:nth-child(8n+3) {
|
||||||
|
background-color: #33cc33;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-link:nth-child(8n+4) {
|
||||||
|
background-color: #6666ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-link:nth-child(8n+5) {
|
||||||
|
background-color: #ffff66;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-link:nth-child(8n+6) {
|
||||||
|
background-color: #ff9966;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-link:nth-child(8n+7) {
|
||||||
|
background-color: #cc66cc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-link:nth-child(8n+0) {
|
||||||
|
background-color: #66cccc;
|
||||||
|
}
|
||||||
|
.tag-link:hover {
|
||||||
|
background-color: #ddd;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.components-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-column-gap: 1.4em;
|
||||||
|
grid-template-columns: auto;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 1em;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
grid-template-columns: repeat(auto-fit,
|
||||||
|
minmax(calc(var(--page-width) / 12), 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-header {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #666;
|
||||||
|
margin-left: 1rem;
|
||||||
|
border-right: 2px solid #666;
|
||||||
|
animation: blink 0.7s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blink {
|
||||||
|
0% {
|
||||||
|
border-color: #666;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
border-color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 70em) {
|
||||||
|
.components-grid {
|
||||||
|
grid-template-columns: 3fr 9fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.components-grid aside {
|
||||||
|
position: sticky;
|
||||||
|
top: calc(var(--global-space) * 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-tags {
|
||||||
|
margin-top: 1rem;
|
||||||
|
line-height: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-tag {
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
color: var(--background-color);
|
||||||
|
padding: 0.2rem 0.5rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-tag:hover {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-meta {
|
||||||
|
opacity: 0.7;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.post-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 1rem;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
position:static !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
.post-list li {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-list-title {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.post-list-description {
|
||||||
|
color: #e6e6e6;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
margin: 0 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add spacing between list items */
|
||||||
|
.post-list + .post-list {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.site-footer {
|
||||||
|
margin-top: auto;
|
||||||
|
width: 100%;
|
||||||
|
padding: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-nav a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #666;
|
||||||
|
margin: 0 0.5rem;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-nav a:hover {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-nav svg {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-footer p {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #666;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Neocities button slideshow */
|
||||||
|
.neocities-buttons {
|
||||||
|
margin-top: 1rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.neocities-buttons strong {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-slideshow {
|
||||||
|
width: 88px;
|
||||||
|
height: 31px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-slideshow a {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 0;
|
||||||
|
animation: buttonFade 12s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-slideshow a:nth-child(1) { animation-delay: 0s; }
|
||||||
|
.button-slideshow a:nth-child(2) { animation-delay: 3s; }
|
||||||
|
.button-slideshow a:nth-child(3) { animation-delay: 6s; }
|
||||||
|
.button-slideshow a:nth-child(4) { animation-delay: 9s; }
|
||||||
|
|
||||||
|
.button-slideshow a img {
|
||||||
|
display: block;
|
||||||
|
width: 88px;
|
||||||
|
height: 31px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes buttonFade {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
4% { opacity: 1; }
|
||||||
|
21% { opacity: 1; }
|
||||||
|
25% { opacity: 0; }
|
||||||
|
100% { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Comments container */
|
||||||
|
.comments-container {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 700px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments-container h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Isso form overrides */
|
||||||
|
#isso-thread {
|
||||||
|
color: #ecf0f1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide email, website, and preview */
|
||||||
|
.isso-postbox-email,
|
||||||
|
.isso-postbox-website,
|
||||||
|
.isso-preview,
|
||||||
|
.isso-post-action input[name="preview"],
|
||||||
|
div[class*="isso-postbox-email"],
|
||||||
|
div[class*="isso-postbox-website"] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fallback: hide email/website input wrappers by input name */
|
||||||
|
.isso-input-wrapper:has(input[name="email"]),
|
||||||
|
.isso-input-wrapper:has(input[name="website"]),
|
||||||
|
.isso-input-wrapper:has(input[placeholder*="mail"]),
|
||||||
|
.isso-input-wrapper:has(input[placeholder*="ebsite"]) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Postbox layout */
|
||||||
|
#isso-thread .isso-postbox {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
gap: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Textarea (comment box) */
|
||||||
|
#isso-thread .isso-textarea-wrapper {
|
||||||
|
margin-bottom: 0.75rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-textarea,
|
||||||
|
#isso-thread textarea {
|
||||||
|
background: #1a1d23 !important;
|
||||||
|
color: #ecf0f1 !important;
|
||||||
|
border: 1px solid #2c3e50 !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
font-family: 'SF Mono', 'Menlo', monospace !important;
|
||||||
|
font-size: 0.9rem !important;
|
||||||
|
padding: 0.75rem !important;
|
||||||
|
min-height: 100px !important;
|
||||||
|
width: 100% !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
resize: vertical !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Author name input */
|
||||||
|
#isso-thread .isso-postbox-author,
|
||||||
|
#isso-thread .isso-input-wrapper:first-of-type {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread input[type="text"],
|
||||||
|
#isso-thread .isso-input-wrapper input {
|
||||||
|
background: #1a1d23 !important;
|
||||||
|
color: #ecf0f1 !important;
|
||||||
|
border: 1px solid #2c3e50 !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
font-family: 'SF Mono', 'Menlo', monospace !important;
|
||||||
|
font-size: 0.9rem !important;
|
||||||
|
padding: 0.5rem 0.75rem !important;
|
||||||
|
width: 100% !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Focus states */
|
||||||
|
#isso-thread textarea:focus,
|
||||||
|
#isso-thread .isso-textarea:focus,
|
||||||
|
#isso-thread input[type="text"]:focus {
|
||||||
|
border-color: #62c4ff !important;
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread textarea::placeholder,
|
||||||
|
#isso-thread input::placeholder {
|
||||||
|
color: #555 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Name + submit aligned on same row via JS-injected wrapper isn't possible,
|
||||||
|
so use CSS grid on the postbox to place them */
|
||||||
|
#isso-thread .isso-postbox {
|
||||||
|
display: grid !important;
|
||||||
|
grid-template-columns: 1fr !important;
|
||||||
|
gap: 0.75rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-textarea-wrapper {
|
||||||
|
grid-column: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-auth-section {
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: space-between !important;
|
||||||
|
gap: 0.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-postbox-author,
|
||||||
|
#isso-thread .isso-auth-section .isso-input-wrapper:first-of-type {
|
||||||
|
flex: 1 !important;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-post-action {
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-post-action:first-of-type {
|
||||||
|
margin-left: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-post-action ~ .isso-post-action {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-post-action input[type="submit"],
|
||||||
|
#isso-thread .isso-postbox-author input,
|
||||||
|
#isso-thread .isso-input-wrapper:first-of-type input {
|
||||||
|
height: 36px !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-postbox-author input,
|
||||||
|
#isso-thread .isso-input-wrapper:first-of-type input {
|
||||||
|
width: 100% !important;
|
||||||
|
min-width: 180px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread input[type="submit"] {
|
||||||
|
background: #62c4ff !important;
|
||||||
|
color: #222225 !important;
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
padding: 0.5rem 1.25rem !important;
|
||||||
|
font-family: 'SF Mono', 'Menlo', monospace !important;
|
||||||
|
font-size: 0.85rem !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
cursor: pointer !important;
|
||||||
|
transition: background 0.2s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread input[type="submit"]:hover {
|
||||||
|
background: #4ab0ed !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom comment avatars */
|
||||||
|
.isso-custom-avatar {
|
||||||
|
width: 48px !important;
|
||||||
|
height: 48px !important;
|
||||||
|
border-radius: 50% !important;
|
||||||
|
object-fit: cover !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Comment styling */
|
||||||
|
#isso-thread .isso-comment {
|
||||||
|
border-left: 2px solid #2c3e50 !important;
|
||||||
|
padding: 0.75rem !important;
|
||||||
|
padding-left: 1rem !important;
|
||||||
|
margin-bottom: 1rem !important;
|
||||||
|
margin-top: 1rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-comment-header {
|
||||||
|
color: #a3abba !important;
|
||||||
|
font-size: 0.8rem !important;
|
||||||
|
margin-bottom: 0.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-text-wrapper {
|
||||||
|
color: #ecf0f1 !important;
|
||||||
|
line-height: 1.5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-comment-footer {
|
||||||
|
color: #666 !important;
|
||||||
|
font-size: 0.75rem !important;
|
||||||
|
margin-top: 0.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-comment-footer a {
|
||||||
|
color: #a3abba !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-comment-footer a:hover {
|
||||||
|
color: #62c4ff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--global-font-size: 15px;
|
||||||
|
--global-line-height: 1.4em;
|
||||||
|
--global-space: 10px;
|
||||||
|
--font-stack: Menlo, Monaco, Lucida Console, Liberation Mono,
|
||||||
|
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
|
||||||
|
serif;
|
||||||
|
--mono-font-stack: Menlo, Monaco, Lucida Console, Liberation Mono,
|
||||||
|
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
|
||||||
|
serif;
|
||||||
|
--background-color: #15151b !important;
|
||||||
|
--page-width: 60em;
|
||||||
|
--font-color: #e8e9ed;
|
||||||
|
--invert-font-color: #222225;
|
||||||
|
--secondary-color: #a3abba;
|
||||||
|
--tertiary-color: #a3abba;
|
||||||
|
--primary-color: #62c4ff;
|
||||||
|
--error-color: #ff3c74;
|
||||||
|
--progress-bar-background: #3f3f44;
|
||||||
|
--progress-bar-fill: #62c4ff;
|
||||||
|
--code-bg-color: #3f3f44;
|
||||||
|
--input-style: solid;
|
||||||
|
--display-h1-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
BIN
public/images/avatars/avatar1.jpg
Normal file
BIN
public/images/avatars/avatar1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
public/images/avatars/avatar2.png
Normal file
BIN
public/images/avatars/avatar2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
public/images/avatars/avatar3.png
Normal file
BIN
public/images/avatars/avatar3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
|
|
@ -22,27 +22,38 @@
|
||||||
<aside id="menu">
|
<aside id="menu">
|
||||||
<img src="/images/punpun.jpg" alt="keeper pfp">
|
<img src="/images/punpun.jpg" alt="keeper pfp">
|
||||||
|
|
||||||
<h3>go home</h3>
|
<h3><a href="/">go home</a></h3>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>blog posts</li>
|
<li><strong>useful links</strong></li>
|
||||||
<br>
|
|
||||||
<li>categories</li>
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><strong>blog categories</strong></li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/games/">Games</a>
|
<a href="//localhost:1313/categories/games/">games</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/hugo/">Hugo</a>
|
<a href="//localhost:1313/categories/hugo/">hugo</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/terminal/">Terminal</a>
|
<a href="//localhost:1313/categories/terminal/">terminal</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div class="neocities-buttons">
|
||||||
|
<strong>buttons</strong>
|
||||||
|
<div class="button-slideshow">
|
||||||
|
<a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a>
|
||||||
|
<a href="https://neocities.org/"><img src="https://neocities.org/img/neocities_88x31.gif" alt="neocities"></a>
|
||||||
|
<a href="https://www.w3.org/html/logo/"><img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" alt="html5"></a>
|
||||||
|
<a href="https://yesterweb.org/"><img src="https://yesterweb.org/img/badge.png" alt="yesterweb"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div class = "main-content">
|
<div class = "main-content">
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
const miniHeader = document.getElementById('mini-header');
|
const miniHeader = document.getElementById('mini-header');
|
||||||
const texts = ['use linux', 'i hate css', 'gpl everything', 'made with love']; // add your random text here
|
const texts = ['use linux', 'soup for my family', 'gpl everything']; // add your random text here
|
||||||
const text = texts[Math.floor(Math.random() * texts.length)];
|
const text = texts[Math.floor(Math.random() * texts.length)];
|
||||||
let charIndex = 0;
|
let charIndex = 0;
|
||||||
|
|
||||||
|
|
@ -7,7 +7,7 @@ function typeText() {
|
||||||
if (charIndex < text.length) {
|
if (charIndex < text.length) {
|
||||||
miniHeader.textContent += text.charAt(charIndex);
|
miniHeader.textContent += text.charAt(charIndex);
|
||||||
charIndex++;
|
charIndex++;
|
||||||
setTimeout(typeText, 50); // adjust the typing speed here
|
setTimeout(typeText, 50);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script><meta name="theme-color" content="#ffffff">
|
<html><script src="/livereload.js?mindelay=10&v=2&port=33989&path=livereload" data-no-instant defer></script><meta name="theme-color" content="#ffffff">
|
||||||
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css" />
|
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css" />
|
||||||
<link rel="stylesheet" href="/css/styles.css"/>
|
<link rel="stylesheet" href="/css/styles.css"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
@ -22,27 +22,38 @@
|
||||||
<aside id="menu">
|
<aside id="menu">
|
||||||
<img src="/images/punpun.jpg" alt="keeper pfp">
|
<img src="/images/punpun.jpg" alt="keeper pfp">
|
||||||
|
|
||||||
<h3>go home</h3>
|
<h3><a href="/">go home</a></h3>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>blog posts</li>
|
<li><strong>useful links</strong></li>
|
||||||
<br>
|
|
||||||
<li>categories</li>
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><strong>blog categories</strong></li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/games/">Games</a>
|
<a href="//localhost:33989/categories/games/">games</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/hugo/">Hugo</a>
|
<a href="//localhost:33989/categories/hugo/">hugo</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/terminal/">Terminal</a>
|
<a href="//localhost:33989/categories/terminal/">terminal</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div class="neocities-buttons">
|
||||||
|
<strong>buttons</strong>
|
||||||
|
<div class="button-slideshow">
|
||||||
|
<a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a>
|
||||||
|
<a href="https://neocities.org/"><img src="https://neocities.org/img/neocities_88x31.gif" alt="neocities"></a>
|
||||||
|
<a href="https://www.w3.org/html/logo/"><img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" alt="html5"></a>
|
||||||
|
<a href="https://yesterweb.org/"><img src="https://yesterweb.org/img/badge.png" alt="yesterweb"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div class = "main-content">
|
<div class = "main-content">
|
||||||
|
|
@ -55,9 +66,9 @@
|
||||||
<div class="tag-list">
|
<div class="tag-list">
|
||||||
<strong>Categories:</strong>
|
<strong>Categories:</strong>
|
||||||
|
|
||||||
<a href="/categories/terminal" class="tag-link">Terminal</a>
|
<a href="/categories/terminal" class="tag-link">terminal</a>
|
||||||
|
|
||||||
<a href="/categories/hugo" class="tag-link">Hugo</a>
|
<a href="/categories/hugo" class="tag-link">hugo</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -78,11 +89,89 @@
|
||||||
<h1 id="yoooo">yoooo</h1>
|
<h1 id="yoooo">yoooo</h1>
|
||||||
<p>this is one of my first articles homies. so i wil try my best to write it the best i can</p>
|
<p>this is one of my first articles homies. so i wil try my best to write it the best i can</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="comments-container">
|
||||||
|
<h3>comments</h3>
|
||||||
|
<section id="isso-thread">
|
||||||
|
<script data-isso="http://localhost:8080/"
|
||||||
|
data-isso-require-email="false"
|
||||||
|
data-isso-require-author="false"
|
||||||
|
data-isso-reply-notifications="false"
|
||||||
|
data-isso-input-type="textarea"
|
||||||
|
src="http://localhost:8080/js/embed.min.js"></script>
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
var avatars = [
|
||||||
|
'/images/avatars/avatar1.jpg',
|
||||||
|
'/images/avatars/avatar2.png',
|
||||||
|
'/images/avatars/avatar3.png'
|
||||||
|
];
|
||||||
|
|
||||||
|
function hashName(str) {
|
||||||
|
var hash = 0;
|
||||||
|
str = (str || 'anonymous').toLowerCase().trim();
|
||||||
|
for (var i = 0; i < str.length; i++) {
|
||||||
|
hash = ((hash << 5) - hash) + str.charCodeAt(i);
|
||||||
|
hash |= 0;
|
||||||
|
}
|
||||||
|
return Math.abs(hash);
|
||||||
|
}
|
||||||
|
|
||||||
|
function replaceAvatars() {
|
||||||
|
var comments = document.querySelectorAll('#isso-thread .isso-comment');
|
||||||
|
comments.forEach(function(comment) {
|
||||||
|
if (comment.dataset.avatarSet) return;
|
||||||
|
var authorEl = comment.querySelector('.isso-author');
|
||||||
|
var avatarEl = comment.querySelector('.isso-avatar, svg');
|
||||||
|
if (avatarEl) {
|
||||||
|
var name = authorEl ? authorEl.textContent : 'anonymous';
|
||||||
|
var idx = hashName(name) % avatars.length;
|
||||||
|
var img = document.createElement('img');
|
||||||
|
img.src = avatars[idx];
|
||||||
|
img.alt = name;
|
||||||
|
img.className = 'isso-custom-avatar';
|
||||||
|
avatarEl.parentNode.replaceChild(img, avatarEl);
|
||||||
|
comment.dataset.avatarSet = '1';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var check = setInterval(function() {
|
||||||
|
var nameInput = document.querySelector('#isso-thread .isso-postbox-author input, #isso-thread .isso-input-wrapper:first-of-type input[type="text"]');
|
||||||
|
if (nameInput) {
|
||||||
|
nameInput.placeholder = 'Name (optional)';
|
||||||
|
var label = nameInput.closest('.isso-input-wrapper, .isso-postbox-author');
|
||||||
|
if (label) {
|
||||||
|
var labelEl = label.querySelector('label');
|
||||||
|
if (labelEl) labelEl.style.display = 'none';
|
||||||
|
}
|
||||||
|
clearInterval(check);
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
|
||||||
|
var observer = new MutationObserver(replaceAvatars);
|
||||||
|
var waitForThread = setInterval(function() {
|
||||||
|
var thread = document.getElementById('isso-thread');
|
||||||
|
if (thread) {
|
||||||
|
observer.observe(thread, { childList: true, subtree: true });
|
||||||
|
replaceAvatars();
|
||||||
|
clearInterval(waitForThread);
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
<noscript>javascript is required to view comments.</noscript>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</article>
|
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -22,27 +22,38 @@
|
||||||
<aside id="menu">
|
<aside id="menu">
|
||||||
<img src="/images/punpun.jpg" alt="keeper pfp">
|
<img src="/images/punpun.jpg" alt="keeper pfp">
|
||||||
|
|
||||||
<h3>go home</h3>
|
<h3><a href="/">go home</a></h3>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>blog posts</li>
|
<li><strong>useful links</strong></li>
|
||||||
<br>
|
|
||||||
<li>categories</li>
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><strong>blog categories</strong></li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/games/">Games</a>
|
<a href="//localhost:1313/categories/games/">games</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/hugo/">Hugo</a>
|
<a href="//localhost:1313/categories/hugo/">hugo</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/terminal/">Terminal</a>
|
<a href="//localhost:1313/categories/terminal/">terminal</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div class="neocities-buttons">
|
||||||
|
<strong>buttons</strong>
|
||||||
|
<div class="button-slideshow">
|
||||||
|
<a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a>
|
||||||
|
<a href="https://neocities.org/"><img src="https://neocities.org/img/neocities_88x31.gif" alt="neocities"></a>
|
||||||
|
<a href="https://www.w3.org/html/logo/"><img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" alt="html5"></a>
|
||||||
|
<a href="https://yesterweb.org/"><img src="https://yesterweb.org/img/badge.png" alt="yesterweb"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div class = "main-content">
|
<div class = "main-content">
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script><meta name="theme-color" content="#ffffff">
|
<html><script src="/livereload.js?mindelay=10&v=2&port=33989&path=livereload" data-no-instant defer></script><meta name="theme-color" content="#ffffff">
|
||||||
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css" />
|
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css" />
|
||||||
<link rel="stylesheet" href="/css/styles.css"/>
|
<link rel="stylesheet" href="/css/styles.css"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
@ -22,27 +22,38 @@
|
||||||
<aside id="menu">
|
<aside id="menu">
|
||||||
<img src="/images/punpun.jpg" alt="keeper pfp">
|
<img src="/images/punpun.jpg" alt="keeper pfp">
|
||||||
|
|
||||||
<h3>go home</h3>
|
<h3><a href="/">go home</a></h3>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>blog posts</li>
|
<li><strong>useful links</strong></li>
|
||||||
<br>
|
|
||||||
<li>categories</li>
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><strong>blog categories</strong></li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/games/">Games</a>
|
<a href="//localhost:33989/categories/games/">games</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/hugo/">Hugo</a>
|
<a href="//localhost:33989/categories/hugo/">hugo</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/terminal/">Terminal</a>
|
<a href="//localhost:33989/categories/terminal/">terminal</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div class="neocities-buttons">
|
||||||
|
<strong>buttons</strong>
|
||||||
|
<div class="button-slideshow">
|
||||||
|
<a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a>
|
||||||
|
<a href="https://neocities.org/"><img src="https://neocities.org/img/neocities_88x31.gif" alt="neocities"></a>
|
||||||
|
<a href="https://www.w3.org/html/logo/"><img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" alt="html5"></a>
|
||||||
|
<a href="https://yesterweb.org/"><img src="https://yesterweb.org/img/badge.png" alt="yesterweb"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div class = "main-content">
|
<div class = "main-content">
|
||||||
|
|
@ -56,10 +67,86 @@
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="comments-container">
|
||||||
|
<h3>comments</h3>
|
||||||
|
<section id="isso-thread">
|
||||||
|
<script data-isso="http://localhost:8080/"
|
||||||
|
data-isso-require-email="false"
|
||||||
|
data-isso-require-author="false"
|
||||||
|
data-isso-reply-notifications="false"
|
||||||
|
data-isso-input-type="textarea"
|
||||||
|
src="http://localhost:8080/js/embed.min.js"></script>
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
var avatars = [
|
||||||
|
'/images/avatars/avatar1.jpg',
|
||||||
|
'/images/avatars/avatar2.png',
|
||||||
|
'/images/avatars/avatar3.png'
|
||||||
|
];
|
||||||
|
|
||||||
|
function hashName(str) {
|
||||||
|
var hash = 0;
|
||||||
|
str = (str || 'anonymous').toLowerCase().trim();
|
||||||
|
for (var i = 0; i < str.length; i++) {
|
||||||
|
hash = ((hash << 5) - hash) + str.charCodeAt(i);
|
||||||
|
hash |= 0;
|
||||||
|
}
|
||||||
|
return Math.abs(hash);
|
||||||
|
}
|
||||||
|
|
||||||
|
function replaceAvatars() {
|
||||||
|
var comments = document.querySelectorAll('#isso-thread .isso-comment');
|
||||||
|
comments.forEach(function(comment) {
|
||||||
|
if (comment.dataset.avatarSet) return;
|
||||||
|
var authorEl = comment.querySelector('.isso-author');
|
||||||
|
var avatarEl = comment.querySelector('.isso-avatar, svg');
|
||||||
|
if (avatarEl) {
|
||||||
|
var name = authorEl ? authorEl.textContent : 'anonymous';
|
||||||
|
var idx = hashName(name) % avatars.length;
|
||||||
|
var img = document.createElement('img');
|
||||||
|
img.src = avatars[idx];
|
||||||
|
img.alt = name;
|
||||||
|
img.className = 'isso-custom-avatar';
|
||||||
|
avatarEl.parentNode.replaceChild(img, avatarEl);
|
||||||
|
comment.dataset.avatarSet = '1';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var check = setInterval(function() {
|
||||||
|
var nameInput = document.querySelector('#isso-thread .isso-postbox-author input, #isso-thread .isso-input-wrapper:first-of-type input[type="text"]');
|
||||||
|
if (nameInput) {
|
||||||
|
nameInput.placeholder = 'Name (optional)';
|
||||||
|
var label = nameInput.closest('.isso-input-wrapper, .isso-postbox-author');
|
||||||
|
if (label) {
|
||||||
|
var labelEl = label.querySelector('label');
|
||||||
|
if (labelEl) labelEl.style.display = 'none';
|
||||||
|
}
|
||||||
|
clearInterval(check);
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
|
||||||
|
var observer = new MutationObserver(replaceAvatars);
|
||||||
|
var waitForThread = setInterval(function() {
|
||||||
|
var thread = document.getElementById('isso-thread');
|
||||||
|
if (thread) {
|
||||||
|
observer.observe(thread, { childList: true, subtree: true });
|
||||||
|
replaceAvatars();
|
||||||
|
clearInterval(waitForThread);
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
<noscript>javascript is required to view comments.</noscript>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script><meta name="theme-color" content="#ffffff">
|
<html><script src="/livereload.js?mindelay=10&v=2&port=33989&path=livereload" data-no-instant defer></script><meta name="theme-color" content="#ffffff">
|
||||||
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css" />
|
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css" />
|
||||||
<link rel="stylesheet" href="/css/styles.css"/>
|
<link rel="stylesheet" href="/css/styles.css"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
@ -22,27 +22,38 @@
|
||||||
<aside id="menu">
|
<aside id="menu">
|
||||||
<img src="/images/punpun.jpg" alt="keeper pfp">
|
<img src="/images/punpun.jpg" alt="keeper pfp">
|
||||||
|
|
||||||
<h3>go home</h3>
|
<h3><a href="/">go home</a></h3>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>blog posts</li>
|
<li><strong>useful links</strong></li>
|
||||||
<br>
|
|
||||||
<li>categories</li>
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><strong>blog categories</strong></li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/games/">Games</a>
|
<a href="//localhost:33989/categories/games/">games</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/hugo/">Hugo</a>
|
<a href="//localhost:33989/categories/hugo/">hugo</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/terminal/">Terminal</a>
|
<a href="//localhost:33989/categories/terminal/">terminal</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div class="neocities-buttons">
|
||||||
|
<strong>buttons</strong>
|
||||||
|
<div class="button-slideshow">
|
||||||
|
<a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a>
|
||||||
|
<a href="https://neocities.org/"><img src="https://neocities.org/img/neocities_88x31.gif" alt="neocities"></a>
|
||||||
|
<a href="https://www.w3.org/html/logo/"><img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" alt="html5"></a>
|
||||||
|
<a href="https://yesterweb.org/"><img src="https://yesterweb.org/img/badge.png" alt="yesterweb"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div class = "main-content">
|
<div class = "main-content">
|
||||||
|
|
@ -55,7 +66,7 @@
|
||||||
<div class="tag-list">
|
<div class="tag-list">
|
||||||
<strong>Categories:</strong>
|
<strong>Categories:</strong>
|
||||||
|
|
||||||
<a href="/categories/games" class="tag-link">Games</a>
|
<a href="/categories/games" class="tag-link">games</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -67,10 +78,86 @@
|
||||||
<p>Visit the <a href="https://gohugo.io">Hugo</a> website!</p>
|
<p>Visit the <a href="https://gohugo.io">Hugo</a> website!</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="comments-container">
|
||||||
|
<h3>comments</h3>
|
||||||
|
<section id="isso-thread">
|
||||||
|
<script data-isso="http://localhost:8080/"
|
||||||
|
data-isso-require-email="false"
|
||||||
|
data-isso-require-author="false"
|
||||||
|
data-isso-reply-notifications="false"
|
||||||
|
data-isso-input-type="textarea"
|
||||||
|
src="http://localhost:8080/js/embed.min.js"></script>
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
var avatars = [
|
||||||
|
'/images/avatars/avatar1.jpg',
|
||||||
|
'/images/avatars/avatar2.png',
|
||||||
|
'/images/avatars/avatar3.png'
|
||||||
|
];
|
||||||
|
|
||||||
|
function hashName(str) {
|
||||||
|
var hash = 0;
|
||||||
|
str = (str || 'anonymous').toLowerCase().trim();
|
||||||
|
for (var i = 0; i < str.length; i++) {
|
||||||
|
hash = ((hash << 5) - hash) + str.charCodeAt(i);
|
||||||
|
hash |= 0;
|
||||||
|
}
|
||||||
|
return Math.abs(hash);
|
||||||
|
}
|
||||||
|
|
||||||
|
function replaceAvatars() {
|
||||||
|
var comments = document.querySelectorAll('#isso-thread .isso-comment');
|
||||||
|
comments.forEach(function(comment) {
|
||||||
|
if (comment.dataset.avatarSet) return;
|
||||||
|
var authorEl = comment.querySelector('.isso-author');
|
||||||
|
var avatarEl = comment.querySelector('.isso-avatar, svg');
|
||||||
|
if (avatarEl) {
|
||||||
|
var name = authorEl ? authorEl.textContent : 'anonymous';
|
||||||
|
var idx = hashName(name) % avatars.length;
|
||||||
|
var img = document.createElement('img');
|
||||||
|
img.src = avatars[idx];
|
||||||
|
img.alt = name;
|
||||||
|
img.className = 'isso-custom-avatar';
|
||||||
|
avatarEl.parentNode.replaceChild(img, avatarEl);
|
||||||
|
comment.dataset.avatarSet = '1';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var check = setInterval(function() {
|
||||||
|
var nameInput = document.querySelector('#isso-thread .isso-postbox-author input, #isso-thread .isso-input-wrapper:first-of-type input[type="text"]');
|
||||||
|
if (nameInput) {
|
||||||
|
nameInput.placeholder = 'Name (optional)';
|
||||||
|
var label = nameInput.closest('.isso-input-wrapper, .isso-postbox-author');
|
||||||
|
if (label) {
|
||||||
|
var labelEl = label.querySelector('label');
|
||||||
|
if (labelEl) labelEl.style.display = 'none';
|
||||||
|
}
|
||||||
|
clearInterval(check);
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
|
||||||
|
var observer = new MutationObserver(replaceAvatars);
|
||||||
|
var waitForThread = setInterval(function() {
|
||||||
|
var thread = document.getElementById('isso-thread');
|
||||||
|
if (thread) {
|
||||||
|
observer.observe(thread, { childList: true, subtree: true });
|
||||||
|
replaceAvatars();
|
||||||
|
clearInterval(waitForThread);
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
<noscript>javascript is required to view comments.</noscript>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -22,27 +22,38 @@
|
||||||
<aside id="menu">
|
<aside id="menu">
|
||||||
<img src="/images/punpun.jpg" alt="keeper pfp">
|
<img src="/images/punpun.jpg" alt="keeper pfp">
|
||||||
|
|
||||||
<h3>go home</h3>
|
<h3><a href="/">go home</a></h3>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>blog posts</li>
|
<li><strong>useful links</strong></li>
|
||||||
<br>
|
|
||||||
<li>categories</li>
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><strong>blog categories</strong></li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/games/">Games</a>
|
<a href="//localhost:1313/categories/games/">games</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/hugo/">Hugo</a>
|
<a href="//localhost:1313/categories/hugo/">hugo</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/terminal/">Terminal</a>
|
<a href="//localhost:1313/categories/terminal/">terminal</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div class="neocities-buttons">
|
||||||
|
<strong>buttons</strong>
|
||||||
|
<div class="button-slideshow">
|
||||||
|
<a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a>
|
||||||
|
<a href="https://neocities.org/"><img src="https://neocities.org/img/neocities_88x31.gif" alt="neocities"></a>
|
||||||
|
<a href="https://www.w3.org/html/logo/"><img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" alt="html5"></a>
|
||||||
|
<a href="https://yesterweb.org/"><img src="https://yesterweb.org/img/badge.png" alt="yesterweb"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div class = "main-content">
|
<div class = "main-content">
|
||||||
|
|
|
||||||
|
|
@ -22,27 +22,38 @@
|
||||||
<aside id="menu">
|
<aside id="menu">
|
||||||
<img src="/images/punpun.jpg" alt="keeper pfp">
|
<img src="/images/punpun.jpg" alt="keeper pfp">
|
||||||
|
|
||||||
<h3>go home</h3>
|
<h3><a href="/">go home</a></h3>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>blog posts</li>
|
<li><strong>useful links</strong></li>
|
||||||
<br>
|
|
||||||
<li>categories</li>
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><strong>blog categories</strong></li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/games/">Games</a>
|
<a href="//localhost:1313/categories/games/">games</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/hugo/">Hugo</a>
|
<a href="//localhost:1313/categories/hugo/">hugo</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/terminal/">Terminal</a>
|
<a href="//localhost:1313/categories/terminal/">terminal</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div class="neocities-buttons">
|
||||||
|
<strong>buttons</strong>
|
||||||
|
<div class="button-slideshow">
|
||||||
|
<a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a>
|
||||||
|
<a href="https://neocities.org/"><img src="https://neocities.org/img/neocities_88x31.gif" alt="neocities"></a>
|
||||||
|
<a href="https://www.w3.org/html/logo/"><img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" alt="html5"></a>
|
||||||
|
<a href="https://yesterweb.org/"><img src="https://yesterweb.org/img/badge.png" alt="yesterweb"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div class = "main-content">
|
<div class = "main-content">
|
||||||
|
|
|
||||||
|
|
@ -22,27 +22,38 @@
|
||||||
<aside id="menu">
|
<aside id="menu">
|
||||||
<img src="/images/punpun.jpg" alt="keeper pfp">
|
<img src="/images/punpun.jpg" alt="keeper pfp">
|
||||||
|
|
||||||
<h3>go home</h3>
|
<h3><a href="/">go home</a></h3>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>blog posts</li>
|
<li><strong>useful links</strong></li>
|
||||||
<br>
|
|
||||||
<li>categories</li>
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><strong>blog categories</strong></li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/games/">Games</a>
|
<a href="//localhost:1313/categories/games/">games</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/hugo/">Hugo</a>
|
<a href="//localhost:1313/categories/hugo/">hugo</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/terminal/">Terminal</a>
|
<a href="//localhost:1313/categories/terminal/">terminal</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div class="neocities-buttons">
|
||||||
|
<strong>buttons</strong>
|
||||||
|
<div class="button-slideshow">
|
||||||
|
<a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a>
|
||||||
|
<a href="https://neocities.org/"><img src="https://neocities.org/img/neocities_88x31.gif" alt="neocities"></a>
|
||||||
|
<a href="https://www.w3.org/html/logo/"><img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" alt="html5"></a>
|
||||||
|
<a href="https://yesterweb.org/"><img src="https://yesterweb.org/img/badge.png" alt="yesterweb"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div class = "main-content">
|
<div class = "main-content">
|
||||||
|
|
|
||||||
|
|
@ -22,27 +22,38 @@
|
||||||
<aside id="menu">
|
<aside id="menu">
|
||||||
<img src="/images/punpun.jpg" alt="keeper pfp">
|
<img src="/images/punpun.jpg" alt="keeper pfp">
|
||||||
|
|
||||||
<h3>go home</h3>
|
<h3><a href="/">go home</a></h3>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>blog posts</li>
|
<li><strong>useful links</strong></li>
|
||||||
<br>
|
|
||||||
<li>categories</li>
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><strong>blog categories</strong></li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/games/">Games</a>
|
<a href="//localhost:1313/categories/games/">games</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/hugo/">Hugo</a>
|
<a href="//localhost:1313/categories/hugo/">hugo</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/terminal/">Terminal</a>
|
<a href="//localhost:1313/categories/terminal/">terminal</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div class="neocities-buttons">
|
||||||
|
<strong>buttons</strong>
|
||||||
|
<div class="button-slideshow">
|
||||||
|
<a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a>
|
||||||
|
<a href="https://neocities.org/"><img src="https://neocities.org/img/neocities_88x31.gif" alt="neocities"></a>
|
||||||
|
<a href="https://www.w3.org/html/logo/"><img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" alt="html5"></a>
|
||||||
|
<a href="https://yesterweb.org/"><img src="https://yesterweb.org/img/badge.png" alt="yesterweb"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div class = "main-content">
|
<div class = "main-content">
|
||||||
|
|
|
||||||
|
|
@ -22,27 +22,38 @@
|
||||||
<aside id="menu">
|
<aside id="menu">
|
||||||
<img src="/images/punpun.jpg" alt="keeper pfp">
|
<img src="/images/punpun.jpg" alt="keeper pfp">
|
||||||
|
|
||||||
<h3>go home</h3>
|
<h3><a href="/">go home</a></h3>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>blog posts</li>
|
<li><strong>useful links</strong></li>
|
||||||
<br>
|
|
||||||
<li>categories</li>
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><strong>blog categories</strong></li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/games/">Games</a>
|
<a href="//localhost:1313/categories/games/">games</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/hugo/">Hugo</a>
|
<a href="//localhost:1313/categories/hugo/">hugo</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/terminal/">Terminal</a>
|
<a href="//localhost:1313/categories/terminal/">terminal</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div class="neocities-buttons">
|
||||||
|
<strong>buttons</strong>
|
||||||
|
<div class="button-slideshow">
|
||||||
|
<a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a>
|
||||||
|
<a href="https://neocities.org/"><img src="https://neocities.org/img/neocities_88x31.gif" alt="neocities"></a>
|
||||||
|
<a href="https://www.w3.org/html/logo/"><img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" alt="html5"></a>
|
||||||
|
<a href="https://yesterweb.org/"><img src="https://yesterweb.org/img/badge.png" alt="yesterweb"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div class = "main-content">
|
<div class = "main-content">
|
||||||
|
|
|
||||||
|
|
@ -22,27 +22,38 @@
|
||||||
<aside id="menu">
|
<aside id="menu">
|
||||||
<img src="/images/punpun.jpg" alt="keeper pfp">
|
<img src="/images/punpun.jpg" alt="keeper pfp">
|
||||||
|
|
||||||
<h3>go home</h3>
|
<h3><a href="/">go home</a></h3>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>blog posts</li>
|
<li><strong>useful links</strong></li>
|
||||||
<br>
|
|
||||||
<li>categories</li>
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><strong>blog categories</strong></li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/games/">Games</a>
|
<a href="//localhost:1313/categories/games/">games</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/hugo/">Hugo</a>
|
<a href="//localhost:1313/categories/hugo/">hugo</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<a href="//localhost:1313/categories/terminal/">Terminal</a>
|
<a href="//localhost:1313/categories/terminal/">terminal</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div class="neocities-buttons">
|
||||||
|
<strong>buttons</strong>
|
||||||
|
<div class="button-slideshow">
|
||||||
|
<a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a>
|
||||||
|
<a href="https://neocities.org/"><img src="https://neocities.org/img/neocities_88x31.gif" alt="neocities"></a>
|
||||||
|
<a href="https://www.w3.org/html/logo/"><img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" alt="html5"></a>
|
||||||
|
<a href="https://yesterweb.org/"><img src="https://yesterweb.org/img/badge.png" alt="yesterweb"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div class = "main-content">
|
<div class = "main-content">
|
||||||
|
|
|
||||||
BIN
static/images/avatars/avatar1.jpg
Normal file
BIN
static/images/avatars/avatar1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
static/images/avatars/avatar2.png
Normal file
BIN
static/images/avatars/avatar2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
static/images/avatars/avatar3.png
Normal file
BIN
static/images/avatars/avatar3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
|
|
@ -14,19 +14,30 @@
|
||||||
<aside id="menu">
|
<aside id="menu">
|
||||||
<img src="/images/punpun.jpg" alt="keeper pfp">
|
<img src="/images/punpun.jpg" alt="keeper pfp">
|
||||||
|
|
||||||
<h3>go home</h3>
|
<h3><a href="/">go home</a></h3>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>blog posts</li>
|
<li><strong>useful links</strong></li>
|
||||||
<br>
|
<!-- Add your links here -->
|
||||||
<li>categories</li>
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><strong>blog categories</strong></li>
|
||||||
{{ range .Site.Taxonomies.categories.Alphabetical }}
|
{{ range .Site.Taxonomies.categories.Alphabetical }}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
|
<a href="{{ .Page.Permalink }}">{{ .Page.Title | lower }}</a>
|
||||||
</li>
|
</li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div class="neocities-buttons">
|
||||||
|
<strong>buttons</strong>
|
||||||
|
<div class="button-slideshow">
|
||||||
|
<a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a>
|
||||||
|
<a href="https://neocities.org/"><img src="https://neocities.org/img/neocities_88x31.gif" alt="neocities"></a>
|
||||||
|
<a href="https://www.w3.org/html/logo/"><img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" alt="html5"></a>
|
||||||
|
<a href="https://yesterweb.org/"><img src="https://yesterweb.org/img/badge.png" alt="yesterweb"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div class = "main-content">
|
<div class = "main-content">
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,83 @@
|
||||||
|
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
{{ with .Site.Params.isso }}
|
||||||
|
<div class="comments-container">
|
||||||
|
<h3>comments</h3>
|
||||||
|
<section id="isso-thread">
|
||||||
|
<script data-isso="{{ .url }}"
|
||||||
|
data-isso-require-email="false"
|
||||||
|
data-isso-require-author="false"
|
||||||
|
data-isso-reply-notifications="false"
|
||||||
|
data-isso-input-type="textarea"
|
||||||
|
src="{{ .url }}js/embed.min.js"></script>
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
var avatars = [
|
||||||
|
'/images/avatars/avatar1.jpg',
|
||||||
|
'/images/avatars/avatar2.png',
|
||||||
|
'/images/avatars/avatar3.png'
|
||||||
|
];
|
||||||
|
|
||||||
|
function hashName(str) {
|
||||||
|
var hash = 0;
|
||||||
|
str = (str || 'anonymous').toLowerCase().trim();
|
||||||
|
for (var i = 0; i < str.length; i++) {
|
||||||
|
hash = ((hash << 5) - hash) + str.charCodeAt(i);
|
||||||
|
hash |= 0;
|
||||||
|
}
|
||||||
|
return Math.abs(hash);
|
||||||
|
}
|
||||||
|
|
||||||
|
function replaceAvatars() {
|
||||||
|
var comments = document.querySelectorAll('#isso-thread .isso-comment');
|
||||||
|
comments.forEach(function(comment) {
|
||||||
|
if (comment.dataset.avatarSet) return;
|
||||||
|
var authorEl = comment.querySelector('.isso-author');
|
||||||
|
var avatarEl = comment.querySelector('.isso-avatar, svg');
|
||||||
|
if (avatarEl) {
|
||||||
|
var name = authorEl ? authorEl.textContent : 'anonymous';
|
||||||
|
var idx = hashName(name) % avatars.length;
|
||||||
|
var img = document.createElement('img');
|
||||||
|
img.src = avatars[idx];
|
||||||
|
img.alt = name;
|
||||||
|
img.className = 'isso-custom-avatar';
|
||||||
|
avatarEl.parentNode.replaceChild(img, avatarEl);
|
||||||
|
comment.dataset.avatarSet = '1';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fix name input placeholder + hide label
|
||||||
|
var check = setInterval(function() {
|
||||||
|
var nameInput = document.querySelector('#isso-thread .isso-postbox-author input, #isso-thread .isso-input-wrapper:first-of-type input[type="text"]');
|
||||||
|
if (nameInput) {
|
||||||
|
nameInput.placeholder = 'Name (optional)';
|
||||||
|
var label = nameInput.closest('.isso-input-wrapper, .isso-postbox-author');
|
||||||
|
if (label) {
|
||||||
|
var labelEl = label.querySelector('label');
|
||||||
|
if (labelEl) labelEl.style.display = 'none';
|
||||||
|
}
|
||||||
|
clearInterval(check);
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
// Watch for new comments and replace avatars
|
||||||
|
var observer = new MutationObserver(replaceAvatars);
|
||||||
|
var waitForThread = setInterval(function() {
|
||||||
|
var thread = document.getElementById('isso-thread');
|
||||||
|
if (thread) {
|
||||||
|
observer.observe(thread, { childList: true, subtree: true });
|
||||||
|
replaceAvatars();
|
||||||
|
clearInterval(waitForThread);
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
<noscript>javascript is required to view comments.</noscript>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
16
themes/terminal/layouts/_shortcodes/chat.html
Normal file
16
themes/terminal/layouts/_shortcodes/chat.html
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
{{ if .Site.Params.cactusComments.enabled }}
|
||||||
|
<section id="cactus-comments" class="comments-section">
|
||||||
|
<script type="text/javascript" src="https://latest.cactus.chat/cactus.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://latest.cactus.chat/style.css" type="text/css">
|
||||||
|
<div id="comment-section"></div>
|
||||||
|
<script>
|
||||||
|
initComments({
|
||||||
|
node: document.getElementById("comment-section"),
|
||||||
|
defaultHomeserverUrl: "https://{{ .Site.Params.cactusComments.serverName }}",
|
||||||
|
serverName: "{{ .Site.Params.cactusComments.serverName }}",
|
||||||
|
siteName: "{{ .Site.Params.cactusComments.siteName }}",
|
||||||
|
commentSectionId: "{{ index .Params 0 }}"
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
{{ end }}
|
||||||
|
|
@ -302,6 +302,260 @@ body {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Neocities button slideshow */
|
||||||
|
.neocities-buttons {
|
||||||
|
margin-top: 1rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.neocities-buttons strong {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-slideshow {
|
||||||
|
width: 88px;
|
||||||
|
height: 31px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-slideshow a {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 0;
|
||||||
|
animation: buttonFade 12s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-slideshow a:nth-child(1) { animation-delay: 0s; }
|
||||||
|
.button-slideshow a:nth-child(2) { animation-delay: 3s; }
|
||||||
|
.button-slideshow a:nth-child(3) { animation-delay: 6s; }
|
||||||
|
.button-slideshow a:nth-child(4) { animation-delay: 9s; }
|
||||||
|
|
||||||
|
.button-slideshow a img {
|
||||||
|
display: block;
|
||||||
|
width: 88px;
|
||||||
|
height: 31px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes buttonFade {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
4% { opacity: 1; }
|
||||||
|
21% { opacity: 1; }
|
||||||
|
25% { opacity: 0; }
|
||||||
|
100% { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Comments container */
|
||||||
|
.comments-container {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 700px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments-container h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Isso form overrides */
|
||||||
|
#isso-thread {
|
||||||
|
color: #ecf0f1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide email, website, and preview */
|
||||||
|
.isso-postbox-email,
|
||||||
|
.isso-postbox-website,
|
||||||
|
.isso-preview,
|
||||||
|
.isso-post-action input[name="preview"],
|
||||||
|
div[class*="isso-postbox-email"],
|
||||||
|
div[class*="isso-postbox-website"] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fallback: hide email/website input wrappers by input name */
|
||||||
|
.isso-input-wrapper:has(input[name="email"]),
|
||||||
|
.isso-input-wrapper:has(input[name="website"]),
|
||||||
|
.isso-input-wrapper:has(input[placeholder*="mail"]),
|
||||||
|
.isso-input-wrapper:has(input[placeholder*="ebsite"]) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Postbox layout */
|
||||||
|
#isso-thread .isso-postbox {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
gap: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Textarea (comment box) */
|
||||||
|
#isso-thread .isso-textarea-wrapper {
|
||||||
|
margin-bottom: 0.75rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-textarea,
|
||||||
|
#isso-thread textarea {
|
||||||
|
background: #1a1d23 !important;
|
||||||
|
color: #ecf0f1 !important;
|
||||||
|
border: 1px solid #2c3e50 !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
font-family: 'SF Mono', 'Menlo', monospace !important;
|
||||||
|
font-size: 0.9rem !important;
|
||||||
|
padding: 0.75rem !important;
|
||||||
|
min-height: 100px !important;
|
||||||
|
width: 100% !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
resize: vertical !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Author name input */
|
||||||
|
#isso-thread .isso-postbox-author,
|
||||||
|
#isso-thread .isso-input-wrapper:first-of-type {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread input[type="text"],
|
||||||
|
#isso-thread .isso-input-wrapper input {
|
||||||
|
background: #1a1d23 !important;
|
||||||
|
color: #ecf0f1 !important;
|
||||||
|
border: 1px solid #2c3e50 !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
font-family: 'SF Mono', 'Menlo', monospace !important;
|
||||||
|
font-size: 0.9rem !important;
|
||||||
|
padding: 0.5rem 0.75rem !important;
|
||||||
|
width: 100% !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Focus states */
|
||||||
|
#isso-thread textarea:focus,
|
||||||
|
#isso-thread .isso-textarea:focus,
|
||||||
|
#isso-thread input[type="text"]:focus {
|
||||||
|
border-color: #62c4ff !important;
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread textarea::placeholder,
|
||||||
|
#isso-thread input::placeholder {
|
||||||
|
color: #555 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Name + submit aligned on same row via JS-injected wrapper isn't possible,
|
||||||
|
so use CSS grid on the postbox to place them */
|
||||||
|
#isso-thread .isso-postbox {
|
||||||
|
display: grid !important;
|
||||||
|
grid-template-columns: 1fr !important;
|
||||||
|
gap: 0.75rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-textarea-wrapper {
|
||||||
|
grid-column: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-auth-section {
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: space-between !important;
|
||||||
|
gap: 0.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-postbox-author,
|
||||||
|
#isso-thread .isso-auth-section .isso-input-wrapper:first-of-type {
|
||||||
|
flex: 1 !important;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-post-action {
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-post-action:first-of-type {
|
||||||
|
margin-left: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-post-action ~ .isso-post-action {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-post-action input[type="submit"],
|
||||||
|
#isso-thread .isso-postbox-author input,
|
||||||
|
#isso-thread .isso-input-wrapper:first-of-type input {
|
||||||
|
height: 36px !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-postbox-author input,
|
||||||
|
#isso-thread .isso-input-wrapper:first-of-type input {
|
||||||
|
width: 100% !important;
|
||||||
|
min-width: 180px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread input[type="submit"] {
|
||||||
|
background: #62c4ff !important;
|
||||||
|
color: #222225 !important;
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
padding: 0.5rem 1.25rem !important;
|
||||||
|
font-family: 'SF Mono', 'Menlo', monospace !important;
|
||||||
|
font-size: 0.85rem !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
cursor: pointer !important;
|
||||||
|
transition: background 0.2s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread input[type="submit"]:hover {
|
||||||
|
background: #4ab0ed !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom comment avatars */
|
||||||
|
.isso-custom-avatar {
|
||||||
|
width: 48px !important;
|
||||||
|
height: 48px !important;
|
||||||
|
border-radius: 50% !important;
|
||||||
|
object-fit: cover !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Comment styling */
|
||||||
|
#isso-thread .isso-comment {
|
||||||
|
border-left: 2px solid #2c3e50 !important;
|
||||||
|
padding: 0.75rem !important;
|
||||||
|
padding-left: 1rem !important;
|
||||||
|
margin-bottom: 1rem !important;
|
||||||
|
margin-top: 1rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-comment-header {
|
||||||
|
color: #a3abba !important;
|
||||||
|
font-size: 0.8rem !important;
|
||||||
|
margin-bottom: 0.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-text-wrapper {
|
||||||
|
color: #ecf0f1 !important;
|
||||||
|
line-height: 1.5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-comment-footer {
|
||||||
|
color: #666 !important;
|
||||||
|
font-size: 0.75rem !important;
|
||||||
|
margin-top: 0.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-comment-footer a {
|
||||||
|
color: #a3abba !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#isso-thread .isso-comment-footer a:hover {
|
||||||
|
color: #62c4ff !important;
|
||||||
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--global-font-size: 15px;
|
--global-font-size: 15px;
|
||||||
--global-line-height: 1.4em;
|
--global-line-height: 1.4em;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
const miniHeader = document.getElementById('mini-header');
|
const miniHeader = document.getElementById('mini-header');
|
||||||
const texts = ['use linux', 'i hate css', 'gpl everything', 'made with love']; // add your random text here
|
const texts = ['use linux', 'soup for my family', 'gpl everything']; // add your random text here
|
||||||
const text = texts[Math.floor(Math.random() * texts.length)];
|
const text = texts[Math.floor(Math.random() * texts.length)];
|
||||||
let charIndex = 0;
|
let charIndex = 0;
|
||||||
|
|
||||||
|
|
@ -7,7 +7,7 @@ function typeText() {
|
||||||
if (charIndex < text.length) {
|
if (charIndex < text.length) {
|
||||||
miniHeader.textContent += text.charAt(charIndex);
|
miniHeader.textContent += text.charAt(charIndex);
|
||||||
charIndex++;
|
charIndex++;
|
||||||
setTimeout(typeText, 50); // adjust the typing speed here
|
setTimeout(typeText, 50);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue