diff --git a/src/styles/index.scss b/src/styles/index.scss index 8526ae3..c7f2575 100755 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,10 @@ +:root { + --aside-note: #a698ff; + --aside-warning: #ffff7a; + --aside-dangerous: #e16262; + --aside-successful: #4ce14c; +} + body { max-width: 1200px; margin: auto; @@ -99,7 +106,7 @@ header { color: white; border: 1px #2d2d2d solid; border-radius: 6px; - padding: 12px 16px; + padding: 8px 12px; font-size: 14px; &:focus { @@ -188,12 +195,23 @@ header { min-width: 250px; display: flex; flex-direction: column; - gap: 12px; + gap: 6px; + + h2 { + margin: 12px 0px 12px 12px; + } a { text-decoration: none; font-size: 14px; - color: #898989; + background: transparent; + color: white; + border-radius: 6px; + padding: 12px; + border: 1px transparent solid; + &:hover { + border-color: #323232; + } } } @@ -226,6 +244,43 @@ header { } } + .aside { + border-left: 6px transparent solid; + padding-left: 24px; + padding-top: 12px; + padding-bottom: 12px; + &#aside-Note { + color: var(--aside-note); + border-color: var(--aside-note); + svg {stroke: var(--aside-note);} + } + &#aside-Warning { + color: var(--aside-warning); + border-color: var(--aside-warning); + svg {stroke: var(--aside-warning);} + } + &#aside-Dangerous { + color: var(--aside-dangerous); + border-color: var(--aside-dangerous); + svg {stroke: var(--aside-dangerous);} + } + &#aside-Successful { + color: var(--aside-successful); + border-color: var(--aside-successful); + svg {stroke: var(--aside-successful);} + } + h2 { + display: flex; + align-items: center; + gap: 12px; + font-size: 24px; + padding-bottom: 6px; + } + * { + margin: 0px; + } + } + .footer { position: absolute; padding-bottom: 24px;