*/ } main .portrait-link:hover { background-color: transparent; } .portrait { width: 130px; height: 130px; object-fit: cover; border-radius: 50%; } @media (max-width: 600px) { .home-intro { grid-template-columns: 1fr; } .portrait-link { order: -2; /* photo above the heading */ justify-self: center; margin: 2.5rem 0 0; } .home-intro .page-header { order: -1; margin-top: 1.25rem; /* theme default is 4rem; the photo now carries the top spacing */ } } /* Organization logo grid on the homepage */ .logo-grid { list-style: none; margin: 1rem 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; } .logo-grid li { /* Several logos are dark on a transparent background, so keep a light tile in both themes instead of relying on the page background. */ background: #fff; border: 1px solid var(--border-color); border-radius: 0.5rem; padding: 0.6rem 0.8rem; height: 2.35rem; display: flex; align-items: center; justify-content: center; } .logo-grid img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 0; } @media (max-width: 600px) { .logo-grid { grid-template-columns: repeat(2, 1fr); } } /* Site-wide footer (templates/apollo/body_end.html). The theme lays out as a flex row of left / content / right columns, so the footer needs the row to wrap onto a second line to sit underneath them. */ body { flex-wrap: wrap; align-content: space-between; /* columns at the top, footer pinned to the bottom */ box-sizing: border-box; margin-bottom: 0; min-height: calc(100vh - 8px); /* browser default body margin-top */ min-height: calc(100dvh - 8px); /* phones: track the visible area as toolbars hide */ } /* Below the desktop breakpoint the side columns are empty (the TOC is hidden under 1366px anyway). Hide them so space-between only spreads the content row and the footer, not three empty rows. */ @media (max-width: 991px) { .left-content, .right-content { display: none; } } .site-footer { flex-basis: 100%; width: 100%; text-align: center; font-size: 0.85rem; color: var(--text-1); padding-top: 1rem; } .site-footer .heart { color: var(--primary-color); } .site-footer .sep { margin: 0 0.4rem; } /* The theme only underlines links inside

; the footer sits outside it. */ .site-footer a { border-bottom: 1px solid var(--primary-color); } /* "Recent articles" list: the theme offsets the list with 1rem of padding, which does not collapse with the heading's bottom margin, so the list sat 1rem lower than the logo grid (whose 1rem top margin does collapse). Use a margin instead so both sections start the same distance from their heading. On phones the theme also gives every post header 1.6rem of vertical margin; drop it on the first entry so it does not add to the gap. */ .post-list > ul { padding-top: 0; margin-top: 1rem; } @media only screen and (max-width: 640px) { .post-list .list-item:first-child .post-header { margin-top: 0; } }