From c5db56a3713e31a13c08e7efa00900418d4c6bd3 Mon Sep 17 00:00:00 2001 From: Daniel Flanagan Date: Wed, 16 Dec 2020 00:27:07 -0600 Subject: [PATCH] Clean up main stylus file --- src/stylus/core.styl | 136 ++++++++++++++++++++++++++++++++++++++ src/stylus/reset.styl | 5 ++ src/stylus/styles.styl | 145 +---------------------------------------- 3 files changed, 143 insertions(+), 143 deletions(-) create mode 100644 src/stylus/core.styl create mode 100644 src/stylus/reset.styl diff --git a/src/stylus/core.styl b/src/stylus/core.styl new file mode 100644 index 0000000..65d9233 --- /dev/null +++ b/src/stylus/core.styl @@ -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 diff --git a/src/stylus/reset.styl b/src/stylus/reset.styl new file mode 100644 index 0000000..6a35317 --- /dev/null +++ b/src/stylus/reset.styl @@ -0,0 +1,5 @@ +*,*::before,*::after + margin 0 + padding 0 + box-sizing border-box + diff --git a/src/stylus/styles.styl b/src/stylus/styles.styl index 2f50b53..0bcfa54 100644 --- a/src/stylus/styles.styl +++ b/src/stylus/styles.styl @@ -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