Update home page
This commit is contained in:
parent
2b9d2705c9
commit
2cd9cbe709
GPG Key ID:
70596474C5D20F85
|
|
@ -1,51 +1,113 @@
|
|||
{{ define "header" }}
|
||||
<header>
|
||||
{{ "<!-- For more information on microformats, read the source code comments -->" | safeHTML }}
|
||||
<div class="center h-card vcard">
|
||||
<!-- For basic h-card validation, visit 'Publishing on the IndieWeb' at https://indiewebify.me/validate-h-card/
|
||||
<header>
|
||||
{{ "<!-- For more information on microformats, read the source code comments -->" | safeHTML }}
|
||||
<div class="center h-card vcard">
|
||||
<!--
|
||||
For basic h-card validation, visit 'Publishing on the IndieWeb' at
|
||||
https://indiewebify.me/validate-h-card/
|
||||
|
||||
For complete results, try parsing this page with the 'PHP Microformats Parser' at https://pin13.net/mf2/
|
||||
For complete results, try parsing this page with the 'PHP Microformats Parser'
|
||||
at https://pin13.net/mf2/
|
||||
|
||||
Examples for writing 'backward compatible' h-card markup available at https://microformats.org/wiki/microformats2#authoring -->
|
||||
<a class="p-name fn u-url url link-000" href="/"><h1>{{ .Site.Params.author }}</h1></a>
|
||||
<!-- New properties (including gender identity) listed at https://microformats.org/wiki/rfc-6350 -->
|
||||
<h3>Pronouns: <span class="p-gender-identity gender">{{ .Site.Params.authorPronouns }}</span></h3>
|
||||
|
||||
<p class="p-note">I am a data enthusiast skilled in data management, qualitative and quantitative data analysis, and low-code automation. My research interests include disability, health equity, poverty, and social policy. I am also an advocate for digital rights and free culture, and I maintain <a href="/resources/" >a page with useful resources</a>.</p>
|
||||
|
||||
<img class="u-photo photo" src="/me.jpg" alt="Photo of an East Asian man wearing a dark gray suit and a floral tie" title="{{ .Site.Params.author }}" />
|
||||
|
||||
<p>My guiding principles draw from disability justice and the ethics of care; these principles are connected to current sociopolitical issues and my commitment to progressive social change.</p>
|
||||
</div>
|
||||
</header>
|
||||
Examples for writing 'backward compatible' h-card markup available at
|
||||
https://microformats.org/wiki/microformats2#authoring
|
||||
-->
|
||||
<a class="p-name fn u-url url link-000" href="/">
|
||||
<h1>{{ .Site.Params.author }}</h1>
|
||||
</a>
|
||||
<!--
|
||||
New properties (including gender identity) listed at
|
||||
https://microformats.org/wiki/rfc-6350
|
||||
-->
|
||||
<h3>
|
||||
Pronouns:
|
||||
<span class="p-gender-identity gender">{{ .Site.Params.authorPronouns }}</span>
|
||||
</h3>
|
||||
<p class="p-note">
|
||||
I am a data enthusiast skilled in data management, qualitative and
|
||||
quantitative data analysis, and low-code automation. My research interests
|
||||
include disability, health equity, poverty, and social policy. I am also
|
||||
an advocate for digital rights and free culture, and I maintain
|
||||
<a href="/resources/">a page with useful resources</a>.
|
||||
</p>
|
||||
<img
|
||||
class="u-photo photo"
|
||||
src="/me.jpg"
|
||||
alt="Photo of an East Asian man wearing a dark gray suit and a floral tie"
|
||||
title="{{ .Site.Params.author }}"
|
||||
/>
|
||||
<p>
|
||||
My guiding principles draw from disability justice and the ethics of care;
|
||||
these principles are connected to current sociopolitical issues and my
|
||||
commitment to progressive social change.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
{{- end }}
|
||||
|
||||
{{ define "main" }}
|
||||
<main>
|
||||
<div class="center">
|
||||
<h2>Where should you go from here?</h2>
|
||||
<p>📢 <a href="/links/" >I found these current events and recent articles interesting</a>. 📢</p>
|
||||
<p>📆 <a href="/now/" >I regularly write updates on what I'm doing now</a>. 📆</p>
|
||||
<p>📙 <a href="/resources/" >You can browse my recommended resources</a>. 📙</p>
|
||||
<h2>Elsewhere</h2>
|
||||
<p>📌 <a rel="me" href="{{ .Site.Params.authorLinkedIn }}" >I have a LinkedIn profile</a>. 📌</p>
|
||||
<p>🎬 <a rel="me" href="{{ .Site.Params.authorLetterboxd }}" >I use Letterboxd, "the social network for film lovers."</a> 🎬</p>
|
||||
<p>🙌 This website is a member of <a href="https://512kb.club/"><b>The 512KB Club</b></a>! 🙌</p>
|
||||
</div>
|
||||
</main>
|
||||
<main>
|
||||
<div class="center">
|
||||
<h2>Where should you go from here?</h2>
|
||||
<p>
|
||||
<a class="btn" href="/links/">📢 I found these current events and recent articles interesting.</a>
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn" href="/now/">📆 I regularly write updates on what I'm doing now.</a>
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn" href="/resources/">📚 You can browse my recommended resources.</a>
|
||||
</p>
|
||||
<h2>Elsewhere</h2>
|
||||
<a class="link-linkedin" rel="me" href="{{ .Site.Params.authorLinkedIn }}">
|
||||
<img class="linkedin" src="icon/linkedin.svg"></img>LinkedIn
|
||||
</a>
|
||||
<a class="link-letterboxd" rel="me" href="{{ .Site.Params.authorLetterboxd }}">
|
||||
<img class="letterboxd" src="icon/letterboxd.svg"></img>Letterboxd
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="center">
|
||||
<a class="link-000" href="https://ForTheBadge.com/"><img src="/img/built-with-love.svg" alt="This site was built with love, using Git and Hugo." title="I also used Git and Hugo." /></a>
|
||||
<a class="link-000" href="{{ .Site.Params.license }}"><img src="/img/CC-BY-SA.svg" alt="Original content by {{ .Site.Params.author }} is licensed under {{ .Site.Copyright }}" title="{{ .Site.Params.copyrightMessage }}" /></a>
|
||||
<p><b><a class="u-email email" rel="me" href="mailto:{{ .Site.Params.authorEmail }}">Contact me</a>. <a href="/privacy/" >Privacy</a>. <a rel="pgpkey" href="/ethan.asc.txt">Public key</a> <a href="https://keyoxide.org/{{ .Site.Params.authorEmail }}">(Keyoxide)</a>.</b></p>
|
||||
<a class="link-001" href="https://nextcloud.com/sharing#eyoo@share.mayfirst.org"><img src="/icon/nextcloud.svg" class="nextcloud" alt="Share with me via Nextcloud!" title="Federated Cloud ID makes it possible to share across Nextcloud and other Open Cloud Mesh (OCM) compatible servers!" /> Share with me via Nextcloud!</a>
|
||||
<p>🖥 <a href="/cloudflare/" ><i>Where is this website hosted?</i></a> 🖥</p>
|
||||
</div>
|
||||
</footer>
|
||||
<footer>
|
||||
<div class="center">
|
||||
<br>
|
||||
<a class="link-000" href="https://ForTheBadge.com/">
|
||||
<img
|
||||
src="/img/built-with-love.svg"
|
||||
alt="This site was built with love, using Git and Hugo."
|
||||
title="I also used Git and Hugo."
|
||||
/>
|
||||
</a>
|
||||
<a class="link-000" href="{{ .Site.Params.license }}">
|
||||
<img
|
||||
src="/img/CC-BY-SA.svg"
|
||||
alt="Original content by {{ .Site.Params.author }} is licensed under {{ .Site.Copyright }}"
|
||||
title="{{ .Site.Params.copyrightMessage }}"
|
||||
/>
|
||||
</a>
|
||||
<p>
|
||||
<b>
|
||||
<a class="u-email email" rel="me" href="mailto:{{ .Site.Params.authorEmail }}">Contact me</a>.
|
||||
<a href="/privacy/" >Privacy</a>.
|
||||
<a rel="pgpkey" href="/ethan.asc.txt">Public key</a>
|
||||
<a href="https://keyoxide.org/{{ .Site.Params.authorEmail }}">(Keyoxide)</a>.
|
||||
</b>
|
||||
</p>
|
||||
<a class="link-nextcloud" href="https://nextcloud.com/sharing#eyoo@share.mayfirst.org">
|
||||
<img
|
||||
src="/icon/nextcloud.svg"
|
||||
class="nextcloud"
|
||||
alt="Share with me via Nextcloud!"
|
||||
title="Federated Cloud ID makes it possible to share across Nextcloud and other Open Cloud Mesh (OCM) compatible servers!"
|
||||
/>
|
||||
Share with me via Nextcloud!
|
||||
</a>
|
||||
<p>🖥 <a href="/cloudflare/" ><i>Where is this website hosted?</i></a> 🖥</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{{ "<!-- For more content -->" | safeHTML }}
|
||||
<link rel="me" href="{{ .Site.Params.authorGitea }}" />
|
||||
<link rel="me" href="{{ .Site.Params.authorGitLab }}" />
|
||||
<link rel="me" href="{{ .Site.Params.authorWriteFreely }}" />
|
||||
<link rel="me" href="{{ .Site.Params.authorGitea }}" />
|
||||
<link rel="me" href="{{ .Site.Params.authorGitLab }}" />
|
||||
<link rel="me" href="{{ .Site.Params.authorWriteFreely }}" />
|
||||
{{- end }}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="500px" height="500px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>letterboxd-decal-dots-neg-rgb</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<rect id="path-1" x="0" y="0" width="129.847328" height="141.389313"/>
|
||||
<rect id="path-3" x="0" y="0" width="129.847328" height="141.389313"/>
|
||||
</defs>
|
||||
<g id="letterboxd-decal-dots-neg-rgb" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<circle id="Circle" fill="#FFFFFF" cx="250" cy="250" r="250"/>
|
||||
<g id="dots-pos" transform="translate(61.000000, 180.000000)">
|
||||
<g id="Dots">
|
||||
<ellipse id="Green" fill="#00E054" cx="189" cy="69.9732824" rx="70.0786517" ry="69.9732824"/>
|
||||
<g id="Blue" transform="translate(248.152672, 0.000000)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"/>
|
||||
</mask>
|
||||
<g id="Mask"/>
|
||||
<ellipse fill="#40BCF4" mask="url(#mask-2)" cx="59.7686766" cy="69.9732824" rx="70.0786517" ry="69.9732824"/>
|
||||
</g>
|
||||
<g id="Orange">
|
||||
<mask id="mask-4" fill="white">
|
||||
<use xlink:href="#path-3"/>
|
||||
</mask>
|
||||
<g id="Mask"/>
|
||||
<ellipse fill="#FF8000" mask="url(#mask-4)" cx="70.0786517" cy="69.9732824" rx="70.0786517" ry="69.9732824"/>
|
||||
</g>
|
||||
<path d="M129.539326,107.022244 C122.810493,96.2781677 118.921348,83.5792213 118.921348,69.9732824 C118.921348,56.3673435 122.810493,43.6683972 129.539326,32.9243209 C136.268159,43.6683972 140.157303,56.3673435 140.157303,69.9732824 C140.157303,83.5792213 136.268159,96.2781677 129.539326,107.022244 Z" id="Overlap" fill="#556677"/>
|
||||
<path d="M248.460674,32.9243209 C255.189507,43.6683972 259.078652,56.3673435 259.078652,69.9732824 C259.078652,83.5792213 255.189507,96.2781677 248.460674,107.022244 C241.731841,96.2781677 237.842697,83.5792213 237.842697,69.9732824 C237.842697,56.3673435 241.731841,43.6683972 248.460674,32.9243209 Z" id="Overlap" fill="#556677"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
|
||||
|
After Width: | Height: | Size: 655 B |
|
|
@ -1,133 +1,211 @@
|
|||
/* Body */
|
||||
a,
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
color: #ace;
|
||||
text-decoration: none;
|
||||
color: #ace;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background: #2b5278;
|
||||
text-decoration: underline dotted;
|
||||
border: 1px solid;
|
||||
background: #2b5278;
|
||||
text-decoration: underline dotted;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
header a:link,
|
||||
header a:visited,
|
||||
footer a:link,
|
||||
footer a:visited,
|
||||
aside a:visited,
|
||||
main a:visited {
|
||||
color: #FFF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #10151a;
|
||||
color: #d3dae3;
|
||||
font: 1em/1.5 sans-serif;
|
||||
margin: 2em auto;
|
||||
max-width: 50em;
|
||||
padding: 0 2em;
|
||||
background: #10151a;
|
||||
color: #d3dae3;
|
||||
font: 1em/1.5 sans-serif;
|
||||
margin: 2em auto;
|
||||
max-width: 50em;
|
||||
padding: 0 2em;
|
||||
}
|
||||
|
||||
h2,
|
||||
main h1 {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.1em;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8em;
|
||||
font-size: 1.75em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
article,
|
||||
main {
|
||||
padding: 4px 2px;
|
||||
padding: 4px 2px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 0.25em 1.5em;
|
||||
background: #ddd;
|
||||
color: #000;
|
||||
border-radius: 4px;
|
||||
padding: 0.25em 1.5em;
|
||||
background: #ddd;
|
||||
color: #000;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
code {
|
||||
background: #000;
|
||||
font: 1em/1.5 monospace, monospace;
|
||||
padding: 2px;
|
||||
background: #000;
|
||||
font: 1em/1.5 monospace, monospace;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
img[src$='#center'] {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nextcloud {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
top: 8px;
|
||||
background-size: contain;
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
float: right;
|
||||
}
|
||||
|
||||
a.link-000 {
|
||||
background: #000;
|
||||
border: none;
|
||||
}
|
||||
|
||||
a.link-nextcloud {
|
||||
padding: 10px;
|
||||
background-color: #0082c9;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
a.link-letterboxd {
|
||||
padding: 0.5em;
|
||||
background-color: #202830;
|
||||
border-radius: 3px;
|
||||
padding-left: 0.25em;
|
||||
}
|
||||
|
||||
.letterboxd {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
margin-right: 0.25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a.link-linkedin {
|
||||
padding: 0.5em;
|
||||
background-color: #0077b5;
|
||||
border-radius: 3px;
|
||||
margin-right: 0.5em;
|
||||
padding-left: 0.25em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.linkedin {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
margin-right: 0.25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: block;
|
||||
margin: 0.5em auto;
|
||||
padding: 0.5em;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
background-color: #e36d25;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #d15d27;
|
||||
}
|
||||
|
||||
a.btn:hover {
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
a.btn:link,
|
||||
a.btn:visited {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a.link-letterboxd:link,
|
||||
a.link-letterboxd:visited,
|
||||
a.link-linkedin:link,
|
||||
a.link-linkedin:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Light theme */
|
||||
@media (prefers-color-scheme: light) {
|
||||
body {
|
||||
background: #f2f2f2;
|
||||
color: #000;
|
||||
}
|
||||
header a:link,
|
||||
header a:visited,
|
||||
footer a:link,
|
||||
footer a:visited,
|
||||
aside a:link {
|
||||
color: #000;
|
||||
}
|
||||
a:hover {
|
||||
background: #cae6ef;
|
||||
text-decoration: underline dotted;
|
||||
border: 1px solid;
|
||||
}
|
||||
main a:link {
|
||||
color: #004962;
|
||||
}
|
||||
main a:visited,
|
||||
aside a:visited {
|
||||
color: #542baa;
|
||||
}
|
||||
code {
|
||||
background: #ccc;
|
||||
color: #000;
|
||||
font: 1em/1.5 monospace, monospace;
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Classes */
|
||||
.center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
}
|
||||
.nextcloud {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
top: 8px;
|
||||
background-size: contain;
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
.post-title {
|
||||
line-height: 1.8;
|
||||
}
|
||||
.subtitle {
|
||||
float: right;
|
||||
}
|
||||
a.link-000 {
|
||||
background: #000;
|
||||
border: none;
|
||||
}
|
||||
a.link-001 {
|
||||
padding: 10px;
|
||||
background-color: #0082c9;
|
||||
color: #ffffff;
|
||||
border-radius: 3px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
body {
|
||||
background: #f2f2f2;
|
||||
color: #000;
|
||||
}
|
||||
header a:link,
|
||||
header a:visited,
|
||||
footer a:link,
|
||||
footer a:visited,
|
||||
aside a:link {
|
||||
color: #000;
|
||||
}
|
||||
a:hover {
|
||||
background: #cae6ef;
|
||||
text-decoration: underline dotted;
|
||||
border: 1px solid;
|
||||
}
|
||||
main a:link {
|
||||
color: #004962;
|
||||
}
|
||||
main a:visited,
|
||||
aside a:visited {
|
||||
color: #542baa;
|
||||
}
|
||||
code {
|
||||
background: #ccc;
|
||||
color: #000;
|
||||
font: 1em/1.5 monospace, monospace;
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue