Clean up main stylus file
This commit is contained in:
parent
c6266881bf
commit
c5db56a371
GPG key ID:
5B2020A0F9921EF4
3 changed files with 143 additions and 143 deletions
136
src/stylus/core.styl
Normal file
136
src/stylus/core.styl
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
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 500
|
||||
font-size 1rem
|
||||
&> main
|
||||
padding 0.5em
|
||||
line-height 1.6em
|
||||
|
||||
.highlight { max-width: 100vw }
|
||||
.highlight, h1, h2, h3, h4, h5, h6, form, ul, ol, p
|
||||
margin-top 1em
|
||||
margin-bottom 0.25em
|
||||
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 }
|
||||
|
||||
&> p > code
|
||||
padding 0.1em 0.25em
|
||||
border-radius 0.25em
|
||||
background-color rgba(255, 255, 255, 0.03)
|
||||
|
||||
&> 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: rgba(255, 255, 255, 0.1) }
|
||||
&> 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 } // 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 conter
|
||||
|
||||
#icon-shadow { stroke: var(--icon-shadow) }
|
||||
|
||||
@media (max-width 600px)
|
||||
.hidden-on-mobile { display: none }
|
||||
|
||||
@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
|
||||
max-width 60ch
|
||||
margin 0 auto
|
||||
|
||||
img,
|
||||
embed,
|
||||
frame,
|
||||
iframe
|
||||
max-width 100%
|
||||
margin 0 auto
|
||||
display block
|
||||
5
src/stylus/reset.styl
Normal file
5
src/stylus/reset.styl
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
*,*::before,*::after
|
||||
margin 0
|
||||
padding 0
|
||||
box-sizing border-box
|
||||
|
||||
|
|
@ -1,146 +1,5 @@
|
|||
*,*::before,*::after
|
||||
margin 0
|
||||
padding 0
|
||||
box-sizing border-box
|
||||
|
||||
@import reset
|
||||
@import font
|
||||
@import theme
|
||||
|
||||
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 500
|
||||
font-size 1rem
|
||||
&> main
|
||||
padding 0.5em
|
||||
line-height 1.6em
|
||||
|
||||
.highlight { max-width: 100vw }
|
||||
.highlight, h1, h2, h3, h4, h5, h6, form, ul, ol, p
|
||||
margin-top 1em
|
||||
margin-bottom 0.25em
|
||||
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 }
|
||||
|
||||
&> p > code
|
||||
padding 0.1em 0.25em
|
||||
border-radius 0.25em
|
||||
background-color rgba(255, 255, 255, 0.03)
|
||||
|
||||
&> 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: rgba(255, 255, 255, 0.1) }
|
||||
&> 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 } // 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 conter
|
||||
|
||||
#icon-shadow { stroke: var(--icon-shadow) }
|
||||
|
||||
@media (max-width 600px)
|
||||
.hidden-on-mobile { display: none }
|
||||
|
||||
@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
|
||||
max-width 60ch
|
||||
margin 0 auto
|
||||
|
||||
img,
|
||||
embed,
|
||||
frame,
|
||||
iframe
|
||||
max-width 100%
|
||||
margin 0 auto
|
||||
display block
|
||||
|
||||
@import core
|
||||
@import syntax-highlighting
|
||||
|
|
|
|||
Loading…
Reference in a new issue