231 lines
4.5 KiB
Stylus
231 lines
4.5 KiB
Stylus
code, pre
|
|
font-family var(--msff)
|
|
ul, ol { padding-left: 2em }
|
|
|
|
a
|
|
text-decoration-skip-ink auto
|
|
color var(--link-fg)
|
|
&:visited { color: var(--link-visited-fg) }
|
|
|
|
img, embed, frame, iframe { max-width: 100vw }
|
|
|
|
body
|
|
background-color var(--bg)
|
|
color var(--fg)
|
|
font-family var(--ff)
|
|
font-weight 400
|
|
font-size 1rem
|
|
&> main
|
|
padding 0.5em
|
|
line-height 1.6em
|
|
|
|
.highlight
|
|
max-width 100vw
|
|
border-left solid var(--syntax-bpx) var(--syntax-ledg)
|
|
|
|
.highlight, h1, h2, h3, h4, h5, h6, form, ul, ol, p
|
|
margin-top 1em
|
|
margin-bottom 0.25em
|
|
|
|
h1, h2, h3, h4, h5, h6, form, ul, ol, p
|
|
max-width 60ch
|
|
|
|
> h1 + p, > h2 + p, > h3 + p, > h4 + p, > h5 + p, > h6 + p { margin-top: 0 }
|
|
> h1, > h2, > h3, > h4, > h5, > h6 { color: var(--heading-fg) }
|
|
*:first-child { margin-top: 0 }
|
|
|
|
> h1, > h2, > h3, > h4, > h5, > h6
|
|
.anchor-link
|
|
padding-left 0.5em
|
|
font-weight normal
|
|
font-size 75%
|
|
text-decoration none
|
|
display none
|
|
position absolute
|
|
|
|
&:hover
|
|
.anchor-link
|
|
display inline-flex
|
|
|
|
@media (max-width: 600px)
|
|
> h1, > h2, > h3, > h4, > h5, > h6
|
|
.anchor-link
|
|
padding-right 0.25em
|
|
font-weight normal
|
|
font-size 75%
|
|
text-decoration none
|
|
display inline-flex
|
|
position absolute
|
|
right 0
|
|
|
|
> p code
|
|
padding 0.1em 0.25em
|
|
border-radius 0.25em
|
|
background-color var(--inline-code-bg)
|
|
|
|
&> header
|
|
font-family var(--msff), monospace
|
|
position relative
|
|
display flex
|
|
background-color var(--header-bg)
|
|
color var(--fg)
|
|
box-shadow 0 0 0.5em rgba(0, 0, 0, 0.25)
|
|
margin-bottom 0.5em
|
|
|
|
@media (max-width: 600px)
|
|
flex-direction column
|
|
font-size 125%
|
|
|
|
&> section { display: flex }
|
|
&> section > a
|
|
text-decoration none
|
|
line-height 1.5em
|
|
display flex
|
|
justify-content center
|
|
align-items center
|
|
padding 0.25em 0.5em
|
|
color var(--fg)
|
|
|
|
&:visited { color: var(--fg) }
|
|
&:hover { background: var(--header-hover-bg) }
|
|
&> img { max-width: 48px }
|
|
&> h1
|
|
font-weight 300
|
|
font-size 150%
|
|
|
|
input, textarea
|
|
background var(--input-bg)
|
|
border 0
|
|
font inherit
|
|
padding 0.5em 1em
|
|
color var(--input-fg)
|
|
border-radius 0.25em
|
|
|
|
&:focus { background: var(--input-focus-bg) }
|
|
&:hover { background: var(--input-hover-bg) }
|
|
|
|
button, input[type=submit]
|
|
font inherit
|
|
background var(--button-bg)
|
|
color var(--button-fg)
|
|
cursor pointer
|
|
border 0
|
|
padding 0.5em 1em
|
|
|
|
&:focus { background: var(--button-hover-bg) }
|
|
&:hover { background: var(--button-hover-bg) }
|
|
|
|
.lead { font-size: 1.5rem }
|
|
.rounded { border-radius: 0.5em }
|
|
|
|
form
|
|
&> label, > fieldset
|
|
border 0
|
|
display flex
|
|
flex-direction column
|
|
|
|
&> fieldset ~ label,
|
|
&> label ~ fieldset,
|
|
&> label ~ label,
|
|
&> fieldset ~ fieldset
|
|
margin-top 0.5em
|
|
|
|
.js-only { display: none !important } // script removes this class on load
|
|
.no-bg { background: none }
|
|
.hidden-in-browsers { display: none }
|
|
|
|
.centerize
|
|
display flex
|
|
justify-content center
|
|
align-items center
|
|
align-content center
|
|
|
|
#icon-shadow { stroke: var(--icon-shadow) }
|
|
|
|
@media (max-width 600px)
|
|
.hidden-on-mobile { display: none }
|
|
|
|
.hide-unless-focused
|
|
transform translateY(-200%)
|
|
position fixed
|
|
top 0.5em
|
|
left 0.5em
|
|
padding 0.5em 0.8em
|
|
border dotted 0.1em #ccc
|
|
border-radius 0.25em
|
|
box-shadow 0 0 0.5em rgba(0, 0, 0, 0.25)
|
|
background rgba(0, 0, 0, 0.8)
|
|
|
|
&:focus
|
|
transform translateX(0%)
|
|
|
|
@media (min-width 600px)
|
|
body.align-left
|
|
.hide-in-align-left { display: none }
|
|
.with-align { text-align: left }
|
|
|
|
body.align-center
|
|
.hide-in-align-center { display: none }
|
|
.with-align { text-align: center }
|
|
&> main
|
|
h1, h2, h3, h4, h5, h6
|
|
line-height 1.5em
|
|
text-align left
|
|
|
|
h1, h2, h3, h4, h5, h6, form, ul, ol, p
|
|
max-width 600px
|
|
margin-left auto
|
|
margin-right auto
|
|
|
|
.highlight
|
|
border-left 0
|
|
|
|
pre.chroma
|
|
padding 0
|
|
display flex
|
|
width auto
|
|
flex 1
|
|
justify-content center
|
|
align-content center
|
|
align-items center
|
|
margin-left auto
|
|
margin-right auto
|
|
|
|
> code
|
|
padding 0.25em 0.5em
|
|
border-left solid var(--syntax-bpx) var(--syntax-ledg)
|
|
|
|
img,
|
|
embed,
|
|
frame,
|
|
iframe
|
|
max-width 100%
|
|
margin-left auto
|
|
margin-right auto
|
|
display block
|
|
|
|
ul.horizontal-blocks
|
|
display flex
|
|
flex-wrap wrap
|
|
list-style none
|
|
padding 0
|
|
gap 0.5em
|
|
|
|
> li
|
|
flex 1
|
|
display flex
|
|
|
|
> a
|
|
flex-grow 1
|
|
display flex
|
|
padding 0.5em 2em
|
|
background-color rgba(255, 255, 255, 0.05)
|
|
text-align center
|
|
justify-content center
|
|
align-items center
|
|
text-decoration none
|
|
white-space nowrap
|
|
|
|
&:hover
|
|
background-color rgba(255, 255, 255, 0.1)
|
|
|