spaCy/website/src/styles/aside.module.sass
2020-08-19 00:28:37 +02:00

97 lines
2.2 KiB
Sass

@import base
$triangle-size: 2rem
$border-radius: 6px
.root
position: relative
.content
--font-size-sm: 1.2rem
--color-inline-code-text: var(--color-back)
--color-inline-code-bg: var(--color-dark-secondary)
background: var(--color-front)
border-top-left-radius: $border-radius
border-bottom-left-radius: $border-radius
font-size: var(--font-size-sm)
z-index: 10
pre
padding: 0
margin: 0 0 var(--spacing-sm) 0
&:last-child
margin: 0
&:first-child h4
margin-top: 0 !important
code
padding: 0 !important
margin: 0
h4
margin-left: 0
p, ul, ol
font: inherit
margin-bottom: var(--spacing-sm)
ul li
padding: 0
margin: 0
&:before
content: initial
@include breakpoint(min, md)
.content
position: absolute
top: -3rem
left: calc(100% + 5.5rem)
width: calc(var(--width-aside) + 2rem)
// Banner effect
&:after
position: absolute
bottom: -$triangle-size / 2
left: $border-radius / 2
width: 0
height: 0
border-color: transparent
border-style: solid
border-top-color: var(--color-dark)
border-width: $triangle-size / 2 0 0 calc(#{$triangle-size} - #{$border-radius / 2})
content: ""
@include breakpoint(max, sm)
.content
display: block
margin: 2rem 0
.text
font: var(--font-size-sm)/var(--line-height-sm) var(--font-primary)
color: var(--color-back)
padding: 1.5rem 2.5rem 2.5rem 2rem
a, a:hover
color: var(--color-subtle)
& > *:last-child
margin-bottom: 0
.title,
.text h4
font: bold var(--font-size-lg)/var(--line-height-md) var(--font-secondary)
text-transform: uppercase
display: inline-block
border-radius: 1em
padding: 0 1rem 0.15rem !important
background: var(--color-dark)
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25)
color: var(--color-back)
margin-bottom: 1.25rem
margin-left: -0.5rem
pointer-events: none