site footer finalized for now
This commit is contained in:
parent
0b910e48de
commit
c8db743235
2 changed files with 94 additions and 28 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue