WIP: homepage
This commit is contained in:
parent
ccdc895288
commit
8eaa781146
13 changed files with 248 additions and 158 deletions
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
p {
|
||||
max-width: 55ch;
|
||||
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 {
|
||||
margin: 1em 0;
|
||||
}
|
||||
}
|
||||
.meta {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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: ')'}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
7
hugo/content/notes/108586326598121988/index.md
Normal file
7
hugo/content/notes/108586326598121988/index.md
Normal 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
|
||||
BIN
hugo/content/notes/108588546793521204/image.png
Normal file
BIN
hugo/content/notes/108588546793521204/image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 755 KiB |
7
hugo/content/notes/108588546793521204/index.md
Normal file
7
hugo/content/notes/108588546793521204/index.md
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
+++
|
||||
type = "note"
|
||||
tags = []
|
||||
date = "2022-07-04T05:15:00Z"
|
||||
attachment = ["image.png"]
|
||||
+++
|
||||
is this anything
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
+++
|
||||
type = "note"
|
||||
tags = []
|
||||
+++
|
||||
kinda need an account with somewhere between 2 and 2000 followers
|
||||
|
||||
custom audiences when
|
||||
13
hugo/layouts/_default/comment.html
Normal file
13
hugo/layouts/_default/comment.html
Normal 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 }}
|
||||
|
|
@ -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>
|
||||
{{$paginator := .Paginate (.Site.RegularPages) 20}}
|
||||
{{range $paginator.Pages}}
|
||||
{{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">
|
||||
<div class="e-content">{{.Content}}</div>
|
||||
<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>
|
||||
<p class="p-summary">{{.Summary}}</p>
|
||||
<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}}
|
||||
|
||||
{{end}}
|
||||
<hr>
|
||||
{{end}}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,29 @@
|
|||
<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>
|
||||
<img src="{{.Site.BaseURL}}avatar.png" alt="avatar" class="u-photo u-logo">
|
||||
<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>
|
||||
<p class="p-note">i have approximate knowledge of many things. perpetual student. (nb/ace/they)</p>
|
||||
<div class="e-note">
|
||||
<p>
|
||||
i have approximate knowledge of many things. perpetual student. (nb/ace/they)
|
||||
</p>
|
||||
<p>
|
||||
xmpp/email: a@trwnh.com<br/>
|
||||
<a href="https://trwnh.com">https://trwnh.com</a><br/>
|
||||
help me live: <a href="https://liberapay.com/trwnh">https://liberapay.com/trwnh</a> or paypal<br/>
|
||||
</p>
|
||||
<p>my triggers are moths and glitter</p>
|
||||
</div>
|
||||
<p class="p-gender-identity">nonbinary</p>
|
||||
</article>
|
||||
<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>
|
||||
i have approximate knowledge of many things. perpetual student. (nb/ace/they)
|
||||
</p>
|
||||
<p>
|
||||
xmpp/email: a@trwnh.com<br/>
|
||||
<a href="https://trwnh.com">https://trwnh.com</a><br/>
|
||||
help me live: <a href="https://liberapay.com/trwnh">https://liberapay.com/trwnh</a> or paypal<br/>
|
||||
</p>
|
||||
<p>my triggers are moths and glitter</p>
|
||||
</div>
|
||||
<p class="p-gender-identity">nonbinary</p>
|
||||
</section>
|
||||
</address>
|
||||
BIN
hugo/static/header.jpg
Normal file
BIN
hugo/static/header.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Loading…
Reference in a new issue