mbk/twopn
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

cool redesign with sidebar

Browse source
This commit is contained in:
mehbark 2026-01-25 14:55:45 -05:00
parent a460eb258c
commit df49cba938
Signed by: mbk
GPG key ID: E333EC1335FFCCDB
4 changed files with 63 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
site-src/index.mdx
View file

@ -16,7 +16,7 @@ export function PostLink({post}) {
</> </>
} }
## About me # About me
- [I go by mehbark](/awesomebark) on the internet! - [I go by mehbark](/awesomebark) on the internet!
- I did get this domain just for the pun, but alas, I can't claim to be <span title="I think that's maybe Vriska?">the number one Terezi fan</span>. - I did get this domain just for the pun, but alas, I can't claim to be <span title="I think that's maybe Vriska?">the number one Terezi fan</span>.
- I put code on [my Forgejo instance](https://g.pyrope.net) and [my GitHub](https://github.com/mehbark). - I put code on [my Forgejo instance](https://g.pyrope.net) and [my GitHub](https://github.com/mehbark).
@ -32,7 +32,7 @@ If you want longer-form stuff of even less consistent quality, check out [my blo
--- ---
## Latest posts # Latest posts
<ul> <ul>
{props.collections.post.toReversed().map(p => {props.collections.post.toReversed().map(p =>
<li key={p.url}><PostLink post={p} /></li> <li key={p.url}><PostLink post={p} /></li>

6
site-src/layout/page.njk
View file

@ -30,6 +30,7 @@ title: terezi.pyrope.net
</head> </head>
<body> <body>
<h1 id="site-title"><a href="/">T3R3Z1.PYROP3.N3T</a></h1> <h1 id="site-title"><a href="/">T3R3Z1.PYROP3.N3T</a></h1>
<main> <main>
{% if title != "terezi.pyrope.net" %} {% if title != "terezi.pyrope.net" %}
<h1><a href="{{ url or "" }}">{{ title }}</a></h1> <h1><a href="{{ url or "" }}">{{ title }}</a></h1>
@ -37,15 +38,16 @@ title: terezi.pyrope.net
{{ content | safe }} {{ content | safe }}
</main> </main>
<footer> <footer>
{% include "./badges.njk" %} {% include "./badges.njk" %}
<div class="webring"> <div id="webring">
<h3>this web site is part of the m,cai webring</h3> <h3>this web site is part of the m,cai webring</h3>
<a href="https://spax.zone">←</a> <a href="/ring.html">everyone</a> <a href="https://lisanne.gay">→</a> <a href="https://spax.zone">←</a> <a href="/ring.html">everyone</a> <a href="https://lisanne.gay">→</a>
</div> </div>
<iframe title="splat button" width="110" height="100" src="https://www.myinstants.com/instant/lancer-splat-18107/embed/" frameborder="0" scrolling="no"></iframe> <iframe title="splat button" width="110" height="100" src="https://www.myinstants.com/instant/lancer-splat-18107/embed/" frameborder="0" scrolling="no"></iframe>
</footer> </footer>
</body> </body>
{% include "./ansi-sprite.html" %} {% include "./ansi-sprite.html" %}
</html> </html>

75
site-src/res/main.css
View file

@ -24,10 +24,26 @@ body {
/* font-feature-settings: "aalt", "c2sc", "ccmp", "cv13", "cv17", "cv19", "cv20", "cv25", "cv28", "cv37", "cv43", "cv44", "cv46", "cv47", "cv49", "cv55", "cv57", "cv62", "cv68", "cv69", "cv70", "cv71", "cv75", "cv76", "cv77", "cv79", "cv80", "cv81", "cv82", "cv84", "cv90", "cv91", "cv92", "cv98", "frac", "liga", "locl", "smcp", "ss01", "ss04", "ss05", "ss11", "ss12", "subs", "sups", "mark", "mkmk"; /* font-feature-settings: "aalt", "c2sc", "ccmp", "cv13", "cv17", "cv19", "cv20", "cv25", "cv28", "cv37", "cv43", "cv44", "cv46", "cv47", "cv49", "cv55", "cv57", "cv62", "cv68", "cv69", "cv70", "cv71", "cv75", "cv76", "cv77", "cv79", "cv80", "cv81", "cv82", "cv84", "cv90", "cv91", "cv92", "cv98", "frac", "liga", "locl", "smcp", "ss01", "ss04", "ss05", "ss11", "ss12", "subs", "sups", "mark", "mkmk";
*/ */
min-height: 100%; min-height: 100%;
display: grid;
grid-template:
"header"
"body"
"sidebar" / minmax(0, 1fr);
align-items: start;
}
@media (min-width: 1020px) {
body {
grid-template:
"header header"
"body sidebar" / minmax(0, 2fr) minmax(0, 1fr);
}
} }
main { main {
min-height: 60vh; grid-area: body;
padding-inline: 2rem;
padding-block-start: 1rem;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -38,6 +54,11 @@ main {
--accent: #fff831; --accent: #fff831;
--accent2: #b94d04; --accent2: #b94d04;
} }
footer {
min-height: 0;
background-image: url(/res/prospit-extended.webp);
}
} }
/* we can make code wider :D */ /* we can make code wider :D */
@ -45,7 +66,7 @@ p,
h1, h1,
h2, h2,
video { video {
width: min(650px, 95vw); width: min(650px, 95vw, 100%);
margin-inline: auto; margin-inline: auto;
} }
@ -88,7 +109,6 @@ pre {
h1 { h1 {
font-size: 1.3em; font-size: 1.3em;
margin-top: 20pt;
margin-bottom: 10pt; margin-bottom: 10pt;
text-align: center; text-align: center;
hyphens: none; hyphens: none;
@ -179,7 +199,7 @@ hr {
border: none; border: none;
border-top: 2px solid var(--light); border-top: 2px solid var(--light);
margin-block: 2rem; margin-block: 2rem;
width: min(600px, 90vw); width: min(100%, 600px, 90vw);
margin-inline: auto; margin-inline: auto;
} }
@ -187,16 +207,17 @@ li {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
/*
footer { footer {
width: min(700px, 95vw); width: min(700px, 95vw);
--fv-smcp: "smcp" on; --fv-smcp: "smcp" on;
margin-inline: auto; margin-inline: auto;
display: flex; display: flex;
margin-bottom: 2rem; margin-bottom: 2rem;
gap: 1rem;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: center; justify-content: center;
} }
*/
code, code,
.emoticon, .emoticon,
@ -262,6 +283,7 @@ video {
monospace; monospace;
background: var(--accent2); background: var(--accent2);
margin: 0; margin: 0;
grid-area: header;
} }
#site-title > a { #site-title > a {
@ -269,13 +291,6 @@ video {
text-decoration: none; text-decoration: none;
} }
footer {
text-align: center;
background-color: var(--accent2);
width: 100%;
margin: 0;
}
/*.badges a, marquee a, header a { /*.badges a, marquee a, header a {
border: none; border: none;
background-color: #00000000; background-color: #00000000;
@ -283,13 +298,14 @@ footer {
}*/ }*/
.badges { .badges {
image-rendering: pixelated; image-rendering: pixelated;
transition: transform 0.1s;
overflow-x: clip;
font-size: 0pt; font-size: 0pt;
padding: 0.5rem; margin-inline: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
} }
.badges > * { .badges > * {
display: inline-block; display: inline-flex;
width: 88px; width: 88px;
height: 31px; height: 31px;
vertical-align: middle; vertical-align: middle;
@ -305,9 +321,32 @@ footer {
height: 31px; height: 31px;
} }
.webring { #webring {
margin: 0 auto; margin: 0 auto;
text-align: center;
background-color: var(--accent2);
padding: 0.5rem;
} }
.webring > a { #webring > a {
font-size: 2rem; font-size: 2rem;
} }
footer {
grid-area: sidebar;
list-style: none;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
background-position: bottom left;
background-repeat: repeat-x;
image-rendering: pixelated;
margin-block-start: 1rem;
}
footer > * {
/* padding: 0.5rem; */
min-width: 0;
margin: 0;
}

BIN
site-src/res/prospit-extended.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 133 KiB