A text-based bookmark manager rendered in a web page
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

147 lines
2.5 KiB

/* 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
}