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 {
.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;
}
.site-footer .footer-wrap h2 {
grid-area: b;
grid-column: 2 / 6;
}
.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 .footer-wrap p {
grid-column: 2 / 6;
}
.site-footer img {
grid-area: c;
margin-top: 4em;
grid-column: 6 / 7;
grid-row: -1 / 4;
margin-top: 2em;
margin-left: 2em;
}
......@@ -890,7 +882,7 @@ figcaption {
margin-top: 0.5em;
}
@media screen and (min-width: 37em) {
@media screen and (min-width: 60em) {
figcaption {
grid-column: 1 / 2;
grid-row: -1 / 2;
......@@ -904,16 +896,8 @@ figcaption {
/* for photo grids */
@media screen and (min-width: 37em) {
@media screen and (min-width: 60em) {
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;
}
}
......@@ -971,10 +955,30 @@ figure.grid img {
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 {
grid-column: 6 / 9;
body.about-me .h-entry p:nth-of-type(1),
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
......
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