site footer finalized for now

This commit is contained in:
a 2021-12-23 00:57:14 -06:00
parent 0b910e48de
commit c8db743235
2 changed files with 94 additions and 28 deletions

View file

@ -1,27 +1,54 @@
.site-footer {
background: white;
color: #535353;
hr {display: none;}
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;
}
}
.container {
position: relative;
padding: 1em;
display: flex;
flex-flow: column;
flex-flow: column-reverse;
justify-content: center;
align-items: center;
gap: 2rem;
@media (min-width: 38rem) {
@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;
border-radius: 1em;
overflow: hidden;
display: flex;
flex-flow: column;
max-width: 18rem;
height: 100%;
width: 100%;
.banner {
background-image: url('/images/sunset.jpg');
background-size: cover;
@ -29,8 +56,7 @@
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 2/1;
padding: 2rem;
padding: 1rem;
}
img {
border-radius: 100em;
@ -39,17 +65,13 @@
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%;}
}
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);
}
.external-links {
margin: 0 auto;
@ -68,25 +90,65 @@
}
i {font-size: 1.6em;}
}
.footer-copy {
background: white;
color: #212121;
font-family: monospace;
padding: 1rem;
width: 100%;
h1 {
font-weight: 700;
font-size: 1.21em;
margin-bottom: 1em;
}
h2 {
font-weight: 700;
font-size: 1.1em;
margin-bottom: 0.7rem;
margin-top: 1rem;
}
h3 {
font-weight: 700;
font-size: 1em;
margin-bottom: 0.5rem;
margin-top: 1rem;
}
ul {
display: flex;
flex-flow: column;
gap: 0.5rem;
}
p {
line-height: 1.4;
max-width: 55ch;
}
a h3 {
display: inline-block;
}
}
.git-lastcommit {
margin-bottom: 0.7rem;
display: grid;
grid-template-areas:
"time hash"
"subj subj";
grid-template-columns: 1fr auto;
"time time"
"hash subj";
grid-template-columns: max-content 1fr;
time {
grid-area: time;
display: flex;
justify-content: start;
align-items: center;
padding: 0.25rem 0;
}
p {
grid-area: subj;
padding: 1em;
}
a {
grid-area: hash;
display: flex;
justify-content: center;
align-items: center;
background: #ddd;
padding: 0.25rem;
border-radius: 0.25rem;
font-family: monospace;
}

View file

@ -19,23 +19,27 @@
<dd class="note p-note">i have approximate knowledge of many things. perpetual student. (nb/ace/they)</dd>
</dl>
</article>
<div class="external-links">
<a href="https://github.com/trwnh"><i class="fa fa-github"></i></a>
<a href="https://git.trwnh.com/a"><i class="fa fa-gitea"></i></a>
<a href="https://birdsounds.media"><i class="fa fa-camera"></i></a>
<a href="https://liberapay.com/trwnh"><i class="fa fa-liberapay"></i></a>
<a href="https://patreon.com/trwnh"><i class="fa fa-patreon"></i></a>
<a href="https://paypal.me/trwnh"><i class="fa fa-paypal"></i></a>
</div>
</div>
<div class="footer-copy">
<h1>abdullahtarawneh.com</h1>
<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 }}
<h2>other properties:</h2>
<a href="https://trwnh.com"><h3>trwnh.com</h3></a>
<p>links to everything else i do</p>
<a href="https://birdsounds.media"><h3>birdsounds.media</h3></a>
<p>concert photography</p>
<h2>credits:</h2>
<p>unless otherwise stated, all site content, graphics, design, and code is authored by abdullah tarawneh. likewise, unless otherwise stated, all site content, graphics, and code is released under creative commons atrribution-noncommercial-sharealike (cc by-nc-sa).</p>
</div>
</div>