tweaks
This commit is contained in:
parent
e7fdf59618
commit
9ccc512533
4 changed files with 86 additions and 8 deletions
|
@ -22,11 +22,15 @@ method generate-head(Str:D $title, BlogMeta:D $meta, $description?) {
|
|||
link :rel<preconnect> :href<https://static.stranger.systems>;
|
||||
link :rel<preconnect> :href<https://fonts.googleapis.com>;
|
||||
link :rel<preconnect> :href<https://fonts.gstatic.com> :crossorigin;
|
||||
# Load fonts, Iosevka Alie for code, and Open Sans for content
|
||||
link :rel<preconnect> :href<https://unpkg.com>;
|
||||
# Load fonts, Iosevka for code, Open Sans for content, and boxicons for
|
||||
# icons
|
||||
link :rel<stylesheet>,
|
||||
:href<https://static.stranger.systems/fonts/IosevkaAlie/IosevkaAile.css>;
|
||||
:href<https://static.stranger.systems/fonts/Iosevka/Iosevka.css>;
|
||||
link :rel<stylesheet>,
|
||||
:href<https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap>;
|
||||
link :rel<stylesheet>,
|
||||
:href<https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css>;
|
||||
# Inline our style sheets
|
||||
style %?RESOURCES<main.css>.slurp;
|
||||
style %?RESOURCES<code.css>.slurp;
|
||||
|
@ -48,11 +52,60 @@ method site-header(BlogMeta:D $meta) {
|
|||
]
|
||||
}
|
||||
|
||||
method post-date(Post:D $post) {
|
||||
my $datetime = $post.posted-at;
|
||||
my $timestamp = sprintf(
|
||||
"%s %02d:%02d %s",
|
||||
$datetime.yyyy-mm-dd,
|
||||
($datetime.hour % 12) || 12,
|
||||
$datetime.minute,
|
||||
$datetime.hour < 12 ?? 'am' !! 'pm'
|
||||
);
|
||||
|
||||
div :class<post-time>, :title("Posted At $timestamp"), [
|
||||
icon 'time';
|
||||
' ';
|
||||
$timestamp
|
||||
]
|
||||
}
|
||||
|
||||
sub mins-to-string($mins) {
|
||||
if $mins < 60 {
|
||||
$mins.Str ~ "m"
|
||||
} else {
|
||||
my $h = $mins div 60;
|
||||
my $m = $mins mod 60;
|
||||
$h.Str ~ "h" ~ $m.Str ~ "m"
|
||||
}
|
||||
}
|
||||
|
||||
method post-read-time(Post:D $post) {
|
||||
my ($slow, $average, $fast) = $post.readtimes;
|
||||
div :class<post-read-time>, :title<Estimated read time at 140/180/220 WPM>, [
|
||||
icon 'timer';
|
||||
' ';
|
||||
mins-to-string $slow;
|
||||
' ';
|
||||
'/';
|
||||
' ';
|
||||
mins-to-string $average;
|
||||
' ';
|
||||
'/';
|
||||
' ';
|
||||
mins-to-string $fast;
|
||||
]
|
||||
}
|
||||
|
||||
method post-header(Post:D $post) {
|
||||
header :class<post-header>, [
|
||||
div :class<post-title>, [
|
||||
h1 $post.title;
|
||||
]
|
||||
];
|
||||
div :class<post-info>, [
|
||||
self.post-date: $post;
|
||||
self.post-read-time: $post;
|
||||
];
|
||||
# TODO: Add tags once we have support for that
|
||||
]
|
||||
}
|
||||
|
||||
|
@ -80,3 +133,7 @@ method generate-post(Post:D $post, BlogMeta:D $meta) {
|
|||
|
||||
"<!doctype html>$html"
|
||||
}
|
||||
|
||||
sub icon($icon) {
|
||||
i(:class("bx bx-$icon"))
|
||||
}
|
||||
|
|
|
@ -58,3 +58,9 @@ method render-html(--> Str:D) {...}
|
|||
method description(--> Str) {
|
||||
Nil
|
||||
}
|
||||
|
||||
#| Estimated readtimes at 140/180/220 wpm
|
||||
method readtimes() {
|
||||
my $word-count = $!source.slurp.words.elems;
|
||||
($word-count / 140, $word-count / 180, $word-count / 220).map(*.ceiling)
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
code {
|
||||
font-family: "Iosevka Aile Web", monospace;
|
||||
font-family: "Iosevka Web", monospace;
|
||||
background-color: light-dark(#fbf3db, #103c48);
|
||||
color: light-dark(#53676d, #adbcbc);
|
||||
min-width: 80ch;
|
||||
|
|
|
@ -14,7 +14,7 @@ body, .post {
|
|||
}
|
||||
|
||||
.site-header {
|
||||
width: 60%;
|
||||
width: 50%;
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
|
@ -53,6 +53,7 @@ body, .post {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
|
@ -65,6 +66,20 @@ body, .post {
|
|||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.post-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
color: light-dark(#909995, #777777);
|
||||
font-size: 0.9rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.post-read-time {
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
.post-body > h2 {
|
||||
text-align: center;
|
||||
color: light-dark(#282828, #dedede);
|
||||
|
@ -79,6 +94,6 @@ body, .post {
|
|||
text-align: center;
|
||||
color: light-dark(#282828, #dedede);
|
||||
}
|
||||
.post-body > p {
|
||||
text-indent: 2ch;
|
||||
}
|
||||
/* .post-body > p { */
|
||||
/* text-indent: 2ch; */
|
||||
/* } */
|
||||
|
|
Loading…
Add table
Reference in a new issue