cool redesign with sidebar
This commit is contained in:
parent
a460eb258c
commit
df49cba938
GPG key ID:
E333EC1335FFCCDB
4 changed files with 63 additions and 22 deletions
|
|
@ -16,7 +16,7 @@ export function PostLink({post}) {
|
|||
</>
|
||||
}
|
||||
|
||||
## About me
|
||||
# About me
|
||||
- [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 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>
|
||||
{props.collections.post.toReversed().map(p =>
|
||||
<li key={p.url}><PostLink post={p} /></li>
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ title: terezi.pyrope.net
|
|||
</head>
|
||||
<body>
|
||||
<h1 id="site-title"><a href="/">T3R3Z1.PYROP3.N3T</a></h1>
|
||||
|
||||
<main>
|
||||
{% if title != "terezi.pyrope.net" %}
|
||||
<h1><a href="{{ url or "" }}">{{ title }}</a></h1>
|
||||
|
|
@ -37,15 +38,16 @@ title: terezi.pyrope.net
|
|||
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
|
||||
|
||||
<footer>
|
||||
{% include "./badges.njk" %}
|
||||
<div class="webring">
|
||||
<div id="webring">
|
||||
<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>
|
||||
</div>
|
||||
<iframe title="splat button" width="110" height="100" src="https://www.myinstants.com/instant/lancer-splat-18107/embed/" frameborder="0" scrolling="no"></iframe>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
{% include "./ansi-sprite.html" %}
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
*/
|
||||
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 {
|
||||
min-height: 60vh;
|
||||
grid-area: body;
|
||||
padding-inline: 2rem;
|
||||
padding-block-start: 1rem;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
@ -38,6 +54,11 @@ main {
|
|||
--accent: #fff831;
|
||||
--accent2: #b94d04;
|
||||
}
|
||||
|
||||
footer {
|
||||
min-height: 0;
|
||||
background-image: url(/res/prospit-extended.webp);
|
||||
}
|
||||
}
|
||||
|
||||
/* we can make code wider :D */
|
||||
|
|
@ -45,7 +66,7 @@ p,
|
|||
h1,
|
||||
h2,
|
||||
video {
|
||||
width: min(650px, 95vw);
|
||||
width: min(650px, 95vw, 100%);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
|
|
@ -88,7 +109,6 @@ pre {
|
|||
|
||||
h1 {
|
||||
font-size: 1.3em;
|
||||
margin-top: 20pt;
|
||||
margin-bottom: 10pt;
|
||||
text-align: center;
|
||||
hyphens: none;
|
||||
|
|
@ -179,7 +199,7 @@ hr {
|
|||
border: none;
|
||||
border-top: 2px solid var(--light);
|
||||
margin-block: 2rem;
|
||||
width: min(600px, 90vw);
|
||||
width: min(100%, 600px, 90vw);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
|
|
@ -187,16 +207,17 @@ li {
|
|||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/*
|
||||
footer {
|
||||
width: min(700px, 95vw);
|
||||
--fv-smcp: "smcp" on;
|
||||
margin-inline: auto;
|
||||
display: flex;
|
||||
margin-bottom: 2rem;
|
||||
gap: 1rem;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
*/
|
||||
|
||||
code,
|
||||
.emoticon,
|
||||
|
|
@ -262,6 +283,7 @@ video {
|
|||
monospace;
|
||||
background: var(--accent2);
|
||||
margin: 0;
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
#site-title > a {
|
||||
|
|
@ -269,13 +291,6 @@ video {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
background-color: var(--accent2);
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*.badges a, marquee a, header a {
|
||||
border: none;
|
||||
background-color: #00000000;
|
||||
|
|
@ -283,13 +298,14 @@ footer {
|
|||
}*/
|
||||
.badges {
|
||||
image-rendering: pixelated;
|
||||
transition: transform 0.1s;
|
||||
overflow-x: clip;
|
||||
font-size: 0pt;
|
||||
padding: 0.5rem;
|
||||
margin-inline: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.badges > * {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
width: 88px;
|
||||
height: 31px;
|
||||
vertical-align: middle;
|
||||
|
|
@ -305,9 +321,32 @@ footer {
|
|||
height: 31px;
|
||||
}
|
||||
|
||||
.webring {
|
||||
#webring {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
background-color: var(--accent2);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.webring > a {
|
||||
#webring > a {
|
||||
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
BIN
site-src/res/prospit-extended.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
Loading…
Reference in a new issue