Commit feb219c3 authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Use base grid to lay out about me page and footer

parent e0644e18
...@@ -684,30 +684,22 @@ main { ...@@ -684,30 +684,22 @@ main {
.footer-wrap { .footer-wrap {
display: grid; display: grid;
grid-template-columns: repeat(7, minmax(14.285714286%, 7.4em)); 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 */ /* centre everything */
margin: 0 auto; margin: 0 auto;
max-width: 51.8em; max-width: 51.8em;
} }
.site-footer .footer-wrap h2 { .site-footer .footer-wrap h2 {
grid-area: b; grid-column: 2 / 6;
} }
.site-footer .footer-wrap p:nth-of-type(1) { .site-footer .footer-wrap p {
grid-area: d; grid-column: 2 / 6;
}
.site-footer .footer-wrap p:nth-of-type(2) {
grid-area: e;
} }
.site-footer img { .site-footer img {
grid-area: c; grid-column: 6 / 7;
margin-top: 4em; grid-row: -1 / 4;
margin-top: 2em;
margin-left: 2em; margin-left: 2em;
} }
...@@ -890,7 +882,7 @@ figcaption { ...@@ -890,7 +882,7 @@ figcaption {
margin-top: 0.5em; margin-top: 0.5em;
} }
@media screen and (min-width: 37em) { @media screen and (min-width: 60em) {
figcaption { figcaption {
grid-column: 1 / 2; grid-column: 1 / 2;
grid-row: -1 / 2; grid-row: -1 / 2;
...@@ -904,16 +896,8 @@ figcaption { ...@@ -904,16 +896,8 @@ figcaption {
/* for photo grids */ /* for photo grids */
@media screen and (min-width: 37em) { @media screen and (min-width: 60em) {
figure.grid figcaption { figure.grid figcaption {
grid-row: 2 / 3;
}
}
/* for photo grids with two rows */
@media screen and (min-width: 37em) {
figure.grid.four figcaption {
grid-row: 1 / 2; grid-row: 1 / 2;
} }
} }
...@@ -971,10 +955,30 @@ figure.grid img { ...@@ -971,10 +955,30 @@ figure.grid img {
height: auto; height: auto;
} }
/* about page selfie */ /* about page with selfie */
@media screen and (min-width: 60em) {
body.about-me .h-entry h2, body.about-me .h-entry h3 {
grid-column: 2 / 6;
margin-right: var(--layout-unit);
}
body.about-me figure.selfie { body.about-me .h-entry p:nth-of-type(1),
grid-column: 6 / 9; body.about-me .h-entry p:nth-of-type(2),
body.about-me .h-entry p:nth-of-type(3) {
grid-column: 2 / 6;
margin-right: var(--layout-unit);
}
body.about-me figure.selfie {
display: block;
grid-column: 6 / 9;
grid-row: 1 / 6;
}
body.about-me figure.selfie figcaption {
margin-top: 0.5em;
}
} }
/* - - - - - - - - SYNTAX HIGHLIGHTING /* - - - - - - - - SYNTAX HIGHLIGHTING
......
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