@s9a/bae/demo.css

SF bae CSS color palette

html { font-family: arial, sans-serif; line-height: 1.666666 }
body { margin: auto; padding: 0; font-size: calc(1rem + 3vw) }
code { font: inherit }
:focus { outline-color: currentColor; outline-style: groove; text-decoration: none }
::selection { background: yellow; color: black }

.accent { font: inherit }
.hella { font-weight: 700 }
.hello { font-size: 1.5em }
.tight { line-height: 1.05 }
.down { writing-mode: vertical-lr }

.inline-flow { display: inline }
.inline-root { display: inline-block }
.inline-table { display: inline-table }
.inline-flex { display: inline-flex }

.block-flow { display: block }
.block-table { display: table }
.block-flex { display: flex }

.flex-column { flex-direction: column }
.flex-wrap { flex-wrap: wrap }

.order-before { order: -1 }
.order-after { order: 1 }

.items-start { align-items: flex-start }
.items-end { align-items: flex-end }
.items-center { align-items: center }
.items-baseline { align-items: baseline }
.items-stretch { align-items: stretch }

.justify-start { justify-content: flex-start }
.justify-end { justify-content: flex-end }
.justify-center { justify-content: center }
.justify-between { justify-content: space-between }
.justify-around { justify-content: space-around }

.flex-min { min-height: 0; min-width: 0 }
.flex-max { max-height: 100%; max-width: 100% }
.flex-auto { flex: 1 1 auto }

.basis-2x { flex-basis: 50% }
.view { min-height: 100vh }

.pad-0 { padding: 0 }
.pad-1 { padding: 2rem }
.pad-2 { padding: 5rem }
.pad-3 { padding: 5rem 2rem }

.m-zero { margin: 0 }
.m-auto { margin: auto }
.mb1 { margin-bottom: 2rem }
.mb2 { margin-bottom: 5rem }

.free-top { margin-top: auto }
.free-left { margin-left: auto }
.free-right { margin-right: auto }
.free-bottom { margin-bottom: auto }

.txt-left { text-align: left }
.txt-center { text-align: center }
.txt-right { text-align: right }