virtuallypotato/assets/sass/_custom.sass

131 lines
3 KiB
Sass
Raw Normal View History

// Offset scrolling to compensate for navbar so anchors work correctly
html, body
scroll-padding-top: 4.5rem
// Impose a max height on the site logo so it doesn't scale and look bad
.nav
&_brand
img
max-height: 2rem
// search box
&-item
display: grid
align-items: center
.search
@media screen and (min-width: 992px)
margin-right: 1.5rem
// Magic for collapsing content, borrowed from https://www.digitalocean.com/community/tutorials/css-collapsible
.lbl-toggle
display: block
font-size: 125%
cursor: pointer
transition: all 0.25s ease-out
.lbl-toggle::before
content: ' '
display: inline-block
border-top: 5px solid transparent
border-bottom: 5px solid transparent
border-left: 5px solid currentColor
verticale-align: middle
margin-right: .7rem
transform: translateY(-2px)
transition: transform .2s ease-out
.collapsible-content .content-inner
border-bottom-left-radius: 7px
border-bottom-right-radius: 7px
padding: .5rem 1rem
.collapsible-content
max-height: 0px
overflow: hidden
transition: max-height .25s ease-in-out
.toggle:checked + .lbl-toggle + .collapsible-content
max-height: 100vh
.toggle:checked + .lbl-toggle::before
transform: rotate(90deg) translateX(-3px)
.toggle:checked + .lbl-toggle
border-bottom-right-radius: 0
border-bottom-left-radius: 0
// Make the ToC a bit more compact than other lists
.post_toc
a
color: inherit
ul, ol
padding-top: 0.0rem
padding-left: 0.5rem
padding-bottom: 0.0rem
li
padding-top: 0.01rem
padding-left: 0.5rem
padding-bottom: 0.01rem
font-size: 1rem
// code overrides
code
word-break: normal
&.noClass
line-break: normal
// search from https://github.com/onweru/compose
.search
flex: 1
display: flex
justify-content: flex-end
position: relative
&_field
padding: 0.5rem 1.5rem 0.5rem 2.5rem
border-radius: 1.5rem
width: 13.5rem
outline: none
border: none
background: transparent
color: var(--text)
box-shadow: 0 1rem 4rem rgba(0,0,0,0.17)
font-size: 1rem
&_label
width: 1rem
height: 1rem
position: absolute
left: 0.33rem
top: 0.25rem
opacity: 0.33
svg
width: 100%
height: 100%
fill: var(--text)
&_result
padding: 0.5rem 1rem
&:not(.passive):hover
background-color: var(--theme)
color: var(--light)
&.passive
display: grid
&s
width: 13.5rem
background-color: var(--bg)
border-radius: 0 0 0.25rem 0.25rem
box-shadow: 0 1rem 4rem rgba(0,0,0,0.17)
position: absolute
top: 125%
display: grid
overflow: hidden
z-index: 5
&:empty
display: none
&_title
padding: 0.5rem 1rem 0.5rem 1rem
background: var(--theme)
color: var(--light)
font-size: 0.9rem
opacity: 0.87
text-transform: uppercase