.integration-form { padding: 0.7vh 0.7vw; border-bottom: 1px solid #ccc; } .flex, .option { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } .option { -webkit-border-radius: 0.4vw; border-radius: 0.4vw; background: #fff; text-decoration: none; -webkit-box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.2); box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.2); margin-top: 0.7vh; padding: 0.7vh 0.7vw; } .board-header { display: grid; flex: 1; gap: 0.3lh; } body { &.mobile-mode { .board-header { flex-wrap: wrap; } } &:not(.mobile-mode) { .header-board-menu { flex: 1; } .board-header { justify-content: space-between; grid-auto-flow: column; } .board-header-btns-left { flex: 1; justify-content: center; } .board-header-btns-right { flex-grow: 0; justify-content: end; } & .board-header-btns-right, & .board-header-btns-left, & .header-board-menu { align-self: center; align-items: center; display: flex; gap: 1.5ch; overflow-wrap: normal; } } } /* Make some space on intermediate layouts */ @media screen and (max-width: 1200px) { .board-header-btns-right span { display: none !important; } } .header-board-menu, .board-header-btns { display: flex; align-self: center; align-items: center; justify-content: center; gap: 1ch; & p { margin: 0; } } .board-header-btns-right > a { flex-wrap: no-wrap; } body.mobile-mode { header-board-menu h1 { font-size: 2em; } .board-header-btn { /* avoid wrapping if possible, at the cost of little icons */ font-size: 0.5em; /* no much choice because the way FA icons are inserted */ padding-top: 0.1lh; min-height: 0.8lh; } .board-header-btns-right { display: grid; grid-auto-flow: column; grid-template-columns: repeat(auto-fit, 1fr); flex: 1; gap: 1ch; justify-content: start; align-items: center; } } .board-header-btns-left { display: flex; flex: 1; gap: 2ch; padding: 0 0.5ch; }