Skip to content

Commit fa244dc

Browse files
nntrnnntrn
committed
Add accent
1 parent 4b5fb0a commit fa244dc

File tree

10 files changed

+190
-131
lines changed

10 files changed

+190
-131
lines changed

‎.gitattributes

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
* text=auto
2+
3+
*.css linguist-detectable=false
4+
*.html linguist-detectable=false
5+
*.js linguist-detectable=false

‎404.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
title: 404
3+
permalink: /404.html
4+
layout: default
5+
---
6+
<style>
7+
footer p {text-align:center;border:0}
8+
main{justify-content:center}
9+
#page-404 {text-align:center;margin:0 auto;padding:2rem 0; }
10+
#page-404 h1 {
11+
font-size: 10rem;
12+
font-weight: 900;
13+
letter-spacing: -.025em;
14+
line-height: .7;
15+
}
16+
#page-404 strong{text-transform: uppercase;font-family:sans-serif}
17+
</style>
18+
<div id="page-404">
19+
<h1>404</h1>
20+
<p>ᘛᐡᐤᐡᘚ</p>
21+
<p><strong class="up">Page not found</strong></p>
22+
<p>The requested page could not be found.</p>
23+
</div>

‎_includes/postlist.html

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
{%- assign pagetag = page.tags %}
22
{%- assign books = site.data.books | where: 'tags', pagetag |sort: 'title' %}
3-
{% assign tagtotal = 0 | times: 1.0 %}
4-
{%- for book in books %}{% assign tagtotal = tagtotal | plus: book.count %}{%- endfor %}
5-
<aside>
3+
<aside class="postlist">
64
<h4>Other posts in <a href="{{pagetag|relative_url}}">{{pagetag|upcase}}</a></h4>
7-
<ul style="--total: {{tagtotal}}">
5+
<ul>
86
{%- for book in books %}
97
<li>
10-
{%- if book.slug == page.slug -%}<u>{{book.title}}</u>{%- else -%}
11-
<a title="{{book.count}} bookmark{%- if book.count > 1 -%}s{%- endif-%}" href="{{book.permalink|relative_url}}">{{book.title}}</a>
8+
{%- if book.slug == page.slug -%}
9+
<u>{{book.title}}</u>
10+
{%- else -%}
11+
<a title="{{book.count}} bookmark{%- if book.count > 1 -%}s{%- endif-%}" href="{{book.permalink|relative_url}}">{{book.title}}</a>
1212
{%- endif -%}
13-
{% assign progress = book.count | divided_by: tagtotal %}
14-
<!-- <span data-progress="{{progress |times: 100.00|round: 2 }}" style="--progress: {{progress |times: 360|round: 2 }}deg" class="progress">&nbsp;</span> -->
1513
</li>
1614
{%- endfor %}
1715
</ul>

‎_includes/script.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
function highlightAnnotation() {
2-
Array.from(document.querySelectorAll('.mark')).forEach(e => e.classList.remove('mark'))
32
if (Number(location.hash.substr(1,))) {
4-
document.querySelector(`.bookmark a[href="${location.hash}"]`).parentElement.parentElement.classList.add('mark')
3+
Array.from(document.querySelectorAll('.mark')).forEach(e => e.classList.remove('mark'))
4+
document.querySelector(`[id="${location.hash.slice(1,)}"]`).classList.add('mark')
55
}
66
}
77
highlightAnnotation()

‎_includes/style.css

Lines changed: 82 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,124 @@
1-
:root{--px-size:2.5%;--progress-size:13px}
1+
:root {
2+
--px-size: 2.5%;
3+
--sans-serif: Helvetica Neue, Helvetica, Arial, sans-serif;
4+
--bull-margin: 4px;
5+
--bull-symbol: "•";
6+
--underline-rgb: 53, 224, 71;
7+
--underline-color: rgb(var(--underline-rgb));
8+
--meta-rgb: 134, 25, 143;
9+
--body-rgb: 34, 34, 34;
10+
--link-rgb: 51, 102, 203;
11+
--meta-color: rgb(var(--meta-rgb));
12+
--body-color: rgb(var(--body-rgb));
13+
--h: 126;
14+
--s: 73.4%;
15+
--l: 54%;
16+
--hsl: var(--h), var(--s), var(--l);
17+
--accent-color: hsl(var(--h), var(--s), var(--l));
18+
--gray: hsl(0, 0%, var(--l, 80%))
19+
}
20+
.hidden,[hidden]{display:none}
221
*{box-sizing:border-box}
322
html{font-size:13px}
4-
.h100,body,html,main{height:100%}
5-
body{font-variant:proportional-width;display:flex;flex-direction:column;gap:.25rem;scrollbar-width:thin;margin:0 0;padding:0 0;margin:auto;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:inherit;line-height:1.25;counter-reset:reversed(section);text-rendering:optimizeLegibility;overflow-y:hidden}
6-
br{line-height:0!important;font-size:0!important}
7-
date{margin-right:.5rem;text-transform:uppercase}
8-
header{padding:.85rem 0;position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #ccc}
23+
body,html,main{height:100%}
24+
body{font-variant:proportional-width;scrollbar-width:thin;padding:0 0;margin:auto;font-family:var(--sans-serif);font-size:inherit;line-height:1.3;text-rendering:optimizeLegibility;font-variant:proportional-width}
25+
.container{display:flex;height:100vh;overflow-y:scroll;gap:0 1rem}
26+
header{padding:.85rem 0;position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #ccc;padding:1rem;line-height:1;flex:1;gap:1rem;display:flex;flex-direction:column}
927
footer{margin-top:1rem}
10-
header h1{padding-left:var(--px-size);padding-right:var(--px-size)}
11-
footer p{border-top:1px solid #aaa;padding-top:1rem;text-align:right}
12-
main{gap:2rem;position:relative;padding-left:var(--px-size);padding-right:var(--px-size);width:100%;scrollbar-width:thin;overflow-y:scroll;margin-bottom:0;display:block;padding:calc(1rem/2) var(--px-size);height:100%;display:flex;flex-direction:column;justify-content:space-between}
13-
a{color:#36c}
28+
footer p{border-top:1px solid #aaa;padding-top:1rem/*! text-align:right */}
29+
main{gap:1rem;position:relative;padding-left:var(--px-size);padding-right:var(--px-size);width:100%;scrollbar-width:thin;overflow-y:scroll;margin-bottom:0;display:block;padding:calc(1rem/2) var(--px-size);height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:1rem}
30+
a,u{text-underline-offset:1px;text-decoration-skip-ink:all;text-decoration-thickness:2px;text-decoration-skip-ink:none}
31+
u{text-decoration-color:hsl(var(--h),var(--s),var(--l));text-decoration-skip-ink:all}
1432
a:empty{text-decoration:none;color:inherit}
1533
a:empty:after{content:attr(href)}
16-
a:hover{text-decoration-color:#36c}
17-
a{text-decoration:1.25px underline;text-decoration-skip-ink:none;text-underline-offset:1px;text-rendering:geometricprecision;color:#36c;text-decoration-color:#3366cc61}
18-
aside .container{border-right:1px dotted #222;min-height:75vh}
19-
aside{flex:1;min-width:25vw;position:relative}
20-
aside a,aside u{text-underline-offset:1.25px;text-decoration-skip-ink:none;text-decoration-thickness:1.2px}
21-
aside a:hover{color:#222;text-decoration-color:#aaa}
22-
aside h4 a{font-family:sans-serif;font-size:.9em}
23-
aside strong{font-weight:700;display:block;line-height:1.1}
24-
aside ul{display:inline-flex;gap:.25rem;position:relative;position:sticky;top:0}
34+
a:hover{text-decoration-color:currentColor}
35+
a{text-decoration:underline;color:inherit;text-decoration-color:hsl(var(--h),var(--s),var(--l));text-decoration-thickness:2px;font-weight:600}
2536
h1,h2,h4{margin:0 0}
2637
h3{margin:.5rem 0}
27-
h1 a{color:#222}
38+
h1 a{color:var(--body-color)}
2839
h1,h2,h3{font-family:times}
40+
h4 a{color:inherit;text-decoration-color:#ddd;text-decoration-thickness:2px}
2941
h3 a{text-transform:capitalize;text-decoration:none;color:initial;font-size:1.3rem}
3042
hr{border:0;border-bottom:1px solid #aaa;margin:1rem 0}
3143
label span:empty{display:none}
3244
ul.list{padding:0 0rem;list-style:none;padding-right:1rem}
33-
ol,ul{display:flex;flex-direction:column;gap:.5rem;padding:0 2rem;padding-right:1rem}
45+
ul{display:flex;flex-direction:column;gap:.75rem;padding:0 2rem;padding-right:1rem}
3446
ul>li{padding:0 .4rem}
3547
ol,ul{padding:0 1.35rem}
3648
ol{padding-left:0}
3749
ol li{list-style:none;padding-left:0}
50+
p{margin:.5rem 0}
3851
q:after,q:before{content:""}
3952
q{white-space:pre-wrap}
40-
section{flex:10}
4153
small a{color:inherit;text-decoration:inherit}
4254
small a:hover{opacity:.75}
43-
table{line-height:1.3;border-collapse:collapse}
55+
table{line-height:1.3;border-collapse:collapse;max-width:80%}
4456
tr>*{padding-bottom:.5rem;padding-top:.5rem}
4557
td,th{vertical-align:top}
4658
td label{font-size:.9em}
4759
th date{white-space:pre;font-weight:400;color:#8e8e8e}
48-
th{border-right:1px dotted #222}
49-
th[data-level="1"]{text-align:right;border:0;font-size:1.4em;white-space:pre;transition:all .6s linear;max-width:min-content}
60+
th{border-right:1px dotted var(--body-color)}
61+
th[data-level="1"]{border:0;/*! font-size:1.4em; */white-space:pre;transition:all .6s linear;max-width:min-content;text-align:right}
5062
th[data-level="2"]{text-align:right}
5163
td[colspan]{padding-left:11%}
64+
td[colspan] h2{padding-top:1.5rem}
5265
tr{line-height:1.2}
53-
.right{text-align:right}
54-
mark{background:0 0;color:inherit}
55-
mark strong{color:#fff;background:#222;padding:0 2px}
56-
mark strong{font-size:.9rem}
57-
[colspan] h2{padding-top:1.5rem}
58-
.bookmark .meta{font-size:.9rem;color:#d63864;text-transform:uppercase;font-variant:proportional-nums}
59-
.bookmark a{text-decoration:none}
60-
.bookmark{padding:0 .5rem}
66+
tr .padded:nth-child(1){padding-right:.75rem}
67+
tr .padded:nth-child(2){padding-left:.75rem}
6168
.bold{font-weight:700}
62-
.normal{font-weight:400}
63-
.small{font-size:.8rem}
69+
.small{font-size:var(--small,.9rem)}
6470
.col{flex-direction:column}
65-
.content{flex:3}
66-
.content a:hover{text-decoration:underline}
67-
.content a{text-decoration:none}
68-
.content h2{line-height:1}
69-
.content li>a:hover{color:#222}
70-
.content li>a{transition:all 0s;color:#aaa;font-family:sans-serif;text-transform:uppercase;font-variant:proportional-nums}
71-
.content p time{font-weight:700}
72-
.content span{white-space:pre-wrap}
73-
.content ul{gap:1rem}
7471
.flex{display:flex}
75-
.fw-500{font-weight:400!important}
72+
.darker{color:hsl(var(--h),50%,40%)}
73+
.bg{background:var(--bg-color),var(--bg-opacity)}
74+
.bgh:hover{background:rgba(var(--underline-rgb),.45)}
75+
.bull>:after{content:var(--bull-symbol);margin:0 var(--bull-margin)}
76+
.bull>:last-child:after{content:""}
77+
.fw4,.normal{font-weight:400!important}
78+
.fw5{font-weight:500!important}
79+
.u0{text-decoration:none!important}
7680
.header a{color:inherit;text-decoration:none;text-transform:capitalize}
7781
.header>*{margin:0 0;padding:0 0}
7882
.gap{gap:var(--gap,.25rem)}
83+
.lh-1{line-height:1.1}
84+
.lh-2{line-height:1.2}
85+
.lh-3{line-height:1.3}
7986
.list>li{padding:0 0}
8087
.mark q{background:#fff0b1;line-height:1.4}
81-
.meta a:hover{text-decoration:none;color:#222}
82-
.meta a{color:inherit;font-weight:700}
83-
.meta{margin-top:.25rem}
84-
.muted{color:#aaa}
85-
.padded{padding-left:.75rem;padding-right:.75rem}
88+
.meta{display:block;font-size:.9em;text-transform:uppercase;color:hsl(var(--h),var(--s),20%)}
89+
.meta a{text-decoration:none;font-weight:700;color:inherit}
90+
.meta a:hover{color:var(--body-color)}
91+
.muted{color:var(--gray)}
92+
.postlist{flex:1;min-width:25vw;position:relative}
93+
.postlist h4 a{font-family:sans-serif;font-size:.9em}
94+
.postlist ul a{text-decoration-color:#ccc;font-weight:400;text-decoration-thickness:2px}
95+
.postlist ul a:hover{text-decoration-color:currentColor}
96+
.postlist strong{font-weight:700;display:block;line-height:1.1}
97+
.postlist u{color:var(--body-color);text-decoration-color:var(--accent-color);text-decoration-skip-ink:all;font-weight:500}
98+
.postlist ul{display:inline-flex;gap:.4rem;position:relative;position:sticky;top:0;line-height:1.3}
99+
.chapters{display:flex;flex-direction:column;gap:4rem;margin:2.5rem 0;margin-bottom:1rem}
100+
.chapters ul{position:relative;margin:0 0}
101+
.chapters ul[data-label]:before{/*! text-transform:uppercase; */font-size:1.3rem;content:attr(data-label);margin:0 0;padding:0 0;position:absolute;left:0;margin-top:-2.5rem;font-family:times;font-weight:700}
86102
.chapters{flex:1}
87-
.toc{max-height:min(300px,40vh);position:sticky;top:0;list-style:none;padding:0 0;margin:0 0;z-index:1;width:20px;max-width:20px}
88-
.toc div{padding:0 0;font-size:.9em;position:relative}
89-
.toc a:hover:before{content:attr(title);position:absolute;right:20px;background:#222;padding:4px 4px;color:#fff;z-index:1;font-size:.9em}
90-
.toc a{color:#222;white-space:pre;text-align:center;padding:0 4px;line-height:1}
91-
.toc a:hover{text-decoration:none;font-weight:700}
92-
.toc a:before{font-weight:500}
93-
.site-title a{text-decoration-color:rgba(0,0,0,.1);text-underline-offset:2px;text-decoration-thickness:1.75px;font-family:times;font-weight:700;font-size:.9em;text-decoration-skip-ink:all}
103+
.right{text-align:right}
104+
.subtitle{font-family:var(--sans-serif);font-weight:400}
105+
.toc{max-height:min(300px,40vh);position:sticky;top:0;font-size:.9rem;z-index:1;width:20px;max-width:20px}
106+
.toc a{display:block;text-decoration:none;color:var(--body-color);font-weight:400;white-space:pre;padding:0 4px;line-height:1}
107+
.toc a:hover{text-decoration:none;color:var(--accent-color)}
108+
.toc a:hover:before{content:attr(title);position:absolute;right:1.5rem;background:var(--accent-color);padding:2px 4px;color:var(--body-color);z-index:1;font-size:.8rem}
109+
.site-title a{text-underline-offset:2px;text-decoration-thickness:3px;font-family:times;font-weight:700;font-size:.9em;text-decoration-skip-ink:all;text-decoration-color:currentColor}
94110
[id]>a:hover:after{content:"#";color:#aaa}
111+
@media (max-width:600px){
112+
.container{flex-direction:column}
113+
.sm-col{flex-direction:column}
114+
}
95115
@media (max-width:750px){
96-
aside .container{min-height:20vh}
97-
main>.flex{display:flex;flex-direction:column-reverse}
116+
.md-colr,main>.flex{display:flex;flex-direction:column-reverse}
98117
:root{--px-size:1rem}
99-
aside ul{margin:1rem .5rem}
118+
.postlist ul{margin:1rem .5rem}
100119
ol{padding:0 2.5rem}
101120
ol li{list-style:unset;padding-left:unset}
121+
}
122+
@media (min-width:600px){
123+
.show-md{display:unset!important}
102124
}

‎_layouts/book.html

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,37 +5,38 @@
55
{%- assign pagecreated = page.created | date_to_string: "ordinal", "US" %}
66
{%- assign pagemodified = page.modified | date_to_string: "ordinal", "US" -%}
77
{%- assign annotations = site.data.activity | where: 'assetid', page.assetid | sort: "cfi" %}
8-
{%- assign total = annotations.size %}
98
{%- assign chapters = annotations | group_by: "chapter" %}
10-
<div class="flex gap" style="--gap:2rem">
9+
<div class="flex gap md-colr" style="--gap:1rem">
1110
{%- include postlist.html %}
12-
<article class="content" style="--total: {{total}}">
11+
<article class="content">
1312
<h2>{{page.title}}</h2>
1413
<h3>{{page.author}}</h3>
1514
<p>
16-
First annotation on <time>{{pagecreated}}</time>.{%- if pagemodified != pagecreated -%}&nbsp;Last on <time>{{pagemodified}}</time>.{%- endif %}
15+
First annotation on <time>{{pagecreated}}</time>.{%- if pagemodified != pagecreated -%}&nbsp;Last on <time>{{pagemodified}}</time>.{%- endif %}
1716
</p>
1817
<p>{{annotations.size}} bookmark{%- if annotations.size > 1 -%}s{%- endif -%}</p>
1918
<hr>
2019
<section class="flex">
2120
<div class="chapters">
2221
{%- for chapter in chapters %}
2322
{%- assign sortedchapteritems = chapter.items | sort: "cfi" %}
24-
<h3 id="{{chapter.name | slugify: 'latin'}}">{{chapter.name | replace: "#","" |strip}}</h3>
25-
<ul>
23+
<ul id="{{chapter.name | slugify: 'latin'}}" data-label="{{chapter.name|replace:'#',''|strip}}">
2624
{%- for annotation in sortedchapteritems %}
2725
<li id="{{annotation.id}}" class="bookmark">
2826
<q>{{annotation.text}}</q>
29-
<br><span class="meta"><a href="#{{annotation.id}}">#{{annotation.id}}</a>&nbsp;&bull;&nbsp;<time>{{annotation.created|date: '%b %-d %Y %-I:%M%p'}}</time></span>
27+
<span class="meta bull">
28+
<span><a class="bgh" href="#{{annotation.id}}">#{{annotation.id}}</a></span>
29+
<time>{{annotation.created|date: '%b %-d %Y %-I:%M%p'}}</time>
30+
</span>
3031
</li>
3132
{%- endfor %}
3233
</ul>
3334
{%- endfor %}
3435
</div>
3536
<div class="toc">
36-
{%- for chapter in chapters %}
37-
<div style="--length: {{chapter.items|size}}"><a title="{{chapter.name|replace: '#',''|strip}}" href="#{{chapter.name | slugify: 'latin'}}">&mdash;</a></div>
38-
{%- endfor %}
37+
{%- for chapter in chapters %}
38+
<a title="{{chapter.name|replace: '#',''|strip}}" href="#{{chapter.name | slugify: 'latin'}}">&mdash;</a>
39+
{%- endfor %}
3940
</div>
4041
</section>
4142
</article>

‎_layouts/default.html

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,18 @@
2828
</style>
2929
</head>
3030
<body>
31-
<header>
32-
<h1 class="site-title"><a href="{{ '/' | relative_url }}">{{site.title}}</a></h1>
33-
</header>
34-
<main>
35-
{{ content }}
36-
<footer>
37-
<p>Created by <a href="https://github.com/{{site.repository}}">@{{site.github_username}}</a></p>
38-
</footer>
39-
</main>
31+
<div class="container">
32+
<header>
33+
<h1 class="site-title"><a href="{{ '/' | relative_url }}">{{site.title}}</a></h1>
34+
<div class="hidden show-md">Created by <a href="https://github.com/{{site.repository}}">@{{site.github_username}}</a></div>
35+
</header>
36+
<main>
37+
{{ content }}
38+
<footer>
39+
<p>Created by <a href="https://github.com/{{site.repository}}">@{{site.github_username}}</a></p>
40+
</footer>
41+
</main>
42+
</div>
4043
{%- if page.type == "book" %}
4144
<script>
4245
{% include script.js %}

‎_layouts/genre.html

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,17 @@
77
{%- assign bookpages = site.data.books | where: 'tags', pagetag -%}
88
<section>
99
<h2>#{{pagetag}}</h2>
10-
<ul style="width:90%">
11-
{% for book in bookpages -%}
12-
{% assign bookurl = book.tags | join: "/" | join: book.slug %}
13-
<li><a href="{{ book.slug }}">{{book.title}}</a> by {{book.author}}</li>
10+
<ul style="--gap:.25rem;width:90%">
11+
{%- assign sortedbook = bookpages | sort: 'title' %}
12+
{%- for book in sortedbook %}
13+
{%- assign bookurl = book.tags | join: "/" | join: book.slug %}
14+
<li class="lh-2">
15+
<span><a href="{{ book.slug }}">{{book.title}}</a> by {{book.author}}</span><br>
16+
<label class="bull small">
17+
<span>{{book.count}} bookmarks</span>
18+
<span>last read on <time>{{book.modified|date: '%b %Y'}}</time></span>
19+
</label>
20+
</li>
1421
{% endfor %}
1522
</ul>
1623
</section>

‎index.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: what i'm reading
3+
layout: default
4+
---
5+
{% assign books_by_date = site.data.books|sort:'created'|reverse|group_by_exp:"item","item.created|date: '%b %Y'" -%}
6+
<section class="books">
7+
<table style="--gap:.25rem;--small:.85rem">
8+
{%- for books in books_by_date %}
9+
{%- assign list = books.items|sort:'created'|reverse %}
10+
<tr class="header">
11+
<th data-level="1"><h2 id="{{books.name|slugify:'latin'}}">{{books.name|replace:"-"," "|capitalize}}</h2></th>
12+
<td></td>
13+
</tr>
14+
{%- for book in list %}
15+
{%- assign statcount = site.data.stats.bookmarks_per_month[books.name] %}
16+
<tr data-genre="{{book.tags}}" data-created="{{book.created}}" data-author="{{book.author}}" data-count="{{book.count}}">
17+
<th data-level="2" class="padded">
18+
<time>{{book.created|date: '%F'}}</time><br><a class="small bgh fw4 u0" href="{{book.tags}}">{{book.tags}}</a>
19+
</th>
20+
<td class="padded">
21+
<a href="./{{book.tags}}/{{book.slug}}.html"><strong>{{book.title}}</strong></a><br><label>{{book.author}} &bull; {{book.count}}</label>
22+
</td>
23+
</tr>
24+
{%- endfor %}
25+
<tr>
26+
<td></td>
27+
<td>
28+
<div class="flex muted gap wrap small" style="--gap:0 .5rem">
29+
<span>started <strong>{{list.size}}</strong>&nbsp;book{% if list.size > 1 %}s{%- endif -%}</span>
30+
<span>&sol;</span>
31+
<span>created <strong>{{statcount}}</strong>&nbsp;bookmark{% if statcount > 1 %}s{%- endif -%}</span>
32+
</div>
33+
</td>
34+
</tr>
35+
<tr><td colspan="2"><br></td></tr>
36+
{%- endfor -%}
37+
</table>
38+
</section>

0 commit comments

Comments
 (0)