toc label + work intro bg

This commit is contained in:
a 2024-03-14 18:29:33 -05:00
parent f2fd949791
commit 2ca39428be
31 changed files with 267 additions and 173 deletions

View file

@ -1,12 +1,14 @@
#work #intro {
--headerHeight: 4em;
--navHeight: 4em;
background-color: rgb(80, 102, 124);
color: #fff;
padding: 0;
display: flex;
flex: 1;
background-image: url('/images/backgrounds/ffflux1.svg');
background-size: cover;
background-position: center;
.container {
display: grid;
grid-template-rows: auto auto 1fr;

View file

@ -0,0 +1,41 @@
/* === ordered: true === */
#TableOfContents ol {
/*
each list gets a new counter
*/
counter-reset: item;
margin-inline-start: 0;
list-style: none;
}
#TableOfContents ol li:before {
/*
the counter is added as a pseudo-element,
and nested counters are joined by a dot
*/
content: counters(item, ".") " ";
counter-increment: item;
/* ensure the counters align visually */
font-family: monospace;
font-weight: bold;
margin-inline-end: 1em;
}
#TableOfContents > ol > li {
/*
top-level items wrap after the number,
in order to add some visual separation
*/
display: flex;
flex-flow: column;
}
/* === ordered: false === */
#TableOfContents ul {
list-style: none;
margin-left: 0;
}
#TableOfContents ul ul {
margin-left: 1em;
}

View file

@ -0,0 +1,46 @@
.page .title {
font-family: serif;
margin-top: 2em;
}
.page .summary {
font-size: 1.25em;
font-family: serif;
}
.page .wordcount {
margin: 0;
}
.page .tags-title {
font-variant: small-caps;
font-weight: bold;
margin: 0.5em 0;
}
.page .tags {
display: flex;
flex-flow: row wrap;
gap: 0.5em;
list-style: none;
margin-left: 0;
li {
margin: 0;
}
a {
display: block;
padding: 0.5rem;
background: #cde;
border-radius: 6px;
&:before {
content: "#"
}
}
}
.page .toc-title {
margin-block-end: 0.5em;
font-weight: bold;
font-variant: small-caps;
}

View file

@ -38,6 +38,13 @@
}
}
.blog .toc-title {
margin-block-end: 0.5em;
font-weight: 900;
text-transform: uppercase;
color: var(--ui-text-muted);
}
.blog .post .content {
margin-block: 4em;
}

View file

@ -27,6 +27,8 @@
@import "layouts/blog/single.scss";
@import "layouts/blog/list.scss";
@import "components/table-of-contents";
@import "layouts/index.scss";
@import "content/work.scss";
@import "content/code.scss";

View file

@ -1,12 +1,11 @@
---
title: "You don't have a right to profit."
summary: "People will go to ridiculous lengths in the name of protecting the “right” to profit. Lets be real here. No one has a “right” to profit."
author: "Abdullah Tarawneh"
date: "2015-07-08"
tags: ["capitalism", "profit", "music", "music industry", "piracy", "distribution", "access"]
category: "Blog"
cover: ""
---
+++
title = "You don't have a right to profit."
summary = "People will go to ridiculous lengths in the name of protecting the “right” to profit. Lets be real here. No one has a “right” to profit."
author = "Abdullah Tarawneh"
date = "2015-07-08"
tags = ["capitalism", "profit", "music", "music industry", "piracy", "distribution", "access"]
categories = ["Blog"]
+++
<p>These days, you see a lot of ridiculous things like <a href="https://torrentfreak.com/the-worlds-most-idiotic-copyright-complaint-150222/">copyright claims on the download pages of free software</a>, because they contain the word “download”. A lot of these stupid actions are done in the name of “protecting the artists”. People will go to ridiculous lengths in the name of protecting the “right” to profit.</p>

View file

@ -4,7 +4,7 @@ summary = "When I say personal website, I do not mean a page or portfolio for po
author = "Abdullah Tarawneh"
date = "2023-03-18"
tags = ["personal websites", "portfolios", "services", "branding", "marketing", "capitalism"]
category = "Blog"
categories = ["Blog"]
+++
<p class="has-pullquote before left" data-pullquote="I want [...] [s]tuff that gets to the heart of who you are.">A lot of resources and materials that are readily available for helping you make a so-called personal website generally assume that you are trying to get hired or get clients. To me, this is a strange interpretation of "personal". I would describe such websites as professional websites instead. When I say personal website, I do not mean a page or portfolio for potential employers or clients to hire you. I mean a place to be yourself and to express yourself to others. I want advice on self-reflection and introspection and knowing yourself -- how to identify and how to introduce yourself; how to be genuinely engaging. Stuff that gets to the heart of who you are.</p>

View file

@ -1,12 +1,11 @@
---
title: "RIP Grooveshark."
summary: "I last used Grooveshark earlier today. I refreshed the page and found that it was dead. [...] I find myself feeling about Grooveshark similarly as when I found out that Megaupload had been shut down, and that many of my files were lost forever."
author: "Abdullah Tarawneh"
date: "2015-05-01"
tags: ["grooveshark", "music", "music industry", "culture", "user generated content", "capitalism", "copyright"]
category: "Blog"
cover: ""
---
+++
title = "RIP Grooveshark."
summary = "I last used Grooveshark earlier today. I refreshed the page and found that it was dead. [...] I find myself feeling about Grooveshark similarly as when I found out that Megaupload had been shut down, and that many of my files were lost forever."
author = "Abdullah Tarawneh"
date = "2015-05-01"
tags = ["grooveshark", "music", "music industry", "culture", "user generated content", "capitalism", "copyright"]
categories = ["Blog"]
+++
I last used Grooveshark earlier today. I refreshed the page and found that it was dead. Grooveshark has finally shut down. UMG et al have won. Effective immediately, the Grooveshark service no longer works, all music has been wiped entirely from the site, user data has been lost, curated playlists are inaccessible, VIP users are unable to get refunds, all social media accounts have been deleted, and the grooveshark.com website shows only an apology that admits wrongdoing and directs users to whymusicmatters.org, the RIAAs website.

View file

@ -4,7 +4,7 @@ summary = "That service that started out as a way to send status updates to your
author = "Abdullah Tarawneh"
date = "2018-04-27"
tags = ["twitter", "social network", "social media", "analysis", "capitalism"]
category = "Blog"
categories = ["Blog"]
[[resources]]
name = 'cover'
src = 'failwhale.png'

View file

@ -1,12 +1,11 @@
---
title: "Certbot DNS-01 hook for Namecheap"
summary: "A manual authorization hook for EFF Certbot, allowing DNS-01 challenge verification with Namecheap domains. Written in Python."
author: "Abdullah Tarawneh"
date: "2019-10-30"
tags: ["namecheap", "certbot", "dns-01", "python", "letsencrypt"]
category: "Code"
cover: "/code/certbot-namecheap/cover.png"
---
+++
title = "Certbot DNS-01 hook for Namecheap"
summary = "A manual authorization hook for EFF Certbot, allowing DNS-01 challenge verification with Namecheap domains. Written in Python."
author = "Abdullah Tarawneh"
date = "2019-10-30"
tags = ["namecheap", "certbot", "dns-01", "python", "letsencrypt"]
categories = ["Code"]
+++
## The problem

View file

@ -1,12 +1,14 @@
---
title: "Liberapay: Add Pleroma support"
summary: "Pleroma is compatible with the Mastodon API, but uses a different URL format. This pull request creates a Pleroma identity provider within Liberapay that takes this difference into account."
author: "Abdullah Tarawneh"
date: "2019-11-13"
tags: ["mastodon", "api", "pleroma", "liberapay", "contribution", "pull request", "github"]
category: "Code"
cover: "/images/cover/liberapay-pleroma.jpg"
---
+++
title = "Liberapay: Add Pleroma support"
summary = "Pleroma is compatible with the Mastodon API, but uses a different URL format. This pull request creates a Pleroma identity provider within Liberapay that takes this difference into account."
author = "Abdullah Tarawneh"
date = "2019-11-13"
tags = ["mastodon", "api", "pleroma", "liberapay", "contribution", "pull request", "github"]
categories = ["Code"]
[[resources]]
name = "cover"
src = "/images/cover/liberapay-pleroma.jpg"
+++
pleroma is compatible with mastodon api.
only difference is url format:

View file

@ -1,12 +1,14 @@
---
title: "MastoMods"
summary: "CSS tweaks and modifications for Mastodon, a libre micro-blogging social server similar to Twitter."
author: "Abdullah Tarawneh"
date: "2019-02-18"
tags: ["mastomods", "mastodon", "css", "userstyles", "tweaks"]
category: "Code"
cover: "/images/cover/mastomods.jpg"
---
+++
title = "MastoMods"
summary = "CSS tweaks and modifications for Mastodon, a libre micro-blogging social server similar to Twitter."
author = "Abdullah Tarawneh"
date = "2019-02-18"
tags = ["mastomods", "mastodon", "css", "userstyles", "tweaks"]
categories = ["Code"]
[[resources]]
name = "cover"
src = "/images/cover/mastomods.jpg"
+++
This work is heavily based on (and an extension of) my earlier work on Mastodon Flat CSS, and its child theme Linernotes Mastodon Themes. I grew tired of having to maintain what was essentially the same code in multiple different places, so this repo was created to be a more modular way of managing code snippets after I learned enough about how importing works.

View file

@ -1,12 +1,14 @@
---
title: "OBS Studio: Ctrl+E to Edit Transform"
summary: "I added a shortcut to edit transforms on a source in OBS Studio."
date: "2017-04-30"
author: "Abdullah Tarawneh"
tags: ["obs", "open broadcaster software", "obs studio", "keyboard shortcut", "edit transform", "pull request", "github"]
category: "Code"
cover: "/images/cover/obs-transform.jpg"
---
+++
title = "OBS Studio: Ctrl+E to Edit Transform"
summary = "I added a shortcut to edit transforms on a source in OBS Studio."
date = "2017-04-30"
author = "Abdullah Tarawneh"
tags = ["obs", "open broadcaster software", "obs studio", "keyboard shortcut", "edit transform", "pull request", "github"]
categories = ["Code"]
[[resources]]
name = "cover"
src = "/images/cover/obs-transform.jpg"
+++
Editing was very easy in OBS Classic, and I could not find the option for stretching a source to bounds in OBS Studio, so the "Edit Transform" dialogue should be more user-facing. Giving it a keyboard shortcut denotes that it is important enough to have a shortcut, as opposed to the myriad options with no shortcut.

View file

@ -1,12 +1,11 @@
---
title: "PhotoBucketGrabber"
summary: "Download all your photos from PhotoBucket using this Python script."
author: "Abdullah Tarawneh"
date: "2019-03-17"
tags: ["python", "photobucket", "automation", "scripting", "archive", "export", "download"]
category: "Code"
cover: "/code/photobucketgrabber/cover.png"
---
+++
title = "PhotoBucketGrabber"
summary = "Download all your photos from PhotoBucket using this Python script."
author = "Abdullah Tarawneh"
date = "2019-03-17"
tags = ["python", "photobucket", "automation", "scripting", "archive", "export", "download"]
categories = ["Code"]
+++
## The problem

View file

@ -1,12 +1,14 @@
---
title: "salatime"
summary: "Basic terminal script to print out daily prayer times for Birmingham, AL."
date: "2019-05-09"
author: "Abdullah Tarawneh"
tags: ["python", "web scraping", "scraping", "beautifulsoup", "salat", "prayer", "time"]
category: "Code"
cover: "/images/cover/salatime.jpg"
---
+++
title = "salatime"
summary = "Basic terminal script to print out daily prayer times for Birmingham, AL."
date = "2019-05-09"
author = "Abdullah Tarawneh"
tags = ["python", "web scraping", "scraping", "beautifulsoup", "salat", "prayer", "time"]
categories = ["Code"]
[[resources]]
name = "cover"
src = "/images/cover/salatime.jpg"
+++
## The problem

View file

@ -4,7 +4,7 @@ summary = "A personal website for Mo Tarawneh, inaugural chairperson of the UN C
author = "Abdullah Tarawneh"
date = "2020-03-17"
tags = ["website", "web", "responsive", "design"]
category = "Design"
categories = ["Design"]
draft = true
[[resources]]
name = 'cover'

View file

@ -1,16 +1,16 @@
---
title: "Director of Technology at Equality Initiative"
summary: "3 years helping a non-profit manage all technical aspects, from website to email."
author: "Abdullah Tarawneh"
date: "2014-02-20"
start: "Feb 2014"
end: "Feb 2017"
at: "Equality Initiative"
position: "Director of Technology"
tags: ["nonprofit"]
category: "Work"
cover: "/images/cover/eqin.jpg"
---
+++
title = "Director of Technology at Equality Initiative"
summary = "3 years helping a non-profit manage all technical aspects, from website to email."
author = "Abdullah Tarawneh"
date = "2014-02-20"
start = "Feb 2014"
end = "Feb 2017"
at = "Equality Initiative"
position = "Director of Technology"
tags = ["nonprofit"]
categories = ["Work"]
src = "/images/cover/eqin.jpg"
+++
## Building and maintaining a website

View file

@ -1,16 +1,18 @@
---
title: Go-Fed Site Redesign
summary: Taking Go-Fed's website from "yep, it has color" to "woo, looking super nice! :D"
author: "Abdullah Tarawneh"
date: "2020-12-27"
start: "Dec 2020"
end: "Dec 2020"
at: "Go-Fed"
position: "Website Remake"
tags: ["go-fed", "redesign", "website", "web", "responsive"]
category: "Work"
cover: "/images/cover/go-fed.png"
---
+++
title = "Go-Fed Site Redesign"
summary = "Taking Go-Fed's website from 'yep, it has color' to 'woo, looking super nice! :D'"
author = "Abdullah Tarawneh"
date = "2020-12-27"
start = "Dec 2020"
end = "Dec 2020"
at = "Go-Fed"
position = "Website Remake"
tags = ["go-fed", "redesign", "website", "web", "responsive"]
categories = ["Work", "Design"]
[[resources]]
name = "cover"
src = "/images/cover/go-fed.png"
+++

View file

@ -8,7 +8,7 @@ end = "Jan 2020"
at = "Mastodon"
position = "Information Architect / Documentation Specialist"
tags = ["mastodon", "documentation", "information architecture", "rest api"]
category = "Work"
categories = ["Work"]
+++
<main id="mastodon">

View file

@ -1,16 +1,18 @@
---
title: "Pixelfed team member"
summary: "After making a masterpost of bugs and issues, I turned Pixelfed from a one-person project into a team effort."
author: "Abdullah Tarawneh"
date: "2019-01-06"
start: "Jan 2019"
end: "current"
at: "Pixelfed"
position: "Product/Project Manager"
tags: ["pixelfed", "project management", "product management", "github issues", "documentation"]
category: "Work"
cover: "/images/cover/pixelfed.jpg"
---
+++
title = "Pixelfed team member"
summary = "After making a masterpost of bugs and issues, I turned Pixelfed from a one-person project into a team effort."
author = "Abdullah Tarawneh"
date = "2019-01-06"
start = "Jan 2019"
end = "current"
at = "Pixelfed"
position = "Product/Project Manager"
tags = ["pixelfed", "project management", "product management", "github issues", "documentation"]
categories = ["Work"]
[[resources]]
name = "cover"
src = "/images/cover/pixelfed.jpg"
+++
## Overview

View file

@ -1,16 +1,16 @@
---
title: "Senior Technical Writer at Trilogy"
summary: "Managing knowledge bases for numerous products owned by Trilogy."
author: "Abdullah Tarawneh"
date: "2021-05-16"
start: "May 2021"
end: "Dec 2021"
at: "Trilogy"
position: "Senior Technical Writer / Product Knowledge Curator"
tags: ["technical writing", "senior role", "customer support", "product knowledge", "knowledge base", "curator", "curation"]
category: "Work"
cover: "/images/cover/trilogy.png"
---
+++
title = "Senior Technical Writer at Trilogy"
summary = "Managing knowledge bases for numerous products owned by Trilogy."
author = "Abdullah Tarawneh"
date = "2021-05-16"
start = "May 2021"
end = "Dec 2021"
at = "Trilogy"
position = "Senior Technical Writer / Product Knowledge Curator"
tags = ["technical writing", "senior role", "customer support", "product knowledge", "knowledge base", "curator", "curation"]
category = "Work"
cover = "/images/cover/trilogy.png"
+++
<main id="trilogy">
<header class="page-header section">

View file

@ -1,13 +1,12 @@
---
title: ""
summary: "B.S. Biomedical Engineering<br>B.S. Computer Science<br>Minor, Mathematics<br>Science and Technology Honors Program"
author: "Abdullah Tarawneh"
date: "2018-12-15"
start: ""
end: "Fall 2018"
at: "UAB"
position: "Graduated from The University of Alabama at Birmingham"
tags: []
category: "Work"
cover: ""
---
+++
title = ""
summary = "B.S. Biomedical Engineering<br>B.S. Computer Science<br>Minor, Mathematics<br>Science and Technology Honors Program"
author = "Abdullah Tarawneh"
date = "2018-12-15"
start = ""
end = "Fall 2018"
at = "UAB"
position = "Graduated from The University of Alabama at Birmingham"
tags = []
categories = ["Work"]
+++

View file

@ -6,14 +6,15 @@ enableGitInfo = true
[markup.tableOfContents]
startLevel = 2
endLevel = 6
ordered = true
ordered = false
[markup.goldmark.renderer]
unsafe = true
[taxonomies]
tag = "tags"
category = "category"
categories = "categories"
series = "series"
[menu]

View file

@ -11,8 +11,8 @@
<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 }}">
<script type="text/javascript" src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script>
<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">
<script type="text/javascript" src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>
{{ partial "seo.html" . }}
{{ block "head" . }}
{{ end }}

View file

@ -16,10 +16,10 @@
<div class="container">
{{ range .Pages }}
<article class="list-item">
<a class="list-item__link" href="{{ .Permalink }}">
<a class="list-item__link" href="{{ .RelPermalink }}">
{{- $cover := ($.Resources.ByType "image").GetMatch "{*cover*,*thumbnail*,*featured*}" -}}
{{ with $cover }}
<img class="list-item__image" src="{{.Permalink}}">
<img class="list-item__image" src="{{.RelPermalink}}">
{{end}}
<h2 class="list-item__title">{{ .Title }}</h2>
</a>

View file

@ -5,28 +5,8 @@
<div class="container">
<h1 class="page-title">{{ .Title }}</h1>
<p class="page-summary">{{.Summary}}</p>
{{ with .Params.cover }}
<img class="page-cover" src="{{.}}">
{{end}}
</div>
</header>
<aside class="meta section">
<div class="container">
<datetime class="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </datetime>
<p class="wordcount"> {{.WordCount}} words</p>
{{ with .Params.tags }}
<p>Keywords:</p>
<ul class="tags">
{{ range . }}
<li><a href='{{"tags/" | absURL }}{{. | urlize}}'>{{.}}</a></li>
{{ end }}
</ul>
{{ end }}
{{ .TableOfContents }}
</div>
</aside>
<section class="section content">
<div class="container">
{{ .Content }}

View file

@ -9,7 +9,7 @@
<div class="container">
{{ range .Pages }}
<article class="list-item">
<a class="list-item__link" href="{{ .Permalink }}">
<a class="list-item__link" href="{{ .RelPermalink }}">
{{ with .Params.cover }}
<img class="list-item__image" src="{{.}}">
{{end}}

View file

@ -22,8 +22,11 @@
{{ end }}
</ul>
{{ end }}
{{ if ne .TableOfContents "<nav id=\"TableOfContents\"></nav>" }}
<p class="toc-title">Table of contents:</p>
{{ .TableOfContents }}
{{ end }}
</aside>
<section class="content">
{{ .Content }}

View file

@ -1,5 +1,5 @@
{{ if .IsTranslated }}
{{ range .Translations }}
<a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
<a href="{{ .RelPermalink }}">{{ .Language.LanguageName }}</a>
{{ end }}
{{ end }}

View file

@ -1,5 +1,10 @@
{{ define "main" }}
<main>
<header class="section">
<div class="container">
<h1>Content tagged <span style="font-family: monospace">{{.Name}}</span></h1>
</div>
</header>
<section class="section">
<div class="container">
<ul>

View file

@ -4,7 +4,7 @@
{{ $style := . | toCSS | minify | fingerprint }}
<link
rel="stylesheet"
href="{{ $style.Permalink }}"
href="{{ $style.RelPermalink }}"
integrity="{{ $style.Data.Integrity }}"
media="screen">
{{ end }}
@ -13,7 +13,7 @@
{{ $js := . | minify | minify | fingerprint }}
<script
type="text/javascript"
src="{{ $js.Permalink }}"
src="{{ $js.RelPermalink }}"
integrity="{{ $js.Data.Integrity }}">
</script>
{{ end }}