scss reorg and ui rework
This commit is contained in:
parent
c8db743235
commit
71b1965ba3
17 changed files with 271 additions and 300 deletions
|
|
@ -1,168 +0,0 @@
|
|||
a:link {color: #06f;}
|
||||
a:visited {color: rgb(147, 85, 197)}
|
||||
|
||||
.button, .button:link, .button:visited {
|
||||
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;
|
||||
}
|
||||
|
||||
.button.primary {
|
||||
background: #06f;
|
||||
color: white;
|
||||
}
|
||||
.button.secondary {
|
||||
background: white;
|
||||
border: 2px solid #06f;
|
||||
color: #06f;
|
||||
}
|
||||
|
||||
@mixin pullquote {
|
||||
content: attr(data-pullquote);
|
||||
font-size: 1em;
|
||||
line-height: 1.2;
|
||||
display: flex;
|
||||
font-family: serif;
|
||||
color: #555;
|
||||
padding: 1em;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
.has-pullquote{
|
||||
&.before:before {
|
||||
@include pullquote;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
&.after:after {
|
||||
@include pullquote;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
#praise {
|
||||
.title:before {
|
||||
content: 'praise';
|
||||
}
|
||||
.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: #212121;
|
||||
}
|
||||
.name {
|
||||
grid-area: n;
|
||||
align-self: center;
|
||||
}
|
||||
.bubble {
|
||||
grid-area: b;
|
||||
background: #212121;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
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: #212121;
|
||||
bottom: -1em;
|
||||
left:2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
#intro {
|
||||
--headerHeight: 4em;
|
||||
--navHeight: 4em;
|
||||
background-color: #00234F;
|
||||
color: white;
|
||||
background-image: url('/images/puzzlehead.svg');
|
||||
background-size: contain;
|
||||
background-position-x: center;
|
||||
background-position-y: bottom;
|
||||
background-repeat: no-repeat;
|
||||
min-height: calc(100vh - var(--headerHeight) - var(--navHeight));
|
||||
min-height: calc(var(--vh, 1vh) * 100 - var(--headerHeight) - var(--navHeight));
|
||||
@media (min-width: 960px) {
|
||||
min-height: calc(100vh - var(--headerHeight));
|
||||
min-height: calc(var(--vh, 1vh) * 100 - var(--headerHeight));
|
||||
}
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
.container {
|
||||
position: relative;
|
||||
padding: 1em;
|
||||
}
|
||||
.tagline {
|
||||
font-size: 1.5em;
|
||||
font-weight: 700;
|
||||
em {color: #0f6;font-style: italic;}
|
||||
margin-bottom: 0.7rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.blurb {
|
||||
margin-bottom: 1.75em;
|
||||
max-width: 30ch;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
// TODO: matrix of weird sizes for intro breakpoints
|
||||
//
|
||||
// END: matrix of weird sizes for breakpoints
|
||||
.button {
|
||||
background: #06f;
|
||||
color: white;
|
||||
width: max-content;
|
||||
i {margin: 0;}
|
||||
span {display: none;}
|
||||
@media (min-width: 30em) {
|
||||
span {display: block;}
|
||||
padding: 1em 2em;
|
||||
}
|
||||
border-radius: 100em;
|
||||
position: absolute;
|
||||
bottom: 1em;
|
||||
right: 1em;
|
||||
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);
|
||||
}
|
||||
}
|
||||
7
assets/scss/base/mixins.scss
Normal file
7
assets/scss/base/mixins.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
@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);
|
||||
}
|
||||
|
|
@ -37,6 +37,7 @@
|
|||
line-height: 1.4;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
a {word-wrap: break-word;}
|
||||
h1 {font-size: 2.49em}
|
||||
h2 {font-size: 2.07em}
|
||||
h3 {font-size: 1.728em}
|
||||
|
|
|
|||
14
assets/scss/base/variables.scss
Normal file
14
assets/scss/base/variables.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
$container-width: 960px;
|
||||
|
||||
html {
|
||||
--nav-height: 4em;
|
||||
--header-height: 4em;
|
||||
--link-color: #06f;
|
||||
--link-visited: rgb(147, 85, 197);
|
||||
--primary-accent: #06f;
|
||||
--ui-background: #fff;
|
||||
--ui-background-track: #ddd;
|
||||
--ui-text: #212121;
|
||||
--ui-text-muted: #777;
|
||||
--ui-text-bold: #000;
|
||||
}
|
||||
25
assets/scss/components/button.scss
Normal file
25
assets/scss/components/button.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
.button, .button:link, .button:visited {
|
||||
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;
|
||||
}
|
||||
|
||||
.button.primary {
|
||||
background: var(--primary-accent);
|
||||
color: white;
|
||||
}
|
||||
.button.secondary {
|
||||
background: white;
|
||||
border: 2px solid var(--primary-accent);
|
||||
color: #06f;
|
||||
}
|
||||
34
assets/scss/components/h-card.scss
Normal file
34
assets/scss/components/h-card.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
.h-card {
|
||||
font-family: monospace;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
width: 100%;
|
||||
max-width: 18rem;
|
||||
margin: 2em auto;
|
||||
border-radius: 1em;
|
||||
@include box-shadow;
|
||||
.banner {
|
||||
background-image: url('/images/sunset.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
aspect-ratio: 2;
|
||||
position: relative;
|
||||
}
|
||||
img {
|
||||
border-radius: 100em;
|
||||
width: 25%;
|
||||
aspect-ratio: 1;
|
||||
background: rgba(0,0,0,0.5);
|
||||
}
|
||||
dl {
|
||||
dt, dd {width: max-content;}
|
||||
padding: 1rem;
|
||||
dt {font-weight: 700; margin-bottom: 0.25em}
|
||||
dd {margin-bottom: 0.5em; max-width: 100%;}
|
||||
}
|
||||
}
|
||||
56
assets/scss/components/intro.scss
Normal file
56
assets/scss/components/intro.scss
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
#intro {
|
||||
--headerHeight: 4em;
|
||||
--navHeight: 4em;
|
||||
background-color: #00234F;
|
||||
color: white;
|
||||
background-image: url('/images/puzzlehead.svg');
|
||||
background-size: contain;
|
||||
background-position-x: center;
|
||||
background-position-y: bottom;
|
||||
background-repeat: no-repeat;
|
||||
min-height: calc(100vh - var(--headerHeight) - var(--navHeight));
|
||||
min-height: calc(var(--vh, 1vh) * 100 - var(--headerHeight) - var(--navHeight));
|
||||
@media (min-width: 960px) {
|
||||
min-height: calc(100vh - var(--headerHeight));
|
||||
min-height: calc(var(--vh, 1vh) * 100 - var(--headerHeight));
|
||||
}
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
.container {
|
||||
position: relative;
|
||||
padding: 1em;
|
||||
}
|
||||
.tagline {
|
||||
font-size: 1.5em;
|
||||
font-weight: 700;
|
||||
em {color: #0f6;font-style: italic;}
|
||||
margin-bottom: 0.7rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.blurb {
|
||||
margin-bottom: 1.75em;
|
||||
max-width: 30ch;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
// TODO: matrix of weird sizes for intro breakpoints
|
||||
//
|
||||
// END: matrix of weird sizes for breakpoints
|
||||
.button {
|
||||
background: #06f;
|
||||
color: white;
|
||||
width: max-content;
|
||||
i {margin: 0;}
|
||||
span {display: none;}
|
||||
@media (min-width: 30em) {
|
||||
span {display: block;}
|
||||
padding: 1em 2em;
|
||||
}
|
||||
border-radius: 100em;
|
||||
position: absolute;
|
||||
bottom: 1em;
|
||||
right: 1em;
|
||||
@include box-shadow;
|
||||
}
|
||||
}
|
||||
2
assets/scss/components/links.scss
Normal file
2
assets/scss/components/links.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
a:link {color: var(--link-color);}
|
||||
a:visited {color: var(--link-visited);}
|
||||
57
assets/scss/components/praise.scss
Normal file
57
assets/scss/components/praise.scss
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
#praise {
|
||||
.title:before {
|
||||
content: 'praise';
|
||||
}
|
||||
.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: #212121;
|
||||
}
|
||||
.name {
|
||||
grid-area: n;
|
||||
align-self: center;
|
||||
}
|
||||
.bubble {
|
||||
grid-area: b;
|
||||
background: #212121;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
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: #212121;
|
||||
bottom: -1em;
|
||||
left:2.5em;
|
||||
}
|
||||
}
|
||||
20
assets/scss/components/pullquote.scss
Normal file
20
assets/scss/components/pullquote.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
@mixin pullquote {
|
||||
content: attr(data-pullquote);
|
||||
font-size: 1em;
|
||||
line-height: 1.2;
|
||||
display: flex;
|
||||
font-family: serif;
|
||||
color: #555;
|
||||
padding: 1em;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
.has-pullquote{
|
||||
&.before:before {
|
||||
@include pullquote;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
&.after:after {
|
||||
@include pullquote;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -99,11 +99,7 @@
|
|||
margin-top: 4em;
|
||||
}
|
||||
.project {
|
||||
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);
|
||||
@include box-shadow;
|
||||
border-radius: 0.25em;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,23 @@
|
|||
@import "base/reset.scss";
|
||||
@import "base/variables.scss";
|
||||
@import "base/mixins.scss";
|
||||
@import "base/sections.scss";
|
||||
@import "base/page.scss";
|
||||
@import "base/list.scss";
|
||||
@import "base/components.scss";
|
||||
|
||||
@import "content/index.scss";
|
||||
@import "components/links.scss";
|
||||
@import "components/pullquote.scss";
|
||||
@import "components/button.scss";
|
||||
@import "components/h-card.scss";
|
||||
@import "components/intro.scss";
|
||||
@import "components/praise.scss";
|
||||
|
||||
@import "content/work.scss";
|
||||
@import "content/index.scss";
|
||||
@import "content/work.scss";
|
||||
@import "content/work/trilogy.scss";
|
||||
@import "content/work/mastodon.scss";
|
||||
|
||||
@import "content/code.scss";
|
||||
|
||||
@import "content/blog.scss";
|
||||
@import "content/code.scss";
|
||||
@import "content/blog.scss";
|
||||
|
||||
@import "partials/site-header.scss";
|
||||
@import "partials/site-footer.scss";
|
||||
|
|
@ -1,77 +1,12 @@
|
|||
.site-footer {
|
||||
background: #ddd;
|
||||
hr {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
background: #212121;
|
||||
border: 0;
|
||||
border-radius: 100em;
|
||||
position: relative;
|
||||
margin-top: 1.5rem;
|
||||
display: none;
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #212121;
|
||||
border-radius: 100em;
|
||||
}
|
||||
&:before {
|
||||
margin-left: -0.75rem;
|
||||
}
|
||||
&:after {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
color: #212121;
|
||||
padding: 2em 0 calc(2em + 4em);
|
||||
@media (min-width: 960px) {
|
||||
padding: 2em 0;
|
||||
}
|
||||
hr {display: none}
|
||||
.container {
|
||||
position: relative;
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
flex-flow: column-reverse;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
@media (min-width: 41rem) {
|
||||
display: grid;
|
||||
grid-template-columns: 18rem 1fr;
|
||||
align-items: stretch;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
.about {max-width: 100%;}
|
||||
.h-card {
|
||||
font-family: monospace;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.banner {
|
||||
background-image: url('/images/sunset.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
img {
|
||||
border-radius: 100em;
|
||||
width: 50%;
|
||||
aspect-ratio: 1;
|
||||
background: rgba(0,0,0,0.5);
|
||||
}
|
||||
background: white;
|
||||
color: #212121;
|
||||
dl {
|
||||
dt, dd {width: max-content;}
|
||||
padding: 1rem;
|
||||
dt {font-weight: 700; margin-bottom: 0.25em}
|
||||
dd {margin-bottom: 0.5em; max-width: 100%;}
|
||||
}
|
||||
}
|
||||
.external-links {
|
||||
margin: 0 auto;
|
||||
|
|
@ -91,8 +26,6 @@
|
|||
i {font-size: 1.6em;}
|
||||
}
|
||||
.footer-copy {
|
||||
background: white;
|
||||
color: #212121;
|
||||
font-family: monospace;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
box-shadow: 0px 2px 6px rgba(0,0,0,0.2);
|
||||
background: var(--ui-background);
|
||||
color: var(--ui-text);
|
||||
}
|
||||
|
||||
.site-masthead {
|
||||
|
|
@ -16,6 +17,9 @@
|
|||
padding: 1em 0;
|
||||
gap: 1em;
|
||||
flex: 1;
|
||||
@media (min-width: $container-width) {
|
||||
flex: unset;
|
||||
}
|
||||
}
|
||||
.site-icon {
|
||||
width: 2em;
|
||||
|
|
@ -25,12 +29,12 @@
|
|||
.site-title {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
font-size: 1rem;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
padding-bottom: 4rem;
|
||||
@media (min-width: 960px) {
|
||||
padding-bottom: var(--nav-height);
|
||||
@media (min-width: $container-width) {
|
||||
padding-bottom: unset;
|
||||
}
|
||||
}
|
||||
|
|
@ -41,21 +45,21 @@
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
background: white;
|
||||
color: #777;
|
||||
background: var(--ui-background);
|
||||
color: var(--ui-text-muted);
|
||||
z-index: 2;
|
||||
ul {
|
||||
height: 4em;
|
||||
max-width: 960px;
|
||||
height: var(--nav-height);
|
||||
max-width: $container-width;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
li {
|
||||
flex: 1;
|
||||
border-bottom: 4px solid #ddd;
|
||||
border-bottom: 4px solid var(--ui-background-track);
|
||||
&.active {
|
||||
color: black;
|
||||
border-bottom: 4px solid #06f;
|
||||
color: var(--ui-text-bold);
|
||||
border-bottom: 6px solid var(--primary-accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
a {
|
||||
|
|
@ -69,21 +73,19 @@
|
|||
}
|
||||
}
|
||||
box-shadow: 0px 2px 6px rgba(0,0,0,0.2);
|
||||
@media (min-width: 960px) {
|
||||
@media (min-width: $container-width) {
|
||||
position: unset;
|
||||
bottom: unset;
|
||||
left: unset;
|
||||
width: unset;
|
||||
background: unset;
|
||||
margin-left: 6em;
|
||||
flex-grow: unset;
|
||||
width: 20em;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (min-width: $container-width) {
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,23 @@
|
|||
<header class="" id="under-construction">
|
||||
<div class="container">
|
||||
<h1 class="title" style="margin-bottom: 0; margin-top: 1.5rem;">site under construction</h1>
|
||||
<article class="vcard h-card">
|
||||
<div class="banner"><img src="/images/people/avatar.png" alt="me" class="photo u-photo"></div>
|
||||
<dl>
|
||||
<dt>full name</dt>
|
||||
<dd class="fn n p-name"><span class="given-name">abdullah</span> <span class="family-name">tarawneh</span></dd>
|
||||
<dt>preferred name</dt>
|
||||
<dd class="nickname p-nickname">a</dd>
|
||||
<dt>email (smtp)</dt>
|
||||
<dd><a href="mailto:a@trwnh.com" class="email u-email">a@trwnh.com</a></dd>
|
||||
<dt>chat (xmpp)</dt>
|
||||
<dd><a href="xmpp:a@trwnh.com" class="url u-impp">a@trwnh.com</a></dd>
|
||||
<dt>social (activitypub)</dt>
|
||||
<dd><a href="https://mastodon.social/@trwnh" rel="me" class="url u-url">mastodon.social/@trwnh</a></dd>
|
||||
<dt>notes</dt>
|
||||
<dd class="note p-note">i have approximate knowledge of many things. perpetual student. (nb/ace/they)</dd>
|
||||
</dl>
|
||||
</article>
|
||||
</div>
|
||||
</header>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,8 @@
|
|||
<footer class="site-footer">
|
||||
<hr>
|
||||
<div class="container">
|
||||
<div class="about">
|
||||
<article class="vcard h-card">
|
||||
<div class="banner"><img src="/images/people/avatar.png" alt="me" class="photo u-photo"></div>
|
||||
<dl>
|
||||
<dt>full name</dt>
|
||||
<dd class="fn n p-name"><span class="given-name">abdullah</span> <span class="family-name">tarawneh</span></dd>
|
||||
<dt>preferred name</dt>
|
||||
<dd class="nickname p-nickname">a</dd>
|
||||
<dt>email (smtp)</dt>
|
||||
<dd><a href="mailto:a@trwnh.com" class="email u-email">a@trwnh.com</a></dd>
|
||||
<dt>chat (xmpp)</dt>
|
||||
<dd><a href="xmpp:a@trwnh.com" class="url u-impp">a@trwnh.com</a></dd>
|
||||
<dt>social (activitypub)</dt>
|
||||
<dd><a href="https://mastodon.social/@trwnh" rel="me" class="url u-url">mastodon.social/@trwnh</a></dd>
|
||||
<dt>notes</dt>
|
||||
<dd class="note p-note">i have approximate knowledge of many things. perpetual student. (nb/ace/they)</dd>
|
||||
</dl>
|
||||
</article>
|
||||
</div>
|
||||
<div class="footer-copy">
|
||||
<h1>site meta</h1>
|
||||
{{ if .GitInfo }}
|
||||
<h2>latest change:</h2>
|
||||
<div class="git-lastcommit">
|
||||
<time datetime='{{ .Lastmod.Format "2006-01-02T15:04:05Z0700" }}'>{{ .Lastmod.UTC.Format "Mon, 2006 Jan 02 15:04:05 MST" }}</time>
|
||||
<p>{{ .GitInfo.Subject }}</p>
|
||||
<a href='https://git.trwnh.com/a/abdullahtarawneh.com/commit/{{ .GitInfo.Hash }}'>{{ .GitInfo.AbbreviatedHash }}</a>
|
||||
</div>
|
||||
{{ else }}
|
||||
<h2>page last modified:</h2>
|
||||
<time datetime="">{{ .Lastmod }}</time>
|
||||
{{ end }}
|
||||
<h1></h1>
|
||||
<h2>other properties:</h2>
|
||||
<a href="https://trwnh.com"><h3>trwnh.com</h3></a>
|
||||
<p>links to everything else i do</p>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 94 KiB |
Loading…
Reference in a new issue