site.lyte.dev/src/stylus/core.styl

282 lines
5.2 KiB
Stylus

code, pre
font-family var(--msff)
ul, ol { padding-left: 2em }
a
cursor pointer
text-decoration-skip-ink auto
color var(--link-fg)
&:visited { color: var(--link-visited-fg) }
a > svg
margin-right: 0.5em
.copy-code-button-container
position absolute
// top 1em
right 0.5em
overflow visible
padding 0
margin 0
max-width 100%
width 100%
display flex
button.copy-code-button
color var(--link-fg)
text-decoration underline
z-index 10
position relative
margin-left auto
@media (max-width: 600px)
opacity 0.75
&:hover
opacity 1.0
@media (max-width: 600px)
pre.chroma:hover > button.copy-code-button
opacity 0.9
img, embed, frame, iframe { max-width: 100vw }
html,body
min-height 100vh
background-color var(--bg)
color var(--fg)
font-family var(--ff)
font-weight 400
font-size 1rem
&> footer
padding 0.5em
padding-top 5em
padding-bottom 5em
&> main
padding 0.5em
line-height 1.6em
&> main, > footer
.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
display flex
.anchor-link
flex-grow 1
padding 0 0.5em
font-weight normal
font-size 75%
text-decoration underline
display flex
color transparent
&:focus-visible
color var(--fg)
&:hover
.anchor-link
color var(--fg)
@media (max-width: 600px)
h1, h2, h3, h4, h5, h6
.anchor-link
padding 0 0.25em
font-weight normal
font-size 75%
text-decoration none
display flex
position absolute
right 0
> p code, > h1 code, > h2 code, > h3 code, > h4 code, > h5 code, > h6 code, blockquote 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
#logo-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, > footer
h1, h2, h3, h4, h5, h6
line-height 1.5em
text-align left
h1, h2, h3, h4, h5, h6, form, ul, ol, p
position relative
max-width 600px
margin-left auto
margin-right auto
.highlight
border-left 0
pre.chroma
padding 0
display flex
flex-direction column
width auto
flex 1
justify-content center
align-content center
align-items center
margin-left auto
margin-right auto
> code
width: 600px;
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 var(--button-bg)
text-align center
justify-content center
align-items center
text-decoration none
white-space nowrap
&:hover
background-color var(--header-bg)