lytedev
/
site.lyte.dev
1
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

Fix stylesheet

Browse Source
df/accessibility-and-system-color-scheme
Daniel Flanagan 2 years ago
parent 6305794a8f
commit 4aab8d8ce2
Signed by: lytedev
GPG Key ID: 5B2020A0F9921EF4
4 changed files with 64 additions and 28 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      makefile
  2. 49
      src/stylus/core.styl
  3. 29
      src/stylus/font.styl
  4. 11
      src/stylus/theme.styl

3
makefile
Unescape View File

@ -1,6 +1,7 @@
HUGO ?= hugo
DEV_SERVE ?= serve --buildDrafts --buildFuture --buildExpired
NETLIFY_DEPLOY ?= deploy -d public
LOCAL_IP ?= $(shell ip a | grep -oP '192\.168\.\d+\.\d+/' | head -n 1 | tr -d '/')
.PHONY: all
all: build
@ -19,7 +20,7 @@ dev:
.PHONY: dev-ext
dev-ext:
@stylus -w src/stylus/styles.styl --sourcemap -o static/styles.css &
@${HUGO} ${DEV_SERVE} --bind $(shell ip a | grep -oP '192\.168\.\d+\.\d+/' | head -n 1 | tr -d '/')
@${HUGO} ${DEV_SERVE} --bind ${LOCAL_IP} --baseURL ${LOCAL_IP}
.PHONY: clean
clean: ; @rm -r public

49
src/stylus/core.styl
Unescape View File

@ -1,4 +1,5 @@
code, pre { font-family: var(--msff) }
code, pre
font-family var(--msff)
ul, ol { padding-left: 2em }
a
@ -12,20 +13,25 @@ body
background-color var(--bg)
color var(--fg)
font-family var(--ff)
font-weight 500
font-weight 400
font-size 1rem
&> main
padding 0.5em
line-height 1.6em
.highlight { max-width: 100vw }
.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) }
> 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
@ -108,7 +114,7 @@ form
display flex
justify-content center
align-items center
align-content conter
align-content center
#icon-shadow { stroke: var(--icon-shadow) }
@ -124,13 +130,38 @@ form
.hide-in-align-center { display: none }
.with-align { text-align: center }
&> main
max-width 60ch
margin 0 auto
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 0 auto
margin-left auto
margin-right auto
display block

29
src/stylus/font.styl
Unescape View File

@ -3,45 +3,44 @@
font-sources(sources)
result = ()
for s in sources
push(result, unquote("local('" + s + "'),"))
push(result, sans-serif)
(result)
push(result, unquote('local("' + s + '")'))
(unquote(join(', ', result)))
system-font-face(style, weight, sources...)
font-family system-ui
font-style normal
font-weight 300
font-style style
font-weight weight
src font-sources(sources)
@font-face
system-font-face(normal, 300, ".SFNS-Light", ".SFNSText-Light", ".HelveticaNeueDeskInterface-Light", ".LucidaGrandeUI", "Segoe UI Light", "Ubuntu Light", "Roboto-Light", "DroidSans", "Tahoma")
system-font-face(normal, 300, "Cantarell Light", ".SFNS-Light", ".SFNSText-Light", ".HelveticaNeueDeskInterface-Light", ".LucidaGrandeUI", "Segoe UI Light", "Ubuntu Light", "Roboto-Light", "DroidSans", "Tahoma")
@font-face
system-font-face(italic, 300, ".SFNS-LightItalic", ".SFNSText-LightItalic", ".HelveticaNeueDeskInterface-Italic", ".LucidaGrandeUI", "Segoe UI Light Italic", "Ubuntu Light Italic", "Roboto-LightItalic", "DroidSans", "Tahoma")
system-font-face(italic, 300, "Cantarell Light", ".SFNS-LightItalic", ".SFNSText-LightItalic", ".HelveticaNeueDeskInterface-Italic", ".LucidaGrandeUI", "Segoe UI Light Italic", "Ubuntu Light Italic", "Roboto-LightItalic", "DroidSans", "Tahoma")
@font-face
system-font-face(normal, 400, ".SFNS-Regular", ".SFNSText-Regular", ".HelveticaNeueDeskInterface-Regular", ".LucidaGrandeUI", "Segoe UI", "Ubuntu", "Roboto-Regular", "DroidSans", "Tahoma")
system-font-face(normal, 400, "Cantarell", ".SFNS-Regular", ".SFNSText-Regular", ".HelveticaNeueDeskInterface-Regular", ".LucidaGrandeUI", "Segoe UI", "Ubuntu", "Roboto-Regular", "DroidSans", "Tahoma")
@font-face
system-font-face(italic, 400, ".SFNS-Italic", ".SFNSText-Italic", ".HelveticaNeueDeskInterface-Italic", ".LucidaGrandeUI", "Segoe UI Italic", "Ubuntu Italic", "Roboto-Italic", "DroidSans", "Tahoma")
system-font-face(italic, 400, "Cantarell", ".SFNS-Italic", ".SFNSText-Italic", ".HelveticaNeueDeskInterface-Italic", ".LucidaGrandeUI", "Segoe UI Italic", "Ubuntu Italic", "Roboto-Italic", "DroidSans", "Tahoma")
@font-face
system-font-face(normal, 500, ".SFNS-Medium", ".SFNSText-Medium", ".HelveticaNeueDeskInterface-MediumP4", ".LucidaGrandeUI", "Segoe UI Semibold", "Ubuntu Medium", "Roboto-Medium", "DroidSans-Bold", "Tahoma Bold")
system-font-face(normal, 500, "Cantarell", ".SFNS-Medium", ".SFNSText-Medium", ".HelveticaNeueDeskInterface-MediumP4", ".LucidaGrandeUI", "Segoe UI Semibold", "Ubuntu Medium", "Roboto-Medium", "DroidSans-Bold", "Tahoma Bold")
@font-face
system-font-face(italic, 500, ".SFNS-MediumItalic", ".SFNSText-MediumItalic", ".HelveticaNeueDeskInterface-MediumItalicP4", ".LucidaGrandeUI", "Segoe UI Semibold Italic", "Ubuntu Medium Italic", "Roboto-MediumItalic", "DroidSans-Bold", "Tahoma Bold")
system-font-face(italic, 500, "Cantarell", ".SFNS-MediumItalic", ".SFNSText-MediumItalic", ".HelveticaNeueDeskInterface-MediumItalicP4", ".LucidaGrandeUI", "Segoe UI Semibold Italic", "Ubuntu Medium Italic", "Roboto-MediumItalic", "DroidSans-Bold", "Tahoma Bold")
@font-face
system-font-face(normal, 700, ".SFNS-Bold", ".SFNSText-Bold", ".HelveticaNeueDeskInterface-Bold", ".LucidaGrandeUI", "Segoe UI Bold", "Ubuntu Bold", "Roboto-Bold", "DroidSans-Bold", "Tahoma Bold")
system-font-face(normal, 700, "Cantarell", ".SFNS-Bold", ".SFNSText-Bold", ".HelveticaNeueDeskInterface-Bold", ".LucidaGrandeUI", "Segoe UI Bold", "Ubuntu Bold", "Roboto-Bold", "DroidSans-Bold", "Tahoma Bold")
@font-face
system-font-face(italic, 700, ".SFNS-BoldItalic", ".SFNSText-BoldItalic", ".HelveticaNeueDeskInterface-BoldItalic", ".LucidaGrandeUI", "Segoe UI Bold Italic", "Ubuntu Bold Italic", "Roboto-BoldItalic", "DroidSans-Bold", "Tahoma Bold")
system-font-face(italic, 700, "Cantarell", ".SFNS-BoldItalic", ".SFNSText-BoldItalic", ".HelveticaNeueDeskInterface-BoldItalic", ".LucidaGrandeUI", "Segoe UI Bold Italic", "Ubuntu Bold Italic", "Roboto-BoldItalic", "DroidSans-Bold", "Tahoma Bold")
iosevka-font-face(style, weight, src)
font-family iosevka
font-family ldiosevka
font-style style
font-weight weight
src url(src), monospace
src local("Iosevka"), url(src)
font-display swap
@font-face

11
src/stylus/theme.styl
Unescape View File

@ -29,11 +29,13 @@ theme-colors = {
icon-shadow: #fff,
input-bg: rgba(0, 0, 0, 0.08),
input-hover-bg: rgba(0, 0, 0, 0.16),
link-visited-fg: #333,
}
:root
--ff system-ui
--msff iosevka
--syntax-bpx: 5px
--ff system-ui, sans-serif
--msff ldiosevka, monospace
--pc #df3c59
--pcd #8e293b
--input-focus-bg var(--input-bg)
@ -41,7 +43,6 @@ theme-colors = {
--button-hover-bg var(--input-hover-bg)
--button-focus-bg var(--input-bg)
--link-fg var(--fg)
--link-visited-fg var(heading-fg)
light-theme =
for k, v in light-syntax
@ -72,6 +73,10 @@ body.dark-theme
@media (prefers-color-scheme dark)
{dark-theme}
:root
@media (max-width: 600px)
--syntax-bpx 2px
.hide-in-light-theme
display none

Write Preview
Loading…
Cancel
Save