mirror of
https://github.com/jbowdre/virtuallypotato.git
synced 2024-11-22 15:02:18 +00:00
130 lines
3 KiB
Sass
130 lines
3 KiB
Sass
// 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
|
|
&_search
|
|
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
|