masq
/
json-theme-even-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(layout): center header elements on mobile

This commit is contained in:
Rafael Bardini 2021-06-20 22:37:59 +02:00
parent 7b99852f5f
commit 57c0b460e7
2 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
style.css
View File

@ -154,6 +154,7 @@ svg {
grid-column: full; grid-column: full;
grid-template-columns: inherit; grid-template-columns: inherit;
padding: 4em 0; padding: 4em 0;
text-align: center;
} }
.masthead > *, .masthead > *,
@ -163,9 +164,8 @@ section {
.masthead > img { .masthead > img {
border-radius: 50%; border-radius: 50%;
grid-column: side; margin: 0 auto;
grid-row: span 2; max-width: 12em;
max-width: 100%;
} }
article > * + *, article > * + *,
@ -225,11 +225,21 @@ blockquote > * + * {
margin-bottom: inherit; margin-bottom: inherit;
} }
.masthead {
text-align: inherit;
}
.masthead > *, .masthead > *,
section { section {
grid-column: content; grid-column: content;
} }
.masthead img {
grid-column: side;
grid-row: span 2;
max-width: 100%;
}
section { section {
display: contents; display: contents;
} }

16
tap-snapshots/test/render.js.test.cjs
View File

@ -170,6 +170,7 @@ svg {
grid-column: full; grid-column: full;
grid-template-columns: inherit; grid-template-columns: inherit;
padding: 4em 0; padding: 4em 0;
text-align: center;
} }
.masthead > *, .masthead > *,
@ -179,9 +180,8 @@ section {
.masthead > img { .masthead > img {
border-radius: 50%; border-radius: 50%;
grid-column: side; margin: 0 auto;
grid-row: span 2; max-width: 12em;
max-width: 100%;
} }
article > * + *, article > * + *,
@ -241,11 +241,21 @@ blockquote > * + * {
margin-bottom: inherit; margin-bottom: inherit;
} }
.masthead {
text-align: inherit;
}
.masthead > *, .masthead > *,
section { section {
grid-column: content; grid-column: content;
} }
.masthead img {
grid-column: side;
grid-row: span 2;
max-width: 100%;
}
section { section {
display: contents; display: contents;
} }