new home page, again
wiki article style was kinda tldr
This commit is contained in:
parent
96b6e21b64
commit
6b6f9aa578
7 changed files with 323 additions and 29 deletions
|
|
@ -13,7 +13,6 @@ a {
|
|||
color: var(--link-visited);
|
||||
}
|
||||
&:focus {
|
||||
display: inline-block;
|
||||
outline-offset: 0.5rem;
|
||||
outline-width: 0.25rem;
|
||||
border-radius: 0.125rem;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
html {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body {
|
||||
|
|
@ -15,7 +14,13 @@ main {flex-grow: 1;}
|
|||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
max-width: var(--container-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
@media (min-width: $container-width + 2em) {
|
||||
.container {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,152 @@
|
|||
.index {
|
||||
main.index {
|
||||
flex-grow: 0;
|
||||
width: 100%;
|
||||
max-width: var(--container-width, 60rem);
|
||||
margin: 0 auto;
|
||||
margin-bottom: 4rem;
|
||||
@include box-shadow;
|
||||
article:not(.h-card) {
|
||||
padding: 1em;
|
||||
> .title {
|
||||
font-size: 1.5rem;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
article#quotes {
|
||||
background: #ddd;
|
||||
> .title {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
article#mastodon {
|
||||
background: #3088d4;
|
||||
color: white;
|
||||
padding: 2em;
|
||||
a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(0,0,0,0.25);
|
||||
}
|
||||
}
|
||||
|
||||
article#now {
|
||||
background: white;
|
||||
}
|
||||
article#todo {
|
||||
background: white;
|
||||
}
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
#about {
|
||||
grid-column: 1 / span 12;
|
||||
display: grid;
|
||||
grid-template-columns: 20rem 1fr;
|
||||
width: 100%;
|
||||
}
|
||||
article.h-card {
|
||||
.metadata {
|
||||
padding-inline: 0.75em;
|
||||
}
|
||||
}
|
||||
#deeds {
|
||||
grid-column: 1 / span 12;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
article#mastodon {
|
||||
grid-column: 1 / span 2;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto auto 1fr;
|
||||
gap: 1em;
|
||||
svg {
|
||||
grid-column: 2;
|
||||
place-self: center;
|
||||
}
|
||||
.title {
|
||||
grid-column: 3 / span 2;
|
||||
font-size: 2rem;
|
||||
margin: 0;
|
||||
place-self: center start;
|
||||
}
|
||||
p {
|
||||
grid-column: 2 / span 2;
|
||||
font-size: 1.25rem;
|
||||
max-width: 35ch;
|
||||
margin: 0;
|
||||
place-self: center start;
|
||||
}
|
||||
a {
|
||||
grid-column: 4;
|
||||
grid-row: 2;
|
||||
place-self: center start;
|
||||
}
|
||||
}
|
||||
article#now {
|
||||
grid-column: 1 / span 1;
|
||||
}
|
||||
article#todo {
|
||||
grid-column: 2 / span 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 60rem) {
|
||||
margin-top: 1rem;
|
||||
#about {
|
||||
}
|
||||
#deeds {
|
||||
|
||||
}
|
||||
article#now {
|
||||
padding: 2em;
|
||||
height: 320px;
|
||||
}
|
||||
article#todo {
|
||||
padding: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
// @media (min-width: 100rem) {
|
||||
// max-width: 100rem;
|
||||
// display: grid;
|
||||
// grid-template-columns: 60rem 40rem;
|
||||
// margin-top: 2rem;
|
||||
|
||||
// #about {
|
||||
// grid-column: 1;
|
||||
// }
|
||||
// #deeds {
|
||||
// grid-column: 2;
|
||||
// display: grid;
|
||||
// grid-template-columns: 1fr;
|
||||
// grid-template-rows: auto auto 1fr;
|
||||
// }
|
||||
// article#now {
|
||||
// grid-column: 1;
|
||||
// }
|
||||
// article#todo {
|
||||
// grid-column: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
figure.quote {
|
||||
border: 0;
|
||||
blockquote {
|
||||
font-size: 1.25em;
|
||||
margin-block-start: 0.5rem;
|
||||
padding-inline-start: 0;
|
||||
&:before {
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -32,4 +174,79 @@
|
|||
}
|
||||
}
|
||||
|
||||
.h-card {
|
||||
--border-radius: 0px;
|
||||
border-radius: var(--border-radius, 10px);
|
||||
background: #eee;
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
margin: 0em;
|
||||
padding: 1rem;
|
||||
}
|
||||
header {
|
||||
aspect-ratio: 2;
|
||||
background-image: url('/images/sunset.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
border-top-left-radius: var(--border-radius, 10px);
|
||||
border-top-right-radius: var(--border-radius, 10px);
|
||||
img {
|
||||
border-radius: 12px;
|
||||
background-color: #ddd;
|
||||
padding: 10px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: absolute;
|
||||
left: calc(50% - 60px);
|
||||
top: calc(100% - 60px);
|
||||
}
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.info {
|
||||
text-align: center;
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
.p-name {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
.u-uid {
|
||||
text-decoration: none;
|
||||
font-family: monospace;
|
||||
color: inherit;
|
||||
font-size: 1.25em;
|
||||
display: inline-block;
|
||||
line-height: 24px;
|
||||
}
|
||||
.p-note {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
.metadata {
|
||||
padding-block-end: 2rem;
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
.field {
|
||||
display: grid;
|
||||
place-items: start;
|
||||
gap: 0.5em;
|
||||
padding: 0 1em;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
font-variant: small-caps
|
||||
}
|
||||
dd {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
.site-header {
|
||||
z-index: 10;
|
||||
box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
|
@ -13,8 +14,7 @@
|
|||
|
||||
&:focus {
|
||||
background: var(--primary-accent-transparent);
|
||||
padding: unset;
|
||||
border-radius: unset;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -104,6 +104,7 @@
|
|||
background: var(--primary-accent-transparent);
|
||||
padding: unset;
|
||||
border-radius: unset;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -132,4 +133,4 @@
|
|||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
{{ $style := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}
|
||||
{{ $js := resources.Get "js/main.js" | minify | minify | fingerprint }}
|
||||
<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" media="screen">
|
||||
<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">
|
||||
<script type="text/javascript" src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script>
|
||||
{{ partial "seo.html" . }}
|
||||
{{ block "head" . }}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,95 @@
|
|||
{{ define "main" }}
|
||||
{{ define "body" }}
|
||||
{{ partial "site-header.html" . }}
|
||||
<main class="index">
|
||||
<div id="wiki">
|
||||
<header>
|
||||
<div class="container">
|
||||
<h1>{{.Title}}</h1>
|
||||
<span>From abdullahtarawneh.com, the free website</span>
|
||||
<p>{{.Summary}}</p>
|
||||
<div id="about">
|
||||
<article class="h-card vcard" id="hcard">
|
||||
<header>
|
||||
<img class="u-logo photo" width=120 height=120 src="/images/people/avatar.png" alt="">
|
||||
</header>
|
||||
<div class="info">
|
||||
<p class="p-name n"><span class="p-given-name given-name">Abdullah</span> <span class="p-family-name family-name">Tarawneh</span></p>
|
||||
<a href="https://abdullahtarawneh.com" class="u-url u-uid url">abdullahtarawneh.com</a>
|
||||
<p class="p-note note">More commonly known as <span class="p-nickname nickname" title="preferred name">a</span> or <span class="p-nickname nickname" title="preferred username">trwnh</span></p>
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<div class="container">
|
||||
{{.TableOfContents}}
|
||||
</div>
|
||||
</nav>
|
||||
<section>
|
||||
<div class="container">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</section>
|
||||
<dl class="metadata">
|
||||
<div class="field">
|
||||
<dt>Email</dt>
|
||||
<dd><a class="u-email email" href="mailto:a@trwnh.com">a@trwnh.com</a></dd>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<dt>XMPP</dt>
|
||||
<dd><a class="u-impp" href="xmpp:a@trwnh.com">a@trwnh.com</a></dd>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<dt>Fediverse</dt>
|
||||
<dd><a class="u-url" href="https://mastodon.social/@trwnh">mastodon.social/@trwnh</a></dd>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<dt>Personal website</dt>
|
||||
<dd><a class="u-url" href="https://trwnh.com">trwnh.com</a></dd>
|
||||
</div>
|
||||
</dl>
|
||||
</article>
|
||||
|
||||
<article id="quotes">
|
||||
<h1 class="title">Things people have said about me</h1>
|
||||
<figure class="quote">
|
||||
<blockquote>
|
||||
It's scary how much you know.
|
||||
</blockquote>
|
||||
<figcaption><cite>a former classmate</cite></figcaption>
|
||||
</figure>
|
||||
<figure class="quote">
|
||||
<blockquote>
|
||||
You're the first person I've met that keeps a spreadsheet of their lightbulbs.
|
||||
</blockquote>
|
||||
<figcaption><cite>an electrician</cite></figcaption>
|
||||
</figure>
|
||||
<figure class="quote">
|
||||
<blockquote>
|
||||
VERY MUCH not garbage [...] a worthwhile human
|
||||
</blockquote>
|
||||
<figcaption><cite>a social networking acquaintance</cite></figcaption>
|
||||
</figure>
|
||||
<figure class="quote">
|
||||
<blockquote>
|
||||
Honestly, I trust your judgement more than I trust my own.
|
||||
</blockquote>
|
||||
<figcaption><cite>a professional colleague</cite></figcaption>
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
<div id="deeds">
|
||||
<article id="mastodon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 216.4144 232.00976">
|
||||
<path fill="#fff" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"></path>
|
||||
<path fill="#3088d4" d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675"></path>
|
||||
</svg>
|
||||
<h1 class="title">Mastodon documentation <br />case study</h1>
|
||||
<p>I reorganized and rewrote the docs for an open-source project with millions of users.</p>
|
||||
<a href="/work/mastodon">Read more ></a>
|
||||
</article>
|
||||
<article id="now">
|
||||
<h1 class="title">What I'm doing right now</h1>
|
||||
<section id="socialweb">
|
||||
<h2 class="section-title">social web so-called "expert"</h2>
|
||||
<p>Member of the Social Web Community Group at the W3C. Writing a W3C SWICG report on <a href="https://swicg.github.io/activitypub-webfinger">ActivityPub and WebFinger</a>.</p>
|
||||
<p>Also active on the <a href="https://socialhub.activitypub.rocks/u/trwnh/summary">SocialHub forum</a> for the ActivityPub community.</p>
|
||||
</section>
|
||||
</article>
|
||||
<article id="todo">
|
||||
<h1 class="title">What I want to do</h1>
|
||||
<section id="untitled-social-app">
|
||||
<h2 class="section-title">untitled social app</h2>
|
||||
<p>For the past few years, I've been developing a theoretical framework for unified social communications across various protocols. I'd like to collect my ideas into writings that will be published on this site.</p>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
<style>
|
||||
body {background: #abc;}
|
||||
</style>
|
||||
{{ end }}
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
{{ $currentPage := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
<li
|
||||
{{- if or ($currentPage.IsMenuCurrent "main" .) (eq $currentPage.Section .Identifier) }}
|
||||
{{- if or (and $currentPage.IsHome (eq .Identifier "home")) ($currentPage.IsMenuCurrent "main" .) (eq $currentPage.Section .Identifier) }}
|
||||
class="active"
|
||||
{{ end }}>
|
||||
<a href="{{ .URL | absLangURL }}">
|
||||
|
|
|
|||
Loading…
Reference in a new issue