June 2024 redesign #1
|
|
@ -1,7 +1,12 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
min-height: calc(var(--vh, 1vh) * 100);
|
||||
|
|
@ -13,14 +18,13 @@ main {flex-grow: 1;}
|
|||
@media (min-width: 62em) {padding: 4em 0}
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: var(--container-width);
|
||||
max-width: var(--max-container-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 1em;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: $container-width + 2em) {
|
||||
.container {
|
||||
padding: 0;
|
||||
}
|
||||
@media (min-width: 60rem) {
|
||||
.container {padding-inline: 2rem;}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container {padding-inline: 3rem;}
|
||||
}
|
||||
|
|
@ -1,17 +1,25 @@
|
|||
@mixin box-shadow {
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
|
||||
0 2px 2px rgba(0,0,0,0.11),
|
||||
0 4px 4px rgba(0,0,0,0.11),
|
||||
0 6px 8px rgba(0,0,0,0.11),
|
||||
0 8px 16px rgba(0,0,0,0.11);
|
||||
box-shadow: 0 1px 1px rgba(0,35,54,0.11),
|
||||
0 2px 2px rgba(0,35,54,0.11),
|
||||
0 4px 4px rgba(0,35,54,0.11),
|
||||
0 6px 8px rgba(0,35,54,0.11),
|
||||
0 8px 16px rgba(0,35,54,0.11);
|
||||
}
|
||||
|
||||
@mixin box-shadow-top {
|
||||
box-shadow: 0 -1px 1px rgba(0,35,54,0.11),
|
||||
0 -2px 2px rgba(0,35,54,0.11),
|
||||
0 -4px 4px rgba(0,35,54,0.11),
|
||||
0 -6px 8px rgba(0,35,54,0.11),
|
||||
0 -8px 16px rgba(0,35,54,0.11);
|
||||
}
|
||||
|
||||
@mixin box-shadow-heavy {
|
||||
box-shadow: 0 2px 1px rgba(0,0,0,0.09),
|
||||
0 4px 2px rgba(0,0,0,0.09),
|
||||
0 8px 4px rgba(0,0,0,0.09),
|
||||
0 16px 8px rgba(0,0,0,0.09),
|
||||
0 32px 16px rgba(0,0,0,0.09);
|
||||
box-shadow: 0 2px 1px rgba(0,35,54,0.09),
|
||||
0 4px 2px rgba(0,35,54,0.09),
|
||||
0 8px 4px rgba(0,35,54,0.09),
|
||||
0 16px 8px rgba(0,35,54,0.09),
|
||||
0 32px 16px rgba(0,35,54,0.09);
|
||||
}
|
||||
|
||||
@mixin focus-outline {
|
||||
|
|
|
|||
|
|
@ -1,44 +0,0 @@
|
|||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
/* typography */
|
||||
html {
|
||||
--line-height: 1.6;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.49em;
|
||||
font-weight: bold;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.07em;
|
||||
font-weight: bold;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.73em;
|
||||
font-weight: bold;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.44em;
|
||||
font-weight: bold;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
p {
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
margin-block: 1rem;
|
||||
}
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* lists */
|
||||
ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
ul {
|
||||
list-style: disc;
|
||||
}
|
||||
ol, ul {
|
||||
margin-inline-start: 1em;
|
||||
}
|
||||
li {
|
||||
margin-block: 0.5em;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
/* content */
|
||||
blockquote {
|
||||
border-inline-start: 0.25em solid black;
|
||||
padding-inline-start: 0.5em;
|
||||
display: block;
|
||||
margin-block: 1em;
|
||||
line-height: 1.6;
|
||||
p {
|
||||
|
||||
}
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
figure {
|
||||
blockquote {
|
||||
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
figcaption {
|
||||
padding: 0.5em;
|
||||
font-style: italic;
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,19 +1,31 @@
|
|||
$container-width: 60em;
|
||||
$nav-height: 4em;
|
||||
$header-height: 4em;
|
||||
$max-container-width: 1600px;
|
||||
|
||||
:root {
|
||||
--container-width: #{$container-width};
|
||||
--nav-height: #{$nav-height};
|
||||
--header-height: #{$header-height};
|
||||
--link-color: rgb(0,96,255);
|
||||
--link-visited: rgb(140, 74, 194);
|
||||
--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;
|
||||
--max-container-width: #{$max-container-width};
|
||||
|
||||
--color-background: hsl(210, 100%, 90%);
|
||||
--color-text: hsl(210, 100%, 15%);
|
||||
--color-text-muted: hsl(210, 50%, 45%);
|
||||
--color-highlight: hsl(210, 80%, 40%);
|
||||
--color-highlight-weak: hsl(210, 80%, 80%);
|
||||
--color-accent: hsl(150, 50%, 50%);
|
||||
|
||||
--color-card-background: hsl(210, 100%, 95%);
|
||||
--color-card-text: var(--color-text);
|
||||
|
||||
--color-button-background: var(--color-highlight);
|
||||
--color-button-text: white;
|
||||
--color-button-hover-background: var(--color-highlight-weak);
|
||||
--color-button-hover-text: var(--color-text);
|
||||
|
||||
--color-link: hsl(210, 100%, 50%);
|
||||
--color-link-visited: hsl(270, 50%, 50%);
|
||||
|
||||
--transition-duration: 0.4s;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
.button {
|
||||
width: 100%;
|
||||
@media (min-width: 33.75em) {
|
||||
width: max-content;
|
||||
}
|
||||
font-size: clamp(1em,2vw,1em);
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
border-radius: 0.25em;
|
||||
font-weight: 700;
|
||||
gap: 1em;
|
||||
&:link {
|
||||
|
||||
}
|
||||
|
||||
&:visited {
|
||||
|
||||
}
|
||||
|
||||
&:focus {
|
||||
padding: 1em;
|
||||
border-radius: 0.25em;
|
||||
@include focus-outline;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.button.primary {
|
||||
background: var(--primary-accent);
|
||||
color: var(--primary-accent-text);
|
||||
&:link {
|
||||
|
||||
}
|
||||
|
||||
&:visited {
|
||||
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-accent-transparent);
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
}
|
||||
}
|
||||
.button.secondary {
|
||||
background: white;
|
||||
border: 2px solid var(--primary-accent);
|
||||
color: var(--primary-accent);
|
||||
&:link {
|
||||
|
||||
}
|
||||
|
||||
&:visited {
|
||||
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-accent-transparent);
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
.smartphone {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
display: block;
|
||||
position: relative;
|
||||
max-width: 320px;
|
||||
margin: auto;
|
||||
border: 16px black solid;
|
||||
border-top-width: 60px;
|
||||
border-bottom-width: 80px;
|
||||
border-radius: 36px;
|
||||
background: black;
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 5px;
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #333;
|
||||
border-radius: 10px;
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 20%;
|
||||
aspect-ratio: 1;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -96px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #333;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.laptop {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 12px;
|
||||
background-color: black;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: calc(100% + 3em);
|
||||
height: 7%;
|
||||
left: -1.5em;
|
||||
bottom: -9%;
|
||||
background: #333;
|
||||
border-radius: 0 0 100em 100em;
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 25%;
|
||||
height: 2%;
|
||||
left: 37.5%;
|
||||
bottom: -4%;
|
||||
background: #777;
|
||||
z-index: 2;
|
||||
}
|
||||
margin-bottom: 3.7%;
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
position: relative;
|
||||
width: 100%;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
&.pc {
|
||||
img {padding: 1.1% 1.2%;}
|
||||
margin-bottom: 21.25%;
|
||||
&:after {
|
||||
height: 140%;
|
||||
background: url('/images/frames/pc.svg');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
&.macbook {
|
||||
img {padding: 2.9% 11.75% 0;}
|
||||
margin-bottom: 11.25%;
|
||||
&:after {
|
||||
height: 250%;
|
||||
background: url('/images/frames/macbook.svg');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
#work #intro {
|
||||
--headerHeight: 4em;
|
||||
--navHeight: 4em;
|
||||
color: #fff;
|
||||
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
background-image: url('/images/backgrounds/ffflux1.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
position: relative;
|
||||
padding: 1em;
|
||||
|
||||
background-image: url('/images/puzzlehead.svg');
|
||||
background-size: contain;
|
||||
background-position-x: right;
|
||||
background-position-y: bottom;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
aspect-ratio: 1;
|
||||
max-height: calc(100vh - var(--header-height) - var(--nav-height));
|
||||
max-height: calc(var(--vh) * 100 - var(--header-height) - var(--nav-height));
|
||||
@media (min-width: $container-width) {
|
||||
max-height: calc(100vh - var(--header-height));
|
||||
max-height: calc(var(--vh) * 100 - var(--header-height));
|
||||
}
|
||||
}
|
||||
.tagline {
|
||||
font-size: 1.5em;
|
||||
font-weight: 700;
|
||||
em {color: #76ff03;font-style: italic;}
|
||||
margin-bottom: 0.5em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.blurb {
|
||||
font-size: 1.1em;
|
||||
margin-bottom: 2em;
|
||||
max-width: 38ch;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.button {
|
||||
background: #06f;
|
||||
color: white;
|
||||
width: max-content;
|
||||
svg {
|
||||
width: 1.75em;
|
||||
height: 1.75em;
|
||||
margin: 0;
|
||||
}
|
||||
span {
|
||||
display: none;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
border-radius: 100em;
|
||||
@include box-shadow;
|
||||
justify-self: start;
|
||||
align-self: start;
|
||||
position: absolute;
|
||||
bottom: 1em;
|
||||
right: 1em;
|
||||
}
|
||||
@media (max-width: $container-width) {
|
||||
@media (min-height: 25em) {
|
||||
.tagline {
|
||||
font-size: clamp(1.5em,6vw,3em)
|
||||
}
|
||||
.blurb {
|
||||
font-size: clamp(1.1em, 3vw, 1.25em)
|
||||
}
|
||||
}
|
||||
@media (min-height: 31.25em) {
|
||||
@media (min-width: 32em) {
|
||||
.button {
|
||||
position: revert;
|
||||
span {display: block;}
|
||||
padding: 1em 2em;
|
||||
}
|
||||
aspect-ratio: 7.7/7;
|
||||
}
|
||||
@media (min-width: 37.5em) {
|
||||
aspect-ratio: 640 / 540
|
||||
}
|
||||
@media (min-width: 40em) {
|
||||
aspect-ratio: 720 / 600
|
||||
}
|
||||
@media (min-width: 42.5em) {
|
||||
aspect-ratio: 744 / 600
|
||||
}
|
||||
@media (min-width: 50em) {
|
||||
aspect-ratio: 800 / 620
|
||||
}
|
||||
@media (min-width: 52.5em) {
|
||||
aspect-ratio: 840 / 640
|
||||
}
|
||||
@media (min-width: 55em) {
|
||||
aspect-ratio: 880 / 640
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: $container-width) {
|
||||
@media (min-height: 25em) {
|
||||
.tagline {font-size: 3em}
|
||||
.blurb {font-size: 1.25em}
|
||||
.button {
|
||||
position: revert;
|
||||
span {display: block;}
|
||||
padding: 1em 2em;
|
||||
}
|
||||
max-height: 46em;
|
||||
}
|
||||
@media (min-height: 40em) {
|
||||
.tagline {margin-top: 1em;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
#praise {
|
||||
--color: green;
|
||||
.testimonials {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: 2em;
|
||||
justify-content: center;
|
||||
}
|
||||
.testimonial {
|
||||
display: grid;
|
||||
grid-template-areas: "b b" "a n";
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 1em;
|
||||
width: 18em;
|
||||
}
|
||||
.avatar {
|
||||
grid-area: a;
|
||||
margin-left: 1em;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
border-radius: 100em;
|
||||
background: white;
|
||||
padding: 2px;
|
||||
border: 2px solid var(--color);
|
||||
img {width: 100%; height: 100%; border-radius: 100em;}
|
||||
}
|
||||
.name {
|
||||
grid-area: n;
|
||||
align-self: center;
|
||||
}
|
||||
.bubble {
|
||||
grid-area: b;
|
||||
background: var(--color);
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
border: 0;
|
||||
border-radius: 0.5em;
|
||||
position: relative;
|
||||
grid-column: span 2;
|
||||
min-height: 80px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
width: 100%;
|
||||
}
|
||||
.bubble:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 0.5em solid transparent;
|
||||
border-top-color: var(--color);
|
||||
bottom: -1em;
|
||||
left:2.5em;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
@mixin pullquote {
|
||||
content: attr(data-pullquote);
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
display: flex;
|
||||
font-family: serif;
|
||||
color: #555;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
@mixin left {
|
||||
float: left;
|
||||
max-width: 30ch;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@mixin right {
|
||||
float: right;
|
||||
max-width: 30ch;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.has-pullquote {
|
||||
&.left:before {
|
||||
@include pullquote;
|
||||
margin-bottom: 1rem;
|
||||
@media (min-width: 40rem) {
|
||||
@include left;
|
||||
}
|
||||
@media (min-width: 80rem) {
|
||||
margin-left: -9rem;
|
||||
padding-right: 1em;
|
||||
}
|
||||
}
|
||||
&.right:before {
|
||||
@include pullquote;
|
||||
margin-bottom: 1rem;
|
||||
@media (min-width: 40rem) {
|
||||
@include right;
|
||||
}
|
||||
@media (min-width: 80rem) {
|
||||
margin-right: -9rem;
|
||||
padding-left: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
/* === 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;
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
.terminal {
|
||||
&:after {
|
||||
content: '';
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(black, 0.15),
|
||||
rgba(black, 0.15) 1px,
|
||||
transparent 2px,
|
||||
transparent 4px
|
||||
);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
position: relative;
|
||||
background: radial-gradient(circle at bottom, #455a48, black, black);
|
||||
text-shadow: 0 0 5px #C8C8C8;
|
||||
color: rgb(143, 255, 143);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
#blog {
|
||||
.list {
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 3em;
|
||||
}
|
||||
.list-item {
|
||||
&__title {
|
||||
margin: 0;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
&__meta {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: 1em;
|
||||
font-size: 0.8em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
&__date {
|
||||
margin: 0;
|
||||
}
|
||||
.tag:before {
|
||||
content: '#';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,282 +0,0 @@
|
|||
#code {
|
||||
overflow: hidden;
|
||||
p {
|
||||
line-height: 1.4;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.title {
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
&:before {
|
||||
font-size: 1em;
|
||||
font-weight: 700;
|
||||
color: #ddd;
|
||||
position: absolute;
|
||||
top: -1.25em;
|
||||
left: 0em;
|
||||
z-index: -1;
|
||||
}
|
||||
a {
|
||||
position: absolute;
|
||||
top: -1.25em;
|
||||
width: 100%;
|
||||
color: #ddd;
|
||||
display: block;
|
||||
}
|
||||
position: relative;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.explainer {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
margin: 0 auto;
|
||||
.image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
flex-shrink: 0;
|
||||
border-radius: 100em;
|
||||
}
|
||||
i {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
#intro {
|
||||
.tagline {
|
||||
font-size: clamp(1.5em,6vw,3em);
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.blurb {}
|
||||
}
|
||||
#gitea {
|
||||
margin-top: 4em;
|
||||
svg {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
.image {
|
||||
background-color: #609926;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
#github {
|
||||
margin-top: 2em;
|
||||
svg {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
.image {
|
||||
background: #1B1F23;
|
||||
color: white
|
||||
}
|
||||
}
|
||||
#liberapay {
|
||||
margin-top: 2em;
|
||||
svg {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
.image {
|
||||
background: #F6C915;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
#patreon {
|
||||
margin-top: 2em;
|
||||
svg {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
.image {
|
||||
background: #f96753;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
#paypal {
|
||||
margin-top: 2em;
|
||||
svg {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
.image {
|
||||
background: #002F85;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
#cashapp {
|
||||
margin-top: 2em;
|
||||
svg {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
.image {
|
||||
background: #00D72E;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
#projects {
|
||||
.title:before {content: '#projects';}
|
||||
.container {
|
||||
|
||||
}
|
||||
.project-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
|
||||
gap: 3em;
|
||||
margin-top: 4em;
|
||||
}
|
||||
.project {
|
||||
text-decoration: none;
|
||||
@include box-shadow;
|
||||
border-radius: 0.25em;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-areas: "cover" "title" "summary" "footer";
|
||||
grid-template-rows: auto auto auto 1fr;
|
||||
&:link {
|
||||
color: var(--link-color);
|
||||
}
|
||||
&:visited {
|
||||
color: var(--link-visited);
|
||||
}
|
||||
&:focus {
|
||||
background: unset;
|
||||
padding: unset;
|
||||
border-radius: 0.25em;
|
||||
@include focus-outline;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
@include box-shadow-heavy;
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
}
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
grid-area: cover;
|
||||
}
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
grid-area: title;
|
||||
font-size: 1.5em;
|
||||
margin: 1rem 1rem 0.5rem 1rem;
|
||||
color: initial;
|
||||
}
|
||||
&__summary {
|
||||
line-height: 1.4;
|
||||
grid-area: summary;
|
||||
max-width: 70ch;
|
||||
margin: 0 1rem;
|
||||
color: initial;
|
||||
}
|
||||
&__date, &__hint {
|
||||
align-self: end;
|
||||
justify-self: end;
|
||||
padding: 1rem 1rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
@media (min-width: 53em) {
|
||||
.codecertbot-namecheap {
|
||||
grid-column: span 3;
|
||||
display: grid;
|
||||
grid-template-areas: "cover title" "cover summary" "cover date";
|
||||
grid-template-columns: 20em 1fr;
|
||||
grid-template-rows: auto auto auto;
|
||||
height: max-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
#contributions {
|
||||
.title:before {content: '#contributions';}
|
||||
.container {
|
||||
|
||||
}
|
||||
.contribution-list {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 2em;
|
||||
margin-top: 3em;
|
||||
}
|
||||
.pr {
|
||||
display: grid;
|
||||
grid-template-areas: "icon title" "icon summary";
|
||||
grid-template-columns: 3em 1fr;
|
||||
&__link {
|
||||
grid-area: title;
|
||||
max-width: max-content;
|
||||
}
|
||||
&__icon {
|
||||
grid-area: icon;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
margin-top: -0.375em;
|
||||
path {
|
||||
fill: #9A6BEA;
|
||||
}
|
||||
}
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
&__summary {
|
||||
line-height: 1.4;
|
||||
grid-area: summary;
|
||||
max-width: 70ch;
|
||||
}
|
||||
}
|
||||
.commit {
|
||||
display: grid;
|
||||
grid-template-areas: "icon title" ". summary";
|
||||
grid-template-columns: 3em 1fr;
|
||||
@media (min-width: 30em) {
|
||||
grid-template-areas: "icon title . summary";
|
||||
grid-template-columns: 3em auto 0.5rem 1fr;
|
||||
}
|
||||
align-items: center;
|
||||
&__link {
|
||||
grid-area: title;
|
||||
max-width: max-content;
|
||||
}
|
||||
&__icon {
|
||||
grid-area: icon;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
margin-top: 0.325em;
|
||||
path {
|
||||
fill: #8B949E;
|
||||
}
|
||||
}
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
|
||||
}
|
||||
&__summary {
|
||||
line-height: 1.4;
|
||||
grid-area: summary;
|
||||
max-width: 70ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
#support {
|
||||
.title:before {content: '#support';}
|
||||
.container > p {
|
||||
line-height: 1.4;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
b {font-weight: 700;}
|
||||
}
|
||||
|
|
@ -1,290 +0,0 @@
|
|||
#work {
|
||||
overflow: hidden;
|
||||
.title {
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2em;
|
||||
&:before {
|
||||
font-size: 1em;
|
||||
font-weight: 700;
|
||||
color: #ddd;
|
||||
position: absolute;
|
||||
top: -1em;
|
||||
left: 0em;
|
||||
z-index: -1;
|
||||
}
|
||||
position: relative;
|
||||
a {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -1em;
|
||||
color: #ddd;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
#praise .title:before {
|
||||
content: '#praise';
|
||||
}
|
||||
#process .title:before {
|
||||
content: '#process';
|
||||
}
|
||||
#timeline .title:before {
|
||||
content: '#timeline';
|
||||
}
|
||||
#hireme .title:before {
|
||||
content: ''
|
||||
}
|
||||
#process {
|
||||
.title {
|
||||
strong {
|
||||
color: #06f;
|
||||
font-weight: 900;
|
||||
}
|
||||
em {
|
||||
color: green;
|
||||
font-style: italic;
|
||||
}
|
||||
br {
|
||||
@media (max-width: 24.375em) {
|
||||
display: none
|
||||
}
|
||||
}
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 1.6em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.blurb {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
#interstitial {
|
||||
padding: 3em 0;
|
||||
@media (min-width: 35em) {
|
||||
padding-top: 4em;
|
||||
}
|
||||
background: #eee;
|
||||
box-shadow:
|
||||
0px 4px 4px -4px inset rgba(0,0,0,0.5),
|
||||
0px -4px 4px -4px inset rgba(0,0,0,0.5)
|
||||
;
|
||||
strong {
|
||||
color: #06f;
|
||||
font-weight: 900;
|
||||
}
|
||||
em {
|
||||
color: green;
|
||||
font-style: italic;
|
||||
}
|
||||
.container {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.title {
|
||||
margin: 0;
|
||||
margin-bottom: 0.7em;
|
||||
}
|
||||
.blurb {
|
||||
font-size: 1.25em;
|
||||
margin-bottom: 2em;
|
||||
max-width: 45ch;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.button {
|
||||
}
|
||||
}
|
||||
.timeline {
|
||||
position: relative;
|
||||
max-width: 60em;
|
||||
margin: 0 auto;
|
||||
&::before {
|
||||
content: '?';
|
||||
position: absolute;
|
||||
bottom: -4rem;
|
||||
left: 1.25em;
|
||||
font-size: 2em;
|
||||
font-weight: 900;
|
||||
color: #ddd;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0.5rem;
|
||||
background: #ddd;
|
||||
top: -1.5rem;
|
||||
bottom: -5rem;
|
||||
left: 0.5rem;
|
||||
z-index: -1;
|
||||
border-radius: 100em;
|
||||
}
|
||||
&-item {
|
||||
padding: 1em 0;
|
||||
position: relative;
|
||||
margin-bottom: 2em;
|
||||
@media (min-width: 30em) {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"dates title"
|
||||
"at title"
|
||||
"readmore summary"
|
||||
;
|
||||
grid-template-columns: 20ch 1fr;
|
||||
grid-template-rows: auto auto auto;
|
||||
}
|
||||
margin-left: 2.5rem;
|
||||
&::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
z-index: 1;
|
||||
left: -3rem;
|
||||
border-width: 1rem;
|
||||
border-radius: 100em;
|
||||
background-color: #ddd;
|
||||
border: 0.25em solid #ddd;
|
||||
}
|
||||
&.worktrilogy::before {
|
||||
background: url("/images/logos/trilogy.png");
|
||||
background-size: cover;
|
||||
}
|
||||
&.workmastodon::before {
|
||||
background: url("/images/logos/mastodon.png");
|
||||
background-size: cover;
|
||||
background-color: #2b90d9;
|
||||
|
||||
}
|
||||
&.workpixelfed::before {
|
||||
background: url("/images/logos/pixelfed.svg");
|
||||
background-size: cover;
|
||||
background-color: pink;
|
||||
}
|
||||
&.workgo-fed::before {
|
||||
background: url("/images/logos/go-fed.png");
|
||||
background-size: cover;
|
||||
}
|
||||
&.workeqin::before {
|
||||
background: url("/images/logos/eqin.png");
|
||||
background-size: cover;
|
||||
}
|
||||
&.workuab:before {
|
||||
background: url("/images/logos/uab.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-color: white;
|
||||
}
|
||||
&__daterange {
|
||||
margin-left: 0em;
|
||||
flex-basis: 10ch;
|
||||
grid-area: dates;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
&__at {
|
||||
display: block;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
&__title {
|
||||
font-size: 1.4em;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5em;
|
||||
margin-top: 0.5em;
|
||||
align-self: center;
|
||||
grid-area: title;
|
||||
@media (min-width: 30em) {
|
||||
margin-top: -0.125em;
|
||||
}
|
||||
}
|
||||
&__summary {
|
||||
flex-basis: 30ch;
|
||||
grid-area: summary;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
&__readmore {
|
||||
width: max-content;
|
||||
height: min-content;
|
||||
grid-area: readmore;
|
||||
border-radius: 0.25em;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.workeqin, .workuab, .workpixelfed {
|
||||
.timeline-item__readmore {display: none;}
|
||||
}
|
||||
.you {
|
||||
&:before {
|
||||
background: green;
|
||||
}
|
||||
strong {
|
||||
font-weight: 700;
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
#cta {
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: start;
|
||||
}
|
||||
.title {
|
||||
font-size: 1.4em;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.4em;
|
||||
&:before {content: ''}
|
||||
}
|
||||
.blurb {
|
||||
line-height: 1.4;
|
||||
margin-bottom: 1.4em;
|
||||
strong {
|
||||
font-weight: 700;
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
.buttons {
|
||||
margin-top: 1em;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
width: 100%;
|
||||
font-size: 1.25em;
|
||||
@media (min-width: 33.75em) {
|
||||
grid-template-columns: auto auto 1fr;
|
||||
.button.resume {
|
||||
grid-row: 2;
|
||||
}
|
||||
.button.email {
|
||||
width: 100%;
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
@media (min-width: 43.25em) {
|
||||
grid-template-columns: auto auto auto 1fr;
|
||||
width: unset;
|
||||
.button {
|
||||
width: max-content;
|
||||
}
|
||||
.button.resume {
|
||||
grid-row: unset;
|
||||
}
|
||||
.button.email {
|
||||
width: max-content;
|
||||
grid-column: span 1;
|
||||
}
|
||||
}
|
||||
gap: 1em;
|
||||
svg {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
path {
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +1,5 @@
|
|||
.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;
|
||||
main.single {
|
||||
.page-title, .page-summary, .content .container > * {
|
||||
max-width: 80ch;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
|
@ -1,7 +1,61 @@
|
|||
.list-item__title {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.list-item__summary {
|
||||
font-size: 1em;
|
||||
main.blog.list {
|
||||
padding-block: 3rem;
|
||||
.categories {
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-inline-start: 0;
|
||||
li {margin-block: 0.5rem;}
|
||||
}
|
||||
}
|
||||
.posts {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
}
|
||||
.pagination {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
.page-item {
|
||||
display: inline-block;
|
||||
background: var(--color-highlight-weak);
|
||||
&:hover {
|
||||
background: var(--color-highlight);
|
||||
}
|
||||
border-radius: 100rem;
|
||||
&.active {
|
||||
background: unset;
|
||||
font-weight: bold;
|
||||
}
|
||||
&.disabled {
|
||||
display: none;
|
||||
}
|
||||
.page-link {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
text-decoration: none;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 60rem) {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"categories posts";
|
||||
gap: 2rem 4rem;
|
||||
grid-template-columns: auto 1fr;
|
||||
width: 100%;
|
||||
> header {
|
||||
grid-area: header;
|
||||
}
|
||||
.categories {
|
||||
grid-area: categories;
|
||||
}
|
||||
.posts {
|
||||
grid-area: posts;
|
||||
.h-entry {max-width: 40rem;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,72 +1,115 @@
|
|||
.blog .post .title {
|
||||
font-family: serif;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.blog .post .summary {
|
||||
font-size: 1.25em;
|
||||
font-family: serif;
|
||||
}
|
||||
|
||||
.blog .post .wordcount {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.blog .post .tags-title {
|
||||
font-variant: small-caps;
|
||||
font-weight: bold;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.blog .post .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: "#"
|
||||
main.blog.single {
|
||||
--max-container-width: 80ch;
|
||||
line-height: 1.6;
|
||||
padding-bottom: 2rem;
|
||||
article.h-entry {
|
||||
> header {
|
||||
background: var(--color-card-background);
|
||||
color: var(--color-card-text);
|
||||
padding-block: 1rem;
|
||||
.entry-title {
|
||||
margin-block-start: 1rem;
|
||||
font-family: serif;
|
||||
}
|
||||
.entry-summary {
|
||||
font-family: serif;
|
||||
}
|
||||
.h-card {
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
a {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
img.logo {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 100rem;
|
||||
}
|
||||
}
|
||||
time.dt-published {
|
||||
display: block;
|
||||
}
|
||||
#TableOfContents > ul {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
section.e-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1em 1fr 1em;
|
||||
padding-block: 1rem;
|
||||
gap: 1rem 0;
|
||||
max-width: 80ch;
|
||||
margin: 0 auto;
|
||||
@media (min-width: 55ch) {
|
||||
grid-template-columns: minmax(1em, 1fr) minmax(45ch, 70ch) minmax(1em, 1fr);
|
||||
}
|
||||
> * {
|
||||
grid-column: 2;
|
||||
margin: 0;
|
||||
}
|
||||
> img, > figure {
|
||||
grid-column: 1 / span 3;
|
||||
width: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
figcaption {
|
||||
padding: 1rem;
|
||||
background: var(--color-card-background);
|
||||
color: var(--color-card-text);
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
> blockquote {
|
||||
padding-inline-start: 0.25rem;
|
||||
border-inline-start: 0.25rem solid var(--color-highlight);
|
||||
p:only-child {margin: 0;}
|
||||
}
|
||||
.has-pullquote {
|
||||
@mixin pullquote {
|
||||
content: attr(data-pullquote);
|
||||
font-family: serif;
|
||||
display: block;
|
||||
margin-block-end: 1rem;
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-highlight);
|
||||
}
|
||||
&.left {
|
||||
&.before:before,
|
||||
&.after:after {
|
||||
@include pullquote;
|
||||
}
|
||||
}
|
||||
&.right {
|
||||
&.before:before,
|
||||
&.after:after {
|
||||
@include pullquote;
|
||||
}
|
||||
}
|
||||
@media (min-width: 40rem) {
|
||||
&.left {
|
||||
&.before:before,
|
||||
&.after:after {
|
||||
float: left;
|
||||
margin-inline-end: 1rem;
|
||||
max-width: 24ch;
|
||||
}
|
||||
}
|
||||
&.right {
|
||||
&.before:before,
|
||||
&.after:after {
|
||||
float: right;
|
||||
margin-inline-start: 1rem;
|
||||
max-width: 24ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@media (min-width: 75ch) {
|
||||
.blog .post .content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr minmax(45ch, 75ch) 1fr;
|
||||
}
|
||||
.blog .post .content > * {
|
||||
grid-column: 2;
|
||||
margin-top: 0;
|
||||
}
|
||||
.blog .post .content > figure {
|
||||
grid-column: 1 / span 3;
|
||||
margin: 2em 0;
|
||||
}
|
||||
.blog .post .content figcaption {
|
||||
max-width: 78ch;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.blog .post .content > hr {
|
||||
width: 10ch;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,252 +1,206 @@
|
|||
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 {
|
||||
|
||||
text-transform: lowercase;
|
||||
|
||||
--padding-inline: 1rem;
|
||||
--gap: 2rem;
|
||||
--border-radius: 0.5rem;
|
||||
|
||||
display: grid;
|
||||
gap: var(--gap, 1rem);
|
||||
|
||||
padding-inline: 0;
|
||||
padding-block-end: var(--gap, 2rem);
|
||||
|
||||
#about {display: contents;}
|
||||
|
||||
#hcard {
|
||||
background: var(--color-card-background);
|
||||
color: var(--color-card-text);
|
||||
border-radius: var(--border-radius);
|
||||
--avatar-size: 7.5rem;
|
||||
|
||||
> .section-title {
|
||||
margin-block: 0;
|
||||
padding-block: 1rem;
|
||||
padding-inline: var(--padding-inline, 1rem);
|
||||
}
|
||||
|
||||
> header {
|
||||
background-image: url("/images/sunset.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
width: 100%;
|
||||
max-height: 20rem;
|
||||
aspect-ratio: 2;
|
||||
|
||||
position: relative;
|
||||
.u-photo {
|
||||
position: absolute;
|
||||
top: calc(100% - var(--avatar-size) / 2);
|
||||
left: var(--padding-inline, 1rem);
|
||||
width: var(--avatar-size, 7.5rem);
|
||||
height: var(--avatar-size, 7.5rem);
|
||||
aspect-ratio: 1;
|
||||
background: #ddd;
|
||||
border: 0.5rem solid #ddd;
|
||||
box-sizing: border-box;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
margin-block-end: calc(var(--avatar-size) / 2);
|
||||
|
||||
}
|
||||
|
||||
.info {
|
||||
padding-inline: var(--padding-inline, 1rem);
|
||||
}
|
||||
|
||||
.p-name {
|
||||
font-size: 1.5rem;
|
||||
font-variant: small-caps;
|
||||
font-weight: bold;
|
||||
margin-block-start: calc(var(--avatar-size) / 2 + 0.5rem);
|
||||
margin-block-end: 0;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
article#quotes {
|
||||
background: #ddd;
|
||||
> .title {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
article#mastodon {
|
||||
background: #3088d4;
|
||||
color: white;
|
||||
padding: 2em 1em;
|
||||
a {
|
||||
.u-uid {
|
||||
font-family: monospace;
|
||||
font-size: 1rem;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.p-note {
|
||||
margin-block: 1rem;
|
||||
}
|
||||
|
||||
#contact {
|
||||
|
||||
margin-block: 3rem;
|
||||
padding-inline: var(--padding-inline, 1rem);
|
||||
> .section-title {
|
||||
margin-block-start: 2rem;
|
||||
margin-block-end: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
#links {
|
||||
padding-inline: var(--padding-inline, 1rem);
|
||||
padding-block-end: 3rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#quotes {
|
||||
padding-inline: var(--padding-inline, 1rem);
|
||||
padding-block: 1rem;
|
||||
margin-block-start: var(--gap, 1rem);
|
||||
background: var(--color-card-background);
|
||||
color: var(--color-card-text);
|
||||
border-radius: var(--border-radius);
|
||||
> .section-title {
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.metadata {
|
||||
dt {
|
||||
font-variant: small-caps;
|
||||
font-weight: bold;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(0,0,0,0.25);
|
||||
}
|
||||
dd {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.quote {
|
||||
margin-inline: 0;
|
||||
blockquote {
|
||||
margin: 0;
|
||||
border-inline-start: 4px solid var(--color-primary-highlight);
|
||||
padding-inline-start: 0.5rem;
|
||||
}
|
||||
cite {
|
||||
padding-inline-start: calc(0.5rem + 4px);
|
||||
&:before {
|
||||
content: '— ';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article#now {
|
||||
background: white;
|
||||
}
|
||||
article#todo {
|
||||
background: white;
|
||||
#deeds {
|
||||
background: var(--color-card-background);
|
||||
color: var(--color-card-text);
|
||||
border-radius: var(--border-radius);
|
||||
padding-inline: var(--padding-inline, 1rem);
|
||||
padding-block: 1rem;
|
||||
}
|
||||
|
||||
@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%;
|
||||
#done {
|
||||
> .section-title {
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 1rem;
|
||||
}
|
||||
article.h-card {
|
||||
.metadata {
|
||||
padding-inline: 0.75em;
|
||||
#mastodon {
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
#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;
|
||||
}
|
||||
|
||||
#updates {
|
||||
background: var(--color-card-background);
|
||||
color: var(--color-card-text);
|
||||
border-radius: var(--border-radius);
|
||||
padding-inline: var(--padding-inline, 1rem);
|
||||
}
|
||||
|
||||
#activity {
|
||||
header {
|
||||
display: flex;
|
||||
h2 {
|
||||
display: inline-block;
|
||||
}
|
||||
align-items: end;
|
||||
p {
|
||||
grid-column: 2 / span 2;
|
||||
font-size: 1.25rem;
|
||||
max-width: 35ch;
|
||||
margin: 0;
|
||||
place-self: center start;
|
||||
margin-block-end: 1.5rem;
|
||||
}
|
||||
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;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 60rem) {
|
||||
margin-top: 1rem;
|
||||
#about {
|
||||
--gap: 1rem;
|
||||
padding-inline: 2rem;
|
||||
grid-template-areas:
|
||||
"hcard deeds"
|
||||
"quotes deeds"
|
||||
"updates updates";
|
||||
grid-template-columns: 20rem 1fr;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
#hcard {
|
||||
grid-area: hcard;
|
||||
}
|
||||
#quotes {
|
||||
grid-area: quotes;
|
||||
margin-block-start: 0;
|
||||
}
|
||||
#deeds {
|
||||
|
||||
}
|
||||
article#now {
|
||||
padding: 2em;
|
||||
height: 320px;
|
||||
}
|
||||
article#todo {
|
||||
padding: 2em;
|
||||
grid-area: deeds;
|
||||
}
|
||||
#updates {
|
||||
grid-area: updates;
|
||||
}
|
||||
}
|
||||
|
||||
// @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 {
|
||||
padding-inline-start: 0;
|
||||
&:before {
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
padding-inline: 3rem;
|
||||
grid-template-areas:
|
||||
"hcard deeds updates"
|
||||
"quotes deeds updates";
|
||||
grid-template-columns: 20rem 1fr 20rem;
|
||||
}
|
||||
|
||||
#wiki {
|
||||
max-width: 120em;
|
||||
margin-inline: auto;
|
||||
h1 {
|
||||
margin-bottom: 0.25em;
|
||||
font-family: serif;
|
||||
border-bottom: 1px solid currentColor;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
border-bottom: 1px solid currentColor;
|
||||
padding-bottom: 1rem;
|
||||
font-family: serif;
|
||||
}
|
||||
#TableOfContents {
|
||||
display: contents;
|
||||
&::before {
|
||||
content: "Contents";
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
24
assets/scss/layouts/partials/h-entry.scss
Normal file
24
assets/scss/layouts/partials/h-entry.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
.h-entry {
|
||||
.tags {
|
||||
padding-inline-start: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: 1rem;
|
||||
li {
|
||||
display: inline;
|
||||
}
|
||||
a {
|
||||
background: var(--color-highlight-weak);
|
||||
text-decoration: none;
|
||||
font-family: monospace;
|
||||
padding: 0.25rem;
|
||||
&:before {
|
||||
content: '#';
|
||||
}
|
||||
&:hover {
|
||||
background: var(--color-highlight);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,94 +1,11 @@
|
|||
.site-footer {
|
||||
background: #fff;
|
||||
color: #212121;
|
||||
padding: 2em 0 calc(2em + 4em);
|
||||
@media (min-width: 960px) {
|
||||
padding: 2em 0;
|
||||
}
|
||||
--padding-block: 2rem;
|
||||
hr {
|
||||
display: none;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
gap: 2em;
|
||||
}
|
||||
.external-links {
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6,1fr);
|
||||
gap: 1em;
|
||||
margin-top: 2rem;
|
||||
a {
|
||||
width: 2em;
|
||||
aspect-ratio: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
i {font-size: 1.6em;}
|
||||
}
|
||||
.footer-copy {
|
||||
font-family: monospace;
|
||||
width: 100%;
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
font-size: 1.21em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
h2 {
|
||||
font-weight: 700;
|
||||
font-size: 1.1em;
|
||||
margin-bottom: 0.7rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
font-size: 1em;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
p {
|
||||
line-height: 1.4;
|
||||
max-width: 55ch;
|
||||
}
|
||||
a h3 {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.git-lastcommit {
|
||||
margin-bottom: 0.7rem;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"time time"
|
||||
"hash subj";
|
||||
grid-template-columns: max-content 1fr;
|
||||
time {
|
||||
grid-area: time;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
p {
|
||||
grid-area: subj;
|
||||
padding: 1em;
|
||||
}
|
||||
a {
|
||||
grid-area: hash;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 0.25rem;
|
||||
font-family: monospace;
|
||||
}
|
||||
}
|
||||
background: var(--color-text);
|
||||
color: var(--color-background);
|
||||
padding-block-start: var(--padding-block, 2rem);
|
||||
padding-bottom: calc(var(--nav-height, 4rem) + var(--padding-block, 2rem));
|
||||
a {word-wrap: break-word;}
|
||||
}
|
||||
|
|
@ -1,136 +1,151 @@
|
|||
.site-header {
|
||||
z-index: 10;
|
||||
box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
|
||||
a {
|
||||
text-transform: lowercase;
|
||||
padding-block: 1rem;
|
||||
background: var(--color-background);
|
||||
.container {
|
||||
height: 4rem;
|
||||
display: grid;
|
||||
place-items: center start;
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
.support {
|
||||
--icon-size: 2rem;
|
||||
svg {
|
||||
font-size: var(--icon-size, 2rem);
|
||||
}
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--color-accent);
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
background-color: var(--color-button-hover-background);
|
||||
color: var(--color-button-hover-text);
|
||||
}
|
||||
border-radius: 0.75rem;
|
||||
|
||||
@media (min-width: 400px) {
|
||||
span {display: unset;}
|
||||
grid-template-columns: var(--icon-size, 1rem) auto;
|
||||
width: unset;
|
||||
gap: 1rem;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.site-masthead {
|
||||
display: inline-flex;
|
||||
gap: 1rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
&:link {
|
||||
|
||||
font-weight: bold;
|
||||
img {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
border-radius: 0;
|
||||
transition-duration: 0.4s;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: var(--primary-accent-transparent);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
p {
|
||||
background-color: var(--color-highlight-weak);
|
||||
color: var(--color-highlight);
|
||||
border-radius: 100rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
background: var(--ui-background);
|
||||
color: var(--ui-text);
|
||||
|
||||
}
|
||||
|
||||
.site-masthead {
|
||||
display: flex;
|
||||
flex-flow: row-reverse;
|
||||
align-items: center;
|
||||
padding: 1em 0;
|
||||
gap: 1em;
|
||||
flex: 1;
|
||||
@media (min-width: $container-width) {
|
||||
flex: unset;
|
||||
}
|
||||
}
|
||||
.site-icon {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border-radius: 100em;
|
||||
}
|
||||
.site-title {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
flex-grow: 1;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
background: var(--ui-background);
|
||||
color: var(--ui-text-muted);
|
||||
z-index: 2;
|
||||
ul {
|
||||
list-style: none;
|
||||
height: var(--nav-height);
|
||||
max-width: $container-width;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
li {
|
||||
.site-nav {
|
||||
--icon-size: 3rem;
|
||||
--icon-size-active: 3rem;
|
||||
--icon-size-hover: 3rem;
|
||||
height: var(--nav-height, 4rem);
|
||||
padding-block-end: 0.5rem;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
flex: 1;
|
||||
border-bottom: 4px solid var(--ui-background-track);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
}
|
||||
li {
|
||||
display: contents;
|
||||
&.active {
|
||||
color: var(--ui-text-bold);
|
||||
border-bottom: 6px solid var(--primary-accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
a {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
font-weight: bold;
|
||||
color: var(--color-highlight);
|
||||
svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
&:link {
|
||||
|
||||
}
|
||||
|
||||
&:visited {
|
||||
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: var(--primary-accent-transparent);
|
||||
padding: unset;
|
||||
border-radius: unset;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
font-size: var(--icon-size-active, 2rem)
|
||||
}
|
||||
}
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--nav-height);
|
||||
transition-duration: var(--transition-duration);
|
||||
svg {
|
||||
transition-duration: var(--transition-duration);
|
||||
padding: 0.0rem 0.5rem;
|
||||
font-size: var(--icon-size, 2rem);
|
||||
border-radius: 100rem;
|
||||
}
|
||||
span {
|
||||
line-height: 1;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--color-highlight);
|
||||
svg {
|
||||
font-size: var(--icon-size-hover, 2.5rem);
|
||||
background-color: var(--color-highlight-weak);
|
||||
}
|
||||
}
|
||||
}
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text);
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-shadow: 0 -1px 3px rgba(0,35,54,0.12), 0 -1px 2px rgba(0,35,54,0.24);
|
||||
}
|
||||
box-shadow: 0px -2px 2px rgba(0,0,0,0.2);
|
||||
@media (min-width: $container-width) {
|
||||
position: unset;
|
||||
bottom: unset;
|
||||
left: unset;
|
||||
flex-grow: unset;
|
||||
width: 20em;
|
||||
box-shadow: unset;
|
||||
@media (min-width: 768px) {
|
||||
--nav-height: 4rem;
|
||||
.site-nav {
|
||||
position: unset;
|
||||
grid-area: nav;
|
||||
display: inline-flex;
|
||||
background: unset;
|
||||
width: unset;
|
||||
place-self: end;
|
||||
box-shadow: unset;
|
||||
padding-block-end: unset;
|
||||
ul {gap: 1rem;}
|
||||
}
|
||||
.container {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-areas: "mast nav button";
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $container-width) {
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
body {
|
||||
--nav-height: 5rem;
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
figure.quote {
|
||||
border: 1px solid currentColor;
|
||||
padding: 1rem;
|
||||
margin-block: 1rem;
|
||||
font-family: serif;
|
||||
position: relative;
|
||||
blockquote {
|
||||
border: 0;
|
||||
margin-block-end: 0;
|
||||
&:before {
|
||||
content: '“';
|
||||
position: absolute;
|
||||
inset-block-start: 0.25rem;
|
||||
inset-inline-start: 0.5rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
figcaption {
|
||||
font-size: 0.8em;
|
||||
cite {
|
||||
&:before {
|
||||
content: '— ';
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
.h-card.full {
|
||||
--border-radius: 10px;
|
||||
height: min-content;
|
||||
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;
|
||||
}
|
||||
.p-name {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.u-uid {
|
||||
text-decoration: none;
|
||||
font-family: monospace;
|
||||
color: inherit;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.p-note {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
.metadata {
|
||||
padding-block-end: 2rem;
|
||||
display: grid;
|
||||
max-width: calc(33ch + 1em);
|
||||
margin: 0 auto;
|
||||
gap: 1em;
|
||||
.field {
|
||||
display: grid;
|
||||
place-items: start;
|
||||
gap: 0.5em;
|
||||
padding: 0 1em;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
font-variant: small-caps
|
||||
}
|
||||
dd {
|
||||
|
||||
}
|
||||
}
|
||||
@media (min-width: 40em) {
|
||||
display: grid;
|
||||
grid-template-columns: 20em 1fr;
|
||||
grid-template-areas:
|
||||
"header meta"
|
||||
"info meta";
|
||||
header {
|
||||
width: 20em;
|
||||
grid-area: header;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.info {
|
||||
grid-area: info;
|
||||
}
|
||||
.metadata {
|
||||
grid-area: meta;
|
||||
padding-block-start: 2em;
|
||||
max-width: unset;
|
||||
width: 100%;
|
||||
padding-left: 2em;
|
||||
background: #e6e6e6;
|
||||
border-top-right-radius: var(--border-radius, 10px);
|
||||
border-bottom-right-radius: var(--border-radius, 10px);
|
||||
}
|
||||
max-width: 40em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
8
assets/scss/layouts/taxonomy/category.scss
Normal file
8
assets/scss/layouts/taxonomy/category.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
main.category {
|
||||
.entries {
|
||||
.container {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,56 +1,22 @@
|
|||
@import "base/reset.scss";
|
||||
@import "base/variables.scss";
|
||||
@import "base/mixins.scss";
|
||||
@import "base/sections.scss";
|
||||
@import "base/text.scss";
|
||||
@import "base/layout.scss";
|
||||
|
||||
@import "base/links.scss";
|
||||
@import "libraries/photoswipe.scss";
|
||||
|
||||
@import "components/pullquote.scss";
|
||||
@import "components/button.scss";
|
||||
@import "components/intro.scss";
|
||||
@import "components/praise.scss";
|
||||
@import "components/devices.scss";
|
||||
@import "components/terminal.scss";
|
||||
|
||||
@import "layouts/partials/site-header.scss";
|
||||
@import "layouts/partials/site-footer.scss";
|
||||
@import "layouts/partials/breadcrumbs.scss";
|
||||
|
||||
@import "layouts/shortcodes/figquote.scss";
|
||||
@import "layouts/shortcodes/hcard-full.scss";
|
||||
|
||||
@import "layouts/_default/single.scss";
|
||||
@import "layouts/_default/list.scss";
|
||||
|
||||
@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";
|
||||
@import "content/blog.scss";
|
||||
@import "layouts/blog/list.scss";
|
||||
@import "layouts/blog/single.scss";
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
main {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
main:before {
|
||||
content: '...what, you actually use your browser at this width? god, what a waste of space...';
|
||||
position: fixed;
|
||||
left: 5%;
|
||||
bottom: 1em;
|
||||
max-width: 40ch;
|
||||
}
|
||||
main:after {
|
||||
content: 'although, i kinda want to create a website that actually makes use of it... one day, maybe?';
|
||||
position: fixed;
|
||||
right: 5%;
|
||||
bottom: 1em;
|
||||
max-width: 40ch;
|
||||
}
|
||||
}
|
||||
@import "layouts/partials/h-entry.scss";
|
||||
|
||||
@import "layouts/taxonomy/category.scss";
|
||||
161
content/_index.html
Normal file
161
content/_index.html
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
+++
|
||||
title = "Abdullah Tarawneh"
|
||||
summary = "Abdullah Tarawneh is an information architect, designer, developer, photographer, and all-around creative, especially for the web."
|
||||
tags = ["abdullah", "tarawneh", "birmingham", "hoover", "alabama", "design", "designer", "web", "developer", "freelance", "freelancer", "photography", "photographer", "technical writer", "creative", "consultant"]
|
||||
layout = "custom_html"
|
||||
+++
|
||||
|
||||
<main class="index container">
|
||||
<div id="about">
|
||||
<section class="h-card vcard" id="hcard">
|
||||
<h2 class="section-title">h-card</h2>
|
||||
<header>
|
||||
<img class="u-logo u-photo logo photo" width=160 height=160 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 uid" rel="self">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>. <span class="p-gender-identity">Nonbinary</span> ace (<span class="p-pronouns"><span class="p-x-pronoun-nominative p-pronoun-nominative p-pronoun">they</span>/<span class="p-x-pronoun-oblique p-pronoun-oblique">them</span>)</p>
|
||||
</div>
|
||||
<section id="contact">
|
||||
<h3 class="section-title">Contact me</h3>
|
||||
<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 url" href="https://mastodon.social/@trwnh">mastodon.social/@trwnh</a></dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
<section id="links">
|
||||
<h3 class="section-title">Other links</h3>
|
||||
<dl class="metadata">
|
||||
<div class="field">
|
||||
<dt>Personal website</dt>
|
||||
<dd><a class="u-url url" href="https://trwnh.com" rel="me">trwnh.com</a></dd>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<dt>Personal code repos</dt>
|
||||
<dd><a class="u-url url" href="https://git.trwnh.com" rel="me">git.trwnh.com</a></dd>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<dt>Github</dt>
|
||||
<dd><a class="u-url url" href="https://github.com/trwnh" rel="me">github.com/trwnh</a></dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="quotes">
|
||||
<h2 class="section-title">Things people have said about me</h2>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="deeds">
|
||||
|
||||
<section id="done">
|
||||
<h2 class="section-title">Notable work</h2>
|
||||
<section id="mastodon">
|
||||
<h3 class="section-title">Mastodon documentation</h3>
|
||||
<img src="/work/mastodon/mastodocs.jpg" alt="mastodon documentation">
|
||||
<p>In August 2019, a offered their services to completely revamp the documentation for Mastodon, while also writing or rewriting significant portions of it. From the beginning, they developed an information architecture based on the various user personas that would be reading the documentation -- end users, administrators, contributors, client developers, and protocol implementers. a developed each persona into a section with its own narrative journey. Following this, they wrote out the missing parts of the documentation.</p>
|
||||
<p>
|
||||
a was contracted again in late 2022 to help update the content of the documentation for the monumentous v4.0 update of Mastodon.</p>
|
||||
<a href="/work/mastodon">Read more ></a>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="doing">
|
||||
<h2 class="section-title">Present involvement</h2>
|
||||
<section id="socialweb">
|
||||
<h3 class="section-title">social web so-called "expert"</h3>
|
||||
<p>a has been active in the world of open source and free software since at least 2017. As a power user, a quickly got involved in discussions on the GitHub issue tracker for Mastodon, Pixelfed, and other fediverse projects. a is a member of the Social Web Community Group at the W3C, and is also active on the <a href="https://socialhub.activitypub.rocks/u/trwnh/summary">SocialHub forum</a> for the ActivityPub community.</p>
|
||||
|
||||
<section>
|
||||
<h4>Fediverse Enhancement Proposals</h4>
|
||||
<ul>
|
||||
<li><a href="https://w3id.org/fep/7888">FEP-7888: Demystifying the context property</a></li>
|
||||
<li><a href="https://w3id.org/fep/7458">FEP-7458: Using the replies collection</a></li>
|
||||
<li><a href="https://w3id.org/fep/0391">FEP-0391: Special collection proofs</a></li>
|
||||
<li><a href="https://w3id.org/fep/fb2a">FEP-fb2a: Actor metadata</a></li>
|
||||
<li><a href="https://w3id.org/fep/888d">FEP-888d: Using https://w3id.org/fep as a base for FEP-specific namespaces</a></li>
|
||||
<li><a href="https://w3id.org/fep/bad1">FEP-bad1: Object history collection</a></li>
|
||||
<li><a href="https://w3id.org/fep/7502">FEP-7502: Limiting visibility to authenticated actors</a></li>
|
||||
<li><a href="https://w3id.org/fep/e229">FEP-e229: Best practices for extensibility</a></li>
|
||||
<li><a href="https://w3id.org/fep/a070">FEP-a070: Ordered properties for plain JSON consumers</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="todo">
|
||||
<h2 class="section-title">Future directions</h2>
|
||||
<section id="untitled-social-app">
|
||||
<h3 class="section-title">untitled social app</h3>
|
||||
<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 or elsewhere.</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="updates">
|
||||
<section id="news">
|
||||
<h2>Latest news</h2>
|
||||
<p>I am looking for work! <a href="/work">View my work page</a> for more about what I can do.</p>
|
||||
</section>
|
||||
|
||||
<section id="changelog">
|
||||
<h2>Latest changes</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p>June 2024: New site redesign!</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="activity" class="h-feed">
|
||||
<header>
|
||||
<h2>Latest posts</h2>
|
||||
<p><a href="/blog">See more posts</a></p>
|
||||
</header>
|
||||
{{< index/latest-posts 7 >}}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
+++
|
||||
title = "Abdullah Tarawneh"
|
||||
summary = "**Abdullah Tarawneh** is an information architect, designer, developer, photographer, and all-around creative, especially for the web."
|
||||
tags = ["abdullah", "tarawneh", "birmingham", "hoover", "alabama", "design", "designer", "web", "developer", "freelance", "freelancer", "photography", "photographer", "technical writer", "creative", "consultant"]
|
||||
+++
|
||||
|
||||
## h-card
|
||||
|
||||
{{< hcard-full >}}
|
||||
|
||||
## Professional work
|
||||
|
||||
<span style="margin-left: 2em; font-style: italic">Main page: [Work](/work)</span>
|
||||
|
||||
Abdullah Tarawneh is currently available for work.
|
||||
|
||||
### Mastodon documentation
|
||||
|
||||
<span style="margin-left: 2em; font-style: italic">Main page: [Mastodon](/work/mastodon)</span>
|
||||
|
||||
In August 2019, Abdullah Tarawneh offered their services to completely revamp the documentation for Mastodon, while also writing or rewriting significant portions of it. From the beginning, they developed an information architecture based on the various user personas that would be reading the documentation -- end users, administrators, contributors, client developers, and protocol implementers. Abdullah Tarawneh developed each persona into a section with its own narrative journey. Following this, they wrote out the missing parts of the documentation.
|
||||
|
||||
Abdullah Tarawneh was contracted again in late 2022 to help update the content of the documentation for the monumentous v4.0 update of Mastodon.
|
||||
|
||||
### Senior Technical Writer / Product Knowledge Curator at Trilogy
|
||||
|
||||
<span style="margin-left: 2em; font-style: italic">Main page: [Trilogy](/work/trilogy)</span>
|
||||
|
||||
From May 2021 through December 2021, Abdullah Tarawneh was contracted as a Product Knowledge Curator for Trilogy. In this role, they managed the knowledge bases of numerous products all at once. Being responsible for several products under the banner of Central Support meant that they had to quickly and rapidly learn new products with limited information. They were tasked with analyzing customer support tickets one by one, in order to document the problems and solutions faced by actual customers. The resulting analysis would be used to write a clear and concise solution article, and the troubleshooting steps involved in reaching that solution would be compiled across several tickets into a troubleshooting article that would aid agents in disambiguating similar issues. Based on these articles, Abdullah Tarawneh created training units within a learning management system consisting of either a test or a task based on each article/ticket pair.
|
||||
|
||||
## Free software contributions
|
||||
|
||||
<span style="margin-left: 2em; font-style: italic">Main page: [Code](/code)</span>
|
||||
|
||||
Abdullah Tarawneh has been active in the world of open source and free software since at least 2017.
|
||||
|
||||
### Involvement with the fediverse
|
||||
|
||||
As a power user, Abdullah Tarawneh quickly got involved in discussions on the GitHub issue tracker for Mastodon, Pixelfed, and other fediverse projects.
|
||||
|
||||
## Quotes about the subject
|
||||
|
||||
{{< figquote cite="a former classmate" >}}
|
||||
It's scary how much you know.
|
||||
{{< /figquote >}}
|
||||
|
||||
{{< figquote cite="an electrician" >}}
|
||||
You're the first person I've met that keeps a spreadsheet of their lightbulbs.
|
||||
{{< /figquote >}}
|
||||
|
||||
{{< figquote cite="a social networking acquaintance" >}}
|
||||
VERY MUCH not garbage [...] a worthwhile human
|
||||
{{< /figquote >}}
|
||||
|
||||
{{< figquote cite="a professional colleague" >}}
|
||||
Honestly, I trust your judgement more than I trust my own.
|
||||
{{< /figquote >}}
|
||||
6
content/authors/Abdullah Tarawneh/_index.md
Normal file
6
content/authors/Abdullah Tarawneh/_index.md
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
+++
|
||||
title = "Abdullah Tarawneh"
|
||||
[[resources]]
|
||||
name = "avatar"
|
||||
src = "avatar.png"
|
||||
+++
|
||||
BIN
content/authors/Abdullah Tarawneh/avatar.png
Normal file
BIN
content/authors/Abdullah Tarawneh/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
|
@ -2,9 +2,12 @@
|
|||
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"
|
||||
date = 2019-10-30
|
||||
tags = ["namecheap", "certbot", "dns-01", "python", "letsencrypt"]
|
||||
categories = ["Code"]
|
||||
aliases = [
|
||||
"/code/namecheap",
|
||||
]
|
||||
+++
|
||||
|
||||
## The problem
|
||||
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
|
|
@ -2,9 +2,12 @@
|
|||
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"
|
||||
date = 2019-11-13
|
||||
tags = ["mastodon", "api", "pleroma", "liberapay", "contribution", "pull request", "github"]
|
||||
categories = ["Code"]
|
||||
aliases = [
|
||||
"/code/liberapay-pleroma",
|
||||
]
|
||||
+++
|
||||
|
||||
pleroma is compatible with mastodon api.
|
||||
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
|
|
@ -2,9 +2,12 @@
|
|||
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"
|
||||
date = 2019-02-18
|
||||
tags = ["mastomods", "mastodon", "css", "userstyles", "tweaks"]
|
||||
categories = ["Code"]
|
||||
aliases = [
|
||||
"/code/mastomods",
|
||||
]
|
||||
+++
|
||||
|
||||
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.
|
||||
|
|
@ -2,9 +2,12 @@
|
|||
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. Let’s be real here. No one has a “right” to profit."
|
||||
author = "Abdullah Tarawneh"
|
||||
date = "2015-07-08"
|
||||
date = 2015-07-08
|
||||
tags = ["capitalism", "profit", "music", "music industry", "piracy", "distribution", "access"]
|
||||
categories = ["Blog"]
|
||||
categories = ["Uncategorized"]
|
||||
[[resources]]
|
||||
name = "featured"
|
||||
src = "download.png"
|
||||
+++
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 51 KiB |
|
|
@ -1,10 +1,13 @@
|
|||
+++
|
||||
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"
|
||||
date = 2017-04-30
|
||||
author = "Abdullah Tarawneh"
|
||||
tags = ["obs", "open broadcaster software", "obs studio", "keyboard shortcut", "edit transform", "pull request", "github"]
|
||||
categories = ["Code"]
|
||||
aliases = [
|
||||
"/code/obs-edit-transform",
|
||||
]
|
||||
+++
|
||||
|
||||
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.
|
||||
|
|
@ -2,15 +2,15 @@
|
|||
title = "I wish personal websites were actually personal."
|
||||
summary = "When I say personal website, I do not mean a page or portfolio for potential employers or clients to hire you."
|
||||
author = "Abdullah Tarawneh"
|
||||
date = "2023-03-18"
|
||||
date = 2023-03-18
|
||||
tags = ["personal websites", "portfolios", "services", "branding", "marketing", "capitalism"]
|
||||
categories = ["Blog"]
|
||||
categories = ["Uncategorized"]
|
||||
+++
|
||||
|
||||
<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>
|
||||
|
||||
<p class="has-pullquote before right" data-pullquote="The current internet is highly commercialized and focused on promoting products or services.">There is shockingly little of the latter content among what I can find. Virtually everyone is offering their advice for the former. The personal has become the professional. And, well... can you blame people, really? The current internet is highly commercialized and focused on promoting products or services. Sure, a website is ostensibly about conveying information, but a lot of that information is intended to get you to do something -- usually something representing a financial transaction.</p>
|
||||
|
||||
<p class="has-pullquote after right" data-pullquote="It's always “build your brand” or “showcase your portfolio” [...] Everyone is always talking about the sales funnel or the call to action or whatever.">No one seems to have any tips or hints on how to make a truly personal website. It's always "build your brand" or "showcase your portfolio" or some other transparently profit-motivated initiative. Everyone is always talking about the sales funnel or the call to action or whatever. It's just <em>assumed</em> you are also like this.</p>
|
||||
<p class="has-pullquote before right" data-pullquote="It's always “build your brand” or “showcase your portfolio” [...] Everyone is always talking about the sales funnel or the call to action or whatever.">No one seems to have any tips or hints on how to make a truly personal website. It's always "build your brand" or "showcase your portfolio" or some other transparently profit-motivated initiative. Everyone is always talking about the sales funnel or the call to action or whatever. It's just <em>assumed</em> you are also like this.</p>
|
||||
|
||||
<p>How many websites are basically just "Hello I'm $NAME and I'm a $ROLE"? That doesn't really tell me much about a person. It doesn't really stand out at all. But what should you do instead? There's so little that you can take as an example. Perhaps a stroll through something like Neocities might help, but you'd have to look for quite a while.</p>
|
||||
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
|
@ -1,12 +1,24 @@
|
|||
+++
|
||||
title = "PhotoBucketGrabber"
|
||||
summary = "Download all your photos from PhotoBucket using this Python script."
|
||||
summary = "[OBSOLETE] Download all your photos from PhotoBucket using this Python script."
|
||||
author = "Abdullah Tarawneh"
|
||||
date = "2019-03-17"
|
||||
date = 2019-03-17
|
||||
tags = ["python", "photobucket", "automation", "scripting", "archive", "export", "download"]
|
||||
categories = ["Code"]
|
||||
aliases = [
|
||||
"/code/photobucketgrabber",
|
||||
]
|
||||
+++
|
||||
|
||||
<aside style="background: #ffcccc; padding: 1em; border-left: 4px solid red;">
|
||||
<p style="font-weight: bold; display: flex; align-items: center; gap: 0.5em;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5" width=20 height=20>
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
This is no longer needed.</p>
|
||||
<p>Photobucket now provides this functionality natively.</p>
|
||||
</aside>
|
||||
|
||||
## The problem
|
||||
|
||||
I had an old PhotoBucket account that I wanted to archive and delete. However, it would take an extremely long time to manually save each photo and recreate any albums' folder structure.
|
||||
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
|
|
@ -2,9 +2,12 @@
|
|||
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"
|
||||
date = 2015-05-01
|
||||
tags = ["grooveshark", "music", "music industry", "culture", "user generated content", "capitalism", "copyright"]
|
||||
categories = ["Blog"]
|
||||
categories = ["Uncategorized"]
|
||||
[[resources]]
|
||||
name = "featured"
|
||||
src = "rip.png"
|
||||
+++
|
||||
|
||||
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 RIAA’s website.
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
|
@ -1,10 +1,13 @@
|
|||
+++
|
||||
title = "salatime"
|
||||
summary = "Basic terminal script to print out daily prayer times for Birmingham, AL."
|
||||
date = "2019-05-09"
|
||||
summary = "[OBSOLETE] 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"]
|
||||
aliases = [
|
||||
"/code/salatime",
|
||||
]
|
||||
+++
|
||||
|
||||
<aside style="background: #ffcccc; padding: 1em; border-left: 4px solid red;">
|
||||
|
|
@ -2,12 +2,12 @@
|
|||
title = "Twitter is no longer a social network."
|
||||
summary = "That service that started out as a way to send status updates to your friends has been replaced by Twitter, a bloated, lumbering mess trying to force-feed you a stale diet of whatever Content™ floats to the top of the river of shit."
|
||||
author = "Abdullah Tarawneh"
|
||||
date = "2018-04-27"
|
||||
date = 2018-04-27
|
||||
tags = ["twitter", "social network", "social media", "analysis", "capitalism"]
|
||||
categories = ["Blog"]
|
||||
categories = ["Communication"]
|
||||
[[resources]]
|
||||
name = 'cover'
|
||||
src = 'failwhale.png'
|
||||
name = "featured"
|
||||
src = "failwhale.png"
|
||||
+++
|
||||
|
||||
<blockquote><p>"We are not a social network. We do not benefit from social graphs," Dorsey said. "People come to us when they're interested in events happening in the world or with a niche interest. We've been biasing a lot more of the service towards interest and topics."</p></blockquote>
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
+++
|
||||
title = "Free software contributions"
|
||||
summary = "I like to participate in the world of free and libre open source software."
|
||||
tags = ["abdullah tarawneh", "coding", "code", "open source", "free software", "github", "pull request", "dev", "development", "project", "projects"]
|
||||
weight = 20
|
||||
+++
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
+++
|
||||
title = "Design portfolio"
|
||||
summary = "UI / UX ideas"
|
||||
tags = []
|
||||
weight = 30
|
||||
draft = true
|
||||
+++
|
||||
2
content/services/_index.md
Normal file
2
content/services/_index.md
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
+++
|
||||
+++
|
||||
4
content/services/social-web-consultancy/index.md
Normal file
4
content/services/social-web-consultancy/index.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
+++
|
||||
title = "Social Web consultancy"
|
||||
summary = "Get help implementing technologies such as ActivityPub."
|
||||
+++
|
||||
4
content/services/software-documentation/index.md
Normal file
4
content/services/software-documentation/index.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
+++
|
||||
title = "Software and API documentation"
|
||||
summary = "Information architecture and technical writing, especially in the area of software and APIs."
|
||||
+++
|
||||
4
content/services/static-websites/index.md
Normal file
4
content/services/static-websites/index.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
+++
|
||||
title = "End-to-end static website design and development"
|
||||
summary = "Artisinally hand-crafted websites that are sure to perform well without sacrificing on UX."
|
||||
+++
|
||||
71
content/support/index.html
Normal file
71
content/support/index.html
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
+++
|
||||
title = "Support me"
|
||||
summary = "Help me live."
|
||||
tags = [
|
||||
"support",
|
||||
"donate",
|
||||
"donation",
|
||||
"donations",
|
||||
"tip",
|
||||
"tips",
|
||||
"patron",
|
||||
"patronage",
|
||||
"liberapay",
|
||||
"stripe",
|
||||
"paypal",
|
||||
]
|
||||
layout = "custom_html"
|
||||
+++
|
||||
|
||||
<main class="support">
|
||||
<div class="container">
|
||||
<h1>Help me live</h1>
|
||||
<p>Much like everyone else under capitalism, I need money to live. Most of the stuff I do is what you might consider "socially useful" but also "generally unprofitable". If you could support me financially, it would go a long way to giving me more breathing room.</p>
|
||||
<ul class="donation-links">
|
||||
<li>
|
||||
<a href="https://donate.stripe.com/4gwcPCaMpcQ19RC4gg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1em" viewBox="0 0 2304 1536"><title>fa:cc-stripe</title><path fill="currentColor" d="M1597 775q0 69-21 106q-19 35-52 35q-23 0-41-9V683q29-30 57-30q57 0 57 122m438-36h-110q6-98 56-98q51 0 54 98M476 874q0-59-33-91.5T342 725q-36-13-52-24t-16-25q0-26 38-26q58 0 124 33l18-112q-67-32-149-32q-77 0-123 38q-48 39-48 109q0 58 32.5 90.5T266 833q39 14 54.5 25.5T336 886q0 31-48 31q-29 0-70-12.5T146 874l-18 113q72 41 168 41q81 0 129-37q51-41 51-117m295-215l19-111h-96V413l-129 21l-18 114l-46 8l-17 103h62v219q0 84 44 120q38 30 111 30q32 0 79-11V899q-32 7-44 7q-42 0-42-50V659zm316 25V545q-15-3-28-3q-32 0-55.5 16T970 604l-10-56H829v471h150V713q26-31 82-31q16 0 26 2m37 335h150V548h-150zm622-249q0-122-45-179q-40-52-111-52q-64 0-117 56l-8-47h-132v645l150-25v-151q36 11 68 11q83 0 134-56q61-65 61-202m-468-348q0-33-23-56t-56-23t-56 23t-23 56t23 56.5t56 23.5t56-23.5t23-56.5m898 357q0-113-48-176q-50-64-144-64q-96 0-151.5 66T1777 785q0 128 63 188q55 55 161 55q101 0 160-40l-16-103q-57 31-128 31q-43 0-63-19q-23-19-28-66h248q2-14 2-52m128-651v1280q0 52-38 90t-90 38H128q-52 0-90-38t-38-90V128q0-52 38-90t90-38h2048q52 0 90 38t38 90"/></svg>
|
||||
<span>Donate one time via Stripe</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://liberapay.com/trwnh">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>simple-icons:liberapay</title><path fill="currentColor" d="M2.32 0A2.32 2.32 0 0 0 0 2.32v19.36A2.32 2.32 0 0 0 2.32 24h19.36A2.32 2.32 0 0 0 24 21.68V2.32A2.32 2.32 0 0 0 21.68 0zm9.208 3.98l-2.27 9.405a3 3 0 0 0-.073.539a.85.85 0 0 0 .09.432a.7.7 0 0 0 .334.302q.236.115.661.147l-.49 2.008q-1.159 0-1.82-.3q-.662-.303-.947-.826a2.4 2.4 0 0 1-.278-1.2q.008-.678.188-1.445l2.074-8.67zm3.9 3.888q.915 0 1.576.277q.66.277 1.085.76q.425.48.629 1.126t.204 1.379v.001q0 1.19-.392 2.179a5.2 5.2 0 0 1-1.086 1.706a4.8 4.8 0 0 1-1.665 1.118q-.972.4-2.114.4q-.555 0-1.11-.098l-.735 2.956H9.403l2.71-11.298q.653-.196 1.494-.351a10 10 0 0 1 1.821-.155m-.31 2.041a4.7 4.7 0 0 0-.98.098l-1.143 4.752q.277.066.685.065q.638 0 1.16-.237a2.6 2.6 0 0 0 .89-.661q.366-.424.571-1.02a4 4 0 0 0 .204-1.315q0-.702-.31-1.192t-1.077-.49"/></svg>
|
||||
<span>Back me on Liberapay</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<section>
|
||||
<h2>What I do for "free"</h2>
|
||||
<h3>Behind the scenes of the social web</h3>
|
||||
{{< figquote cite="Anonymous" >}}
|
||||
<p>a has encyclopedic knowledge of the inner workings of the fediverse and forward-thinking ideas for the social web in general, backed by solid technical and social grounding</p>
|
||||
{{< /figquote >}}
|
||||
<p>I'm a member of the Mastodon and Pixelfed teams on Github. I'm involved in protocol discussions and proposals. Some of the ideas I'm trying to push forward:</p>
|
||||
<ul>
|
||||
<li><a href="https://w3id.org/fep/7888">Bringing context back</a> into the social web. Whereas platforms like Twitter removed context and frequently lead to context collapse, older-style forums do not have these contextual issues due to the explicit grouping of posts into threads.</li>
|
||||
<li><a href="https://w3id.org/fep/0391">"Special collection proofs"</a> for obtaining and verifying stamps of inclusion in a special collection. This allows for a natural way of, for example, showing only replies that have been stamped by the author, or only posts that have been added to a moderated conversation, without having to fetch the entire collection and validate the relationship yourself. This gives people greater control over their conversations and interactions, allowing them to set and signal boundaries that good-faith actors can respect.</li>
|
||||
<li>Custom audiences. Similar to Instagram's "Close Friends", Twitter's former "Circle" feature, Facebook's "friend lists", diaspora*'s "Aspects" or Google+ "Circles", you should be able to define subsets of people that you can then address in your posts. The building blocks are largely there already; they just need to be put together.</li>
|
||||
<li>Explicit collection management. Currently, the social web operates on the basis that everything is implicitly reconstructed on your "instance" based on what it receives. Hashtags, profiles, and timelines do not really exist. By having explicit collections for these, not only can you add features like excluding certain posts from your profile, or having multiple streams/collections of your own posts, but you can also follow those collections to get updates about the stuff you care about, instead of a grab-bag of everything that may or may not be relevant.</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Finances overview</h2>
|
||||
<p>I currently receive around $11.15 per week on Liberapay. Meeting a goal of $500 per week would mean that my survival is no longer in question. But of course, anything helps!</p>
|
||||
</section>
|
||||
<ul class="donation-links">
|
||||
<li>
|
||||
<a href="https://donate.stripe.com/4gwcPCaMpcQ19RC4gg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1em" viewBox="0 0 2304 1536"><title>fa:cc-stripe</title><path fill="currentColor" d="M1597 775q0 69-21 106q-19 35-52 35q-23 0-41-9V683q29-30 57-30q57 0 57 122m438-36h-110q6-98 56-98q51 0 54 98M476 874q0-59-33-91.5T342 725q-36-13-52-24t-16-25q0-26 38-26q58 0 124 33l18-112q-67-32-149-32q-77 0-123 38q-48 39-48 109q0 58 32.5 90.5T266 833q39 14 54.5 25.5T336 886q0 31-48 31q-29 0-70-12.5T146 874l-18 113q72 41 168 41q81 0 129-37q51-41 51-117m295-215l19-111h-96V413l-129 21l-18 114l-46 8l-17 103h62v219q0 84 44 120q38 30 111 30q32 0 79-11V899q-32 7-44 7q-42 0-42-50V659zm316 25V545q-15-3-28-3q-32 0-55.5 16T970 604l-10-56H829v471h150V713q26-31 82-31q16 0 26 2m37 335h150V548h-150zm622-249q0-122-45-179q-40-52-111-52q-64 0-117 56l-8-47h-132v645l150-25v-151q36 11 68 11q83 0 134-56q61-65 61-202m-468-348q0-33-23-56t-56-23t-56 23t-23 56t23 56.5t56 23.5t56-23.5t23-56.5m898 357q0-113-48-176q-50-64-144-64q-96 0-151.5 66T1777 785q0 128 63 188q55 55 161 55q101 0 160-40l-16-103q-57 31-128 31q-43 0-63-19q-23-19-28-66h248q2-14 2-52m128-651v1280q0 52-38 90t-90 38H128q-52 0-90-38t-38-90V128q0-52 38-90t90-38h2048q52 0 90 38t38 90"/></svg>
|
||||
<span>Donate one time via Stripe</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://liberapay.com/trwnh">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>simple-icons:liberapay</title><path fill="currentColor" d="M2.32 0A2.32 2.32 0 0 0 0 2.32v19.36A2.32 2.32 0 0 0 2.32 24h19.36A2.32 2.32 0 0 0 24 21.68V2.32A2.32 2.32 0 0 0 21.68 0zm9.208 3.98l-2.27 9.405a3 3 0 0 0-.073.539a.85.85 0 0 0 .09.432a.7.7 0 0 0 .334.302q.236.115.661.147l-.49 2.008q-1.159 0-1.82-.3q-.662-.303-.947-.826a2.4 2.4 0 0 1-.278-1.2q.008-.678.188-1.445l2.074-8.67zm3.9 3.888q.915 0 1.576.277q.66.277 1.085.76q.425.48.629 1.126t.204 1.379v.001q0 1.19-.392 2.179a5.2 5.2 0 0 1-1.086 1.706a4.8 4.8 0 0 1-1.665 1.118q-.972.4-2.114.4q-.555 0-1.11-.098l-.735 2.956H9.403l2.71-11.298q.653-.196 1.494-.351a10 10 0 0 1 1.821-.155m-.31 2.041a4.7 4.7 0 0 0-.98.098l-1.143 4.752q.277.066.685.065q.638 0 1.16-.237a2.6 2.6 0 0 0 .89-.661q.366-.424.571-1.02a4 4 0 0 0 .204-1.315q0-.702-.31-1.192t-1.077-.49"/></svg>
|
||||
<span>Back me on Liberapay</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
89
content/support/style.scss
Normal file
89
content/support/style.scss
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
main.support {
|
||||
line-height: 1.728;
|
||||
.container {
|
||||
max-width: 80ch;
|
||||
@media (min-width: 60rem) {
|
||||
padding-inline: 0
|
||||
}
|
||||
}
|
||||
|
||||
.donation-links {
|
||||
padding-inline-start: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin-block: 3rem;
|
||||
justify-content: space-around;
|
||||
gap: 1rem;
|
||||
li {
|
||||
display: contents;
|
||||
}
|
||||
a {
|
||||
flex-basis: 13rem;
|
||||
display: grid;
|
||||
text-decoration: none;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
gap: 1rem;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
}
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
background: var(--color-accent);
|
||||
padding: 2rem;
|
||||
color: white;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0px 4px 4px hsl(150, 80%, 30%);
|
||||
&:hover {
|
||||
background-color: var(--color-highlight-weak);
|
||||
box-shadow: 0px 2px 2px hsl(210, 80%, 50%)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quote {
|
||||
margin: 0;
|
||||
margin-inline-start: 1rem;
|
||||
padding: 1rem;
|
||||
padding-inline-start: 2.5rem;
|
||||
position: relative;
|
||||
border-radius: 2rem;
|
||||
border-start-start-radius: 0;
|
||||
background: var(--color-highlight);
|
||||
color: var(--color-button-text);
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
border-width: 0rem 1rem 1rem 0;
|
||||
border-color: transparent var(--color-highlight) transparent transparent;
|
||||
left: -1rem;
|
||||
top: 0;
|
||||
}
|
||||
blockquote {
|
||||
margin: 0;
|
||||
margin-block-start: 0.5rem;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
&:before {
|
||||
content: '“';
|
||||
position: absolute;
|
||||
top: -0.75rem;
|
||||
left: 0.5rem;
|
||||
font-size: 3rem;
|
||||
font-family: serif;
|
||||
}
|
||||
}
|
||||
figcaption {
|
||||
cite {
|
||||
&:before {
|
||||
content: '— ';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
130
content/work/_index.html
Normal file
130
content/work/_index.html
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
+++
|
||||
title = "Professional work"
|
||||
summary = "Hire me to help you figure things out."
|
||||
tags = []
|
||||
weight = 20
|
||||
layout = "custom_html"
|
||||
+++
|
||||
<main class="work">
|
||||
<header id="intro">
|
||||
<div class="container">
|
||||
<h1 class="tagline">I can help you <em>figure out the hard parts.</em></h1>
|
||||
<p class="blurb">Need something done? Perhaps some documentation, a static website, or simply advice on a project? I'm here for you.</p>
|
||||
{{< work/cta-button>}}
|
||||
</div>
|
||||
</header>
|
||||
<section id="services" class="section">
|
||||
<div class="container">
|
||||
<h2 class="section__title">Some of the things I can do for you...</h2>
|
||||
<div class="services">
|
||||
<section class="service">
|
||||
<h3 class="service__title">Software and API docs</h3>
|
||||
<p class="service__summary">Information architecture and technical writing, especially for software and APIs.</p>
|
||||
<div class="service__icons">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><title>oui:documentation</title><path fill="currentColor" d="M9 3.5a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0M9 5v3h1v1H8V6H7V5z"/><path fill="currentColor" d="M13.855 14.147a1.3 1.3 0 0 1-.158-.246A2 2 0 0 1 13.5 13c0-.414.103-.713.197-.901a1.3 1.3 0 0 1 .158-.246l.003-.005A.5.5 0 0 0 14 11.5V.5a.5.5 0 0 0-.5-.5H3.461l-.083.005a3 3 0 0 0-1.102.298a2.26 2.26 0 0 0-.88.763C1.148 1.44 1 1.913 1 2.5V13c0 .463.117.843.318 1.145c.2.298.462.491.708.615a2.3 2.3 0 0 0 .94.24H3v-1l-.029-.002a1.3 1.3 0 0 1-.498-.133a.8.8 0 0 1-.323-.275C2.07 13.47 2 13.287 2 13s.07-.47.15-.59a.8.8 0 0 1 .324-.275A1.3 1.3 0 0 1 3 12h9.658c-.091.27-.158.605-.158 1s.067.73.158 1H8v1h5.5a.5.5 0 0 0 .359-.848zm-.001 0l.002.002zM2.724 1.197q.14-.068.276-.11C3 2.918 3.001 11 2.999 11h-.033a2 2 0 0 0-.283.03a2.3 2.3 0 0 0-.657.21L2 11.254V2.5c0-.413.102-.689.229-.879c.128-.193.304-.328.495-.424M4 11V1h9v10z"/><path fill="currentColor" d="M7 13H4v2.5a.5.5 0 0 0 .854.354l.646-.647l.646.647A.5.5 0 0 0 7 15.5z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>mynaui:api</title><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.5 13L7 11.5l5.5 5.5l-1.5 1.5c-.75.75-3.5 2-5.5 0s-.75-4.75 0-5.5M3 21l2.5-2.5m13-7.5L17 12.5L11.5 7L13 5.5c.75-.75 3.5-2 5.5 0s.75 4.75 0 5.5m-6-3l-2 2M21 3l-2.5 2.5m-2.5 6l-2 2"/></svg>
|
||||
</div>
|
||||
</section>
|
||||
<section class="service">
|
||||
<h3 class="service__title">End-to-end static websites</h3>
|
||||
<p class="service__summary">Artisinally hand-crafted websites that are sure to perform well without sacrificing UX.</p>
|
||||
<div class="service__icons">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>hugeicons:web-design-01</title><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12m0-3h19M13 13h4m-4 4h2M7 6h.009M11 6h.009M9 9v12.5" color="currentColor"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" style="margin-block-start: 3px"><title>hugeicons:web-design-02</title><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M20 10.128c0-3.832 0-5.747-1.172-6.938S15.771 2 12 2h-2C6.229 2 4.343 2 3.172 3.19S2 6.296 2 10.128s0 5.747 1.172 6.938c.47.477 1.054.763 1.828.934"/><path d="M22 17.5c0-1.875 0-2.812-.477-3.47a2.5 2.5 0 0 0-.553-.553C20.312 13 19.375 13 17.5 13h-5c-1.875 0-2.812 0-3.47.477a2.5 2.5 0 0 0-.553.553C8 14.689 8 15.626 8 17.5s0 2.812.477 3.47a2.5 2.5 0 0 0 .554.553C9.688 22 10.625 22 12.5 22h5c1.875 0 2.812 0 3.47-.477a2.5 2.5 0 0 0 .553-.553C22 20.312 22 19.375 22 17.5"/><path d="m16.5 16l.92.793c.387.333.58.5.58.707s-.193.374-.58.707L16.5 19m-3-3l-.92.793c-.387.333-.58.5-.58.707s.193.374.58.707l.92.793M2.5 6h17"/></g></svg>
|
||||
</div>
|
||||
</section>
|
||||
<section class="service">
|
||||
<h3 class="service__title">Social Web consultancy</h3>
|
||||
<p class="service__summary">Get help implementing open web standards and technologies such as ActivityPub.</p>
|
||||
<div class="service__icons">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><title>ph:fediverse-logo</title><path fill="currentColor" d="M212 96a27.8 27.8 0 0 0-10.51 2L171 59.94A28 28 0 1 0 120 44a29 29 0 0 0 .15 2.94L73.68 66.3a28 28 0 1 0-28.6 44.83l1.85 46.38a28 28 0 1 0 32.74 41.42L128 212.47a28 28 0 1 0 49.13-18.79l27.21-42.75A28 28 0 1 0 212 96m-56 88h-.89l-16.18-48.53l46.65-2.22a27.9 27.9 0 0 0 5.28 9L163.65 185a28 28 0 0 0-7.65-1m-93.08-27.13l-1.85-46.38a28 28 0 0 0 10.12-6.13L113.72 129l-41.46 32.22a28 28 0 0 0-9.34-4.35M149.57 72a27.8 27.8 0 0 0 8.94-2L189 108.06a27.9 27.9 0 0 0-4.18 9.22l-46.57 2.22ZM82.09 173.85L124 141.26l15.94 47.83a28.2 28.2 0 0 0-7.6 8L84 183.53a28 28 0 0 0-1.91-9.68M148 32a12 12 0 1 1-12 12a12 12 0 0 1 12-12m-21.68 29.7a28.4 28.4 0 0 0 7.68 6.54l-11.3 47.45l-43.47-25.17A28 28 0 0 0 80 84a29 29 0 0 0-.15-2.94ZM40 84a12 12 0 1 1 12 12a12 12 0 0 1-12-12m16 112a12 12 0 1 1 12-12a12 12 0 0 1-12 12m100 28a12 12 0 1 1 12-12a12 12 0 0 1-12 12m56-88a12 12 0 1 1 12-12a12 12 0 0 1-12 12"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32" style="margin-block-start: 4px"><title>carbon:cloud-services</title><path fill="currentColor" d="M25.822 10.124a10 10 0 0 0-19.644 0A7.496 7.496 0 0 0 7.5 25H8v-2h-.5a5.496 5.496 0 0 1-.377-10.98l.836-.057l.09-.833a7.998 7.998 0 0 1 15.902 0l.09.833l.836.058A5.496 5.496 0 0 1 24.5 23H24v2h.5a7.496 7.496 0 0 0 1.322-14.876"/><path fill="currentColor" d="M23 22v-2h-2.101a5 5 0 0 0-.732-1.753l1.49-1.49l-1.414-1.414l-1.49 1.49A5 5 0 0 0 17 16.101V14h-2v2.101a5 5 0 0 0-1.753.732l-1.49-1.49l-1.414 1.414l1.49 1.49A5 5 0 0 0 11.101 20H9v2h2.101a5 5 0 0 0 .732 1.753l-1.49 1.49l1.414 1.414l1.49-1.49a5 5 0 0 0 1.753.732V28h2v-2.101a5 5 0 0 0 1.753-.732l1.49 1.49l1.414-1.414l-1.49-1.49A5 5 0 0 0 20.899 22Zm-7 2a3 3 0 1 1 3-3a3.003 3.003 0 0 1-3 3"/></svg>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="process">
|
||||
<div class="container">
|
||||
<h2 class="title">A <strong>no-nonsense</strong> approach to making things <em>make sense.</em></h2>
|
||||
<section>
|
||||
<h3 class="subtitle">
|
||||
<strong>Your</strong> needs come first.
|
||||
</h3>
|
||||
<p class="blurb">We'll sit down and figure out exactly what your problem is, and what your requirements are.</p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="praise">
|
||||
<div class="container">
|
||||
<h2 class="title">What others have said:</h2>
|
||||
<div class="testimonials">
|
||||
<div class="testimonial">
|
||||
{{< people/khalil>}}
|
||||
<p class="name">Khalil Saadiq,<br>former classmate</p>
|
||||
<blockquote class="bubble">It's scary how much you know.</blockquote>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
{{< people/gargron>}}
|
||||
<p class="name">Eugen Rochko,<br>Mastodon developer</p>
|
||||
<blockquote class="bubble">Bless you for being here to work on the docs BTW. It's a big relief.</blockquote>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
{{< people/dansup>}}
|
||||
<p class="name">Daniel Supernault,<br>Pixelfed developer</p>
|
||||
<blockquote class="bubble">I don't trust anyone as much as you to shape the direction of the project.</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="interstitial">
|
||||
<div class="container">
|
||||
<h2 class="title">I bet i can make <em class="you">you</em> feel the same way.</h2>
|
||||
<p class="blurb">Do you want a <span class="me">knowledgeable</span> person you can <span class="me">trust</span> to do the work <span class="me">right</span>, as well? I'd love to add <em class="you">your</em> praise above.</p>
|
||||
{{< work/cta-button>}}
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="examples">
|
||||
<div class="container">
|
||||
<h2 class="title">Here's some of my more notable work.</h2>
|
||||
<div class="work-items">
|
||||
{{< work/work-items>}}
|
||||
<section class="your-item">
|
||||
<div>
|
||||
<h3 class="your-item__title">You could be here.</h3>
|
||||
<p class="your-item__summary">I'm currently <strong>available</strong> for work. Let's get in touch.</p>
|
||||
{{< work/cta-button>}}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="hire-me">
|
||||
<div class="container">
|
||||
<h2>Got something more permanent in mind?</h2>
|
||||
<p>I'm also open to remote work on a 1099 or W2. I'm particularly interested in software and API documentation / technical writing and information architecture!</p>
|
||||
<a href="mailto:a@trwnh.com" class="email button primary"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36">
|
||||
<title>clarity:email-solid</title>
|
||||
<path fill="currentColor" d="M32.33 6a2 2 0 0 0-.41 0h-28a2 2 0 0 0-.53.08l14.45 14.39Z" class="clr-i-solid clr-i-solid-path-1" />
|
||||
<path fill="currentColor" d="m33.81 7.39l-14.56 14.5a2 2 0 0 1-2.82 0L2 7.5a2 2 0 0 0-.07.5v20a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2V8a2 2 0 0 0-.12-.61M5.3 28H3.91v-1.43l7.27-7.21l1.41 1.41Zm26.61 0h-1.4l-7.29-7.23l1.41-1.41l7.27 7.21Z" class="clr-i-solid clr-i-solid-path-2" />
|
||||
<path fill="none" d="M0 0h36v36H0z" />
|
||||
</svg><span>Offer me a job</span></a>
|
||||
<div class="resume">
|
||||
<a href="/resume" class="resume button secondary"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<title>mdi:resume</title>
|
||||
<path fill="currentColor" d="M13 9h5.5L13 3.5zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m8 18v-1c0-1.33-2.67-2-4-2s-4 .67-4 2v1zm-4-8a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2" />
|
||||
</svg><span>Résume (HTML)</span></a>
|
||||
<a href="/resume/abdullah-tarawneh_resume.pdf" class="resume button secondary"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<title>mdi:resume</title>
|
||||
<path fill="currentColor" d="M13 9h5.5L13 3.5zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m8 18v-1c0-1.33-2.67-2-4-2s-4 .67-4 2v1zm-4-8a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2" />
|
||||
</svg><span>Résume (PDF)</span></a>
|
||||
</div>
|
||||
<div class="writing-samples">
|
||||
<a href="/resume/abdullah-tarawneh_writing-samples.pdf" class="writing-samples button secondary"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<title>mdi:file-text-multiple</title>
|
||||
<path fill="currentColor" d="M4 4v18h16v2H4c-1.1 0-2-.9-2-2V4zm11 3h5.5L15 1.5zM8 0h8l6 6v12c0 1.11-.89 2-2 2H8a2 2 0 0 1-2-2V2c0-1.11.89-2 2-2m9 16v-2H8v2zm3-4v-2H8v2z" />
|
||||
</svg><span>Tech writing samples (PDF)</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
+++
|
||||
title = "Professional work"
|
||||
summary = "Hire me to help you figure things out."
|
||||
tags = []
|
||||
weight = 20
|
||||
+++
|
||||
|
|
@ -8,8 +8,9 @@ end = "Feb 2017"
|
|||
at = "Equality Initiative"
|
||||
position = "Director of Technology"
|
||||
tags = ["nonprofit"]
|
||||
categories = ["Work"]
|
||||
src = "/images/cover/eqin.jpg"
|
||||
[[resources]]
|
||||
name = "cover"
|
||||
src = "cover.jpg"
|
||||
+++
|
||||
|
||||
## Building and maintaining a website
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
+++
|
||||
layout = "custom_html"
|
||||
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"
|
||||
|
|
@ -8,15 +9,12 @@ end = "Dec 2020"
|
|||
at = "Go-Fed"
|
||||
position = "Website Remake"
|
||||
tags = ["go-fed", "redesign", "website", "web", "responsive"]
|
||||
categories = ["Work", "Design"]
|
||||
[[resources]]
|
||||
name = "cover"
|
||||
src = "new-1280-home1.png"
|
||||
+++
|
||||
|
||||
|
||||
|
||||
<main id="go-fed">
|
||||
<main class="go-fed">
|
||||
<header class="page-header section">
|
||||
<div class="container">
|
||||
<img src="/images/logos/go-fed.png" alt="Go-Fed logo">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
#go-fed {
|
||||
main.go-fed {
|
||||
$gofed-light: #F38D7F;
|
||||
$gofed-dark: #740D00;
|
||||
$gofed-bg: #EAEAEA;
|
||||
|
|
@ -7,6 +7,9 @@
|
|||
$go-bg: #007D9C;
|
||||
$go-gopher: #79D4FD;
|
||||
overflow: hidden;
|
||||
|
||||
--max-container-width: 60rem;
|
||||
|
||||
.page-header {
|
||||
.container {
|
||||
display: grid;
|
||||
|
|
@ -131,4 +134,111 @@
|
|||
}
|
||||
.quote:before, .quote:after {color: $go-gopher}
|
||||
}
|
||||
.smartphone {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
display: block;
|
||||
position: relative;
|
||||
max-width: 320px;
|
||||
margin: auto;
|
||||
border: 16px black solid;
|
||||
border-top-width: 60px;
|
||||
border-bottom-width: 80px;
|
||||
border-radius: 36px;
|
||||
background: black;
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 5px;
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #333;
|
||||
border-radius: 10px;
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 20%;
|
||||
aspect-ratio: 1;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -96px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #333;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.laptop {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 12px;
|
||||
background-color: black;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: calc(100% + 3em);
|
||||
height: 7%;
|
||||
left: -1.5em;
|
||||
bottom: -9%;
|
||||
background: #333;
|
||||
border-radius: 0 0 100em 100em;
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 25%;
|
||||
height: 2%;
|
||||
left: 37.5%;
|
||||
bottom: -4%;
|
||||
background: #777;
|
||||
z-index: 2;
|
||||
}
|
||||
margin-bottom: 3.7%;
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
position: relative;
|
||||
width: 100%;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
&.pc {
|
||||
img {padding: 1.1% 1.2%;}
|
||||
margin-bottom: 21.25%;
|
||||
&:after {
|
||||
height: 140%;
|
||||
background: url('/images/frames/pc.svg');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
&.macbook {
|
||||
img {padding: 2.9% 11.75% 0;}
|
||||
margin-bottom: 11.25%;
|
||||
&:after {
|
||||
height: 250%;
|
||||
background: url('/images/frames/macbook.svg');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
+++
|
||||
layout = "custom_html"
|
||||
title = "Mastodon documentation revamp"
|
||||
summary = "Reorganizing the documentation for the Mastodon Project, while also rewriting significant portions of it."
|
||||
author = "Abdullah Tarawneh"
|
||||
|
|
@ -7,8 +8,12 @@ start = "Aug 2019"
|
|||
end = "Jan 2020"
|
||||
at = "Mastodon"
|
||||
position = "Information Architect / Documentation Specialist"
|
||||
tags = ["mastodon", "documentation", "information architecture", "rest api"]
|
||||
categories = ["Work"]
|
||||
tags = ["mastodon", "documentation", "information architecture", "rest api", "technical writing"]
|
||||
highlighted = true
|
||||
weight = 10
|
||||
[[resources]]
|
||||
name = "cover"
|
||||
src = "mastodocs.jpg"
|
||||
+++
|
||||
|
||||
<main id="mastodon">
|
||||
|
|
@ -443,15 +448,9 @@ categories = ["Work"]
|
|||
<h2 class="title">Maybe you'd appreciate me doing something similar for you?</h2>
|
||||
<img src="mastodocs.jpg" alt="Mastodon documentation landing page" width=1280 height=720>
|
||||
<div class="buttons">
|
||||
<a href="https://docs.joinmastodon.org" class="demo secondary button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width=16>
|
||||
<path fill="currentColor" d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z" />
|
||||
</svg>Check out the live
|
||||
version</a>
|
||||
<a href="mailto:a@trwnh.com" class="email primary button"><svg version="1.1" viewBox="0 -256 1850 1850" width=16 height=16 xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
|
||||
<g transform="matrix(1 0 0 -1 30.373 1252.3)">
|
||||
<path d="m1792 826v-794q0-66-47-113t-113-47h-1472q-66 0-113 47t-47 113v794q44-49 101-87 362-246 497-345 57-42 92.5-65.5t94.5-48 110-24.5h2q51 0 110 24.5t94.5 48 92.5 65.5q170 123 498 345 57 39 100 87zm0 294q0-79-49-151t-122-123q-376-261-468-325-10-7-42.5-30.5t-54-38-52-32.5-57.5-27-50-9h-2q-23 0-50 9t-57.5 27-52 32.5-54 38-42.5 30.5q-91 64-262 182.5t-205 142.5q-62 42-117 115.5t-55 136.5q0 78 41.5 130t118.5 52h1472q65 0 112.5-47t47.5-113z" fill="currentColor" />
|
||||
</g>
|
||||
</svg>Email me a proposal</a>
|
||||
<a href="mailto:a@trwnh.com" class="email primary button"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="currentColor" d="M32.33 6a2 2 0 0 0-.41 0h-28a2 2 0 0 0-.53.08l14.45 14.39Z" class="clr-i-solid clr-i-solid-path-1"/><path fill="currentColor" d="m33.81 7.39l-14.56 14.5a2 2 0 0 1-2.82 0L2 7.5a2 2 0 0 0-.07.5v20a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2V8a2 2 0 0 0-.12-.61M5.3 28H3.91v-1.43l7.27-7.21l1.41 1.41Zm26.61 0h-1.4l-7.29-7.23l1.41-1.41l7.27 7.21Z" class="clr-i-solid clr-i-solid-path-2"/><path fill="none" d="M0 0h36v36H0z"/></svg><span>Email me a proposal</span></a>
|
||||
<a href="https://docs.joinmastodon.org" class="demo secondary button"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2m-5.15 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M14.34 14H9.66c-.1-.66-.16-1.32-.16-2s.06-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2M12 19.96c-.83-1.2-1.5-2.53-1.91-3.96h3.82c-.41 1.43-1.08 2.76-1.91 3.96M8 8H5.08A7.92 7.92 0 0 1 9.4 4.44C8.8 5.55 8.35 6.75 8 8m-2.92 8H8c.35 1.25.8 2.45 1.4 3.56A8 8 0 0 1 5.08 16m-.82-2C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2M12 4.03c.83 1.2 1.5 2.54 1.91 3.97h-3.82c.41-1.43 1.08-2.77 1.91-3.97M18.92 8h-2.95a15.7 15.7 0 0 0-1.38-3.56c1.84.63 3.37 1.9 4.33 3.56M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2"/></svg><span>Check out the live
|
||||
version</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
#mastodon {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
overflow: hidden;
|
||||
background: #16191f;
|
||||
color: #9baec8;
|
||||
|
|
@ -154,10 +157,9 @@
|
|||
}
|
||||
gap: 2em 1em;
|
||||
ul {
|
||||
|
||||
}
|
||||
ul > ul {
|
||||
margin-left: 1.25em;
|
||||
> ul {
|
||||
margin-left: 1.25em;
|
||||
}
|
||||
}
|
||||
li {
|
||||
margin-left: 1em;
|
||||
|
|
@ -173,7 +175,7 @@
|
|||
position: relative;
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: -1.75em;
|
||||
top: -2.5em;
|
||||
right: calc(50% - 3.25ch);
|
||||
font-size: 2em;
|
||||
font-weight: 900;
|
||||
|
|
@ -228,6 +230,7 @@
|
|||
}
|
||||
.praise {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
background: #303643;
|
||||
color: #d9e1e8;
|
||||
font-size: 1.8em;
|
||||
|
|
@ -331,14 +334,21 @@
|
|||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
margin-top: 1em;
|
||||
margin-top: 2em;
|
||||
gap: 1em;
|
||||
}
|
||||
.button {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
text-decoration: none;
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.8rem;
|
||||
place-items: center;
|
||||
flex-basis: 20em;
|
||||
i {
|
||||
margin-right: 1em;
|
||||
border-radius: 1rem;
|
||||
svg {
|
||||
font-size: 2rem;
|
||||
}
|
||||
&.demo {
|
||||
background: transparent;
|
||||
|
|
@ -349,6 +359,11 @@
|
|||
}
|
||||
}
|
||||
&.email {
|
||||
background: #0060ff;
|
||||
color: white;
|
||||
&:hover {
|
||||
background: #9baec8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
|
|
@ -4,7 +4,6 @@ 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"]
|
||||
categories = ["Design"]
|
||||
draft = true
|
||||
[[resources]]
|
||||
name = 'cover'
|
||||
|
|
@ -8,14 +8,11 @@ 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"
|
||||
src = "masterpost.jpg"
|
||||
+++
|
||||
|
||||
## Overview
|
||||
|
||||
## Being invited to the team
|
||||
|
||||
In June 2018, I made a [masterpost issue](https://github.com/pixelfed/pixelfed/issues/73) including every bug and missing feature from the initial beta release, with a big checklist and organized into areas of interest.
|
||||
|
|
@ -44,4 +41,4 @@ dansup does a lot of experimenting with building out mock features, and I'm ther
|
|||
|
||||
### Release planning
|
||||
|
||||
0.x betas each usually focus on one feature and related development around it. When the focus changes, a new 0.x beta will be tagged. We have a few more betas left, for circles, and for polish. If it weren't for me, dansup would have tagged 1.0 already and media attention would have been lackluster.
|
||||
0.x betas each usually focus on one feature and related development around it. When the focus changes, a new 0.x beta will be tagged. We have a few more betas left, for circles, and for polish.
|
||||
312
content/work/style.scss
Normal file
312
content/work/style.scss
Normal file
|
|
@ -0,0 +1,312 @@
|
|||
@import "../../assets/scss/base/mixins.scss";
|
||||
|
||||
main.work {
|
||||
text-transform: lowercase;
|
||||
--max-container-width: 74rem;
|
||||
.button {
|
||||
text-decoration: none;
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.8rem;
|
||||
place-items: center;
|
||||
svg {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
&.primary {
|
||||
@include box-shadow;
|
||||
background-color: var(--color-button-background);
|
||||
color: var(--color-button-text);
|
||||
&:hover {
|
||||
@include box-shadow-heavy;
|
||||
background-color: var(--color-button-hover-background);
|
||||
}
|
||||
}
|
||||
&.secondary {
|
||||
&:hover {
|
||||
background-color: var(--color-button-hover-background);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
#intro {
|
||||
background:
|
||||
url("/images/backgrounds/ffflux1.png") center / cover;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
background-blend-mode: hard-light;
|
||||
color: var(--color-background);
|
||||
.container {
|
||||
background:
|
||||
url("/images/puzzlehead.svg") center / cover;
|
||||
padding-block: 2rem;
|
||||
}
|
||||
.tagline {
|
||||
margin-block-start: 0;
|
||||
margin-inline-end: 4rem;
|
||||
em {
|
||||
display: block;
|
||||
}
|
||||
margin-block-end: 1rem;
|
||||
}
|
||||
.blurb {
|
||||
max-width: 40ch;
|
||||
font-size: 1.2em;
|
||||
margin-block-end: 2.5rem;
|
||||
margin-inline-end: 4rem;
|
||||
}
|
||||
.tagline,
|
||||
.blurb {
|
||||
width: 15rem;
|
||||
}
|
||||
@media (min-width: 60rem) {
|
||||
.tagline, .blurb {width: 40rem;}
|
||||
.container {padding-block: 4rem;}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
padding-block: 6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#services {
|
||||
.section__title {
|
||||
margin-block-end: 3rem;
|
||||
}
|
||||
.services {
|
||||
display: grid;
|
||||
gap: 3rem;
|
||||
@media (min-width: 60rem) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
.service {
|
||||
background-color: var(--color-card-background);
|
||||
color: var(--color-card-text);
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"title"
|
||||
"summary"
|
||||
"icons";
|
||||
grid-template-rows: auto 1fr auto;
|
||||
&__title {
|
||||
grid-area: title;
|
||||
align-self: end;
|
||||
margin-block: 0;
|
||||
}
|
||||
&__summary {
|
||||
grid-area: summary;
|
||||
align-self: start;
|
||||
}
|
||||
&__icons {
|
||||
grid-area: icons;
|
||||
display: flex;
|
||||
font-size: 6rem;
|
||||
place-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
#praise {
|
||||
.title {
|
||||
margin-block-end: 4rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.testimonials {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: 4rem;
|
||||
justify-content: center;
|
||||
.testimonial {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"bubble bubble"
|
||||
"avatar name";
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
width: 20rem;
|
||||
max-width: 90%;
|
||||
place-items: center;
|
||||
gap: 1rem;
|
||||
.avatar {
|
||||
border-radius: 100rem;
|
||||
grid-area: avatar;
|
||||
margin-inline-start: 1rem;
|
||||
}
|
||||
.name {
|
||||
grid-area: name;
|
||||
place-self: center start;
|
||||
}
|
||||
.bubble {
|
||||
grid-area: bubble;
|
||||
background: green;
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
margin: 0;
|
||||
min-height: 6rem;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
border-radius: 1rem;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
border: 1rem solid transparent;
|
||||
border-top-color: green;
|
||||
border-bottom: 0;
|
||||
bottom: -0.75rem;
|
||||
left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#interstitial {
|
||||
background: var(--color-card-background);
|
||||
padding-block: 4rem;
|
||||
.container {
|
||||
max-width: 38rem;
|
||||
}
|
||||
.title {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
}
|
||||
.you {color: green}
|
||||
.me {color: hsl(210, 100%, 40%);}
|
||||
|
||||
#examples {
|
||||
.title {
|
||||
margin-block-end: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.work-items {
|
||||
--border-radius: 1rem;
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
@media (min-width: 30rem) {
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
.work-item {
|
||||
background-color: var(--color-card-background);
|
||||
color: var(--color-card-text);
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"link"
|
||||
"summary";
|
||||
grid-template-rows: auto 1fr;
|
||||
border-radius: var(--border-radius, 1rem);
|
||||
aspect-ratio: 1;
|
||||
&__link {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"image"
|
||||
"title";
|
||||
grid-template-rows: 1fr auto;
|
||||
grid-area: link;
|
||||
}
|
||||
&__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
grid-area: image;
|
||||
border-start-start-radius: var(--border-radius, 1rem);
|
||||
border-start-end-radius: var(--border-radius, 1rem);
|
||||
}
|
||||
&__title {
|
||||
grid-area: title;
|
||||
padding-inline: 1rem;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
&__summary {
|
||||
padding-inline: 1rem;
|
||||
grid-area: summary;
|
||||
place-self: start;
|
||||
}
|
||||
@media (min-width: 9999px) {
|
||||
aspect-ratio: unset;
|
||||
&.workmastodon {
|
||||
grid-column: span 3;
|
||||
.work-item__link {
|
||||
display: contents;
|
||||
}
|
||||
grid-template-areas:
|
||||
"image title"
|
||||
"image summary";
|
||||
grid-template-columns: 1fr 1fr;
|
||||
.work-item__title {
|
||||
grid-area: title;
|
||||
padding-block-start: 2rem;
|
||||
padding-inline: 2rem;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.work-item__image {
|
||||
grid-area: image;
|
||||
border-start-end-radius: unset;
|
||||
border-end-start-radius: var(--border-radius, 1rem);
|
||||
}
|
||||
.work-item__summary {
|
||||
grid-area: summary;
|
||||
padding-inline: 2rem;
|
||||
}
|
||||
}
|
||||
&.worktrilogy {
|
||||
grid-column: span 2;
|
||||
.work-item__link {
|
||||
display: contents;
|
||||
}
|
||||
grid-template-areas:
|
||||
"image title"
|
||||
"image summary";
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
.work-item__title {
|
||||
grid-area: title;
|
||||
padding-block-start: 2rem;
|
||||
padding-inline: 2rem;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.work-item__image {
|
||||
grid-area: image;
|
||||
border-start-end-radius: unset;
|
||||
border-end-start-radius: var(--border-radius, 1rem);
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.work-item__summary {
|
||||
grid-area: summary;
|
||||
padding-inline: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.your-item {
|
||||
display: grid;
|
||||
padding: 2rem;
|
||||
border: 4px dashed green;
|
||||
border-radius: var(--border-radius, 1rem);
|
||||
aspect-ratio: 1;
|
||||
place-items: center;
|
||||
}
|
||||
#hire-me {
|
||||
p {
|
||||
max-width: 70ch;
|
||||
}
|
||||
.button {
|
||||
span {
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
.email {
|
||||
margin-block-end: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
+++
|
||||
layout = "custom_html"
|
||||
title = "Senior Technical Writer at Trilogy"
|
||||
summary = "Managing knowledge bases for numerous products owned by Trilogy."
|
||||
author = "Abdullah Tarawneh"
|
||||
|
|
@ -8,17 +9,17 @@ 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"
|
||||
highlighted = true
|
||||
weight = 20
|
||||
[[resources]]
|
||||
name = "cover"
|
||||
src = "trilogy-full.png"
|
||||
+++
|
||||
|
||||
<main id="trilogy">
|
||||
<main class="trilogy">
|
||||
<header class="page-header section">
|
||||
<div class="container">
|
||||
<picture>
|
||||
<source srcset="" type="image/avif">
|
||||
<img src="/images/logos/trilogy-full.png" alt="" class="cover-image">
|
||||
</picture>
|
||||
<img src="/images/logos/trilogy-full.png" alt="" class="cover-image">
|
||||
<h1 class="page-title">I managed the knowledge bases for a company with many subsidiaries and numerous enterprise applications within their portfolios.</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
#trilogy {
|
||||
main.trilogy {
|
||||
background: #002663;
|
||||
color: white;
|
||||
.container {
|
||||
max-width: 60rem;
|
||||
}
|
||||
.page-header {
|
||||
.container {
|
||||
display: grid;
|
||||
@media (min-width: 51.75em) {
|
||||
@media (min-width: 60rem) {
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
gap: 1em;
|
||||
|
|
@ -22,8 +25,10 @@
|
|||
}
|
||||
}
|
||||
.cover-image {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: max-content;
|
||||
height: auto;
|
||||
place-self: center;
|
||||
}
|
||||
.separator {
|
||||
width: 10em;
|
||||
|
|
|
|||
BIN
content/work/trilogy/trilogy-full.png
Normal file
BIN
content/work/trilogy/trilogy-full.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
content/work/trilogy/trilogy.png
Normal file
BIN
content/work/trilogy/trilogy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 572 B |
|
|
@ -9,4 +9,5 @@ at = "UAB"
|
|||
position = "Graduated from The University of Alabama at Birmingham"
|
||||
tags = []
|
||||
categories = ["Work"]
|
||||
draft = true
|
||||
+++
|
||||
87
hugo.toml
87
hugo.toml
|
|
@ -2,6 +2,29 @@ baseURL = "https://abdullahtarawneh.com"
|
|||
languageCode = "en-us"
|
||||
title = "Abdullah Tarawneh"
|
||||
enableGitInfo = true
|
||||
capitalizeListTitles = false
|
||||
|
||||
[frontmatter]
|
||||
lastmod = [
|
||||
"lastmod",
|
||||
"updated",
|
||||
"edited",
|
||||
# ":fileModTime",
|
||||
":git",
|
||||
":default",
|
||||
]
|
||||
publishDate = [
|
||||
'published',
|
||||
'date',
|
||||
]
|
||||
date = [
|
||||
'date',
|
||||
'publishdate',
|
||||
'pubdate',
|
||||
'published',
|
||||
'lastmod',
|
||||
'modified'
|
||||
]
|
||||
|
||||
[markup.tableOfContents]
|
||||
startLevel = 2
|
||||
|
|
@ -11,44 +34,50 @@ ordered = false
|
|||
[markup.goldmark.renderer]
|
||||
unsafe = true
|
||||
|
||||
[taxonomies]
|
||||
tag = "tags"
|
||||
categories = "categories"
|
||||
series = "series"
|
||||
|
||||
[menu]
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "home"
|
||||
pre = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width=16 height=16><path fill="currentColor" d="M488 312.7V456c0 13.3-10.7 24-24 24H348c-6.6 0-12-5.4-12-12V356c0-6.6-5.4-12-12-12h-72c-6.6 0-12 5.4-12 12v112c0 6.6-5.4 12-12 12H112c-13.3 0-24-10.7-24-24V312.7c0-3.6 1.6-7 4.4-9.3l188-154.8c4.4-3.6 10.8-3.6 15.3 0l188 154.8c2.7 2.3 4.3 5.7 4.3 9.3zm83.6-60.9L488 182.9V44.4c0-6.6-5.4-12-12-12h-56c-6.6 0-12 5.4-12 12V117l-89.5-73.7c-17.7-14.6-43.3-14.6-61 0L4.4 251.8c-5.1 4.2-5.8 11.8-1.6 16.9l25.5 31c4.2 5.1 11.8 5.8 16.9 1.6l235.2-193.7c4.4-3.6 10.8-3.6 15.3 0l235.2 193.7c5.1 4.2 12.7 3.5 16.9-1.6l25.5-31c4.2-5.2 3.4-12.7-1.7-16.9z"/></svg>'
|
||||
name = "Home"
|
||||
url = "/"
|
||||
identifier = "about"
|
||||
pre = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>mdi:person</title><path fill="currentColor" d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4"/></svg>'
|
||||
name = "About"
|
||||
pageRef = "/"
|
||||
weight = 10
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "work"
|
||||
pre = '<svg version="1.1" viewBox="0 -256 1850 1850" width=16 height=16 xmlns="http://www.w3.org/2000/svg"> <g transform="matrix(1 0 0 -1 37.966 1313.1)"> <path d="m640 1152h512v128h-512v-128zm1152-640v-480q0-66-47-113t-113-47h-1472q-66 0-113 47t-47 113v480h672v-160q0-26 19-45t45-19h320q26 0 45 19t19 45v160h672zm-768 0v-128h-256v128h256zm768 480v-384h-1792v384q0 66 47 113t113 47h352v160q0 40 28 68t68 28h576q40 0 68-28t28-68v-160h352q66 0 113-47t47-113z" fill="currentColor"/> </g> </svg>'
|
||||
pre = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><title>heroicons:briefcase-16-solid</title><path fill="currentColor" fill-rule="evenodd" d="M11 4V3a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v1H4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM9 2.5H7a.5.5 0 0 0-.5.5v1h3V3a.5.5 0 0 0-.5-.5M9 9a1 1 0 1 1-2 0a1 1 0 0 1 2 0" clip-rule="evenodd"/><path fill="currentColor" d="M3 11.83V12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-.17c-.313.11-.65.17-1 .17H4c-.35 0-.687-.06-1-.17"/></svg>'
|
||||
name = "Work"
|
||||
url = "/work/"
|
||||
weight = 20
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "code"
|
||||
pre = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width=16 height=16><path fill="currentColor" d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"/></svg>'
|
||||
name = "Code"
|
||||
url = "/code/"
|
||||
pageRef = "/work/"
|
||||
weight = 30
|
||||
|
||||
#[[menu.main]]
|
||||
#identifier = "design"
|
||||
#pre = '<svg version="1.1" viewBox="0 -256 2000 2000" width=16 height=16 xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1 0 0 -1 37.966 1447.9)"> <path d="m1792 544v832q0 13-9.5 22.5t-22.5 9.5h-1600q-13 0-22.5-9.5t-9.5-22.5v-832q0-13 9.5-22.5t22.5-9.5h1600q13 0 22.5 9.5t9.5 22.5zm128 832v-1088q0-66-47-113t-113-47h-544q0-37 16-77.5t32-71 16-43.5q0-26-19-45t-45-19h-512q-26 0-45 19t-19 45q0 14 16 44t32 70 16 78h-544q-66 0-113 47t-47 113v1088q0 66 47 113t113 47h1600q66 0 113-47t47-113z" fill="currentColor"/> </g> </svg>'
|
||||
#name = "Design"
|
||||
#url = "/design/"
|
||||
#weight = 40
|
||||
# [[menu.main]]
|
||||
# identifier = "fedi"
|
||||
# pre = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><title>ph:fediverse-logo-fill</title><path fill="currentColor" d="M212 96a27.8 27.8 0 0 0-10.51 2L171 59.94A28 28 0 1 0 120 44a29 29 0 0 0 .15 2.94L73.68 66.3a28 28 0 1 0-28.6 44.83l1.85 46.38a28 28 0 1 0 32.74 41.42L128 212.47a28 28 0 1 0 49.13-18.79l27.21-42.75A28 28 0 1 0 212 96m-140.81 8.36L113.72 129l-41.46 32.22a28 28 0 0 0-9.34-4.35l-1.85-46.38a28 28 0 0 0 10.12-6.13M149.57 72a27.8 27.8 0 0 0 8.94-2L189 108.06a27.9 27.9 0 0 0-4.18 9.22l-46.57 2.22ZM82.09 173.85L124 141.26l15.94 47.83a28.2 28.2 0 0 0-7.6 8L84 183.53a28 28 0 0 0-1.91-9.68M156 184h-.89l-16.18-48.53l46.65-2.22a27.9 27.9 0 0 0 5.28 9L163.65 185a28 28 0 0 0-7.65-1M126.32 61.7a28.4 28.4 0 0 0 7.68 6.54l-11.3 47.45l-43.47-25.17A28 28 0 0 0 80 84a29 29 0 0 0-.15-2.94Z"/></svg>'
|
||||
# name = "fedi"
|
||||
# pageRef = "/fediverse/"
|
||||
# weight = 40
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "blog"
|
||||
pre = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width=16 height=16><path fill="currentColor" d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"/></svg>'
|
||||
pre = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>heroicons:newspaper-solid</title><g fill="currentColor"><path fill-rule="evenodd" d="M4.125 3C3.089 3 2.25 3.84 2.25 4.875V18a3 3 0 0 0 3 3h15a3 3 0 0 1-3-3V4.875C17.25 3.839 16.41 3 15.375 3zM12 9.75a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5zm-.75-2.25a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75M6 12.75a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5zm-.75 3.75a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75M6 6.75a.75.75 0 0 0-.75.75v3c0 .414.336.75.75.75h3a.75.75 0 0 0 .75-.75v-3A.75.75 0 0 0 9 6.75z" clip-rule="evenodd"/><path d="M18.75 6.75h1.875c.621 0 1.125.504 1.125 1.125V18a1.5 1.5 0 0 1-3 0z"/></g></svg>'
|
||||
name = "Blog"
|
||||
url = "/blog/"
|
||||
weight = 50
|
||||
pageRef = "/blog/"
|
||||
weight = 20
|
||||
|
||||
[outputFormats.RSS]
|
||||
baseName = "feed.rss"
|
||||
|
||||
[outputs]
|
||||
home = ["HTML", "RSS"]
|
||||
section = ["HTML", "RSS"]
|
||||
taxonomy = ["HTML", "RSS"]
|
||||
term = ["HTML", "RSS", "ATOM"]
|
||||
|
||||
[params]
|
||||
[params.author]
|
||||
name = "Abdullah Tarawneh"
|
||||
email = "a@trwnh.com"
|
||||
|
||||
[taxonomies]
|
||||
tag = "tags"
|
||||
category = "categories"
|
||||
series = "series"
|
||||
author = "authors"
|
||||
|
|
@ -13,16 +13,19 @@
|
|||
{{ $js := resources.Get "js/main.js" | minify | minify | fingerprint }}
|
||||
<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" . }}
|
||||
{{ with .OutputFormats.Get "rss" -}}
|
||||
{{ printf `<link rel=%q type=%q href=%q title=%q>` .Rel .MediaType.Type .Permalink site.Title | safeHTML }}
|
||||
{{ end }}
|
||||
{{ partial "site/seo.html" . }}
|
||||
{{ block "head" . }}
|
||||
{{ end }}
|
||||
</head>
|
||||
<body>
|
||||
{{ block "body" . }}
|
||||
{{ partial "site-header.html" . }}
|
||||
{{ partial "site/header.html" . }}
|
||||
{{ block "main" . }}
|
||||
{{ end }}
|
||||
{{ partial "site-footer.html" .}}
|
||||
{{ partial "site/footer.html" .}}
|
||||
{{ end }}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
{{ define "main" }}
|
||||
<main>
|
||||
<article class="page">
|
||||
<header class="section page-header">
|
||||
<div class="container">
|
||||
<h1 class="page-title">{{ .Title }}</h1>
|
||||
<p class="page-summary">{{.Summary}}</p>
|
||||
</div>
|
||||
</header>
|
||||
<section class="section content">
|
||||
<div class="container">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
<main class="single">
|
||||
<header class="section page-header">
|
||||
<div class="container">
|
||||
<h1 class="page-title">{{ .Title }}</h1>
|
||||
<p class="page-summary">{{.Summary}}</p>
|
||||
</div>
|
||||
</header>
|
||||
<section class="section content">
|
||||
<div class="container">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,37 @@
|
|||
{{ define "main" }}
|
||||
<main id="blog">
|
||||
<header class="section page-header">
|
||||
<div class="container">
|
||||
<h1 class="page-title">{{ .Title }}</h1>
|
||||
</div>
|
||||
<main class="blog list container h-feed">
|
||||
<header class="page-header">
|
||||
<h1 class="page-title p-name">{{ .Title }}</h1>
|
||||
<p>h-feed URL: <a class="u-url u-uid" href="{{ .Permalink }}" rel="self">{{ .Permalink }}</a></p>
|
||||
{{ with .OutputFormats.Get "rss" -}}
|
||||
<p>
|
||||
<a href="{{ .Permalink}}" rel="{{ .Rel }}" type="{{ .MediaType.Type }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><title>vaadin:rss-square</title><path fill="currentColor" d="M0 0v16h16V0zm3.6 14c-.9 0-1.6-.7-1.6-1.6s.7-1.6 1.6-1.6s1.6.7 1.6 1.6S4.6 14 3.6 14m4 0c0-3.1-2.5-5.6-5.6-5.6V6c4.4 0 8 3.6 8 8zm4 0c0-5.3-4.3-9.6-9.6-9.6V2c6.6 0 12 5.4 12 12z"/></svg>
|
||||
<span>RSS Feed</span>
|
||||
</a>
|
||||
</p>
|
||||
{{ end }}
|
||||
</header>
|
||||
<section class="section list">
|
||||
<div class="container">
|
||||
{{ range .Pages }}
|
||||
<article class="list-item">
|
||||
<a class="list-item__link" href="{{ .RelPermalink }}">
|
||||
{{ with .Params.cover }}
|
||||
<img class="list-item__image" src="{{.}}">
|
||||
{{end}}
|
||||
<h2 class="list-item__title">{{ .Title }}</h2>
|
||||
</a>
|
||||
<p class="list-item__summary">{{.Summary}}</p>
|
||||
<div class="list-item__meta">
|
||||
<datetime class="list-item__date">{{ .Date.Format "January 2, 2006" }}</datetime>
|
||||
<span class="list-item__wordcount">{{.WordCount}} words</span>
|
||||
{{ with .Params.tags }}
|
||||
{{ range . }}
|
||||
<a class="tag" href='{{"tags/" | absURL }}{{. | urlize}}'>{{.}}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</article>
|
||||
<section class="categories">
|
||||
<h2>Categories</h2>
|
||||
{{ with .Site.Taxonomies.categories }}
|
||||
<ul>
|
||||
{{ range .Alphabetical }}
|
||||
<li>
|
||||
<a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a> <span>({{ .Count }})</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</div>
|
||||
</ul>
|
||||
{{ end }}
|
||||
</section>
|
||||
<section class="posts">
|
||||
<h2>Posts</h2>
|
||||
{{ $paginator := .Paginate .RegularPages 10 }}
|
||||
|
||||
{{ range $paginator.Pages }}
|
||||
{{ partial "list/h-entry.summary.html" . }}
|
||||
{{ end }}
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
</section>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
@ -1,66 +1,27 @@
|
|||
{{ define "main" }}
|
||||
<main class="blog">
|
||||
<div class="container">
|
||||
|
||||
<article class="post h-entry">
|
||||
<main class="blog single">
|
||||
<article class="h-entry hentry">
|
||||
<header>
|
||||
<h1 class="title">{{ .Title }}</h1>
|
||||
<p class="summary">{{.Summary}}</p>
|
||||
{{ with .Params.cover }}
|
||||
<img class="cover" src="{{.}}">
|
||||
{{end}}
|
||||
<div class="container">
|
||||
<h1 class="p-name entry-title">{{ .Title }}</h1>
|
||||
<p class="p-summary entry-summary">{{.Summary}}</p>
|
||||
{{ partial "page/author.html" . }}
|
||||
{{ partial "page/date.html" . }}
|
||||
{{ partial "page/wordcount.html" . }}
|
||||
{{ partial "page/categories.html" .}}
|
||||
{{ partial "page/tags-list.html" . }}
|
||||
{{ partial "page/series-list.html" . }}
|
||||
{{ partial "page/toc.html" . }}
|
||||
</div>
|
||||
</header>
|
||||
<aside class="meta">
|
||||
<datetime class="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </datetime>
|
||||
<p class="wordcount"> {{.WordCount}} words</p>
|
||||
|
||||
{{ with .Params.tags }}
|
||||
<p class="tags-title">Keywords</p>
|
||||
<ul class="tags">
|
||||
{{ range . }}
|
||||
<li><a href='{{"tags/" | absURL }}{{. | urlize}}'>{{.}}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
|
||||
{{- if .Params.series -}}
|
||||
{{- with index (.GetTerms "series") 0 -}}
|
||||
<div class="notice--info">
|
||||
<p>This post is part of the <a href="{{ .Permalink }}" style="font-weight: bold">{{ .LinkTitle }}</a> series.</p>
|
||||
</div>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{ if ne .TableOfContents "<nav id=\"TableOfContents\"></nav>" }}
|
||||
<p class="toc-title">Table of contents:</p>
|
||||
{{ .TableOfContents }}
|
||||
{{ end }}
|
||||
</aside>
|
||||
<section class="content">
|
||||
<section class="e-content entry-content">
|
||||
{{ .Content }}
|
||||
</section>
|
||||
<footer>
|
||||
{{- if .Params.series -}}
|
||||
<div class="post-series">
|
||||
{{- $series := or (where .Site.RegularPages.ByDate ".Params.series" "intersect" .Params.series) (where .Site.RegularPages.ByDate ".Params.series" "eq" .Params.series) -}}
|
||||
{{- with $series -}}
|
||||
<h3 id="series">This series</h3>
|
||||
<ol>
|
||||
{{- range . -}}
|
||||
<li>
|
||||
{{- if eq .File.UniqueID $.File.UniqueID -}}
|
||||
<b>{{ .Title }}</b>
|
||||
{{- else -}}
|
||||
<a href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
{{- end -}}
|
||||
</li>
|
||||
{{- end -}}
|
||||
</ol>
|
||||
{{- end -}}
|
||||
<div class="container">
|
||||
{{ partial "page/series-nav.html" . }}
|
||||
</div>
|
||||
{{- end -}}
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,141 +0,0 @@
|
|||
{{ define "main" }}
|
||||
<main id="code">
|
||||
<header class="section page-header" id="intro">
|
||||
<div class="container">
|
||||
<h1 class="tagline">i like to participate in the world of free and libre open source software.</h1>
|
||||
<div id="gitea" class="explainer">
|
||||
<div class="image">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 2240 1792">
|
||||
<path fill="currentColor" d="M365.814 256.033c-80.77-.23-174.758 28.37-247.533 93.332C45.507 414.33-5.459 515.927.468 659.21c9.228 223.095 116.556 347.02 241.385 413.903 121.864 65.293 259.55 77.271 341.309 79.467 6.075 22.373 20.605 53.19 41.24 88.794 22.617 39.021 52.476 83.218 86.237 125.355 67.52 84.276 149.666 161.198 224.778 169.267h614.778c96.394-7.216 183.852-91.338 258.812-210.925 74.96-119.587 137.637-275.74 182.444-431.18 44.808-155.44 71.718-310.045 74.6-426.875 1.44-58.414-3.015-107.346-14.834-142.878-5.91-17.766-13.683-32.287-24.042-42.774-10.36-10.486-23.609-16.672-38.437-17.01l-.311-.006h-.313c-337.54 17.872-537.496 26.865-708.892 28.377V682.72l-53.502-26.574-.356-363.22c-196.715-.1-369.84-10.354-698.87-28.58l-.184-.009-.185-.002c-40.235-.43-97.974-8.164-160.312-8.342zm22.4 172.51c3.664 0 7.49 0 11.265.1 21.927 217.03 57.703 349.276 127.414 541.945-88.094-12.62-168.73-34.048-230.92-77.682-65.365-45.861-111.249-115.832-125.726-228.654-7.647-59.598 2.08-119.8 37.762-164.15 33.452-41.58 90.067-70.34 180.205-71.54zm729.623 214.068c13.174.1 26.557 3.011 39.24 9.174l63.954 31.074-45.88 93.968a57.354 57.354 0 0 0-20.566 3.315 57.354 57.354 0 0 0-34.542 73.388 57.354 57.354 0 0 0 9.503 16.703l-79.045 161.895a57.354 57.354 0 0 0-19.008 3.32 57.354 57.354 0 0 0-34.538 73.389 57.354 57.354 0 0 0 73.387 34.54 57.354 57.354 0 0 0 34.541-73.388 57.354 57.354 0 0 0-13.468-21.105l77.029-157.766a57.354 57.354 0 0 0 24.99-3.049 57.354 57.354 0 0 0 18.224-10.699c30.01 14.23 53.952 25.373 71.541 35.162 26.351 14.668 35.672 24.346 38.496 35.014 2.824 10.667-.312 30.978-15.185 66.703-11.338 27.233-28.654 62.702-51.112 108.785a57.354 57.354 0 0 0-21.47 3.308 57.354 57.354 0 0 0-34.54 73.39 57.354 57.354 0 0 0 73.388 34.539 57.354 57.354 0 0 0 34.54-73.388 57.354 57.354 0 0 0-11.722-19.289c22.242-45.59 39.623-81.153 51.765-110.32 16.026-38.496 24.462-67.304 17.119-95.043-7.345-27.74-29.958-45.76-59.774-62.355-19.75-10.992-43.966-22.274-73.47-36.23a57.354 57.354 0 0 0-3.262-22.964 57.354 57.354 0 0 0-12.43-20.025l45.172-92.515 249.678 121.316c45.096 21.911 63.76 75.857 41.848 120.954l-171.672 353.314c-21.912 45.096-75.856 63.761-120.952 41.849l-353.315-171.673c-45.096-21.912-63.76-75.855-41.848-120.952l171.672-353.316c15.75-32.413 48.046-51.172 81.712-51.023z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p>I host my own code with <a href="https://git.trwnh.com">Gitea</a>. currently, i host the source code for
|
||||
some websites i've built, including this one.</p>
|
||||
</div>
|
||||
<div id="github" class="explainer">
|
||||
<div class="image">
|
||||
<svg width="16" height="16" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p>i also have a <a href="https://github.com/trwnh">Github</a> account. i mainly use this account to
|
||||
contribute to open-source projects using pull requests instead of sending patch files via email.</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<section class="section" id="projects">
|
||||
<div class="container">
|
||||
<h2 class="title"><a href="#projects">#</a>Original projects</h2>
|
||||
<section class="project-list">
|
||||
{{ range .Pages }}
|
||||
{{ if not (in .Params.tags "pull request") }}
|
||||
<a class="project {{ .Permalink | relURL | anchorize }}" href="{{ .Permalink }}">
|
||||
|
||||
<h3 class="project__title">{{ .Title }}</h3>
|
||||
|
||||
<p class="project__summary">{{.Summary}}</p>
|
||||
|
||||
{{ with .Resources.GetMatch "cover**" }}
|
||||
<img width=280 class="project__image" src="{{.RelPermalink}}">
|
||||
{{end}}
|
||||
|
||||
<!--datetime class="project__date">{{ .Date.Format "January 2, 2006" }}</datetime-->
|
||||
<span class="project__hint">Read more</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="contributions">
|
||||
<div class="container">
|
||||
<h2 class="title"><a href="#contributions">#</a>Contributions to other projects</h2>
|
||||
<section class="contribution-list">
|
||||
{{ range where .Pages ".Params.tags" "intersect" (slice "pull request") }}
|
||||
<article class="pr {{ .Permalink | relURL | anchorize }}">
|
||||
{{ partial "pr-icon" . }}
|
||||
<a class="pr__link" href="{{ .Permalink }}">
|
||||
<h3 class="pr__title">{{ .Title }}</h3>
|
||||
</a>
|
||||
<p class="pr__summary">{{.Summary}}</p>
|
||||
</article>
|
||||
{{ end }}
|
||||
<article class="commit pixelfed-docs">
|
||||
{{ partial "commit-icon" . }}
|
||||
<a href="https://github.com/pixelfed/docs/commits?author=trwnh" class="commit__link">
|
||||
<h3 class="commit__title">pixelfed/docs</h3>
|
||||
</a>
|
||||
<p class="commit__summary">59 commits</p>
|
||||
</article>
|
||||
<article class="commit pixelfed">
|
||||
{{ partial "commit-icon" . }}
|
||||
<a href="https://github.com/pixelfed/pixelfed/commits?author=trwnh" class="commit__link">
|
||||
<h3 class="commit__title">pixelfed/pixelfed</h3>
|
||||
</a>
|
||||
<p class="commit__summary">57 commits</p>
|
||||
</article>
|
||||
<article class="commit mastodon">
|
||||
{{ partial "commit-icon" . }}
|
||||
<a href="https://github.com/mastodon/mastodon/commits?author=trwnh" class="commit__link">
|
||||
<h3 class="commit__title">mastodon/mastodon</h3>
|
||||
</a>
|
||||
<p class="commit__summary">18 commits</p>
|
||||
</article>
|
||||
<article class="commit mastodocs">
|
||||
{{ partial "commit-icon" . }}
|
||||
<a href="https://github.com/mastodon/documentation/commits?author=trwnh" class="commit__link">
|
||||
<h3 class="commit__title">mastodon/documentation</h3>
|
||||
</a>
|
||||
<p class="commit__summary">13 commits</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="support">
|
||||
<div class="container">
|
||||
<h2 class="title"><a href="#support">#</a>Support me.</h2>
|
||||
<p>If you appreciate any of what I've done, please send me money. Your contributions and generosity will
|
||||
directly fund my creative efforts, which would otherwise go unpaid. The more I receive, the more time I can
|
||||
justifiably devote to continuing to do what I do.</p>
|
||||
<div id="liberapay" class="explainer">
|
||||
<div class="image">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width=16 height=16><g transform="translate(-78.37-208.06)" fill="currentColor"><path d="m104.28 271.1c-3.571 0-6.373-.466-8.41-1.396-2.037-.93-3.495-2.199-4.375-3.809-.88-1.609-1.308-3.457-1.282-5.544.025-2.086.313-4.311.868-6.675l9.579-40.05 11.69-1.81-10.484 43.44c-.202.905-.314 1.735-.339 2.489-.026.754.113 1.421.415 1.999.302.579.817 1.044 1.546 1.395.729.353 1.747.579 3.055.679l-2.263 9.278"/><path d="m146.52 246.14c0 3.671-.604 7.03-1.811 10.07-1.207 3.043-2.879 5.669-5.01 7.881-2.138 2.213-4.702 3.935-7.693 5.167-2.992 1.231-6.248 1.848-9.767 1.848-1.71 0-3.42-.151-5.129-.453l-3.394 13.651h-11.162l12.52-52.19c2.01-.603 4.311-1.143 6.901-1.622 2.589-.477 5.393-.716 8.41-.716 2.815 0 5.242.428 7.278 1.282 2.037.855 3.708 2.024 5.02 3.507 1.307 1.484 2.274 3.219 2.904 5.205.627 1.987.942 4.11.942 6.373m-27.378 15.461c.854.202 1.91.302 3.167.302 1.961 0 3.746-.364 5.355-1.094 1.609-.728 2.979-1.747 4.111-3.055 1.131-1.307 2.01-2.877 2.64-4.714.628-1.835.943-3.858.943-6.071 0-2.161-.479-3.998-1.433-5.506-.956-1.508-2.615-2.263-4.978-2.263-1.61 0-3.118.151-4.525.453l-5.28 21.948"/></g></svg>
|
||||
</div>
|
||||
<p>Recurring or one-time donation via Liberapay: <a
|
||||
href="https://liberapay.com/trwnh">liberapay.com/trwnh</a></p>
|
||||
</div>
|
||||
<div id="patreon" class="explainer">
|
||||
<div class="image">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" width=16 height=16>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M108.8135992 26.06720125c-26.468266 0-48.00213212 21.53066613-48.00213212 47.99733213 0 26.38653268 21.53386613 47.85426547 48.00213213 47.85426547 26.38639937 0 47.8530655-21.4677328 47.8530655-47.85426547 0-26.466666-21.46666613-47.99733213-47.85306547-47.99733213"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M23.333335 153.93333178V26.0666679h23.46666576v127.8666639z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p>Monthly patronage on Patreon: <a href="https://patreon.com/trwnh">patreon.com/trwnh</a></p>
|
||||
</div>
|
||||
<div id="paypal" class="explainer">
|
||||
<div class="image">
|
||||
<svg width=16 height=16 viewBox="0 0 1536 1728" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="currentColor" d="M1519 646c13 60 10 129-4 204-65 330-284 444-565 444h-44c-34 0-62 25-68 59l-4 19-55 346-2 15c-7 34-35 59-69 59H457c-28 0-46-23-42-51 18-112 35-224 53-336s36-223 54-335c3-24 19-37 43-37 40 0 80-1 131 0 72 1 155-3 236-21 108-24 206-68 287-144 73-68 122-152 155-246 15-44 27-88 35-133 2-12 5-10 12-5 55 41 86 96 98 162zm-172-282c0 82-19 160-46 236-52 151-150 259-302 315-81 29-166 41-252 42-60 1-120 0-180 0-65 0-106 32-118 96-14 76-69 430-85 530-1 7-4 10-12 10H57c-30 0-52-26-48-55L241 67c6-38 40-67 79-67h598c43 0 142 19 209 45 142 55 220 167 220 319z"/>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
<p>For direct, one-time contributions, you can use Paypal with my email address <b>a@trwnh.com</b></p>
|
||||
</div>
|
||||
<div id="cashapp" class="explainer">
|
||||
<div class="image">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="app-icon" width=16 height=16 viewBox="8 8 48 48"><path d="M42.47 23.8c.5.5 1.33.5 1.8-.0l2.5-2.6c.53-.5.5-1.4-.06-1.94a19.73 19.73 0 0 0-6.72-3.84l.79-3.8c.17-.83-.45-1.61-1.28-1.61h-4.84a1.32 1.32 0 0 0-1.28 1.06l-.7 3.38c-6.44.33-11.9 3.6-11.9 10.3 0 5.8 4.51 8.29 9.28 10 4.51 1.72 6.9 2.36 6.9 4.78 0 2.49-2.38 3.95-5.9 3.95-3.2 0-6.56-1.07-9.16-3.68a1.3 1.3 0 0 0-1.84-.0l-2.7 2.7a1.36 1.36 0 0 0 .0 1.92c2.1 2.07 4.76 3.57 7.792 4.4l-.74 3.57c-.17.83.44 1.6 1.27 1.61l4.85.04a1.32 1.32 0 0 0 1.3-1.06l.7-3.39C40.28 49.07 45 44.8 45 38.57c0-5.74-4.7-8.16-10.4-10.13-3.26-1.21-6.08-2.04-6.08-4.53 0-2.42 2.63-3.38 5.27-3.38 3.36 0 6.59 1.39 8.7 3.29z" fill="currentColor"/></svg>
|
||||
</div>
|
||||
<p>You can also use Cashapp if you'd prefer: <a href="https://cash.me/$trwnh">$trwnh</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
{{ define "main" }}
|
||||
<main>
|
||||
<article class="page">
|
||||
<header class="section page-header">
|
||||
<div class="container">
|
||||
<h1 class="page-title">{{ .Title }}</h1>
|
||||
<p class="page-summary">{{.Summary}}</p>
|
||||
<p class="page-date">Published <time datetime='{{.Date.UTC.Format "2006-01-02T03:04:05Z"}}'>{{.Date.Format "2006-01-02"}}</time></p>
|
||||
{{ with .Resources.GetMatch "cover**" }}
|
||||
<img src="{{.RelPermalink}}">
|
||||
{{ end }}
|
||||
</div>
|
||||
</header>
|
||||
<aside>
|
||||
<div class="container">
|
||||
{{.TableOfContents}}
|
||||
</div>
|
||||
</aside>
|
||||
<section class="section content">
|
||||
<div class="container">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
{{ define "body" }}
|
||||
{{ partial "site-header.html" . }}
|
||||
<main class="index">
|
||||
<section 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>
|
||||
<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>
|
||||
</section>
|
||||
<section 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>
|
||||
</section>
|
||||
</main>
|
||||
<style>
|
||||
body {background: #abc;}
|
||||
</style>
|
||||
{{ end }}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
|
||||
role="img" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" width=16 height=16 class="commit__icon">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10.5 7.75a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0zm1.43.75a4.002 4.002 0 0 1-7.86 0H.75a.75.75 0 1 1 0-1.5h3.32a4.001 4.001 0 0 1 7.86 0h3.32a.75.75 0 1 1 0 1.5h-3.32z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 445 B |
|
|
@ -1,5 +0,0 @@
|
|||
{{ if .IsTranslated }}
|
||||
{{ range .Translations }}
|
||||
<a href="{{ .RelPermalink }}">{{ .Language.LanguageName }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
20
layouts/partials/list/h-entry.summary.html
Normal file
20
layouts/partials/list/h-entry.summary.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<article class="h-entry">
|
||||
<a href="{{.Permalink}}" class="u-url u-uid">
|
||||
<h1 class="p-name">{{ .Title }}</h1>
|
||||
</a>
|
||||
<p class="p-summary">{{ .Summary }}</p>
|
||||
<p>
|
||||
{{ .WordCount }} words posted on
|
||||
<time class="dt-published published" datetime="{{ .Date.Format " 2006-01-02T15:04:05-07:00" }}">
|
||||
{{ .Date.Format "2006 January 02" }}
|
||||
</time> {{with .Params.updated -}}
|
||||
(updated on <time class="dt-updated updated" datetime="{{ .Lastmod.Format " 2006-01-02T15:04:05-07:00" }}">
|
||||
{{ .Date.Format "2006 January 02" }}
|
||||
</time>) {{ end -}}
|
||||
by <span class="h-card vcard p-author">
|
||||
<a class="u-url url p-name fn" href="{{ .Site.BaseURL }}" rel="author">
|
||||
<span class="p-given-name given-name">Abdullah</span> <span class="p-family-name family-name">Tarawneh</span></a>
|
||||
</span> {{ with .GetTerms "categories" }}into {{ range $k, $v := . }}{{- if $k }}, {{ end }}<a href="{{ .Permalink }}" rel="category" class="p-category">{{ .Title }}</a>{{ end }}{{ end }}
|
||||
</p>
|
||||
{{ partial "page/tags-list.html" . }}
|
||||
</article>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
{{ $firstH1 :=
|
||||
(
|
||||
substr
|
||||
(
|
||||
delimit
|
||||
(
|
||||
findRE
|
||||
"^#{1} ([^{\n]+)"
|
||||
.RawContent
|
||||
1
|
||||
)
|
||||
""
|
||||
)
|
||||
2
|
||||
)
|
||||
}}
|
||||
6
layouts/partials/page/author.html
Normal file
6
layouts/partials/page/author.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<address class="p-author h-card author vcard">
|
||||
<a href="{{ .Site.BaseURL }}" class="u-url u-uid url uid" rel="author">
|
||||
<img class="u-photo u-logo photo logo" src="{{.Site.BaseURL}}images/people/avatar.png" width=16 height=16 alt="a">
|
||||
<span class="p-name fn"><span class="p-given-name given-name">Abdullah</span> <span class="p-family-name family-name">Tarawneh</span></span>
|
||||
</a>
|
||||
</address>
|
||||
9
layouts/partials/page/categories.html
Normal file
9
layouts/partials/page/categories.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{{ with .GetTerms "categories" }}
|
||||
<p class="categories">
|
||||
Categorized under
|
||||
{{ range $k, $v := . }}
|
||||
{{- if $k }}, {{ end }}
|
||||
<a href='{{ .Permalink }}'>{{ .Title }}</a>
|
||||
{{- end }}
|
||||
</p>
|
||||
{{ end }}
|
||||
3
layouts/partials/page/date.html
Normal file
3
layouts/partials/page/date.html
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<time class="dt-published published" datetime="{{ .Date.Format " 2006-01-02T15:04:05-0700" }}">
|
||||
{{ .Date.Format "Monday, 2006 January 2" }}
|
||||
</time>
|
||||
10
layouts/partials/page/series-list.html
Normal file
10
layouts/partials/page/series-list.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{{- with .GetTerms "series" -}}
|
||||
<p>This post is part of the following series:</p>
|
||||
<ul>
|
||||
{{ range . }}
|
||||
<li>
|
||||
<a href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{- end -}}
|
||||
21
layouts/partials/page/series-nav.html
Normal file
21
layouts/partials/page/series-nav.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{{ with .GetTerms "series" }}
|
||||
<h2>More in the same series:</h2>
|
||||
{{ range . }}
|
||||
<nav>
|
||||
<h3>{{ .Title }}</h3>
|
||||
<ol>
|
||||
{{ range .Pages.ByDate }}
|
||||
{{ if eq .File.UniqueID $.File.UniqueID }}
|
||||
<li class="active">
|
||||
<a href="{{ .Permalink }}" aria-current="page">{{ .Title }}</a>
|
||||
</li>
|
||||
{{ else }}
|
||||
<li>
|
||||
<a href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ol>
|
||||
</nav>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
9
layouts/partials/page/tags-list.html
Normal file
9
layouts/partials/page/tags-list.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{{ with .GetTerms "tags" }}
|
||||
<ul class="tags">
|
||||
{{ range . }}
|
||||
<li>
|
||||
<a href='{{ .Permalink }}'>{{ .Title }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
4
layouts/partials/page/toc.html
Normal file
4
layouts/partials/page/toc.html
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{{ if ne .TableOfContents "<nav id=\"TableOfContents\"></nav>" }}
|
||||
<p class="toc-title">Table of contents:</p>
|
||||
{{ .TableOfContents }}
|
||||
{{ end }}
|
||||
1
layouts/partials/page/wordcount.html
Normal file
1
layouts/partials/page/wordcount.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<p class="wordcount"><span class="p-word-count word-count">{{.WordCount}}</span> words</p>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
|
||||
role="img" class="pr__icon" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" width=16 height=16
|
||||
class="iconify iconify--octicon">
|
||||
<path fill-rule="evenodd"
|
||||
d="M5 3.254V3.25v.005a.75.75 0 1 1 0-.005v.004zm.45 1.9a2.25 2.25 0 1 0-1.95.218v5.256a2.25 2.25 0 1 0 1.5 0V7.123A5.735 5.735 0 0 0 9.25 9h1.378a2.251 2.251 0 1 0 0-1.5H9.25a4.25 4.25 0 0 1-3.8-2.346zM12.75 9a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5zm-8.5 4.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 604 B |
|
|
@ -1,34 +0,0 @@
|
|||
<footer class="site-footer">
|
||||
<hr>
|
||||
<div class="container">
|
||||
{{ partial "breadcrumbs.html" . }}
|
||||
<a href="#top">back to top</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var sc_project=12701041;
|
||||
var sc_invisible=1;
|
||||
var sc_security="006094ec";
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="https://www.statcounter.com/counter/counter.js"
|
||||
async>
|
||||
</script>
|
||||
<noscript>
|
||||
<div class="statcounter">
|
||||
<a
|
||||
title="Web Analytics Made Easy - Statcounter"
|
||||
href="https://statcounter.com/"
|
||||
target="_blank"
|
||||
>
|
||||
<img class="statcounter"
|
||||
src="https://c.statcounter.com/12701041/0/006094ec/1/"
|
||||
alt=""
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</noscript>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<header class="site-header">
|
||||
<div class="container">
|
||||
<a href="/" class="site-masthead">
|
||||
<img class="site-icon" width=32 src="/images/people/avatar.png">
|
||||
<p class="site-title">hi, i'm abdullah tarawneh.</p>
|
||||
</a>
|
||||
<nav class="site-nav">
|
||||
<ul>
|
||||
{{ $currentPage := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
<li
|
||||
{{- if or (and $currentPage.IsHome (eq .Identifier "home")) ($currentPage.IsMenuCurrent "main" .) (eq $currentPage.Section .Identifier) }}
|
||||
class="active"
|
||||
{{ end }}>
|
||||
<a href="{{ .URL | absLangURL }}">
|
||||
{{ .Pre }}
|
||||
<span>{{ .Name }}</span>
|
||||
{{ .Post }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ partial "i18nlist.html" . }}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div style="position: relative;">
|
||||
<div id="top" style="scroll-margin-top: var(--header-height);"></div>
|
||||
</div>
|
||||
68
layouts/partials/site/footer.html
Normal file
68
layouts/partials/site/footer.html
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<footer class="site-footer">
|
||||
<hr>
|
||||
<div class="container">
|
||||
<h2>Tip me</h2>
|
||||
<p>(<a href="/support">why?</a>)</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://liberapay.com/trwnh">liberapay.com/trwnh</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://donate.stripe.com/4gwcPCaMpcQ19RC4gg">donate.stripe.com/4gwcPCaMpcQ19RC4gg</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://paypal.me/obvioushumor">paypal: tarawneh.abdullah@gmail.com</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Hire me</h2>
|
||||
<p>(<a href="/work">why?</a>)</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/resume">Resumé (HTML)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/resume/abdullah-tarawneh_resume.pdf">Resumé (PDF)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/resume/abdullah-tarawneh_writing-samples.pdf">Writing samples (PDF)</a>
|
||||
</li>
|
||||
</ul>
|
||||
{{/* {{ with where .Site.RegularPages "Section" "services" }}
|
||||
<h3>Services</h3>
|
||||
{{ range . }}
|
||||
<a href="{{ .Permalink }}"><h4>{{ .Title }}</h4></a>
|
||||
<p>{{ .Summary }}</p>
|
||||
{{ end }}
|
||||
{{ end }} */}}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
{{ if hugo.IsProduction }}
|
||||
<script type="text/javascript">
|
||||
var sc_project=12701041;
|
||||
var sc_invisible=1;
|
||||
var sc_security="006094ec";
|
||||
</script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://www.statcounter.com/counter/counter.js"
|
||||
async>
|
||||
</script>
|
||||
<noscript>
|
||||
<div class="statcounter">
|
||||
<a
|
||||
title="Web Analytics Made Easy - Statcounter"
|
||||
href="https://statcounter.com/"
|
||||
target="_blank"
|
||||
>
|
||||
<img class="statcounter"
|
||||
src="https://c.statcounter.com/12701041/0/006094ec/1/"
|
||||
alt=""
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</noscript>
|
||||
{{ end }}
|
||||
35
layouts/partials/site/header.html
Normal file
35
layouts/partials/site/header.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<header class="site-header">
|
||||
<div class="container">
|
||||
<a href="/" class="site-masthead" title="hi, i'm a.">
|
||||
<img class="site-icon" width=32 src="/images/people/avatar.png" alt="">
|
||||
<p class="site-title">hi, i'm a.</p>
|
||||
</a>
|
||||
<a href="/support" class="support">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>tabler:tip-jar</title><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M14 10h-2.5a1.5 1.5 0 0 0 0 3h1a1.5 1.5 0 0 1 0 3H10m2-7v1m0 6v1"/><path d="M17 4v1.882c0 .685.387 1.312 1 1.618s1 .933 1 1.618V18a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V9.118c0-.685.387-1.312 1-1.618s1-.933 1-1.618V4M6 4h12z"/></g></svg>
|
||||
<span>support me</span>
|
||||
</a>
|
||||
<nav class="site-nav" aria-label="Main navigation">
|
||||
<ul>
|
||||
{{ $currentPage := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
{{ $active := $currentPage.IsMenuCurrent "main" . }}
|
||||
<li
|
||||
{{- if $active }}
|
||||
class="active"
|
||||
{{ end }}>
|
||||
<a href="{{ .URL | absLangURL }}" {{- if $active }}
|
||||
aria-current="page"
|
||||
{{ end }}>
|
||||
{{ .Pre }}
|
||||
<span>{{ .Name }}</span>
|
||||
{{ .Post }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div style="position: relative;">
|
||||
<div id="top" style="scroll-margin-top: var(--header-height);"></div>
|
||||
</div>
|
||||
|
|
@ -1,6 +1,3 @@
|
|||
{{- $firstH1 := partial "name.html" . }}
|
||||
{{- $title := or .Title $firstH1 $.File.ContentBaseName }}
|
||||
|
||||
{{- $cover := ($.Resources.ByType "image").GetMatch "{*cover*,*thumbnail*,*featured*}" -}}
|
||||
{{ $icon := resources.GetMatch (default "" .Site.Params.icon) -}}
|
||||
|
||||
|
|
@ -15,8 +12,8 @@
|
|||
<meta property="og:title" name="twitter:title" itemprop="name" content="{{ . }}" />
|
||||
{{- end }}
|
||||
{{- else }}
|
||||
<title>{{ or .Params.name (print $title " - " .Site.Title) }}</title>
|
||||
<meta property="og:title" name="twitter:title" itemprop="name" content="{{ or .Params.name $title }}" />
|
||||
<title>{{ or .Params.name (print .Title " - " .Site.Title) }}</title>
|
||||
<meta property="og:title" name="twitter:title" itemprop="name" content="{{ or .Params.name .Title }}" />
|
||||
{{- end -}}
|
||||
|
||||
{{/*=== description ===*/}}
|
||||
|
|
@ -90,7 +87,7 @@
|
|||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "Article",
|
||||
"headline": {{ $title }},
|
||||
"headline": {{ .Title }},
|
||||
"author": {
|
||||
"@type": "Person",
|
||||
"name": {{ or .Params.author .Site.Params.author }},
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue