79 lines
2.5 KiB
Sass
79 lines
2.5 KiB
Sass
@use '../palettes/brushes' as hues
|
|
@use '../palettes/typewriters' as typo
|
|
@use '../palettes/stylebook' as book
|
|
@use '../palettes/animations' as motion
|
|
|
|
@media screen
|
|
.error_message
|
|
font-size: clamp(9pt, 2.25vw, typo.$sys-message-font-size)
|
|
font-family: typo.$sys-message-font
|
|
|
|
.social_message
|
|
font-size: clamp(10pt, 2.25vw, typo.$socializing-font-size)
|
|
font-family: typo.$journalistic-font
|
|
|
|
.message
|
|
background-color: hues.$bg-base-notification
|
|
color: hues.$fg-base-notification
|
|
border-width: book.$message-border-width
|
|
|
|
&.error_message
|
|
@include book.set-corners
|
|
background-color: hues.$bg-base-notification
|
|
border: 5px solid hues.$border-base-notification
|
|
|
|
body#err_body &.error_message
|
|
@include book.set-corners(5px, 5px, 5px, 5px)
|
|
padding: 3vw
|
|
max-width: 33vw
|
|
margin: 0 auto
|
|
position: relative
|
|
top: 30vh
|
|
transform: rotate(5deg)
|
|
text-overflow: ellipsis
|
|
overflow-y: hidden
|
|
|
|
&::before
|
|
content: "1 \a 2 \a 3 \a 4 \a 5 \a 6 \a 7 \a 8 \a 9 \a . \a . \a ."
|
|
font-family: typo.$sys-message-font
|
|
font-size: clamp(9pt, 2.25vw, typo.$sys-message-font-size)
|
|
font-weight: bold
|
|
color: hues.$border-base-notification
|
|
white-space: pre
|
|
position: absolute
|
|
left: 1vw
|
|
top: 3vw
|
|
|
|
& > span
|
|
text-overflow: ellipsis
|
|
border-right: 5px solid hues.$border-base-notification
|
|
animation: blink .75s step-end infinite
|
|
|
|
body#default_body > &.error_message
|
|
@include book.make-notif
|
|
|
|
&.social_message
|
|
@include book.set-corners(50%, 70%, 10%, 30%)
|
|
|
|
body#err_body .error_code
|
|
font-size: clamp(16pt, 2.5vw, 24pt)
|
|
font-style: italic
|
|
width: 125px
|
|
height: 125px
|
|
color: hues.$border-helper-base-color
|
|
border: 5px double hues.$border-helper-base-color
|
|
border-radius: 50% 50% / 33% 50% 50%
|
|
position: absolute
|
|
right: 25vw
|
|
top: 25vh
|
|
z-index: 2
|
|
text-align: center
|
|
filter: blur(0.05vw)
|
|
box-shadow: 2px 2px 5px hues.$border-helper-base-color
|
|
|
|
& > span
|
|
overflow-wrap: visible
|
|
text-shadow: 2px 2px 5px hues.$border-helper-base-color
|
|
|
|
@keyframes blink
|
|
@include motion.blinking-border(hues.$border-base-notification) |