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

Fix stylesheet

Browse source
This commit is contained in:
Daniel Flanagan 2020-12-17 16:37:54 -06:00
parent 6305794a8f
commit 4aab8d8ce2
Signed by: lytedev
GPG key ID: 5B2020A0F9921EF4
4 changed files with 64 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
makefile
View file

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

49
src/stylus/core.styl
View file

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

29
src/stylus/font.styl
View file

@ -3,45 +3,44 @@
font-sources(sources) font-sources(sources)
result = () result = ()
for s in sources for s in sources
push(result, unquote("local('" + s + "'),")) push(result, unquote('local("' + s + '")'))
push(result, sans-serif) (unquote(join(', ', result)))
(result)
system-font-face(style, weight, sources...) system-font-face(style, weight, sources...)
font-family system-ui font-family system-ui
font-style normal font-style style
font-weight 300 font-weight weight
src font-sources(sources) src font-sources(sources)
@font-face @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 @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 @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 @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 @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 @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 @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 @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) iosevka-font-face(style, weight, src)
font-family iosevka font-family ldiosevka
font-style style font-style style
font-weight weight font-weight weight
src url(src), monospace src local("Iosevka"), url(src)
font-display swap font-display swap
@font-face @font-face

11
src/stylus/theme.styl
View file

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