signet.sh/style.css

/* h1 → Name
 * h2 → Description
 * h3 → Tags
 * h4 → Date
 * h5 → Url
 */
:root {
    --font-size:22px;
    --font-size-s:calc(var(--font-size) / 1.5);
    --line-height:24px;
    --date-width:10ch;
    --gutter:0px;
    --padding:2px;
    --height:auto;
    --color:black;
    --selection:purple;
    --background:#FFF;
    --background-2:#FEFEFE;
    --background-bottom:black;
}
/* https://github.com/psb1558/Junicode-font/releases */
@font-face {
    font-family: Junicode;
    src: url("Junicode-CondLight.otf") format("opentype");
}
@font-face {
    font-family: Junicode;
    src: url("Junicode-CondLightItalic.otf") format("opentype");
    font-style:italic;
}
* {
    font-family: Junicode, serif;
    font-variant-numeric: lining-nums;
}
h1,h2,h3,h4,h5,p, a {
    text-wrap:wrap;
    word-break: break-word;
    line-height:var(--line-height);
    padding:0;
    margin:0;
    font-weight:normal;
    font-size:var(--font-size);
}
h1,h2,h3,h5 {
    display:inline;
}
nav, section, textarea {
    padding: var(--padding) 0;
}
a{
    width:100%;
    display:block;
    color:var(--color);
    text-decoration:none;
    margin:auto;

}
h5 {
text-decoration:underline }
li:hover a {
color:var(--selection)}



textarea{
    position:fixed;
    top:0;
    left:5px;
    z-index:10;
    width:calc(100vw - 10px);
    font-size:var(--font-size);
    height:calc(var(--line-height) + var(--padding));
}
ol {
    margin:0;
    display:flex;
    gap:var(--gutter);
    flex-direction:column-reverse;

}
body {

}
footer {
    height:100vh;
    margin-top:50vh;
    background:linear-gradient( var(--background), var(--background-bottom));
    width:calc(100% + 20px - 2px);
    margin-left:-10px;
    margin-bottom:-10px;
    overflow:hidden;
}
li {
    font-size:var(--font-size);
    color:rgba(0,0,0,0);
    height:0;
    overflow:hidden
}
li * {opacity:0}
.active:nth-of-type(2n){
    background:var(--background-2);

}
li,textarea, nav {

    box-sizing:border-box;
    border:none;

}
.active * {opacity:1}
.active {
    border-bottom: 1px solid black;
    height:var(--height);
    display:list-item;
    color:var(--color);
    overflow:visible;
}
h1,h2,a {
}
h3{
    opacity:.5
}
section{
    padding-right:var(--date-width);
    height:calc(var(--font-size) + 2px) ;
    overflow:hidden;
}
section:hover{
height:auto
}
section:hover h1, h2, h3, h5{
    display:inline
}
h1 {order: 0;

}
h2 {
font-style:italic}
h5,h2,h3,h4 {
    order:3
}

 h3::before, h2::before, h1::after{content:'\00a0·\00a0';}

h4 {
    width:var(--date-width);
    width:fit-content;
    text-align: right;

    position:absolute;
    right:10px;
}
html{background:white}
nav p {display:inline;
}
nav p:not(:first-of-type)::before{
    content:'· ' 
}
nav p::after{
    font-size:var(--font-size-s);
    display:inline-block;
    transform:translateY(-7px);
    content:'\00a0(' attr(count) ')'
}
nav {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin-top:calc(var(--line-height) + 1px + var(--padding));
    height:calc(var(--line-height) + var(--padding) * 2);
    overflow:hidden;

}
nav:hover {height:auto}
#cc {
    display:absolute;
    position:fixed;
    top:0;
    left:0;
    z-index:10;
    height:100vh;
    width:100vw;
    pointer-events:none;
    background:linear-gradient(0deg, yellow, ivory);
    mix-blend-mode:multiply;

    /* A color correction pass, enable it by removing this line ↓ */
    display:none
}