Commit 10d92221 authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Relayout footer with grid areas and add photo

parent 3c3946c2
......@@ -3,5 +3,6 @@
<h2>A bit about me</h2>
<p>Hello! I&#8217;m a British designer, living in Ireland, and working as one half of <a href="https://ind.ie">Ind.ie</a>. We make an app called <a href="https://better.fyi">Better</a> that protects you while you’re browsing the web. My book <a href="https://abookapart.com/products/accessibility-for-everyone">Accessibility For Everyone</a> is available in paperback, ebook, and audiobook from A Book Apart.</p>
<p><small class="site-info">Copyright &copy; <a href="{{ .Site.BaseURL }}" >{{ .Site.Title }}</a>, {{ now.Format "2006" }}. <a href="/rss">RSS feeds</a></small></p>
<img src="/notes/1/me.jpg" alt="Photo of me waving at you." >
</div>
</footer>
......@@ -506,11 +506,22 @@ main {
padding: 0.5em 0;
}
.site-footer img {
border-radius: 50%;
display: block;
margin: 1em auto;
max-width: 5.4em;
}
@media screen and (min-width: 37em) {
.footer-wrap {
display: grid;
grid-template-columns: repeat(7, minmax(14.285714286%, 7.4em));
grid-template-rows: auto;
grid-template-areas: "a b b b b c z"
"a d d d d c z"
"a e e e e c z";
/* centre everything */
margin: 0 auto;
max-width: 51.8em;
......@@ -518,11 +529,28 @@ main {
.site-footer .footer-wrap h2,
.site-footer .footer-wrap p {
grid-column: 2 / 6;
margin-left: 0;
margin-right: 0;
}
.site-footer .footer-wrap h2 {
grid-area: b;
}
.site-footer .footer-wrap p:nth-of-type(1) {
grid-area: d;
}
.site-footer .footer-wrap p:nth-of-type(2) {
grid-area: e;
}
.site-footer img {
grid-area: c;
margin-top: 4em;
margin-left: 2em;
}
}
/* - - - - - - - - NAVIGATION
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment