main.sass

$limegreen: #32CD32

// CSS resets per Kevin Powell

*, *::before, *::after
    box-sizing: border-box

*
    margin: 0
    padding: 0

html
    color-scheme: dark light

body
    height: 100svh
    position: absolute // prevent margin collapse, to prevent unneeded scrollbars
    width: 100%

#feliz-app, #feliz-app > div, #feliz-app > div > div
    max-height: 100svh

img, picture, svg, video
    display: block
    max-width: 100%

// ShiningSword-specific logic here

ul
    list-style-position: inside
    margin-left: 1rem

.slideFromTop
    animation: fromTop 0.5s ease-in-out
.slideFromLeft
    animation: fromLeft 0.5s ease-in-out
.fadeIn
    animation: fromTransparent 0.3s ease-in-out

@keyframes fromTop
  0%
    transform: translateY(-100%)
  100%
    transform: translateY(0)

@keyframes fromLeft
  0%
    transform: translateX(-100%)
  100%
    transform: translateY(0)

@keyframes fromTransparent
  0%
    opacity: 0
  100%
    opacity: 1

.busy
    height: 30vh
    display: flex
    justify-content: center
    align-items: center
    background: #000
    .wave
        width: 10px
        height: 100px
        background: linear-gradient(45deg, cyan, #fff)
        margin: 3vw
        animation: wave 1s linear infinite
        border-radius: 20px
        transform: scale(0)
    .wave:nth-child(2)
        animation-delay: 0.1s
    .wave:nth-child(3)
        animation-delay: 0.2s
    .wave:nth-child(4)
        animation-delay: 0.3s
    .wave:nth-child(5)
        animation-delay: 0.4s
    .wave:nth-child(6)
        animation-delay: 0.5s
    .wave:nth-child(7)
        animation-delay: 0.6s
    .wave:nth-child(8)
        animation-delay: 0.7s
    .wave:nth-child(9)
        animation-delay: 0.8s
    .wave:nth-child(10)
        animation-delay: 0.9s

@keyframes wave
    0%
        transform: scale(0)
    50%
        transform: scale(1)
    100%
        transform: scale(0)

.control
    user-select: none
.hasMargins
    box-sizing: border-box
    margin: 3px

.header
    .internalLink
        margin: auto 5px
        // prevent bold items from growing by preemptively giving them an invisible bold twin already
        display: inline-flex
        flex-direction: column
        align-items: center
        justify-content: space-between
    .internalLink::after // prevent bold items from growing by preemptively giving them an invisible bold twin already
        content: attr(data-text)
        content: attr(data-text) / ""
        overflow: hidden
        height: 0
        visibility: hidden
        user-select: none
        pointer-events: none
        font-weight: bold
        @media speech
            display: none

.fullWidth
    width: 100%

.srcLink
    max-width: 6rem
    float: right
    background-color: white

.horizontalStack
    display: flex
    width: calc(100% - 6px)
    gap: 10px
    > *
        flex: 1
        max-height: 100%
        width: 100px
        overflow-wrap: anywhere

.scrollParent
    display: flex
    flex-direction: column
    align-items: flex-start
    max-height: 100%

.scrollable
    overflow: auto
    flex: 1
    align-self: stretch

.bordered
    border: thin solid black
    padding: 2px
    margin: 2px

.mainPage // page styling for most pages in ShiningSword: display a basic layout with a header, some data items and links
    @extend .fadeIn
    @extend .hasMargins
    max-height: calc(100svh - 6px)

table
    border: thin solid
    td
        border: thin solid
        > * // put the padding on the child element so that e.g. dangerouslyLow can be all red with no gap for parent padding
            padding: 2px

.dangerouslyLow
    background-color: red
    color: white

.mediumLow
    background-color: yellow

.enough
    background-color: $limegreen

.playground-frame
    display: grid
    grid-template-columns: minmax(auto, 30%) auto
    > *
        grid-column: 1
    .sidebar-right
        grid-column: 2
        grid-row: 1/-1
    .fullWidth
        grid-column: 1/-1