WIP: homepage

This commit is contained in:
a 2022-07-12 01:28:37 -05:00
parent ccdc895288
commit 8eaa781146
13 changed files with 248 additions and 158 deletions

View file

@ -8,3 +8,39 @@ window.addEventListener('resize', () => {
let vh = window.innerHeight * 0.01;
root.style.setProperty('--vh', `${vh}px`);
});
function timeDifference(current, previous) {
var msPerMinute = 60 * 1000;
var msPerHour = msPerMinute * 60;
var msPerDay = msPerHour * 24;
var msPerMonth = msPerDay * 30;
var msPerYear = msPerDay * 365;
var elapsed = current - previous;
if (elapsed < msPerMinute) {
return Math.round(elapsed/1000) + ' seconds ago';
}
else if (elapsed < msPerHour) {
return Math.round(elapsed/msPerMinute) + ' minutes ago';
}
else if (elapsed < msPerDay ) {
return Math.round(elapsed/msPerHour ) + ' hours ago';
}
else if (elapsed < msPerMonth) {
return 'approximately ' + Math.round(elapsed/msPerDay) + ' days ago';
}
else if (elapsed < msPerYear) {
return 'approximately ' + Math.round(elapsed/msPerMonth) + ' months ago';
}
else {
return 'approximately ' + Math.round(elapsed/msPerYear ) + ' years ago';
}
}

View file

@ -11,9 +11,4 @@ $header-height: 4em;
--primary-accent: rgb(0,96,255);
--primary-accent-transparent: rgba(0,96,255,0.25);
--primary-accent-text: #fff;
--ui-background: #fff;
--ui-background-track: #aaa;
--ui-text: #212121;
--ui-text-muted: #777;
--ui-text-bold: #000;
}

View file

@ -1,118 +1,72 @@
#index {
.title {
font-size: 1.5em;
font-weight: 700;
line-height: 1.2;
&:before {
font-size: 3em;
font-weight: 700;
color: #ddd;
position: absolute;
top: -0.5em;
left: -0.3em;
z-index: -1;
}
position: relative;
margin-bottom: 2em;
}
.subtitle {
font-size: 1.5em;
line-height: 1.2;
margin-bottom: 0.5em;
margin-top: 2em;
}
.quotes {
padding: 2rem;
font-size: 1.25rem;
display: flex;
flex-flow: column;
justify-content: space-between;
line-height: 1.5;
gap: 2em;
font-family: monospace;
.heading {
font-weight: 700;
font-family: initial;
}
}
.quotes-container {
color: #555;
display: flex;
flex-flow: column;
justify-content: space-around;
flex-grow: 1;
gap: 3rem;
}
#summary .container {
.h-feed {
display: grid;
grid-template-columns: 1fr;
@media (min-width: 40rem) {
grid-template-columns: 18rem 1fr;
}
}
#birdsounds {
background: black;
color: white;
text-align: center;
.container {
display: flex;
flex-flow: column;
align-items: center;
}
.photo {
max-height: 100vh;
height: 100%;
max-width: 100%;
object-fit: contain;
object-position: center bottom;
}
.info {
display: flex;
flex-flow: column;
align-items: center;
}
.logo {
margin: 2rem 0;
}
@media (min-width: 40rem) {
.photo {
height: 20rem;
}
.container {
flex-flow: row;
justify-content: space-between;
}
.info {
flex-grow: 1;
}
}
a {
color: white;
position: relative;
&:after {
content: '';
position: absolute;
right: -1em;
color: white;
}
}
}
#updates {
line-height: 1.5;
font-size: 1.25rem;
overflow: auto;
.heading {
font-size: 1.5em;
font-weight: 700;
margin-bottom: 1em;
}
p + p {
margin: 1em 0;
}
hr {
margin: 0;
}
}
.h-card {
place-self: center;
max-width: 60ch;
width: 100%;
}
.h-entry {
margin: 1em 0;
padding: 1em 0;
header {
display: flex;
align-items: center;
gap: 1em;
margin-bottom: 0.5em;
.icon {
padding: 0.5rem;
display: inline-flex;
background: black;
border-radius: 100em;
svg {
width: 20px;
height: 20px;
fill: white;
}
}
}
}
.reply {
line-height: 1.5;
.p-name {
margin-bottom: 1em;
display: flex;
align-items: center;
gap: 0.5em;
.u-url {
}
}
.p-summary {
font-style: italic;
}
.meta {
margin-top: 1em;
}
}
.note {
line-height: 1.5;
.e-content {
font-size: 1.2em;
p {
max-width: 55ch;
margin: 1em 0;
}
}
.meta {
margin-top: 1em;
}
}
}

View file

@ -1,4 +1,47 @@
#index .h-card {
background: #ddd;
.h-card {
display: grid;
grid-template-areas:
"header"
"name"
"note";
.p-note, .u-email, .u-impp, .p-gender-identity, .u-url, p.p-name {
display: none;
}
header {
background-image: url('/header.jpg');
background-size: cover;
background-position: center;
aspect-ratio: 2;
display: grid;
place-items: center;
}
section {
padding: 1em;
}
.e-note {
grid-area: note;
p {
margin: 1em 0;
max-width: 55ch;
}
}
.u-photo {
width: 100px;
height: 100px;
background: rgba(0,0,0,0.5);
padding: 2px;
border-radius: 100em;
box-sizing: border-box;
}
.u-author {
display: unset;
font-weight: 700;
text-decoration: none;
color: inherit;
}
span.p-nickname {
color: #555;
&:before {content: '('}
&:after {content: ')'}
}
}

View file

@ -1,5 +1,6 @@
+++
type = "reply"
layout = "comment"
title = "in response to \"You're not wrong -- smartphones aren't as exciting as they used to be\" from Android Police"
summary = "Honestly, phones really aren't even getting better anymore — they're getting worse since 2013. And the factors are mostly not technological — the technology continues to improve, of course. It's the corporate decisions that go into the making of the phones, which are based not on what makes a “better” phone, but on what they think will be most profitable. I want to call out [...]"
date = 2018-08-01

View file

@ -0,0 +1,7 @@
+++
type = "note"
tags = []
date = "2022-07-03T19:50:00Z"
attachment = []
+++
lookin for quotes about me to put on my website, fire away

Binary file not shown.

After

Width:  |  Height:  |  Size: 755 KiB

View file

@ -0,0 +1,7 @@
+++
type = "note"
tags = []
date = "2022-07-04T05:15:00Z"
attachment = ["image.png"]
+++
is this anything

View file

@ -1,7 +0,0 @@
+++
type = "note"
tags = []
+++
kinda need an account with somewhere between 2 and 2000 followers
custom audiences when

View file

@ -0,0 +1,13 @@
{{ define "main" }}
<main id="{{.File.BaseFileName | urlize}}" class="comment section">
<div class="container">
<article class="h-entry">
<header>
<h1 class="p-name">{{.Title}}</h1>
<p>In reply to: <a href="{{.Params.inReplyTo}}" class="u-in-reply-to">{{.Params.inReplyTo}}</a></p>
<p>Original: <a href="{{.Params.original}}" class="u-syndication">{{.Params.original}}</a></p>
</header>
</article>
</div>
</main>
{{ end }}

View file

@ -1,30 +1,64 @@
{{ define "head" }}
{{ end }}
{{ define "main" }}
<main id="index">
<main id="index" class="section">
<div class="container">
{{partial "h-card.html" .}}
<section class="h-feed">
<h2>Latest content</h2>
{{partial "h-card.html" .}}
<div style="max-width: 60ch; place-self: center;">
<h1 class="p-name heading">Latest activity</h1>
{{$paginator := .Paginate (.Site.RegularPages) 20}}
{{range $paginator.Pages}}
{{if eq .Params.type "note" }}
<article class="h-entry note">
<header>
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M18 3a1 1 0 00-1.447-.894L8.763 6H5a3 3 0 000 6h.28l1.771 5.316A1 1 0 008 18h1a1 1 0 001-1v-4.382l6.553 3.276A1 1 0 0018 15V3z"
clip-rule="evenodd" />
</svg>
</div>
<span class="description">posted a note</span>
</header>
<div class="e-content">{{.Content}}</div>
{{$permalink := .Page.Permalink}}
{{ range .Params.attachment }}
{{if (strings.HasSuffix . "png") | or (strings.HasSuffix . "jpg") | or (strings.HasSuffix . "gif")}}
<a href='{{printf "%s/%s" $permalink .}}' style="display: block; width: 100px; height: 100px;">
<img src='{{printf "%s/%s" $permalink .}}' alt="attachment" style="object-fit: contain; width: 100%; height: 100%; background: rgba(0,0,0,0.25)">
</a>
{{end}}
{{end}}
<p class="meta"><time class="dt-published" datetime="{{.Date}}">{{.Date.Format "January 2, 2006 3:04:05"}}</time></p>
</article>
{{end}}
{{if eq .Params.type "reply"}}
<article class="h-entry reply">
<a href="{{.Permalink}}" class="p-name">{{.Title}}</a>
<a href="{{.Params.inReplyTo}}" class="u-in-reply-to"></a>
<a href="{{.Params.original}}" class="u-syndication"></a>
<header>
<div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg></div>
<span class="description">posted a comment</span>
</header>
<h2 class="p-name"><a href="{{.Permalink}}" class="u-url">{{.Title}}</a></h2>
<p class="p-summary">{{.Summary}}</p>
<p class="meta">Originally published <time class="dt-published" datetime="{{.Date}}">{{.Date.Format
"January 2, 2006"}}</time> at <a href="{{.Params.original}}" class="u-syndication">[source]</a> in
reply to <a href="{{.Params.inReplyTo}}" class="u-in-reply-to">[article]</a></p>
</article>
{{end}}
<hr>
{{end}}
</div>
</section>
</div>
</main>

View file

@ -1,11 +1,17 @@
<article class="h-card">
<a class="p-name p-nickname u-url u-uid" href="https://trwnh.com">a</a>
<p class="p-nickname">trwnh</p>
<p class="p-name"><span class="p-given-name">abdullah</span> <span class="p-family-name">tarawneh</span></p>
<address class="h-card">
<header>
<img src="{{.Site.BaseURL}}avatar.png" alt="avatar" class="u-photo u-logo">
</header>
<section>
<h1 class="display-name">
<a class="p-name p-nickname u-url u-uid u-author" href="https://trwnh.com">a</a>
<span class="p-nickname">trwnh</span>
</h1>
<p class="p-name"><span class="p-given-name">abdullah</span> <span class="p-family-name">tarawneh</span></p>
<a href="mailto:a@trwnh.com" class="u-email">a@trwnh.com</a>
<a href="xmpp:a@trwnh.com" class="u-impp">a@trwnh.com</a>
<a href="https://mastodon.social/@trwnh" class="u-url">mastodon.social/@trwnh</a>
<a href="https://abdullahtarawneh.com" class="u-url">abdullahtarawneh.com</a>
<p class="p-note">i have approximate knowledge of many things. perpetual student. (nb/ace/they)</p>
<div class="e-note">
<p>
@ -19,4 +25,5 @@
<p>my triggers are moths and glitter</p>
</div>
<p class="p-gender-identity">nonbinary</p>
</article>
</section>
</address>

BIN
hugo/static/header.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB