1 changed files with 147 additions and 0 deletions
@ -0,0 +1,147 @@ |
|||
/* 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; |
|||
--gutter:0px; |
|||
--height:auto; |
|||
--color:black; |
|||
--selection:purple; |
|||
--background:#FFF; |
|||
--background-2:#FEFEFE; |
|||
} |
|||
@font-face { |
|||
font-family: Junicode; |
|||
/* https://github.com/psb1558/Junicode-font/releases */ |
|||
src: url("Junicode-CondLight.otf") format("opentype"); |
|||
} |
|||
* { |
|||
font-family: Junicode; |
|||
} |
|||
h1,h2,h3,h4,h5,p, a { |
|||
width:fit-content; |
|||
line-height:var(--line-height); |
|||
padding:0; |
|||
margin:0; |
|||
font-weight:normal; |
|||
font-size:var(--font-size); |
|||
} |
|||
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:var(--line-height); |
|||
} |
|||
ol { |
|||
margin:0; |
|||
display:flex; |
|||
gap:var(--gutter); |
|||
flex-direction:column-reverse; |
|||
margin-bottom:50vh; |
|||
padding-left: 34px; |
|||
|
|||
} |
|||
li { |
|||
font-size:var(--font-size); |
|||
color:rgba(0,0,0,0); |
|||
height:0; |
|||
overflow:hidden |
|||
|
|||
} |
|||
.active:nth-of-type(2n){ |
|||
background:var(--background-2); |
|||
|
|||
} |
|||
li,textarea, nav { |
|||
|
|||
box-sizing:border-box; |
|||
border:none; |
|||
|
|||
} |
|||
.active { |
|||
border-bottom: 1px solid black; |
|||
height:var(--height); |
|||
display:list-item; |
|||
color:var(--color); |
|||
overflow:visible; |
|||
} |
|||
h1,h2,a { |
|||
overflow-y:scroll; |
|||
} |
|||
h3{ |
|||
opacity:.5 |
|||
} |
|||
section{ |
|||
flex-wrap:wrap; |
|||
display:flex; |
|||
} |
|||
h1 {order: 0; |
|||
} |
|||
h2 { |
|||
font-style:italic} |
|||
h5,h2,h3,h4 { |
|||
order:3 |
|||
} |
|||
h3::before, h2::before, h1::after{content:'\00a0·\00a0'} |
|||
h4 { |
|||
margin-left:auto |
|||
} |
|||
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); |
|||
height:var(--line-height); |
|||
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 |
|||
} |
Loading…
Reference in new issue