style.css

style.css

@@ -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
+}