wip: redo home and work pages
This commit is contained in:
parent
527f3b7892
commit
2448d60f35
88
assets/scss/base/content.scss
Normal file
88
assets/scss/base/content.scss
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
.content {
|
||||
/* 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,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,30 @@
|
|||
$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-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,252 +1,183 @@
|
|||
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;
|
||||
|
||||
#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%;
|
||||
height: 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;
|
||||
}
|
||||
p {
|
||||
grid-column: 2 / span 2;
|
||||
font-size: 1.25rem;
|
||||
max-width: 35ch;
|
||||
margin: 0;
|
||||
place-self: center start;
|
||||
}
|
||||
a {
|
||||
grid-column: 4;
|
||||
grid-row: 2;
|
||||
place-self: center start;
|
||||
}
|
||||
}
|
||||
article#now {
|
||||
grid-column: 1 / span 1;
|
||||
}
|
||||
article#todo {
|
||||
grid-column: 2 / span 1;
|
||||
}
|
||||
}
|
||||
|
||||
#updates {
|
||||
background: var(--color-card-background);
|
||||
color: var(--color-card-text);
|
||||
border-radius: var(--border-radius);
|
||||
padding-inline: var(--padding-inline, 1rem);
|
||||
}
|
||||
|
||||
@media (min-width: 60rem) {
|
||||
margin-top: 1rem;
|
||||
#about {
|
||||
--gap: 1rem;
|
||||
padding-inline: 2rem;
|
||||
grid-template-areas:
|
||||
"info deeds"
|
||||
"updates updates";
|
||||
grid-template-columns: 20rem 1fr;
|
||||
#info {
|
||||
grid-area: info;
|
||||
}
|
||||
#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:
|
||||
"info 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 {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,136 +1,149 @@
|
|||
.site-header {
|
||||
z-index: 10;
|
||||
box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
|
||||
a {
|
||||
text-transform: lowercase;
|
||||
padding-block: 1rem;
|
||||
.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);
|
||||
@include box-shadow-heavy;
|
||||
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;
|
||||
}
|
||||
&: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,0,0,0.12), 0 -1px 2px rgba(0,0,0,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;
|
||||
margin-bottom: var(--nav-height, 4rem);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
202
assets/scss/layouts/work/list.scss
Normal file
202
assets/scss/layouts/work/list.scss
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
main.work {
|
||||
text-transform: lowercase;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
#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;
|
||||
}
|
||||
.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: hsl(150, 100%, 20%);}
|
||||
.me {color: hsl(210, 100%, 40%);}
|
||||
|
||||
.work-items {
|
||||
--border-radius: 1rem;
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
.your-item {
|
||||
display: grid;
|
||||
padding: 2rem;
|
||||
border: 4px dashed green;
|
||||
border-radius: var(--border-radius, 1rem);
|
||||
aspect-ratio: 1;
|
||||
place-items: center;
|
||||
}
|
||||
#hire-me {
|
||||
.button {
|
||||
span {
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
.email {
|
||||
margin-block-end: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,56 +1,21 @@
|
|||
@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/content.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/work/list.scss";
|
||||
@import "layouts/blog/list.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/blog/single.scss";
|
||||
2
content/contributions/index.md
Normal file
2
content/contributions/index.md
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
+++
|
||||
+++
|
||||
0
content/services/social-web-consultancy/index.md
Normal file
0
content/services/social-web-consultancy/index.md
Normal file
0
content/services/software-documentation/index.md
Normal file
0
content/services/software-documentation/index.md
Normal file
0
content/services/web-design/index.md
Normal file
0
content/services/web-design/index.md
Normal file
|
|
@ -9,7 +9,9 @@ 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
|
||||
|
|
|
|||
|
|
@ -7,8 +7,13 @@ start = "Aug 2019"
|
|||
end = "Jan 2020"
|
||||
at = "Mastodon"
|
||||
position = "Information Architect / Documentation Specialist"
|
||||
tags = ["mastodon", "documentation", "information architecture", "rest api"]
|
||||
tags = ["mastodon", "documentation", "information architecture", "rest api", "technical writing"]
|
||||
categories = ["Work"]
|
||||
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;
|
||||
|
|
@ -173,7 +176,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 +231,7 @@
|
|||
}
|
||||
.praise {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
background: #303643;
|
||||
color: #d9e1e8;
|
||||
font-size: 1.8em;
|
||||
|
|
@ -336,9 +340,16 @@
|
|||
}
|
||||
.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 +360,11 @@
|
|||
}
|
||||
}
|
||||
&.email {
|
||||
background: #0060ff;
|
||||
color: white;
|
||||
&:hover {
|
||||
background: #9baec8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ tags = ["pixelfed", "project management", "product management", "github issues",
|
|||
categories = ["Work"]
|
||||
[[resources]]
|
||||
name = "cover"
|
||||
src = "/images/cover/pixelfed.jpg"
|
||||
src = "masterpost.jpg"
|
||||
+++
|
||||
|
||||
## Overview
|
||||
|
|
|
|||
|
|
@ -9,7 +9,11 @@ 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">
|
||||
|
|
|
|||
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 |
|
|
@ -9,4 +9,5 @@ at = "UAB"
|
|||
position = "Graduated from The University of Alabama at Birmingham"
|
||||
tags = []
|
||||
categories = ["Work"]
|
||||
draft = true
|
||||
+++
|
||||
42
hugo.toml
42
hugo.toml
|
|
@ -19,36 +19,36 @@ 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>person</title><path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-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>briefcase</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/"
|
||||
pageRef = "/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/"
|
||||
weight = 30
|
||||
# [[menu.main]]
|
||||
# identifier = "services"
|
||||
# pre = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M16.68 9.77a4.543 4.543 0 0 1-4.95.99l-5.41 6.52c-.99.99-2.59.99-3.58 0s-.99-2.59 0-3.57l6.52-5.42c-.68-1.65-.35-3.61.99-4.95c1.28-1.28 3.12-1.62 4.72-1.06l-2.89 2.89l2.82 2.82l2.86-2.87c.53 1.58.18 3.39-1.08 4.65M3.81 16.21c.4.39 1.04.39 1.43 0c.4-.4.4-1.04 0-1.43c-.39-.4-1.03-.4-1.43 0a1.02 1.02 0 0 0 0 1.43"/></svg>'
|
||||
# name = "Services"
|
||||
# pageRef = "/services/"
|
||||
# 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 = "wiki"
|
||||
pre = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><title>wikitext brackets</title><path fill="currentColor" d="M1 3v14h3v-2H3V5h1V3zm4 0v14h4v-2H7V5h2V3zm11 0v2h1v10h-1v2h3V3zm-5 0v2h2v10h-2v2h4V3z"/></svg>'
|
||||
name = "Wiki"
|
||||
pageRef = "/wiki/"
|
||||
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>'
|
||||
name = "Blog"
|
||||
url = "/blog/"
|
||||
pre = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>article</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 = "Posts"
|
||||
pageRef = "/blog/"
|
||||
weight = 50
|
||||
|
|
@ -1,41 +1,59 @@
|
|||
{{ define "body" }}
|
||||
{{ partial "site-header.html" . }}
|
||||
<main class="index">
|
||||
<section id="about">
|
||||
<article class="h-card vcard" id="hcard">
|
||||
<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 photo" width=120 height=120 src="/images/people/avatar.png" alt="">
|
||||
<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">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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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.
|
||||
|
|
@ -60,36 +78,61 @@
|
|||
</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>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="deeds">
|
||||
|
||||
<section id="done">
|
||||
<h2 class="section-title">Notable work</h2>
|
||||
<section id="mastodon">
|
||||
<h3 class="section-title">Mastodon documentation case study</h3>
|
||||
<img src="/work/mastodon/mastodocs.jpg" alt="mastodon documentation">
|
||||
<p>I reorganized and rewrote the docs for an open-source project with millions of users.</p>
|
||||
<a href="/work/mastodon">Read more ></a>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="doing">
|
||||
<h2 class="section-title">Present involvement</h2>
|
||||
<section id="socialweb">
|
||||
<h2 class="section-title">social web so-called "expert"</h2>
|
||||
<h3 class="section-title">social web so-called "expert"</h3>
|
||||
<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>
|
||||
|
||||
<section id="todo">
|
||||
<h2 class="section-title">Future directions</h2>
|
||||
<section id="untitled-social-app">
|
||||
<h2 class="section-title">untitled social app</h2>
|
||||
<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.</p>
|
||||
</section>
|
||||
</article>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="updates">
|
||||
<section id="news">
|
||||
<h2>Latest news</h2>
|
||||
<p>June 2024: updated this website's layout</p>
|
||||
</section>
|
||||
|
||||
<section id="activity">
|
||||
<h2>Latest posts</h2>
|
||||
<ul>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="changelog">
|
||||
<h2>Latest changes</h2>
|
||||
{{ range first 5 .Site.RegularPages.ByLastmod.Reverse }}
|
||||
<p>{{ .Title }} was edited on {{ .Lastmod }} by commit {{.GitInfo.AbbreviatedHash}} - {{.GitInfo.Subject}}</p>
|
||||
{{ end }}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<style>
|
||||
body {background: #abc;}
|
||||
</style>
|
||||
{{ end }}
|
||||
|
|
@ -1,26 +1,34 @@
|
|||
<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 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>
|
||||
<nav class="site-nav">
|
||||
<a href="/contributions" class="support">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width=1em height=1em viewBox="0 0 20 20" fill="currentColor">
|
||||
<title>heart</title>
|
||||
<path d="m9.653 16.915-.005-.003-.019-.01a20.759 20.759 0 0 1-1.162-.682 22.045 22.045 0 0 1-2.582-1.9C4.045 12.733 2 10.352 2 7.5a4.5 4.5 0 0 1 8-2.828A4.5 4.5 0 0 1 18 7.5c0 2.852-2.044 5.233-3.885 6.82a22.049 22.049 0 0 1-3.744 2.582l-.019.01-.005.003h-.002a.739.739 0 0 1-.69.001l-.002-.001Z" />
|
||||
</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 or (and $currentPage.IsHome (eq .Identifier "home")) ($currentPage.IsMenuCurrent "main" .) (eq $currentPage.Section .Identifier) }}
|
||||
{{- if $active }}
|
||||
class="active"
|
||||
{{ end }}>
|
||||
<a href="{{ .URL | absLangURL }}">
|
||||
<a href="{{ .URL | absLangURL }}" {{- if $active }}
|
||||
aria-current="page"
|
||||
{{ end }}>
|
||||
{{ .Pre }}
|
||||
<span>{{ .Name }}</span>
|
||||
{{ .Post }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ partial "i18nlist.html" . }}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,28 @@
|
|||
{{ define "main" }}
|
||||
<main id="work">
|
||||
<header class="section" id="intro">
|
||||
<main class="work">
|
||||
<header id="intro">
|
||||
<div class="container">
|
||||
<h1 class="tagline">i can help you<br> <em>figure out the hard parts.</em></h1>
|
||||
<p class="blurb">need something done? perhaps a website, some documentation, or simply advice on a project? i'm here for you.</p>
|
||||
<a href="mailto:a@trwnh.com" class="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><span>email me</span></a>
|
||||
<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>
|
||||
<a href="mailto:a@trwnh.com" class="cta button primary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><title>email envelope</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>Send a proposal</span>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
<section id="services">
|
||||
<div class="container">
|
||||
<h2 class="title"></h2>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="process">
|
||||
<div class="container">
|
||||
<h2 class="title"><a href="#process">#</a>a <strong>no-nonsense</strong> approach <br>to making things <em>make sense.</em></h2>
|
||||
<h2 class="title">A <strong>no-nonsense</strong> approach to making things <em>make sense.</em></h2>
|
||||
<section>
|
||||
<h3 class="subtitle">
|
||||
your needs come first.
|
||||
<span class="you">Your</span> needs come first.
|
||||
</h3>
|
||||
<p class="blurb">we'll sit down and figure out <br>exactly what your problem is, <br>and what your requirements are.</p>
|
||||
<p class="blurb">We'll sit down and figure out exactly what <span class="you">your</span> problem is, and what <span class="you">your</span> requirements are.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3 class="subtitle">
|
||||
|
|
@ -26,64 +34,70 @@
|
|||
</section>
|
||||
<section class="section" id="praise">
|
||||
<div class="container">
|
||||
<h2 class="title"><a href="#praise">#</a>what others have said:</h2>
|
||||
<h2 class="title">What others have said:</h2>
|
||||
<div class="testimonials">
|
||||
<div class="testimonial">
|
||||
{{ template "shortcodes/people/khalil.html" . }}
|
||||
<p class="name">Khalil Saadiq,<br>former classmate</p>
|
||||
<blockquote class="bubble">it's scary how much you know.</blockquote>
|
||||
<blockquote class="bubble">It's scary how much you know.</blockquote>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
{{ template "shortcodes/people/gargron.html" . }}
|
||||
<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>
|
||||
<blockquote class="bubble">Bless you for being here to work on the docs BTW. It's a big relief.</blockquote>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
{{ template "shortcodes/people/dansup.html" . }}
|
||||
<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>
|
||||
<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 <strong>knowledgeable</strong> person you can <strong>trust</strong> to do the work <strong>right</strong>, as well? i'd love to add <em class="you">your</em> praise above.</p>
|
||||
<a href="mailto:a@trwnh.com" class="email button primary"><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>
|
||||
<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>
|
||||
<a href="mailto:a@trwnh.com" class="email cta button primary"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><title>email envelope</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>Send a proposal</span></a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="timeline">
|
||||
<section class="section" id="examples">
|
||||
<div class="container">
|
||||
<h2 class="title"><a href="#timeline">#</a>here's a timeline of work i've done.</h2>
|
||||
<div class="timeline">
|
||||
{{ range .Pages.ByDate }}
|
||||
<article class="timeline-item {{ .Permalink | relURL | anchorize }}">
|
||||
<h3 class="timeline-item__title">{{ .Params.position }}</h3>
|
||||
<p class="timeline-item__summary">{{.Summary}}</p>
|
||||
<span class="timeline-item__daterange">
|
||||
<datetime class="timeline-item__date">{{ .Params.start }}</datetime> – <datetime class="timeline-item__date">{{ .Params.end }}</datetime>
|
||||
</span>
|
||||
<span class="timeline-item__at">at {{ .Params.at }}</span>
|
||||
<a class="timeline-item__readmore button primary" href="{{ .Permalink }}">Read more...</a>
|
||||
</article>
|
||||
<h2 class="title">Here's some of my more notable work.</h2>
|
||||
<div class="work-items">
|
||||
{{ range .Pages }}
|
||||
<section class="work-item {{ .Permalink | relURL | anchorize }}">
|
||||
<a class="work-item__link" href="{{ .Permalink }}">
|
||||
<h3 class="work-item__title">{{ .Title }}</h3>
|
||||
{{ with .Resources.GetMatch "cover" }}
|
||||
<img class="work-item__image" src="{{ .Permalink }}" alt="">
|
||||
{{ end }}
|
||||
</a>
|
||||
<p class="work-item__summary">{{.Summary}}</p>
|
||||
</section>
|
||||
{{ end }}
|
||||
<section class="you timeline-item" id="hireme">
|
||||
<h3 class="timeline-item__title">You could be here.</h3>
|
||||
<p class="timeline-item__summary">i'm currently <strong>available</strong> for work. let's get in touch.</p>
|
||||
<span class="timeline-item__daterange">Today</span>
|
||||
<span class="timeline-item__at">at your service</span>
|
||||
<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>
|
||||
<a href="mailto:a@trwnh.com" class="email cta button primary"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><title>email envelope</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>Send a proposal</span></a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="cta">
|
||||
<section class="section" id="hire-me">
|
||||
<div class="container">
|
||||
<div class="buttons">
|
||||
<a href="mailto:a@trwnh.com" class="email button primary"><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>
|
||||
<a href="/resume" class="resume button secondary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width=16 height=16><path d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 400H303.2c.9-4.5.8 3.6.8-22.4 0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6 0 26-.2 17.9.8 22.4H48V144h480v288zm-168-80h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm-168 96c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64z"/></svg> Résume (HTML)</a>
|
||||
<a href="/resume/abdullah-tarawneh_resume.pdf" class="resume button secondary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width=16 height=16><path d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm76.45 211.36l-96.42 95.7c-6.65 6.61-17.39 6.61-24.04 0l-96.42-95.7C73.42 337.29 80.54 320 94.82 320H160v-80c0-8.84 7.16-16 16-16h32c8.84 0 16 7.16 16 16v80h65.18c14.28 0 21.4 17.29 11.27 27.36zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z"/></svg> Résume (PDF)</a>
|
||||
</div>
|
||||
<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>email envelope</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>personal document</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>personal document</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_resume.pdf" class="writing-samples button secondary"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>writing document</title><path fill="currentColor" d="M12 2v6a2 2 0 0 0 2 2h4.92c-.596.22-1.144.554-1.558.97l-6.05 6.092a2.8 2.8 0 0 0-.728 1.279l-.525 2.03A2.08 2.08 0 0 0 10.3 22H5.5A1.5 1.5 0 0 1 4 20.5v-17A1.5 1.5 0 0 1 5.5 2zm1.5.5V8a.5.5 0 0 0 .5.5h5.5zm-1.304 15.072l5.902-5.902a2.285 2.285 0 1 1 3.233 3.232l-5.903 5.902a2.7 2.7 0 0 1-1.247.707l-1.831.457a1.087 1.087 0 0 1-1.318-1.318l.457-1.83c.118-.473.362-.904.707-1.248"/></svg><span>Tech writing samples (PDF)</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
|
|
|||
BIN
static/resume/abdullah-tarawneh_writing-samples.odt
Normal file
BIN
static/resume/abdullah-tarawneh_writing-samples.odt
Normal file
Binary file not shown.
BIN
static/resume/abdullah-tarawneh_writing-samples.pdf
Normal file
BIN
static/resume/abdullah-tarawneh_writing-samples.pdf
Normal file
Binary file not shown.
Loading…
Reference in a new issue