More layout fixes (#94)

* More layout fixes
* Get aside flush with top/bottom
* Media change iconlist to one column on mobile
* Misc other fixes
* convert className to use React syntax consistently.
* Update J40Footer.spec.tsx.snap
TODO: body font need to be addressed at the theme level?
This commit is contained in:
TomNUSDS 2021-06-04 07:36:16 -07:00 committed by GitHub
commit 63d33b40d0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 51 additions and 35 deletions

View file

@ -3,9 +3,16 @@
.j40-two-column {
overflow: hidden;
column-count: 2;
column-gap: 1em;
padding: 0;
@media (min-width: 768px) {
column-count: 2;
column-gap: 1em;
}
@media (max-width: 768px) {
column-count: 1;
column-gap: 0;
}
}
.j40-two-column > * {
@ -21,6 +28,10 @@
max-width: revert;
}
.j40-two-column-confine {
max-width: fit-content;
}
.j40-header {
background-color: #112f4e; /* todo: move color to theme */
color: white;
@ -28,12 +39,17 @@
.j40-title {
font-size: xx-large;
font-family: "Merriweather Web";
}
.j40-aside {
background-color: #eff6fb;
}
.j40-aside-title {
padding-bottom: 1em;
}
.j40-footer-logo {
display: inline-block;
text-align: center;